Create interactive client-side UI with Blazor in .Net Core

Friends, as you all know, so far you and I have used java script for interactive client-side while developing web application in C# language. Now, an interesting twist has come. A new client side framework has been introduced with ASP.Net Core 3.0, called Blazor.

What is Blazor in .NET Core?

Blazor is a new framework for developing client-side web UI which was introduced with .Net core 3.0. We generally use the C# code in server side only, but with Blazor we can use C# code on the client side as well. Is not interesting?

So, it means we can use C# code instead of Java Script for interactive UI ? Of course, Yes. That’s why the Blazor was introduced for .Net Core.

Advantages of using Blazor for client-side development

Create and develop a rich interactive UI in .Net Core application
Write server-side and client-side code using C# only
Support of modern hosting platforms such as Docker.
Share app logic across server and client.
Benefits of .Net’s reliability and security
Easy for C# developers

But, Blazor has few limitations as well. Blazor works only with ASP.Net Core and latest versions of Visual Studio.

Let’s get some more information about Blazor

Blazor is based on components. So, what are components in Blazor?

Components in Blazor are .Net classes and is the element of UI. An element could be a page or any data entry form or a dialog box.

Component, which extension is .razor are written in Razor markup, for this reason, they are also called razor component. As you know, razor allows you to switch between HTML and C# in same file.

Why Blazor?

Below are the reasons for which a developer can start writing code in Blazor.

Table of Contents

Create rich interactive web application using C# code.
Write server-side and client-side logic in .NET
Integrate with modern hosting platforms like Docker.
Create rich web application for multiple platforms like Window, Linux and MacOs.

How to create a Blazor Component in .NET Core?

Friends, if you want to work on the Blazor, for this you need .Net Core 3.0 and latest versions of Visual Studio.

Add Blazor in Visual Studio.

Follow below steps to add Blazor to your Visual Studio.

Go to Tools ->Extension and Updates..
From Left pane select Online.
Then in search box type Blazor.

To add a Blazor component in your project.

Right click on Project folder, select Add->New Item. Now, select ASP.Net Core -> Razor Pages.

I set the name ‘MyRazor’. My razor page is created and I will add page directive to set the Route for my Blazor page.

@page "/MyRazor"

So, to access MyRazor page, I can use below URL –

http://localhost:port/MyRazor

Now let’s do some more code in Razor

Below is the Dialog.razor file and this component can be nested within an another component.In below code, ChildComponent and Title uses the component in UI as well.

<div>
    <h1>@Title</h1>
    @ChildContent
    <button @onclick="ClickHere">Yes</button>
</div>
@code {
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    private void ClickHere()
    {
        Console.WriteLine("Welcome to Blazor UI Component.  Button Clicked");
    }
}

The thing to note here is that ClickHere() method is written in C# which triggered on button click event.Now, we will use Dialog.razor in Index.razor file using <Dialog> tag.

@page "/"
<h1>Hello, world!</h1>
Welcome to Blazor.
<Dialog Title="Blazor">
    Do you want to Continue?
</Dialog>

So, when you access index.razor, dialog component will be rendered. Another interesting thing about the razor, when you write a message in Console.WriteLine in a razor component, that message is displayed in browser’s developer tools. Yes, I too was surprised when I saw output on the first time in developer tools.

Blazor Web Assembly

Blazor web assembly uses open web standards without any plugins and supports all modern browser.

Watch this video to learn how to create a basic Blazor App using .Net CLI

Summary:

Blazor is new framework to develop interactive client-side web UI in ASP.Net Core. Blazor comes with ASP.Net Core 3.0. Blazor allows us to write client-side code in C# language. This means, you do not need Java Script to write client-side code, it can be done from C#.

It is still new and its use is also new for today’s developer. What will be its scope in the future, it will be known over time. Hopefully, this information about Blazor will prove useful to you. Please like and share this URL on social media.

Dot Net Core Blogs – Dot Net Core Blog

You may read this - What is the difference between Blazor Server and Blazor WebAssembly?