Blazor Events

Blazor supports the event programming model through binding. You can bind DOM events such as onclick, onchange or others to a function and trigger it by a user interaction. You can also define a user-defined event and enable the event to be binded to callback functions.

DOM Events

The following illustrates binding onclick event to a function named Print. If you click on the Click Here button, the Print function will be executed and the "Button Clicked!" text will be displayed in the browser's console.

@page "/"
<h3>DOM Events</h3>

<button @onclick=Print>Click Here</button>

@functions {
    private void Print()
    {
    Console.WriteLine("Button Clicked!");
    }
}

A Lambda expression can also be used to specify the function to execute. The following code achieve the same thing as the above.

@page "/"
<h3>DOM Events</h3>

<button @onclick=@(() => Print())>ClickHere</button>

@functions {
  private void Print()
  {
    Console.WriteLine("Button Clicked!");
  }
}

Using a Lambda expression can help you reduce the number of lines of code and make your code simpler in some situations.

@page "/"
<h3>DOM Events</h3>

<button @onclick=@(() => {Console.WriteLine("Button Clicked!");})>ClickHere<button>

@functions {
}

Event Data

Event data such as MouseEventArgs can be specified in the event function. In our example below, the event data arguments enables us to access properties of the mouse event such as ClientX, ClientY and others.

@page "/"
<h3>onclick Events</h3>

<button @onclick=@((e) => Print(e))>ClickHere</button>

@functions {
  private void Print(MouseEventArgs e)
  {
    Console.WriteLine("X :"+e.ClientX+" Y :"+e.ClientY);
  }
}

The following is another example showing how to access the KeyboardEventArgs with the onkeypress event.

@page "/"
    
<h3>onkeypress Event</h3>
<input type="text" @onkeypress="@(e => KeyWasPressed(e))" />

@functions {
  private void KeyWasPressed(KeyboardEventArgs args)
  {
    if (args.Key == "r")
    {
      Console.WriteLine("R was pressed");
    }
  }
}

And the onchange event with the ChangeEventArgs.

@page "/"
<h3>onchange Event</h3>

<label>
<input type="checkbox" @onchange=CheckboxChanged />
New York
</label>

@functions {
    void CheckboxChanged(ChangeEventArgs e)
    {
        Console.WriteLine("CheckboxChanged");
    }
}

User-defined Event

Besides DOM events, Blazor also supports user-defined or custom events. For example, if you have a parent and a child component , and you want the parent to execute a function (callback function) when certain conditions in the child component occur, you can define a user-defined event.

You can add the following into the child component to define a user-defined event:

[Parameter]
Action SomethingChanged { get; set; }

This enables you to use the child component in the following manner:

<Component1 SomethingChanged=SomeCallBackFunctionInTheParent>
</Component1>

The following is a complete Blazor sample with parent and child component codes. When a button in the child component is clicked, the parent callback function will be executed to update a message variable.

MySomethingComponent.cshtml (Child Component)

<button @onclick=ButtonClick>ClickHere</button>

@functions {
  private void ButtonClick()
  {
    Console.WriteLine("Calling SomethingChanged Action");
    SomethingChanged();
  }

  [Parameter]
  public Action SomethingChanged { get; set; }
}

index.cshtml (Parent Page)

@using MySomethingComponent;

@page "/"

<Mysomething SomethingChanged=ChangeMessage></MySomething>

<p>@message</p>

@functions {

  string message;
  private void ChangeMessage()
  {
    Console.WriteLine("ChangeMessage");
    message="Message Changed";
    StateHasChanged();
  }

}