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

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

در Blazor، برای انجام Data Binding و نمایش یک مقدار در یک عنصر ``، می توانید از ویژگی `@bind` استفاده کنید. این تکنیک به شما اجازه می دهد تا مقدار یک متغیر C# را به یک عنصر HTML متصل کنید. به این صورت که تغییرات در هر کدام از این دو به دیگری منتقل می شود.

در اینجا یک نمونه ساده از نحوه Data Binding در Blazor آورده شده است:

@page "/databinding"

@code {
    private string message = "سلام، این یک مثال است!";
}

پیام:

مقدار فعلی: @message

در این مثال، متغیر `message` در `` نمایش داده می شود و هر بار که کاربر مقداری را در این input وارد کند، مقدار `message` نیز به روز می شود. همچنین، هر تغییر در `message` به طور خودکار در input نمایش داده می شود.

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

در Blazor توسط تگهای Html و یک Attribute به نام @bind میتونید عملیات مقداردهی یا بایند کردن رو به ستونهای دیتابیس، مقادیر ثابت و یا متغیرها انجام بدید. به عنوان نمونه به کدهای زیر توجه کنید. در این کدها یک متغیر به نام var1 و یک پراپرتی به نام prop1 داریم که هر دو رو بایند کرده ایم.

<p>
    <input @bind="var1" /> Current value: @var1
</p>

<p>
    <input @bind="prop1" /> Current value: @prop1
</p>

@code {
    private string var1;
    private string prop1 { get; set; }
}

دقت کنید که زمانی که یکی از المنتها Focus رو از دست می دهد مقدار به روز رسانی می شود.  به عبارتی اگر شما یک مقدار را بایند کنید و آن مقدار تغییر کند، زمانی مقدار جدید در صفحه نمایش داده می شود که یک بار Focus از روی یک المنت برداشته شود و به المنت دیگر منتقل شود. 

Bind کردن input در Blazor

برای بایند کردن مقدار در تگ input هم میتونید مثل قبل از bind استفاده کنید. به عنوان مثال به کد زیر دقت کنید.

<input @bind="CurrentValue" @bind:event="oninput" />

@code {
    private string CurrentValue { get; set; }
}

در این مثال هم یک Property داریم به نام CurrentValue که توسط ویژگی bind به input نسبت دادیم. اما در اینجا اگر دقت کنید از یک event به نام oninput هم استفاده کردیم. در اینجا به محض تغییر مقدار Property مقدار درون input هم به روز رسانی میشه.

استفاده از Format هنگام Bind کردن در Blazor

شما می تونید وقتی مقداری رو بایند می کنید و نمایش میدید از دستورات Format هم برای نمایش استفاده کنید. به مثال زیر دقت کنید.

<input @bind="startDate" @bind:format="yyyy-MM-dd" />

@code {
    private DateTime startDate = new DateTime(2020, 1, 1);
}

در مورد بایند کردن انواع روش های دیگه ای هم وجود داره. در اینجا ساده ترین ها و البته پرکاربردترین ها گفته شد. برای دریافت اطلاعات تکمیلی تر به داکیومنت خود مایکروسافت مراجعه کنید.

ASP.NET Core Blazor data binding