Pages

Sunday, December 27, 2020

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" />

1 comment:

Anonymous said...

Hi.
Thank you for sharing this wonderful post. Your insights are greatly appreciated. We also extend an invitation to you, encouraging a visit to our platform where you can delve into the art of finding investors for your startup. Here is sharing some Data Modeling Training information may be its helpful to you.
Data Modeling Training

Post a Comment