انجام Data Binding به دیگر Event ها در برنامه های Blazor


حال فرض کنید که می خواهیم به جای استفاده کردن از رویداد onchange که در زمان از دست دادن focus اجرا می شود، کد را طوری تغییر بدهیم که به محض وارد شدن یک کاراکتر جدید مقدار متغیر به روز رسانی شود. برای این منظور از رویداد oninput به جای رویداد onchange استفاده خواهیم کرد. این موضوع در کد زیر نشان داده شده است.

<h1>Greetings, @userName</h1>

<input @bind-value="userName" @bind-value:event="oninput" />

@code {

string userName = "Bradley";

}

این کد با کد قبلی یک تفاوت بسیار کوچک دارند. در این کد به جای استفاده از دستور @bind از دستور @bind-value استفاده می کنیم. دلیل این موضوع را شرح خواهم داد. از آنجایی که دستور @bind به صورت خودکار با رویداد onchange از element مورد نظر کار می‌کنند نیاز است که به صورت دستی مشخص کنید که می خواهید از رویداد oninput برای binding استفاده کنید.

علاوه بر این، از دستور @bind-value برای لحاظ کردن نام property سی شارپ که قرار است این input field به آن bind بشود استفاده می‌کنیم. در این مثال از یک property به نام userName استفاده کرده‌ایم. این موضوع باعث می‌شود تا به محض وارد شدن یک کاراکتر در input field قسمت h1 مربوط به صفحه تغییر کند.

پس در این آموزش فراگرفته ایم که چگونه می توانیم مقادیر درون متغیرهای سی شارپ را در کدهای HTML نشان بدهیم. این کار با استفاده از binding صورت می‌گیرد. ضمناً binding دو طرفه و یا two-way data binding را نیز توانستیم با استفاده از دستور @bind لحاظ کنیم. این موضوع باعث می‌شود که مقدار درون متغیر سی شارپ و مقدار نشان داده شده در front-end برنامه همگام سازی شوند. نهایتاً فرا گرفته اید که با استفاده از data binding و تغییر دادن آن می‌توانیم به سادگی در زمان ایجاد یک تغییر کوچک در front-end، پروپرتی سی شارپ را نیز تغییر بدهیم.

منبع:وبسایت پرووید