یک نکتهی تکمیلی: روش ایجاد کامپوننتهای ورودی سفارشی در Blazor
Blazor به صورت توکار به همراه تعدادی کنترل ورودی مانند InputText، InputTextArea، InputSelect، InputNumber، InputCheckbox و InputDate است که با سیستم اعتبارسنجی ورودیهای آن نیز یکپارچه هستند.
در یک برنامهی واقعی نیاز است divهایی مانند زیر را که به همراه روش تعریف این کامپوننتهای ورودی است، صدها بار در قسمتهای مختلف تکرار کرد:
و خصوصا اگر نگارش بوت استرپ مورد استفاده تغییر کند، برای به روز رسانی برنامه نیاز خواهیم داشت تا تمام فرمهای آنرا تغییر دهیم. در یک چنین حالتهایی امکان ایجاد مخزنی از کامپوننتهای سفارشی شده در برنامههای Blazor نیز پیشبینی شدهاست.
تمام کامپوننتهای ورودی Blazor از کلاس پایهی ویژهای به نام <InputBase<T مشتق شدهاند. این کلاس است که کار یکپارچگی با EditContext را جهت ارائهی اعتبارسنجیهای لازم، انجام میدهد. همچنین کار binding را نیز با ارائهی پارامتر Value از نوع T انجام میدهد که نوشتن یک چنین کدهایی مانند "bind-Value="myForm.MyValue@ را میسر میکند. InputBase یک کلاس جنریک است که خاصیت Value آن از نوع T است. از آنجائیکه مرورگرها اطلاعات را به صورت رشتهای در اختیار ما قرار میدهند، این کامپوننت نیاز به روشی را دارد تا بتواند ورودی دریافتی را به نوع T تبدیل کند و اینکار را میتوان با بازنویسی متد TryParseValueFromString آن انجام داد:
یک مثال: کامپوننت جدید Shared\InputPassword.razor
در بین کامپوننتهای پیشفرض Blazor، کامپوننت InputPassword را نداریم که نمونهی سفارشی آنرا میتوان با ارثبری از InputBase، به نحو فوق طراحی کرد و نمونهای از استفادهی از آن میتواند به صورت زیر باشد:
توضیحات:
- در این مثال CurrentValue و CssClass از کلاس پایهی InputBase تامین میشوند.
- هربار که مقدار ورودی وارد شدهی توسط کاربر تغییر کند، متد TryParseValueFromString اجرا میشود.
- در متد TryParseValueFromString، مقدار validationErrorMessage به نال تنظیم شده؛ یعنی اعتبارسنجی خاصی مدنظر نیست. اولین پارامتر آن مقداری است که از کاربر دریافت شده و دومین پارامتر آن مقداری است که به کامپوننت ورودی که از آن ارثبری کردهایم، ارسال میشود تا CurrentValue را تشکیل دهد (و یا خاصیت CurrentValueAsString نیز برای این منظور وجود دارد).
- اگر اعتبارسنجی اطلاعات ورودی در متد TryParseValueFromString با شکست مواجه شود، مقدار false را باید بازگشت داد.
Blazor به صورت توکار به همراه تعدادی کنترل ورودی مانند InputText، InputTextArea، InputSelect، InputNumber، InputCheckbox و InputDate است که با سیستم اعتبارسنجی ورودیهای آن نیز یکپارچه هستند.
در یک برنامهی واقعی نیاز است divهایی مانند زیر را که به همراه روش تعریف این کامپوننتهای ورودی است، صدها بار در قسمتهای مختلف تکرار کرد:
<EditForm Model="NewPerson" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <div class="form-group"> <label for="firstname">First Name</label> <InputText @bind-Value="NewPerson.FirstName" class="form-control" id="firstname" /> <ValidationMessage For="NewPerson.FirstName" /> </div>
تمام کامپوننتهای ورودی Blazor از کلاس پایهی ویژهای به نام <InputBase<T مشتق شدهاند. این کلاس است که کار یکپارچگی با EditContext را جهت ارائهی اعتبارسنجیهای لازم، انجام میدهد. همچنین کار binding را نیز با ارائهی پارامتر Value از نوع T انجام میدهد که نوشتن یک چنین کدهایی مانند "bind-Value="myForm.MyValue@ را میسر میکند. InputBase یک کلاس جنریک است که خاصیت Value آن از نوع T است. از آنجائیکه مرورگرها اطلاعات را به صورت رشتهای در اختیار ما قرار میدهند، این کامپوننت نیاز به روشی را دارد تا بتواند ورودی دریافتی را به نوع T تبدیل کند و اینکار را میتوان با بازنویسی متد TryParseValueFromString آن انجام داد:
protected abstract bool TryParseValueFromString(string value, out T result, out string validationErrorMessage);
یک مثال: کامپوننت جدید Shared\InputPassword.razor
@inherits InputBase<string> <input type="password" @bind="@CurrentValue" class="@CssClass" /> @code { protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage) { result = value; validationErrorMessage = null; return true; } }
<EditForm Model="userInfo" OnValidSubmit="CreateUser"> <DataAnnotationsValidator /> <InputPassword class="form-control" @bind-Value="@userInfo.Password" />
- در این مثال CurrentValue و CssClass از کلاس پایهی InputBase تامین میشوند.
- هربار که مقدار ورودی وارد شدهی توسط کاربر تغییر کند، متد TryParseValueFromString اجرا میشود.
- در متد TryParseValueFromString، مقدار validationErrorMessage به نال تنظیم شده؛ یعنی اعتبارسنجی خاصی مدنظر نیست. اولین پارامتر آن مقداری است که از کاربر دریافت شده و دومین پارامتر آن مقداری است که به کامپوننت ورودی که از آن ارثبری کردهایم، ارسال میشود تا CurrentValue را تشکیل دهد (و یا خاصیت CurrentValueAsString نیز برای این منظور وجود دارد).
- اگر اعتبارسنجی اطلاعات ورودی در متد TryParseValueFromString با شکست مواجه شود، مقدار false را باید بازگشت داد.