Build A Web App With Blazor In .NET 7

There are a wide range of platforms and technologies for web development, which creates uncertainty to find the best one based on the developer skills setup. Considering the latest web apps development trends, we split the development into two segments: Front-End and Back-End development. Based on the above two development parts, web apps development requires 2 major roles for developers, and those are Front-End and Back-End developers. Subsequently, the web apps development necessitates various skills on both the front-end and backend side to build a complete system. Furthermore, there are several front-end frameworks, popularly, Angular, Reack.Js, Vue.js, JavaScript which again requires different skill sets and developers. However, the most popular choice for backend development, server-side logic is C# and .NET. This creates a complex scenario to build Web UI with front-end technologies and then again server-side logic with back-end technologies.
However, Blazor framework is one of the web development platforms for the .Net family that provides the flexibility to develop both backend and front using the same language, C#. It is a component-driven UI framework that takes advantage of shared business objects and code for building applications in both front-end and back-end.

In this article, we will develop a web app with Blazor in .NET 7. Furthermore, we will check both Blazor Server and Blazor WebAssembly with default project structure.

• What is Blazor?
• .NET 7 Generally Available
• What is Blazor Server?
• What is Blazer WebAssembly?
• Build a web app with Blazor Server with .NET 7
• Build a web app with Blazor WebAssembly with .NET 7

If you want to know more about web development with Blazor, please check my previous article Web Development with Blazor.

What is Blazor?

Blazor is one of the frameworks for the .Net family for web development. Specifically, it is a user-interface framework for .Net applications, which utilizes the same C# language from front-end development. Additionally, it is a component-driven UI framework that provides flexibility to use shared business objects and code for front-end and backend development. Therefore, it enables the .Net developer with the same C# skill to build complete applications. Because of which, this Blazor framework makes the .Net ecosystem more sustainable and efficient.
In simple team, Blazor is a new client-side framework to ASP.NET for developing UI for web using C# instead of JavaScript, which allows running in the browser using web Assemble. It is a combination of the words Browser and Razor, i.e., Blazor.
Let’s commence with building a web application with Blazor server and WebAssembly with .NET 7.

.NET 7

I am happy to say that .NET 7 is generally available. It is officially released on 8 November 2022. Newly released .NET 7 comes with huge improvement in performance and several new features. We can download .NET 7 for free from this authorized site for windows, macOS and Linux. .NET 7 is so flexible and versatile that we can develop any kind of application on any platform.

Prerequisites

Before jumping into Blazor applications, we need the following perquisites.

• Visual Studio 2022 (or Visual Studio Code)
• .NET 7 SDK
• C# knowledge

We can use any version of Visual Studio 2022, and we can download from this link. You can use the community version, which is free. Additionally, you can download .NET 7 SDK for free from this official site. In my case, I am using Visual Studio 2022 Professional, however, the steps and interfaces are the same for other versions.

Let’s commence.

We will start with the installation .NET 7 SDK for Windows. 

Blazor Server

Blazor server runs as an implementation of server side as a part of ASP.NET core app where UI events, button clicks, UI updates and interactions are communicated over SignalR connection. In this approach, the UI is generated on a web server and is transmitted to the visitor’s browser upon request. This two-way interaction occurs using SignalR and a web sockets connection. Any change in DOM content is generated from web server and update in automatically via SignalR with Blazor Server framework. This Blazor type has direct access to server and network resources since app is executed in server side.

Build a Web App with Blazor Server

In this section, we will create a web application with Blazor Server template step by step. 

We will open Visual Studio and create a new project as shown:

To develop Blazor server application, we will choose Blazor server app template and proceed to next. We will give a project name and location.

In the next screen, we will get an option to choose .Net framework, Authentication type and a couple options for the project.

After installation of .NET 7 SDK, we will have an option to choose .NET 7 in the framework. We will select .NET 7 framework and proceed. To keep it simple, we will keep other options default.

We have successfully created a Blazor server web application, and the project structure as shown.

Furthermore, if we check FetchData.rozor page/component, we can call the services, business logic classes directly from Blazor page and use application models.

This is how we can use server-side code in Blazor server. We have full access to the server side from the Blazor page and can interact with data or databases.

Let’s build and run the solution. 

Now I will add a logic in the counter component. 

We will build and run the solution again.

This is how we can develop a Blazor server app.

Now let’s move to Blazor WebAssembly.

Build a Web App with Blazor WebAssembly

Blazor WebAssembly, on the other hand, runs on the user’s browser as a client application by loading application dependencies, and .NET runtime to the browser. In this approach, we can publish the Blazor applications as static files without the requirement of a web server or its interactions, since WebAssembly is a technology that executes entirely in the client browser. Although we can do advanced logic in client side using C# in the browser, however, to interact with data, database or other services, this type uses standard web technologies HTTP services.

Again, we will open Visual Studio and create a new project. Then, this time, we will choose the Blazor WebAssembly App project template as portrayed. 

Again, we will give a name and location of the Project.

In the next screen, we will choose .NET framework 7, authentication type as none for this article, and there are some more options as illustrated. 

Let’s discuss those options.

ASP.NET Core Hosted – this option will create a project and asp.net core hosted environment for Blazor WebAssembly project. Which means, we can deploy and host the application as like asp.net core.

Progressive Web Application – This option produces a Progressive Web Assembly supporting installation, and offline use.

For this article, we will choose ASP.NET core hosted and proceed.  

We have successfully created a Blazor WebAssembly project in .NET 7. In this project template, we have 3 projects by default.

 Client Project – This project contains the Blazor components, client-side logics with C#. However, we don’t write any services or server-side logic in this project. We do interaction with data or databases via HTTP services.

Server Project – This is like a general asp.net web API project. Here, we do server-side logic, build APIs for the client application. We create services, Database interaction, infra and networks and so on. We can follow any solution design and pattern based on our needs.

Shared Project – This project adds advantages to the Blazor client project. We use this project to write shared models, objects, or data transfer objects. We can reuse those components for both server and client projects.

Let’s check the Client project. 

If we observe then, this project is using a shared model and getting data through http call. However, we can write client-side logic with C#. 

Then again, if we check the server project, which is more like a normal web API. However, the reference of Client project is added. 

The client project is referenced here because this will be hosted in IIS. During the project creation, we choose the option ASP.NET core hosted. Simply, we can deploy this project to have both client and server.

Now, we will build and run the solution. 

This is how we can develop a Blazor WebAssembly application.

Conclusion

In this write-up, we learned about Blazor web development. Furthermore, I have elucidated about Blazor development options for various scenarios with examples. Based on hosting decisions, we can choose Blazor server or Blazor WebAssembly to deploy as an ASP.NET core or as a WASM. Additionally, I have illustrated how to build a web application with both Blazor server and Blazor WebAssembly. This article will also assist you to know the difference between Blazor server and WebAssembly and their project structures.

References:

• Develop A Web App with Blazor (rijsat.com)
• Microsoft Learn