Blazor組件事件處理功能
Blazor的組件當(dāng)中, 提供了事件處理功能, 這點類似于使用客戶端(Winform/Wpf)開發(fā), 經(jīng)常用到的一些類似: 按鈕(Button), 輸入框(TextBox) 用到的一些事件, 例如Click、DoubleClick、TextChanged 等等事件允許我們在后臺代碼當(dāng)中進(jìn)行處理相應(yīng)的邏輯。
介紹事件
在Razor組件中, 同樣提供了事件處理功能。對于具有委托類型值且名為 @on {EVENT}（例如 @onclick）的 HTML 元素特性，Razor 組件將該特性的值視為事件處理程序。
調(diào)用lamda表達(dá)式
下面的例子中:
Input輸入框,添加了一個文本改變事件, 然后使用@前綴,添加了一個lamda的表達(dá)式,輸出一段字符串 "Hello",
對于button而言,添加了一個 onclick事件。
<input @onchange="@(()=>Console.WriteLine("Hello"))" />
<button @onclick="@(()=>Console.WriteLine("Hello"))" />使用code {} 方法
我們同樣,可以在code代碼塊當(dāng)中, 添加C#的方法, 然后在UI元素當(dāng)中直接應(yīng)用到我們的方法名即可。
例: 下面演示了一個button按鈕的onclick事件綁定到c#的方法當(dāng)中, 當(dāng)點擊按鈕的事件, 將觸發(fā)綁定的c#代碼方法：
<button @onclick="Show" />
@code
{
public void Show()
{
//當(dāng)按鈕被點擊, 將執(zhí)行下面代碼
}
}異步的方法
事件處理同時也支持異步的方法, 返回Task
public async Task Show()
{
//當(dāng)按鈕被點擊, 將執(zhí)行下面代碼
}事件參數(shù)的方法
如果需要在方法當(dāng)中處理UI當(dāng)中的一些事件參數(shù), 則可以通過方法添加事件參數(shù)即可, 如下所示:
@code{
public async Task Show(MouseEventArgs e)
{
//...
}
}事件參數(shù)列表
事件參數(shù)的方法(重載)
當(dāng)同一個UI元素綁定了一個方法, 但是方法具備重載時, 需要我們在UI元素當(dāng)中明確調(diào)用的方法, 否則編譯器無法識別使用哪個方法。
<button @onclick="@(e=>Show(e))" /> //調(diào)用帶事件參數(shù)的方法
<button @onclick="@(()=>Show())" /> //調(diào)用不帶事件參數(shù)的方法
@code
{
//不帶事件參數(shù)的方法
public void Show()
{
}
//帶事件參數(shù)的方法
public void Show(MouseEventArgs e)
{
}
}在默認(rèn)的情況下, 我們?nèi)绻痪帉懸粋€事件觸發(fā)的方法, 并且明確它是否有參數(shù), 在UI元素綁定方法上, 我們都無需傳遞參數(shù)。
<button @onclick="@Show" />
@code
{
public void Show(MouseEventArgs e)
{
//當(dāng)button按鈕被點擊, 會自動將事件參數(shù)傳遞給e
}
}到此這篇關(guān)于Blazor組件事件處理功能的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
正則表達(dá)式（regular expression）是用來快速、高效地處理文本數(shù)據(jù)的工具。被處理的文本可以小到一個電子郵件地址，也可以大到一個多行文本輸入框中的文本數(shù)據(jù)。正則表達(dá)式不僅可用來確認(rèn)一段文本是否與一個預(yù)定義的模式相匹配，還可以用于從文本中抽取符合某一模式的數(shù)據(jù)。2008-04-04
ADO與ADO.NET簡介ADO與ADO.NET既有相似也有區(qū)別2013-02-02
這篇文章介紹了ASP.NET中使用用戶控件的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
這個控件相比其他控件，屬性少 使用簡單，就先把這個控件的一般使用方法簡單紀(jì)錄下2008-10-10
ASP.NET中 ObjectDataSource控件的DataObjectTypeName屬性
本文主要介紹ObjectDataSource控件和DataObjectTypeName屬性的用法，希望能給小伙伴們一些幫助。2016-04-04
.NET?6全新配置對象ConfigurationManager介紹
這篇文章介紹了.NET?6全新配置對象ConfigurationManager，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
ASP.NET中DropDownList下拉框列表控件綁定數(shù)據(jù)的4種方法
本文主要介紹了DropDownList控件4種綁定數(shù)據(jù)的基礎(chǔ)用法，希望對大家能有所幫助。2016-04-04
ASP.Net?Core?MVC基礎(chǔ)系列之獲取配置信息
這篇文章介紹了ASP.Net?Core?MVC獲取配置信息的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-02-02
這篇文章介紹了WPF引用MVVM框架與使用方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
這篇文章介紹了.Net中控件的命名規(guī)則，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05