前言

本篇文章同步發表於 個人部落格 Jim's Blog

這個章節介紹 Blazor 的事件處理，事件的引數、使用方式以及範例

事件介紹

這是一個非常簡單的按鈕事件範例，點下按鈕後會在Console內輸出 Hello World

<button onclick="myFunction()">Click me</button>

function myFunction() {
  console.log("Hello World");
}

而在 Blazor 內沒有了JS該怎麼做才能實現一樣的功能呢?
很簡單! 只要將原本的 onclick 改寫成 Razor的語法，再將JavaScript的部分改成C#的Method就可以了，看起來會像是這樣

<button @onclick="MyMethod">Click me</button>


@code {
    private void MyMethod()
    {
        Console.WriteLine("Hello World");
    }
}

比對一下在HTML內的區別，可以看到要將原本的 onclick 改成Razor的方法，只需要在前面加上@並且將後方的JS方法改成C#的方法名稱就可以了

Razor的語法如下

 @on{DOM EVENT}="{DELEGATE}"

• DomEvent 是Dom事件的名稱可以從文件看到所有的事件列表
• Delegate 是要呼叫的C#方法名稱

在Blazor的事件處理機制中有三個小細節

1. C#的方法支援回傳為Task的非同步方法
2. 會自動觸發UI轉譯，不必手動呼叫 StateHasChanged
3. 系統可以攔截例外
4. 事件處理常式支援Lambda 運算式

引數

在使用JS的事件時，有一個事件物件 (Event Object) 裡面包含了所有與這個事件有關的屬性，而如今 Blazor 當然也有類似的物件設計，那就是事件引數

套用剛剛的範例我們在方法內看起來像這樣

<button @onclick="MyMethod">Click me</button>


@code {
    private void MyMethod(EventArgs e)
    {
        Console.WriteLine("Hello World");
    }
}

在 EventArgs 內會紀錄事件相關的屬性，例如位置、類型等等
其他還有很多內建的事件引數例如與滑鼠相關的MouseEventArgs、鍵盤相關的KeyboardEventArgs，如果想看所有的事件可以從這邊查閱

EventCallback

常見案例會在發生子元件事件時執行父元件的方法，用法類似參數那一篇文章，父子參數傳遞的部分

子元件

<p>
    <button @onclick="OnClickCallback">
        呼叫父元件方法
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

父元件

<Child Title="來自父元件的參數" OnClickCallback="@ShowMessage">
    由父元件提供子元件內容
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e)
    {
        message = $"Blazor Click事件觸發 ! ({e.ScreenX}:{e.ScreenY})";
    }
}

小結

經由這一個章節，了解元件事件的處理，如果手邊有相關的Web專案，可以嘗試寫一份Blaor的版本，你將會得到不一樣的開發感受，但在寫的過程中可能發現還是有些情境非使用 JavaScript 不可，那該怎麼辦呢?

下一個章節我們來講講 JavaScript 互通性