ASP.NET Core Blazor (UI with C#) — WebAssembly
Introduction
Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.
Blazor allows developers to create single-page applications (SPAs) using C# and . NET utilising a component-based architecture.
Run on WebAssembly or the server
Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it’s real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.
Blazor can also run your client logic on the server. Client UI events are sent back to the server using SignalR — a real-time messaging framework. Once execution completes, the required UI changes are sent to the client and merged into the DOM
In this article we will only go through Balzor WebAssembly
Blazor WebAssembly
Blazor WebAssembly is a client-side in-browser implementation of Blazor which includes a .NET runtime implemented in WebAssembly.
This is also called the client-side hosting model and in this model, the application runs directly in the browser on WebAssembly. So, everything the application needs i.e. the compiled application code itself, it’s dependencies and the .NET runtime are downloaded to the browser. We use the Blazor WebAssembly App template, to create a Blazor application with the client-side hosting model.
Structure of Blazor Project
Program.cs : It is the entry point of the project
App.razor : It is the root component of the application and uses the built-in Router Component and sets up client-side routing. It is this Router component that intercepts browser navigation and renders the page that matches the requested address.
The Router uses the Found property - to display the content when a match is found. and NotFound property-to display the message.
Pages: This folder contains the razor pages and the routable components that make up the Blazor app.
The components have the .razor extension.
Main Layout: This is the mail layout component
_Imports.razor: It contains the imports of libraries/namespaces that required in every razor component
Razor Component Structure
The razor component consists of below elements:
@page directive — will be at the top of the component
@inherits directive — which inherits the Base component
@inject directive — which injects the libraries like HttpClient etc.
html — will contains the interactive UI elements
@code directive — which contains the C# code — parameters, functions etc.
How to add Blazor Project
Search for Blazor and add as below screen shot
Select target framework .Net 5.0 and create the project
Hit F5 and run the application
That’s all for this article.
Happy Coding !!
