serving the solutions day and night

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:

justin vijay said...

PYTHON Report is a data-centric blog run by a specialty executive search firm called AUTOMATIONMINDS SOLUTION Partners. Whether you are
an intermediate level data scientist or a pro, Data Science Report has got resources for all — it delivers resources from all variety
of formats to help the reader in understanding data science properly.

PYTHON Training in OMR Chennai