نحوه Data Binding در بلیزر (Blazor) چگونه است ؟ فرض کنید می خوام یک مقداری رو داخل یک input نمایش بدم. برای این کار باید چیکار کرد ؟
در 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 از روی یک المنت برداشته شود و به المنت دیگر منتقل شود.
برای بایند کردن مقدار در تگ 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);
}
در مورد بایند کردن انواع روش های دیگه ای هم وجود داره. در اینجا ساده ترین ها و البته پرکاربردترین ها گفته شد. برای دریافت اطلاعات تکمیلی تر به داکیومنت خود مایکروسافت مراجعه کنید.
تاریخ :
1402/08/16
- ساعت :
10:38:00 AM
- بازدید :
1346
- پاسخ :
1
|
تاریخ :
1400/05/03
- ساعت :
10:48:00 AM
- بازدید :
6754
- پاسخ :
5
|
تاریخ :
1400/12/06
- ساعت :
01:20:00 PM
- بازدید :
3941
- پاسخ :
1
|
تاریخ :
1402/12/25
- ساعت :
03:38:00 PM
- بازدید :
667
- پاسخ :
0
|
تاریخ :
1400/02/14
- ساعت :
04:50:00 PM
- بازدید :
3195
- پاسخ :
1
|
تاریخ :
1401/03/05
- ساعت :
11:25:00 AM
- بازدید :
2590
- پاسخ :
1
|
تاریخ :
1401/02/04
- ساعت :
03:29:00 PM
- بازدید :
2707
- پاسخ :
0
|
تاریخ :
1401/01/19
- ساعت :
03:05:00 PM
- بازدید :
3611
- پاسخ :
2
|
تاریخ :
1400/09/17
- ساعت :
07:58:00 PM
- بازدید :
2610
- پاسخ :
1
|
تاریخ :
1399/09/26
- ساعت :
11:26:00 PM
- بازدید :
3306
- پاسخ :
2
|
تاریخ :
1403/08/29
- ساعت :
07:15:00 PM
- بازدید :
49
- پاسخ :
0
|
تاریخ :
1403/08/18
- ساعت :
10:40:00 AM
- بازدید :
88
- پاسخ :
0
|
تاریخ :
1402/07/23
- ساعت :
04:01:00 PM
- بازدید :
1031
- پاسخ :
1
|
تاریخ :
1403/05/30
- ساعت :
09:22:00 AM
- بازدید :
426
- پاسخ :
1
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
930
- پاسخ :
1
|
تاریخ :
1402/08/16
- ساعت :
10:38:00 AM
- بازدید :
1346
- پاسخ :
1
|
تاریخ :
1398/08/17
- ساعت :
01:27:00 AM
- بازدید :
4796
- پاسخ :
1
|
تاریخ :
1402/09/08
- ساعت :
07:34:00 PM
- بازدید :
1156
- پاسخ :
1
|
تاریخ :
1402/09/21
- ساعت :
11:10:00 PM
- بازدید :
594
- پاسخ :
1
|
تاریخ :
1403/07/27
- ساعت :
03:21:00 PM
- بازدید :
205
- پاسخ :
1
|