Complete guide of using Blazor in Asp.Net core
Our Dev IT Engineers are back today with another excellent blog. Today we’ll be discussing Blazor in Asp.Net and the right way to set up the development environment with a sample app.
How do we Develop Web Apps Currently?
Developing a web application is a procedure that requires a few things. One of those things is server-side development, and the other is client-side development. In the case of server-side development, we use server-side languages like C#, Java, PHP, and more. On the other hand, client-side development uses various JS frameworks, including React, Angular, and Vue.
It is important to learn both server-side and client-side languages to stay ahead of the competition. However, in the modern era, it seems rather counter-productive to learn two different types of languages for creating web applications.
Can we use C# for both – Server-side and Client-side Development?
Yes, it is possible to use C# for both development types, and this is done with the help of Blazor, which builds interactive web User Interfaces. This helps reduce the need for developers to learn JavaScript along with C# and smoothens the development process. The C# code runs on both the server and client browsers, allowing developers to work with their existing skills rather than having to learn new ones altogether.
What is Blazor?
Blazor is a toolset created by Microsoft’s ASP.NET Team for the purpose of client-side applications in .NET and under WebAssembly.
- Blazor works on the foundation of existing web tools like HTML and CSS and uses C# and Razor Syntax instead of JavaScript for web UI.
- It also gives you the benefits of a rich and modern single-page application with .NET being used on an end-to-end basis.
- Blazor basically combines Razor and C# into a client-side project that runs solely on a web browser.
How can a Browser Execute C# Code?
Generally, browsers only execute JavaScript code, and as a result, it may seem impossible to be able to run C# code in your browser. However, this is done with a less known tool called WebAssembly.
WebAssembly is a low-level language that is quite similar to Assembly Language in the way that it also uses a binary format; however, this can run in a modern web browser. Blazor runs the C# code in the browser with the help of WebAssembly. This allows it to run on a similar security sandbox as JavaScript Frameworks as React does. This allows developers to use just about any programming language for the browser and not just C#.
WebAssembly is based on various open web standards and is a native part of all modern web browsers, including those that are made for mobile devices. As a result, there isn’t any special requirement for running Blazor applications on your user’s device, thereby reducing the chances of any unnecessary inconvenience to them.
Blazor Hosting Models
Blazor provides developers with two different hosting models. These are Blazor WebAssembly which works on the client-side, and Blazor Server, which works on the server-side.
Blazor WebAssembly
Blazor WebAssembly is the client-side hosting model, and it runs directly on the browser in WebAssembly. Therefore, everything that an application needs is downloaded directly to the browser (the compiled application code, dependencies, and the .NET runtime).
Pros:
- Blazor WebAssembly doesn’t really require an active connection to the server.
- It uses the client’s resources and therefore reduces the load on your server system.
- Blazor WebAssembly doesn’t require a full-blown ASP.NET Core Web Server for hosting the app.
Cons:
- The first request on Blazor WebAssembly takes a little time to process since it downloads the entire web app and its required data onto the client browser.
- It is also only restricted to the capabilities of the browser used by the client.
- Your web application cannot be too demanding as your users may not have capable client-side hardware to support it.
Blazor Server
The Blazor Server is called the server hosting model, which executes the web application on your server and does so from an ASP.NET Core Application. This also requires a SignalR connection between the server and the client. Whenever any event occurs on the client system, its information is transmitted over the connection and is handled by the server, which calculates a difference for the generated HTML.
Then, instead of sending back the entire HTML over the connection, the server only sends the difference across in order to reduce the response time. This is then updated by the browser.
Blazor uses the single-page application architecture, which dynamically rewrites the same page in response to user actions, such as in the case of React.
Pros:
- The web application loads much faster since the initial download to the client’s browser is significantly reduced.
- Blazor Server can take advantage of your server’s resources.
- Your client will only need a browser to use the web application.
- The application is a lot more secure since its code is not sent to the client-side.
Cons:
- The application will require a full ASP.NET core to host it.
- Blazor Server always requires an active connection to the server.
- The app may experience latency due to the round trip of the data at each event.
- The scalability of the application is made much harder with Blazor Server than with Blazor WebAssembly.
Why Blazor?
Blazor makes web development a lot easier and more productive by providing users with access to a full-stack development system with a .NET framework. Here are the benefits you receive by using Blazor:
- .NET has a large range of APIs that all became accessible by using Blazor.
- Various modern languages like C# can be used to make the development process a lot easier and more interesting.
- Blazor can be coded easily in Visual Studio and Visual Studio Code, which are the best IDEs across all platforms.
- Blazor provides various performance benefits and makes development a lot easier depending on which hosting model you use.
- Blazor also supports features of a SPA (Single Page Application) framework such as:
- Routing
- Layouts
- Dependency Injection
- JavaScript interop
- Forms and validation
- Server-side rendering
Where can we use Blazor?
Blazor WebAssembly can be used in any modern browser out there, and it’s only requirement is that the client device should support your web application with the resource requirements. The list of browsers supported by Blazor is:
- IE
- Edge
- Firefox
- Chrome
- Safari
- IOS Safari
- Opera Mini
- Android Browser
- Blackberry Browser
- Opera Mobile
- Chrome for Android
- Firefox for Android
- IE Mobile
- UC Browser for Android
- Samsung Internet
Environment Setup
To set up Blazor on your local machine, you need two things, i.e., .NET SDK 3.1 or later and IDE (Integrated Development Environment).
1. 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, if you notice, .NET Core SDK 5.0.401 is installed. If you have not installed .NET Core SDK 3.1 or any higher version, then please install it from this URL.
2. 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
3. Let’s get started
1. We are going to create 2 Blazor projects. One Blazor project with server-side hosting (Blazor Server App), and the other one is with client-side hosting (Blazor WebAssembly App). Open Visual Studio 2019 and then click on the Create a new project option as shown in the below image:
2. When 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 as shown below:
First, select the Blazor Server App option and click on the Next button, as shown in the above image.
3. When you click on the Next button, the configure new project window will open. Here, you need to specify the Project name (BlazorServer) and the location where you want to create the project. Also, provide the solution name (BlazorApplication) and finally click on the Next button as shown in the below image.
4. When you click on the Next button, it will open the Additional Information window. Here, you need to select the Target .NET Framework version, authentication types, etc. Select .NET 5.0, which is the current version, and simply click on the Create button as shown in the below image:
5. Then click on the Create button, which will create the Blazor Server App with the default file and folder structure.
6. Now quickly add one more project, i.e., for client-side hosting. Right-click on the solution and select add Add -> New Project… option as shown below:
7. Similar to step 2, it will open a new project window this time; choose the Web Assembly template as shown below:
8. Click next and give an appropriate project name as shown below:
9. The next step is the same as step 4, where we need to choose the Target framework and hit on create button, it will create the Blazor WebAssembly project in our solution, and it will look something as shown below:
10. Now let’s configure our solution to run both the projects simultaneously. Right-click on the solution and choose the set startup project option from the context menu. It will open up a window as shown below image:
Choose the option as shown above and click on apply. Now you can run both projects simultaneously.
11. To run the project, press F5, it will open up two browser window/tabs as shown below:
The first image runs the Blazor server app, and the second one runs the Blazor WebAssembly app. Both the apps are working as expected.
Blazor Server and Blazor WebAssembly are just two different ways we can host a Blazor application. Everything in a Blazor application is a razor component. Components are the fundamental building blocks of a Blazor application. The way we build these components is the same for a Blazor server app as well as for a Blazor WebAssembly app.
Blazor Component
Component files have a .razor extension. Components can be nested, reused, shared across multiple projects. In the solution explorer, open the Counter.razor file under the pages folder. It will look as shown below:
If you see it is a combination of two things:
- HTML markup
- C# code (in @code block)
When the application has compiled, the HTML and C# code will be converted into a component call, and the name of the class will be the same as the component file. The name of the component class must start with an upper-case character. Otherwise, you will get a compilation error.
The above Counter component is rendered when we navigate to “/Counter” in the browser, and this is specified at the top of the file as the @page directive. You can also nest this component in any other component by using the HTML syntax i.e., <Counter />
Conclusion
By following this blog, you should be able to understand the importance of using Blazor for your application development. If you encounter any problems during its setup or creation, please feel free to drop a comment below, and we’ll be sure to respond soon.