Learn to create a Blazor web application step by step fashion.
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
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.
To run the application in command prompt, run the dotnet run command.
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.
The implementation detail of the counter section is in Coutner.razor. The implementation detail is following
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 ?
- onclick event is fired.
- IncrementCount method is called.
- currentCount is incremented.
- 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.
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
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
1 Comments
Gret article to start with Blazor! Thank you
ReplyDeleteIf you have any question please ask?