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.
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.
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.
Simply initially by running the project you will see Home page like below.
Figure 1.0 Home Page
You can see the pages, in which we can add the razor pages. Let’s see the Counter page.
Here, you can see the @page, this render the particular page in app so that page will be called.
@page "/counter"
Current count: @currentCount
@code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }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.
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 "/"
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.
Figure 3.0 Home Page including 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.
@page "/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.
Here, we have passed the amount parameter with the value. Now run the app and you will see as:
Figure 4.0 Modified Home page
Add->New Item->Razor page Add->Razor page
Calci.razor
@page "/calci"
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.
We need to link this page in the navbar link so add in the NavMenu.razor page.
Output: -
Figure 4.0 Add Function
Figure 5.0 Subtract Function
Figure 6.0 multiply Function
Figure 7.0 Divide Function
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.
July 29, 2021
July 22, 2021
July 20, 2021
Well do everything we can to make our next best project!
Check out our most recent blogs
July 29, 2021
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...
July 27, 2021
Angular Templates seamlessly help to expedite the development process with flawless assistance of components and other specific elements. These are dynamic and renders according...
July 22, 2021
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++,...
Well do everything we can to make our next best project!