our

Latest Blogs

Introduction to Blazor

iFour Team -July 05, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  •  
  •  
  •  
 Introduction to Blazor

Blazor is a new .NET web framework. It is a free and open-source web framework to build web apps using c#. In this blog, we will learn about Blazor and how to build and run the simple program. We will create the project using the CLI and also from the visual studio. So, we need the Visual studio 2017 (v 15.7) or above and .NET core version 3.0 or above. So, let's see from Blazor's introduction.

What is Blazor?

Blazor is a .NET web framework for building the client-side application with c#, Razor, and HTML that runs in the browser. Blazor provides an easy way to build a web application. It runs on any browser, it is fast, open-source, and have reusable components. Blazor is also supporting the Routing, Dependency Injection, Layouts, Server-side rendering, JavaScript interop, and forms and validation.

Let's get started with simple project.

Example 1

If you use the visual studio 2017 then go to the File->New->Project->.net core web application->Blazor.

solution

And here we have used the visual studio 2019 then directly search Blazor and click on Blazor App. After that, we will see like above image.

Default files

  • Program.cs: - When the server starts or App runs this file will be called.
  • Starup.cs: - Configure app service and middleware.
  • App.razor: - Root component of the app.
  • Pages: - Simple programmed web page for app.

Home

Simply initially by running the project you will see Home page like below.

Home Page

Figure 1.0 Home Page

You can see the pages, in which we can add the razor pages. Let’s see the Counter page.

Counter Page

Here, you can see the @page, this render the particular page in app so that page will be called.

@page "/counter"

Counter

Current count: @currentCount

@code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }
Counter Page

Figure 2.0 Counter Page

When you click the button, count will increase without the help of JavaScript or jQuery.

We can add C# code using the @code parameter. This is much easier isn’t it! Blazor provides the razor page in which we can write HTML and C# on one page.

Home Page

We can reuse the page using the Blazor let’s see.

We will reuse the counter page in home page by applying just one tag as shown below.

@page "/"

Hello, world!

Welcome to your new app.

We can see here that we have added just tag and this counter page will be displayed on the home page. Blazor provides these types of reusability so that we can use it wherever we can in app. Let’s see the output.

Home Page including Counter Page

Figure 3.0 Home Page including Counter Page

Modify Counter page

Now let’s modify the counter page, we will increase the counter by 50.

We have taken the Amount int parameter and increase by amount. Have a look at the code.

Counter Page:

@page "/counter"

Counter

Current count: @currentCount

@code { private int currentCount = 0; [Parameter] public int AmountValue { get; set; } = 1; private void IncrementCount() { currentCount += AmountValue; } }

Now call it from the Home page and set the amount parameter int value 50.

Home page

Here, we have passed the amount parameter with the value. Now run the app and you will see as:

Modified Home page

Figure 4.0 Modified Home page

Add->New Item->Razor page 
Add->Razor page

Calci.razor

@page "/calci"

Calci using Blazor

 

@code{ string num1; string num2; string result; void Add() { result = (Convert.ToDouble(num1) + Convert.ToDouble(num2)).ToString(); } void Subtract() { result = (Convert.ToDouble(num1) - Convert.ToDouble(num2)).ToString(); } void Multiply() { result = (Convert.ToDouble(num1) * Convert.ToDouble(num2)).ToString(); } void Divide() { if (Convert.ToDouble(num2) != 0) { result = (Convert.ToDouble(num1) / Convert.ToDouble(num2)).ToString(); } else { result = "Divide by Zero"; } } }

Here we have declared the page name in @page. When we append the page name in the URL then the browser will redirect to the particular page name. First, simply add the label and input textbox for getting data from the browser.

In the input tag, we have used the @bind attribute that will take value from the user and bind in the variable we have defined and called the function on click event of the button.

In which we have taken the three string one for result and two for number.

Bind attribute works only with the string so we have taken here the double value.

Searching for Dedicated ASP.Net Core Web Developer ? Your Search ends here.

NavMenu.razor

We need to link this page in the navbar link so add in the NavMenu.razor page.


 
@code { private bool collapseNavMenu = true; private string NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } }

Output: -

Add Function

Figure 4.0 Add Function

Subtract Function

Figure 5.0 Subtract Function

multiply Function

Figure 6.0 multiply Function

Divide Function

Figure 7.0 Divide Function

Conclusion

In this blog, we learn how to start with the Blazor and run any project with a simple example. We also went through new example of simple calculator, which acquired two inputs from the client and add, subtract, multiply, and divide using the button click event. We have given validation in the input as “only number will be accepted”. So, we have started the Blazor project directly from the visual studio, and also use the CLI commands to start the project.

Work with us

Well do everything we can to make our next best project!

Our Insights

Check out our most recent blogs

An in-depth guide on Angular Dependency Providers
An in-depth guide on Angular Dependency Providers

What is Angular? Angular is a frontend development framework used for building single-page client applications using HTML and Typescript. It is written in Typescript. What...

A simple guide to Build Angular Reactive Templates with Ngif and Async Pipe
A simple guide to Build Angular Reactive Templates with Ngif and Async Pipe

Angular Templates seamlessly help to expedite the development process with flawless assistance of components and other specific elements. These are dynamic and renders according...

A simple guide on AOT Compilation in Angular
A simple guide on AOT Compilation in Angular

What is a Compiler? A compiler is nothing but a part of code that converts one programming language to another. If we talk about some simple programming languages like C, C++,...

Our Partners

Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo

Work With Us

Well do everything we can to make our next best project!