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;

}

Call REST API from ASP.NET Core Blazor

Blazor component can call REST API directly, but create a separate service that calls the REST API.

Solution Structure

1. Customer.API project using Repository Pattern

2. Customer.Models project to share between API and Blazor AppServer

3. Cusotmer.Server Blazoe AppServer project.

MicroSoft Blazor

 Blazor

Today's web development, use both server-side (C#, Java,...) and client-side (JavaScript frameworks like Angular, React,..) technologies. 

Use C# both for server & client side development, that's Blazor. Blazor lets you build interactive web UIs using C# instead of JavaScript.

Blazor can run client-side C# code (or any type of code) directly in the browser, using WebAssembly. It runs in the same security sandbox as JavaScript frameworks like Angular, React, etc. 

WebAssembly is based on open web standards without using plug-ins or code transpilation. It works in all modern browsers including mobile browsers.  

There are 2 Blazor hosting models: Blazor WebAssembly (the client-side) and Blazor Server (the server) .