C# On The Client Side With Blazor

With the introduction of .Net Core 3.0, Microsoft has built its own web UI framework.

Introducing Blazor: Microsoft’s fully C# client-side framework. With the help of its Razor platform, Microsoft is attempting to put its hat in the ring with the likes of Angular, React, and Vue.

Blazor allows developers to fully design and execute web pages purely with C# — it is meant to eliminate the need for JavaScript. The goal is also to hopefully limit the number of vulnerabilities found in front-end UI work.

In this post, we give an introduction to Blazor and a quick tutorial for getting started.

Quick Introduction To Blazor

Blazor is part of the open-source .NET platform and a framework for building interactive client-side web user interfaces with .NET. It allows you to create rich UIs using C#, eliminating the need to use JavaScript.

Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Your C# code can easily call JavaScript APIs and libraries. Plus, you can leverage the existing .NET ecosystem of .NET libraries, with the reliability and security we’ve come to expect from Microsoft.

Blazor compiles into pure IL which is executed by the browser. This means that injecting code is not an issue, which is a common issue with JavaScript. It also works under the covers with SignalR. This means that a constant connection is maintained with the server instead of multiple calls every time the site needs new information.

Getting Started

To get started, install the latest .NET Core 3.0 SDK. Then open a command line and run:

$ dotnet new blazor -o WebApplication1
$ cd WebApplication1
$ dotnet run

*You can also start a new project in Visual Studio 2019 with Blazor support if you have added the .NetCore 3.0 packages.

Syntax

Let’s take a look at Blazor’s syntax. You’ll quickly see that it is extremely close to the type of syntax you would see from Angular or React.

@page “/MyPage” // this allows for direct routing to the page, no need for a controller
<!--  filename: MyPage.cshtml <MyPage /> allows for injecting the page into other pages similar to components in Angular/React →

<h1>My Page</h1>

<p>Are you here?: @imHere<p>

<button class=”btn btn-primary” onclick=”@CheckIn”>Click me to check in</button>

@functions {
	private string imHere = “no!”;

	private void CheckIn()
	{
	     imHere = “Yes!”;
	}
}

// Add these to enable the page routing, inside your Startup.Configure file

app.UseRouting();

app.UseEndpoints(endpoints =>
{
	endpoints.MapBlazorHub();
	endpoints.MapFallbackToPage(“/”);
});

Notice above, we are able to define and execute functions in the HTML similar to how they are defined in other JavaScript frameworks. With that we are able to affect the DOM directly with C#, no need for JavaScript. We also get access to all the Dependency Injection available in C# as first-class citizens.

@inject LoginService LoginService
@page “/Login”

<label>Username</label>
<input type=”text” bind=”@username”/>
<label>Password</label>
<input type=”password” bind=”@password”/>

<button class=”btn btn-primary” onclick=”@LogIn”>Login</button>

@functions {
	private string username;
	private string password;
	private bool isLoggedIn;

	private void LogIn()
	{
	       isLoggedIn = await LoginService.ExecuteLogin(username, password);
	}
}

This should all start to look familiar to those who have worked in Angular or React. The concepts are all very interesting, and it will be intriguing to see if .NET Core can truly compete in the UI Framework space.

Wrap Up

.Net Core 3.0 is scheduled for official release in late 2019. Who is ready to forego all of their JavaScript knowledge and jump into an all C# front-end?

For more information, Microsoft has a couple of different tutorials on their site: Intro to Blazor.