Blazor tutorial for absolute beginners

 Learn to create a Blazor web application step by step fashion.



    The final result will be as followinghello razor

Intro 

Blazor is an open-source web framework to create web apps using C# and HTML, developed by Microsoft. Balzor is cross-platform. Blazor is used for frontend.

Prerequisites

In this tutorial, we don't need any prerequisites. Let's begin with creating an application


To start building applications, we should download and install the .NET SDK which is the Software Development Kit.

You can download SDK from here and install accordingly your machine bit which is 32 or 64.

To confirm everything is ok to open a new command prompt and run the following command

dotnet

If everything is ok then the following information should print.


If you face  'dotnet' is not recognized as an internal or external command error, make sure you opened a new command prompt. If you can't resolve the issue, use the I ran into an issue button to get help fixing the problem.

Create Blazor Application

To create the application type the following command to your cmd

dotnet new blazorserver -o BlazorApp --no-https cd BlazorApp

After typing the above command you will see the following information

create blazor app with commanda


What is dotnet new blazorserver means?

The dotnet new blazorserver command creates a new Blazor Server app for you.

What is -o means?

The -o parameter creates a directory named BlazorApp where your app is stored and populates it with the required files.

What is --no-https means?

The --no-https flag specifies not to enable HTTPS.

What is cd BlazorApp means?

The command cd BlazorApp changes directory.


After that to open the folder with vs code enter the command 
code . from the current directory.

open vs code from cmd

After that, you will see the following result in vs code 

blazor app in vs code


Run application

To run the application in command prompt, run the dotnet run command.


run blazor from cmd

Application is listening on http://localhost:5000 to open on a browser simply copy and paste into URL.
Then you will see the following interface in the browser.
blazor in browser

The above data hello, world! is from the index.razor. Which looks following

index razor

 
By clicking counter you can see the following interface in the browser

counter


The implementation detail of the counter section is in Coutner.razor. The implementation detail is following 
counter razor

A request for /counter in the browser, as specified by the @page directive at the top, causes the Counter component to render its content. Each time the Click me button is selected:

What happens when click button is selected ?
  1. onclick event is fired.
  2. IncrementCount method is called.
  3. currentCount is incremented.
  4. component is rendered to show the updated count.

How to add components in blazor?

First Open Pages/Index.razor in a text editor of your choice. 
Add a Counter component to the app's homepage by adding a <Counter /> element at the end of the file. After that go to command and stop the server then run app again with command dotnet run and open the browser again then you will see the following result.

add component in blazor

How to modify components in blazor ?

To modify components
Add a public property for IncrementAmount with an [Parameter] attribute.
Change the IncrementCount method to use the IncrementAmount when incrementing the value of currentCount

Counter.razor
counter modify

Index.razor

index.razor



After doing that again re stop and run app with dotnet run command, then refresh browser you can see the following result in the browser. The counter will increment by 10

counter increment by 10

Congratulation 👏👏 you have successfully create the first blazor application.
 

Reactions

Post a Comment

1 Comments

If you have any question please ask?