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.

Introduction

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.

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

Make interactive mode none and click create.

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

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

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

Render the DisplayTimeComponent.razor in Home. razor.

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

Output

We can see here the current date and time.

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

Here you can observe changed times.

Congratulations, You have created your first program with Blazor.

Summary

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

You can also find this source code on GitHub.

https://github.com/manideep-bestshop/AspNetBlazorCourse