Blazor Event Handling - onclick, onmousemove, onchange

1. onclick event

        Component View

<button @onclick="@Button_Click">@ButtonText</button>

<div class="text-left @CssClass"><img src="@Photo" /></div>

        Component Class

protected string ButtonText { get; set; } = "Hide";

protected string CssClass { get; set; } = null;

protected void Button_Click()

{

    if (ButtonText == "Hide")

    {

ButtonText = "Show";

CssClass = "HideImage";

    }

    else

    {

CssClass = null;

ButtonText = "Hide";

    }

}

        CSS Class

.HideImage{

    display:none;

}

2. onmousemove event

<img src="@Photo" @onmousemove="@Mouse_Move" /><h1>@DisplayXY</h1>

protected string DisplayXY{ get; set; }

protected void Mouse_Move(MouseEventArgs e)

{

    DisplayText= $"{e.ClientX } , {e.ClientY}";

}

         Event handling using a lambda expression 

<img src="@Photo" @onmousemove="@(e => DisplayXY= $"{e.ClientX} ,{e.ClientY}")" />

3. onchange  event

<input value="@Name" @onchange="@(e => { Name = e.Value.ToString(); })" />

        OR using 2 way data binding

<input @bind="Name" />