Microsoft Blazor

Blazor is Microsoft provided framework which is used to build client-side UI using C# instead of a JS framework. It is a web UI framework based on C# & Razor that runs in a web browser. It simplifies the task of building fast and beautiful single-page applications that run in any browser.

Pre-requisite:

• .NET Core 2.1 or later
  
• Visual Studio 2019
• Blazor Extension
  

Before starting with creating a sample app we need to understand different hosting models.

1. Client-Side: Blazor client-side app works in all major browsers including mobile browser. Running dotnet code in a web browser is possible with Web Assembly. It is open standard & supported in all browsers. It is deployed as a set of the static file without any .Net dependencies.
2. Server Side: In this app is executed from Windows Server. The only drawback is there is no offline support. But there is one advantage also, If the connection is lost, it'll automatically reconnect once it is up. This is possible with the help of SignalR.   

Creating A Sample Blazor  app

1. Open Visual Studio 2019. After installing .NET 5.0, you'll be able to see a new project template for Blazor.                       
2. Select Blazor App & click on next. Following screen displayed. After entering the app name, you'll see the screen to select the hosting model.                                                               
3. Here lets select Blazor WebAssembly App i.e. Client-Side hosting.
4. Here is the Folder structure of the sample app                                                                   
5. Here you can see UI pages are created with ".razor" extension. You can create UI with Html & C# code. NavMenu.razor contains code related page navigation.
6. For this demo, Employee.razor page is created which will show Employees with their Roles. It has a button which will return the employee list. You can inject any dependencies using @inject.       
7. Below is the final output                                                                                                                                       

Advantages of Blazor:

• Web development becomes easier by providing a full-stack web development with .NET language.
• Logic can be shared across Client & Server side.
• UI is rendered in HTML thus has wider desktop/mobile browser support.
• Can be integrated with modern hosting platforms like Docker.

Happy Learning.......

“Make it work, make it right, make it fast.” – Kent Beck