Blazor FAQ - Event handling

To detect a browser keypress event, set the @onkeypress event to the corresponding element. For hotkey functions, you can use the event arguments to check whether the Ctrl, Shift, or Alt key is pressed.

[Index.razor]

@page "/"

<input type="text" @onkeypress="KeyboardEventHandler" />

<h4>@KeyPressed</h4>

@code {
    string KeyPressed = string.Empty;
    bool IsShiftKey;
    private void KeyboardEventHandler(KeyboardEventArgs args)
    {
        if (args.ShiftKey || args.CtrlKey || args.AltKey)
        {
            // Do some hotkey function process here
        }
        else
        {
            KeyPressed = "Key Pressed is " + args.Key;
        }
    }
}

For more information on this topic, check this documentation.

In Blazor, all native events are bound to async task. You can bind the button click event with async task handler. In the following example, the button click event bound to async method.

<button @onclick="@onClick"> Click </button>

@code {

    private async Task onClick()
    {
        await service.GetItems();
    }
}

To read the current value of an input using @onkeypress event, this event uses the KeyboardEventArgs. You can also get the last pressed key value in args.Key.

[index.razor]

@page"/"

<input type="text" @onkeypress="@Keypress" />
<h1>@KeyPressed</h1>

@code {
    string KeyPressed = "";
    private void Keypress(KeyboardEventArgs args)
    {
        KeyPressed = "Key Pressed is " + args.Key;
    }
}

Blazor provides support for event handling of HTML element by referring a pointer to the function that is used to handle the event, For handling @onclick event of the HTML element, define a function/method in the @code section and then refer the delegate typed value to the @onclick attribute of the HTML element.

Refer to the following code sample.

<button class="btn btn-primary" @onclick="ButtonClick">Click</button>

@code {
         private void ButtonClick(MouseEventArgs args){
          Console.WriteLine(“ButtonClicked”)
         }
}

Here, the ButtonClick is the event handler function (delegate typed value) assigned to @onclick of the button (HTML element).

In Blazor developers can handle any event by using the on<eventname> attribute with an HTML element. The attribute’s value is treated as an event handler.

Blazor provides a set of event argument types that map to events. Following is a list of event types and the event argument type they map to:

• Focus events: FocusEventArgs
• Mouse events: MouseEventArgs
• Drag events: DragEventArgs
• Keyboard events: KeyboardEventArgs
• Input events: ChangeEventArgs/EventArgs
• Clipboard events: ClipboardEventArgs/EventArgs
• Touch events: TouchEventArgs
• Pointer events: PointerEventArgs
• Media events: EventArgs
• Progress events: ProgressEventArgs

In the example, the event keypress is handled by using lambda expression the event is triggered for every keypress in the input element.

<h3>Example 2</h3>
<input type="text" @onkeypress="@(e => KeyPressed(e))" />
<p>Message: @pressedkeys</p>

@code {
string pressedkeys;
private void KeyPressed(KeyboardEventArgs args)
{
    pressedkeys = "You pressed key: " + args.Key;
}
}

Reference link: https://visualstudiomagazine.com/articles/2018/10/01/blazor-event-handling.aspx

Blazor provides a set of event argument types that map to events. By using this event argument types we can get the event data for the specific event. For example, you need to use KeyboardEventArgs to get the event data for the keypress event in the input element for every key press.

 <input type="text" @onkeypress="@KeyPressed" />
  
 @code {
   private void KeyPressed(KeyboardEventArgs args)
   {
     Console.WriteLine(args.Key + " was pressed");
   }
 } 

Refer to this Visual Studio Magazine link for more events and event args.

You can use a lambda expression to pass multiple arguments to an onclick event.

@for(var i=0; i<5; i++) {
     var index = i;
     <button @onclick="@(e => click(index, 5 * index))">Button @i</button>
 } 

@code {
     private void click(int a, int b) {
         Console.WriteLine(a + b);
     }
 }   

Yes, this is a known issue in Blazor. You can track the issue link on Github.

This is how to prevent an href in an anchor tag and call an onclick event. [Work Around]

<a href="https://www.youtube.com/watch?v=kX4oRfj1Ip8" class="btn btn-primary" @onclick="@TheEvent"  @onclick:preventDefault>Do it</a>