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

介紹事件

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

呼叫lamda表示式

下面的例子中:

Input輸入框,添加了http://www.cppcns.com一個文字改變事件,然後使用@字首,添加了一個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
    }
}

到此這篇關於Blazor元件事件處理功能的文章就介紹到這了。希望對大家的學習有所幫助，也希望大http://www.cppcns.com家多多支援我們。