ASP.NET Core Blazor Tuturials For Beginners
In this article, I am going to discuss What is Blazor. Microsoft has recently released a new .NET web framework called Blazor. It is a free, open-source Web framework to build Web apps using C# that run in a Web browser. As part of this article, I am going to discuss the following pointers in detail.
WebAssembly is a low-level assembly-like language in a binary format that can run in the modern web browser. The ASP.NET Blazor runs the C# code in the browser with the help of WebAssembly. It runs in the same security sandbox as JavaScript frameworks like Angular, React, Vue, etc. Not just C#, in fact, we can run any type of code in the browser using WebAssembly.
WebAssembly is based on open web standards. That means for the Blazor application to work, there is no need to install any special plugin like back in the days of silver light and flash. The main advantage of WebAssembly is that it handles memory-rich jobs and multi-threading very well as compared to javascript.
ASP.NET Core Blazor Hosting Models
The Blazor offers 2 hosting models. Blazor WebAssembly and Blazor Server.
Blazor WebAssembly
This is also called the client-side hosting model and in this hosting model, the Blazor application going to be run directly in the browser. So, everything the application needs i.e the compilation of application code, its dependencies, and the .NET runtime are downloaded to the browser. In our upcoming articles, we will discuss Blazor WebAssembly in detail in our Blazor Hosting Models article.
Blazor Server
This is also called the server hosting model and in this hosting model, the application is executed on the server from within an ASP.NET Core application. Between the client and the server, a SignalR connection is established. When an event occurs on the client such as a button click, the information about the event is sent to the server over the SignalR connection.
The server handles the event and for the generated HTML a diff (difference) is calculated. The entire HTML is not sent back again to the client, it’s only the difference that is sent to the client over the established SignalR connection. The browser then updates the UI. It embraces the single page application architecture which rewrites the same page dynamically in response to the user action. Since only the diff is applied to update the UI, the application feels faster and more responsive to the user. In our upcoming articles, we will discuss more Blazor Server.
Environment Setup for Blazor App Development
In your local machine, to set up Blazor, you need two things i.e. .NET SDK 3.1 or later and IDE (Integrated Development Environment).
Install .Net SDK 3.1 or later:
First, you need to install .NET SDK 3.1 or any later version. In order to verify whether the .NET Core SDK is installed on your machine or not, type the dotnet –list-sdks command in the command prompt and press enter as shown in the below image.
As you can see in the above image, in my machine, there are five different versions of .NET Core SDKs are installed. If you further notice .NET Core SDK 3.1.300 is also installed which is the latest version at this moment. If you have not installed .NET Core SDK 3.1 or any higher version, then please install it from the following URL.
https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install
Once you navigate to the above URL, just click on the Download .NET SDK option as shown in the below image. Here, first, you need to select the Operating System installed on your machine and then select whether it is 32 bit and 64 bit and then only click on the Download .NET SDK to download it. On my machine, I have installed 64-bit Windows OS, so I select Windows and Download .NET SDK (64-bit) option as shown in the below image.
Once you download the .NET SDK, then install it. If everything fine, once the installation completed, you will get the following.
Check everything installed correctly
Once you’ve installed it, open a new command prompt and type “dotnet” and press the enter key as shown in the below image. If the installation succeeded, then you should get the following output.
Got an error?
If you receive a ‘dotnet’ is not recognized as an internal or external command error, make sure you opened a new command prompt.
Integrated Development Environment (IDE) for Blazor App Development:
You can use any of the following IDEs to develop the Blazor app.
- Visual Studio 2019
- Visual Studio Code
- .Net Core CLI
We will discuss using all the above options to develop the Blazor application. But from the beginning, we are going to use Visual Studio 2019 as the IDE for Blazor app development. If you have not installed Visual Studio 2019, then please download and installed Visual From the below URL.
https://visualstudio.microsoft.com/downloads/
Once you navigate to the above URL, and if you are a student and you just want to learn Blazor, then I recommended you to choose the Community edition of Visual Studio 2019 which is free as shown in the below image and the community version has all the features of the enterprise edition has.
While installing Visual Studio, please make sure ASP.NET and Web development workload is installed. To verify this, whether you have installed this workload or not, Open Visual Studio Installer and then click on the Modify button as shown in the below image.
Once you click on the Modify button, the following screen window will open. Here select the Workloads option and then make sure the ASP.NET and Web Development checkbox to be checked as shown in the below image.
That’s it. We are ready with our environment to develop ASP.NET Core Blazor Application. In the next article, I am going to show you how to create the Blazor application using Visual Studio 2019 step by step. Here, in this article, I explain the Environment Setup for Blazor Application Development.
Creating Blazor App in Visual Studio
Creating First Blazor App using Visual Studio 2019
Now, we are going to create our first Blazor app using Visual Studio 2019. Actually, we are going to create 2 Blazor projects. One Blazor project with server-side hosting and the other one is with client-side hosting. The first step is always first. Open Visual Studio 2019 and then click on the Create a new project option as shown in the below image.
Once you click on the Create a new project option, the Create a new project window will open. In the search textbox, search for Blazor, and here you will find two options to create Blazor projects.
- Blazor Server App: This project template is used for creating a Blazor Server App that runs server-side inside an ASP.NET Core app and handles user interactions over a SignalR connection. This template can be used for web apps with rich dynamic user interactions.’
- Blazor WebAssembly App: This project template is used for creating a Blazor app that runs on WebAssembly and is optionally hosted on the ASP.NET Core app. This template can be used for web apps with rich dynamic user interactions.
Here, select the Blazor Server App option and then click on the Next button as shown in the below image.
Once you click on the Next button, then the configure your new project window will open. Here, you need to specify the Project name (BlazorServerApp) and the location where you want to create the project. Also, provide the solution name (MyFirstBlazorApp) and finally click on the Next button as shown in the below image. A solution is a container for one or more projects in Visual Studio.
Once you click on the Next button, it will open the Additional Information window. Here, you need to select the Target .NET Framework version. The authentication types. Whether you want to configure HTTPS and enable Docker. Select .NET 5 and simply click on the Create button as shown in the below image.
Once you click on the Create button, it will take some time and create the Blazor Server App with the following file and folder structure. In our upcoming articles, we will discuss the file and folder structure in detail.
Now run the application and you will get the following web page.
Creating Blazer WebAssembly App in Visual Studio 2019:
Once we created the Blazor Server App, now we will create the Blazor WebAssembly App and we will not create a separate project for this, instead, we will add the Blazor WebAssembly App to this existing solution. To do so, right-click on the solution and then select Add => new project option from the context menu as shown in the below image.
Once you select the New Project option, then it will open the add new project window. Again, search for Blazor in the search textbox and then select Blazor WebAssembly app and click on the Next button as shown in the below image.
Once you click on the Next button, Configure your new Project window. Here, you need to give a meaningful name (BlazorWebAssemblyApp) to your project and click on the Next button as shown in the below image.
Once you click on the Next button, then it will open the Additional Information window. Here, you need to select the Target .NET Framework version. The authentication types. Whether you want to configure HTTPS and whether you want to configure in ASP.NET Core Hosted as shown in the below image.
Once you click on the Create button, then it will take some to create the Blazor WebAssembly project with the following file and folder structure in your existing solution.
Now set BlazorWebAssemblyApp as the startup project and run the application and you should get the following webpage.
Now our solution contains two projects (one Blazor Server App and one Blazor WebAssembly App). Now let us run both the projects simultaneously.
Running Multiple Project in Visual Studio:
If you want to run multiple projects simultaneously in a visual studio, then you need to follow the below steps:
Right-click on the solution and then select the properties window. From the properties window, select the startup project from the left menu. Then select the multiple startup projects radio button from the middle pane and set the project action as start from the drop-down list for those projects which you want to run and then click on the Apply and OK button as shown in the below image.
With the above changes in place, now run the application and you should the webpages as expected. But while running the projects, if you are getting the following errors
Then simply follow the below steps.
Select Tools > NuGet Package Manager > Package Manager Console. Once the Package Manager Console window is open, simply type dotnet restore and press enter button as shown in the below image.
Once the restore successful, then again run the projects. At this time, you may get the following error.
We will discuss why this error and how to resolve this error in detail in our upcoming articles. But, now let us solve this error in another way. Right-click on the BlazorServerApp project and select the properties option from the context menu. From the project properties window, select the Debug tab from the left pane, and from the launch drop-down list, select the Project option, and save the changes.
Now run the projects and you should see both the projects are up and running.
Note: The Blazor Server App template is used to create a Blazor application with a server-side hosting model whereas the Blazor WebAssembly template is used to create a Blazor application with a client-side hosting model. So, with Blazor we have two hosting models. One is Blazor WebAssembly (i.e. Client-side hosting model) and the other one is Blazor Server (i.e. Server-side hosting model).
