Blazor 事件處理(3)

Blazor的組件當中, 提供了事件處理功能, 這點類似於使用客戶端(Winform/Wpf)開發, 經常用到的一些類似: 按鈕(Button), 輸入框(TextBox) 用到的一些事件, 例如Click、DoubleClick、TextChanged 等等事件允許我們在后台代碼當中進行處理相應的邏輯。

點擊觀看視頻教程

介紹事件

在Razor組件中, 同樣提供了事件處理功能。對於具有委托類型值且名為 @on {EVENT}（例如 @onclick）的 HTML 元素特性，Razor 組件將該特性的值視為事件處理程序。

調用lamda表達式

下面的例子中:
Input輸入框,添加了一個文本改變事件, 然后使用@前綴,添加了一個lamda的表達式,輸出一段字符串 "Hello",
對於button而言,添加了一個 onclick事件。

    <input @onchange="@(()=>Console.WriteLine("Hello"))" />
    <button @onclick="@(()=>Console.WriteLine("Hello"))" />

使用code {} 方法

我們同樣,可以在code代碼塊當中, 添加C#的方法, 然后在UI元素當中直接應用到我們的方法名即可。

例: 下面演示了一個button按鈕的onclick事件綁定到c#的方法當中, 當點擊按鈕的事件, 將觸發綁定的c#代碼方法：

    <button @onclick="Show" />
    @code
{
    public void Show()
    {
       //當按鈕被點擊, 將執行下面代碼
    }
}

異步的方法

事件處理同時也支持異步的方法, 返回Task

     public async Task Show()
    {
       //當按鈕被點擊, 將執行下面代碼
    }

事件參數的方法

如果需要在方法當中處理UI當中的一些事件參數, 則可以通過方法添加事件參數即可, 如下所示:

@code{
    public async Task Show(MouseEventArgs  e)
    {
        //...
    }
}

事件參數列表

事件參數的方法(重載)

當同一個UI元素綁定了一個方法, 但是方法具備重載時, 需要我們在UI元素當中明確調用的方法, 否則編譯器無法識別使用哪個方法。

<button @onclick="@(e=>Show(e))" />  //調用帶事件參數的方法
<button @onclick="@(()=>Show())" />  //調用不帶事件參數的方法
@code
{
    //不帶事件參數的方法
    public void Show()
    {

    }

    //帶事件參數的方法
    public void Show(MouseEventArgs e)
    {

    }
}

在默認的情況下, 我們如果只編寫一個事件觸發的方法, 並且明確它是否有參數, 在UI元素綁定方法上, 我們都無需傳遞參數。

    <button @onclick="@Show" />  
@code
{
    public void Show(MouseEventArgs e)
    {
         //當button按鈕被點擊, 會自動將事件參數傳遞給e
    }
}