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)文章
本文主要介紹ASP.NET中HiddenField控件的基礎(chǔ)使用方法、事件以及配合javascript的一些使用，希望能幫到大家。2016-04-04
這篇文章介紹了ASP.NET?Core基礎(chǔ)之Startup類，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-02-02
本文詳細(xì)講解了ASP.NET HttpRequest類，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
一步步打造漂亮的新聞列表(無刷新分頁、內(nèi)容預(yù)覽)第三章
前面兩個章節(jié)我們將需求分析和概要設(shè)計簡單介紹了，接下來是重點的編代碼的階段了（實現(xiàn)無刷新分頁）。在編寫代碼之前，一定要有計劃的去編寫代碼，不能一開始啥也不管就開始編代碼，除非你特牛。2010-07-07
.Net創(chuàng)建型設(shè)計模式之工廠方法模式（Factory?Method）
這篇文章介紹了.Net設(shè)計模式之工廠方法模式（Factory?Method），文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
這篇文章介紹了Blazor頁面組件的用法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
asp.net(c#) 水仙花數(shù)...2007-06-06
ASP.NET?Core?MVC路由(Routing)的用法
這篇文章介紹了ASP.NET?Core?MVC路由(Routing)的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
WPF框架Prism中導(dǎo)航Navigation用法介紹
這篇文章介紹了WPF框架Prism中導(dǎo)航Navigation的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
本文主要介紹ListBox控件的使用方法，ListBox控件可以一次顯示多個項，而且可以允許用戶一次選擇多個項。2016-04-04