نحوه بایند کردن Model به From در Blazor چگونه است ؟

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

در Blazor، بایند کردن یک مدل به فرم مشابه با ASP.NET Core است، اما با روش ها و روش های خاص خود. در اینجا چگونگی انجام این کار را توضیح می دهم.

ابتدا مدل خود را ایجاد کنید. به عنوان مثال:

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

سپس فرمی را در صفحه Blazor خود ایجاد کنید و مدل را به آن بایند کنید:

@page "/person-form"
@using YourNamespace

فرم اطلاعات شخصی

    
    

    

        نام:
        
    
    

        سن:
        
    
    ارسال


@code {
    private Person person = new Person();

    private void HandleValidSubmit()
    {
        // کد برای پردازش هنگام ارسال موفق
    }
}

در این کد، از کامپوننت `EditForm` برای ایجاد فرم استفاده شده است. مدل `person` به عنوان مدل فرم تعیین شده و با استفاده از بایندینگ دوطرفه (`@bind-Value`) به فیلدهای ورودی متصل است. همچنین می توانید از `DataAnnotationsValidator` برای اعتبارسنجی استفاده کنید.

بایند کردن Model به From در Blazor

نحوه بایند کردن یک مدل به Form در Blazor با صفحات Asp.net Core متفاوت می باشد. با یک مثال این کار رو ببنیم.

در ابتدا فرض کنیم مدلی به نام Students داریم که شامل Property های زیر می باشد.

public class Students
{
    public string FullName { get; set; }
    public string Address { get; set; }
    public string ClassLevel { get; set; }
    public int StudentWeight { get; set; }
    public bool IsBoy { get; set; }
    public DateTime StudentBirthDayDate { get; set; }
}

خب قصد داریم که مدل بالا رو به یک فرم در یک RazorComponent بایند کنیم. در کدهای زیر یک Form با چند input داریم.

@page "/formsblazor"

<h3>Learn Forms In Blazor</h3>

<EditForm Model="student">
    <div class="col-md-8 offset-md-2">

        <div>
            <label class="control-label col-md-3">FullName :</label>
            <div class="col-md-9">
                <InputText @bind-Value="student.FullName" class="form-control" />
            </div>
        </div>

        <div>
            <label class="control-label col-md-3">Address :</label>
            <div class="col-md-9">
                <InputTextArea @bind-Value="student.Address" class="form-control" />
            </div>
        </div>

        <div>
            <label class="control-label col-md-3">Class Level :</label>
            <div class="col-md-9">
                <InputSelect @bind-Value="student.ClassLevel" class="form-control">
                    <option value="0">Select Class Level ...</option>
                    <option value="1">Diplome</option>
                    <option value="2">Konkur</option>
                    <option value="3">Dabirestan</option>
                </InputSelect>
            </div>
        </div>

        <div>
            <label class="control-label col-md-3">Weight :</label>
            <div class="col-md-9">
                <InputNumber @bind-Value="student.StudentWeight" class="form-control" />
            </div>
        </div>

        <div>
            <label class="control-label col-md-3">Is Boy :</label>
            <InputCheckbox @bind-Value="student.IsBoy" />
        </div>

        <div>
            <label class="control-label col-md-3">BirthDay :</label>
            <div class="col-md-9">
                <InputDate @bind-Value="student.StudentBirthDayDate" class="form-control" />
            </div>
        </div>

    </div>
</EditForm>


@code {
    private Students student = new Students()
    {
        StudentBirthDayDate = DateTime.Now
    };
}

• همان طور که در بخش @code مشاهده می کنید در ابتدا یک نمونه از کلاس Students تعریف کردیم و نام آن را student گذاشتیم.
• همچنین با توجه به اینکه در مدل یک فیلد از نوع DateTime داشتیم برای جلوگیری از بروز خطا به طور پیش فرض فیلد StudentBirthDayDate را با مقدار DateTime.Now مقداردهی کردیم.
• حالا اگر در تگ EditForm نگاه کنید یک ویژگی به نام Model تعریف کردیم و مقدار student را به آن دادیم. بنابراین این فرم در حال حاضر مدلی با نام student دارد.

دانلود سورس

نحوه بایند کردن Input ها در Blazor

اگر در کدهای بالا نگاه کنید برای بایند کردن input های مختلفی که داریم از دستور @Bind-value استفاده شده است. از طریق این دستور می توانیم مشخص کنیم هر input دقیقا چه مقداری باید داشته باشد.

نحوه Data Binding در بلیزر (Blazor) چگونه است ؟