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

پاسخ هوش مصنوعی

در Blazor، فرم ها و ورودی ها به صورت قابل انعطاف و کاربرپسند پیاده سازی شده اند. Blazor از binding دوطرفه برای ایجاد تعامل بین UI و مدل داده استفاده می کند. در اینجا یک مثال ساده از نحوه ایجاد یک فرم و استفاده از ورودی ها در Blazor آورده شده است:

@page "/form-example"

فرم ثبت نام


    
    

    

        نام:
        
        
    

    

        ایمیل:
        
        
    

    ثبت نام


@code {
    private User user = new User();

    private void HandleValidSubmit()
    {
        // عمل مورد نظر بعد از ارسال فرم
        Console.WriteLine($"نام: {user.Name}, ایمیل: {user.Email}");
    }

    public class User
    {
        [Required(ErrorMessage = "نام الزامی است.")]
        public string Name { get; set; }

        [Required(ErrorMessage = "ایمیل الزامی است.")]
        [EmailAddress(ErrorMessage = "ایمیل معتبر نیست.")]
        public string Email { get; set; }
    }
}

در این مثال، ما از EditForm برای ایجاد یک فرم استفاده کردیم که مدل داده را به User متصل می کند. ما از InputText برای ورودی های متنی استفاده کردیم و با استفاده از ValidationMessage خطاهای اعتبارسنجی را نمایش می دهیم.

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>