نحوه ایجاد و کار با form ها و input ها در Blazor چگونه است ؟

آموزش کار با Form و Input ها در Blazor

برای طراحی UI در Blazor میتونید دقیقا از همون تگ ها و المنتهای Html استفاده کنید. اما برای راحتتر شدن کار و همچنین برای اینکه دسته بندی بهتری در مورد تگهای Input داشته باشیم و بایند کردن اطلاعات راحتر صورت بگیره طراحان این تکنولوژی علاوه بر استفاده از تگ های پیش فرض Html اومدن و معادل اون تگها رو هم تعریف کردن. در ادامه به این تگها اشاره می کنیم.

تگ Form و معادل آن در Blazor

معادل تگ form در Razor Page ها در Blazor تگ EditForm می باشد. نحوه کار کردن با این تگ در مثال زیر نمایش داده شده است.

<EditForm Model="customer" OnValidSubmit="Create">
   ...
</EditForm>

در تگ EditForm دو ویژگی مهم وجود داره. اول Model که برای مشخص کردن model این فرم می باشد و دوم هم OnValidSubmit که مشخص میکنه وقتی روی دکمه submit فرم کلیک شد کدام اکشن باید اجرا بشه.

کامپوننت InputCheckbox در Blazor

کامپوننت InputCheckbox معادل تگ input با type=checkbox می باشد. این کامپوننت یک مقدار boolean را برمی گرداند و مقدار null نمیتواند داشته باشد.

<InputCheckbox @bind-Value=FormData.SomeBooleanProperty />

کامپوننت InputDate در Blazor

این کامپوننت معادل تگ input با type=date می باشد. این کامپوننت یک مقدار nullable از نوع date را میتواند درون خود داشته باشد.

<InputDate @bind-Value=FormData.SomeDateTimeProperty ParsingErrorMessage="Must be a date" />

کامپوننت InputNumber در Blazor

این کامپوننت معادل تگ input با type=number می باشد. این کامپوننت یک مقدار عددی را به عنوان داده می تواند بپذیرد.

<InputNumber @bind-Value=FormData.SomeIntegerProperty ParsingErrorMessage="Must be an integer value" />

<InputNumber @bind-Value=FormData.SomeDecimalProperty ParsingErrorMessage="Must be a decimal value" />

کامپوننت InputText در Blazor

این کاپوننت معادل تگ input با type برابر با text و password و color می باشد. این کامپوننت یک رشته را به عنوان ورودی می پذیرد.

<InputText @bind-Value=FormData.SomeStringProperty />

کامپوننت InputTextArea در Blazor

این کامپوننت معادل تگ textarea در Html می باشد.

<InputTextArea @bind-Value=FormData.SomeMultiLineStringProperty />

کامپوننت InputSelect در Blazor

این کامپوننت معادل تگ select در Html می باشد. بلیزر به صورت اتوماتیک مقدار آیتم صحیح را بر اساس اطلاعات بایند شده انتخاب می کند.

<InputSelect @bind-Value=FormData.SomeSelectProperty>
  <option value="Pending">Pending</option>
  <option value="Active">Active</option>
  <option value="Suspended">Suspended</option>
</InputSelect>