Getting Started with Blazor (from Scratch)


Blazor is a free, open-source Web framework to build Web apps using C#. In this article, we will understand Blazor from scratch and execute our first program using ASP.NET CORE using Blazor. We will also create a sample program using Blazor.

What is Blazor?

Blazor is a .NET web framework for creating client-side applications using c# /Razor and HTML that runs in the browser. It can simplify the process of creating applications without knowledge of scripting languages and we can do with c# and f#.

Why use Blazor?

Blazor makes web development easier and more productive by providing full-stack web development with. NET. It runs in all browsers.

Blazor also supports some features such as.

  1. Routing
  2. Layouts
  3. Forms and Validations
  4. Server-side rendering
  5. Dependency Injection

Getting started with Blazor from scratch

Open Visual Studio 2022 ->click on Create New Project ->select Blazor web app and click next.

 Visual Studio

Give the project name Here “BlazorWebApp.Scratch” and click next.


Make interactive mode none and click create.

 Interactive mode

Now, our first Blazor project will be created. You can observe the project structure in Solution Explorer as shown below.

Solution Explorer

Create a new folder in components with the name “Controls” and add razor components with the name “DisplayTimeComponent”

Razor components

Open the DisplayTimeComponent.razor and put the following code into it.

Time Component

Render the DisplayTimeComponent.razor in Home. razor.


To get Server Interactivity we need to add a few lines in the Program.cs file.

Program.cs file


We can see here the current date and time.

 Current date

When we click on the Display Time button it renders the current Time from the server.

Here you can observe changed times.

Display Time

Congratulations, You have created your first program with Blazor.


We learned about the .NET Framework- Blazor and Also created one sample project with Blazor.

You can also find this source code on GitHub.