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

بایند کردن 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) چگونه است ؟