Why Blazor?

I recently faced the task of making a web application in C#. At first, it seemed that there was nothing to choose but pure ASP.NET. After a short search, I found a wonderful framework Blazor.

I'll tell you a little about Blazor. Already from the name itself it is clear that this is a combination of Browser and Razor. And after a short reading of the documentation, I began to find advantages in it. Compared to Razor, Blazor is able to perform views on the client, while Razor does it on the server. If necessary, you can simply integrate the Blazor web application with platform functions and user interface controls into the application.NET MAUI.

Below I will show a small project on Blazor.

Blazor with JS and .NET 7

After the exit .NET 7 Blazor has undergone many changes and improvements

Interaction with JavaScript code has been improved. NET 7 introduces a new low - level usage mechanism .NET in JavaScript-based applications. With this new JavaScript interaction feature, you can call code .NET from JavaScript using the runtime .NET WebAssembly, as well as calling JavaScript functionality from .NET without any dependence on the Blazor component model.

In order to start using JS in your project, you need to create a JS file in the wwwroot folder and add the path to this folder to index.html. Below is my JS file structure.

A small js function responsible for the scroll animation.

function reveal() { 
    var reveals = document.querySelectorAll(".reveal"); 
  
    for (var i = 0; i < reveals.length; i++) { 
        var windowHeight = window.innerHeight; 
        var elementTop = reveals[i].getBoundingClientRect().top; 
        var elementVisible = 150; 
  
        if (elementTop < windowHeight - elementVisible) { 
            reveals[i].classList.add("active"); 
        } else { 
            reveals[i].classList.remove("active"); 
        } 
    } 
}  

window.addEventListener("scroll", reveal); 

In this example, calling js functions from .NET is not required, since the Listener itself tracks changes when scrolling the screen.

And here is the result of the js file itself.

Another example of interaction between js and .net, only in this example the call comes from C#.

To call into JS from .NET, inject the IJSRuntime abstraction and call method.

var position = await _jsRuntime.InvokeAsync<string>("ScrollToElement", "apodContent"); 

As the second parameter, I pass the id of the component to which I need to return the scroll.

window.ScrollToElement = (elementName) => { 
    element = document.getElementById(elementName); 
    element.scrollIntoView(true); 
} 

And here is an example of the work.

For an easier start with Blazor, I will recommend several libraries that helped me create good functionality.

Fluxor

In the future, I was faced with the need to save the page state, since loading from the server with each transition to the page would take too much time, which is not at all convenient for the user.

Using an existing library Fluxor - Blazor Web I managed to solve this problem.

It can be seen that when you first go to the Asteroids page, there is a small process of loading the content, but all subsequent times, the content already exists.

MudBlazor

Another very interesting library that perfectly helps to create a beautiful UI, especially for developers who do not know CSS very well, is MudBlazor. The library includes a huge number of ready-made components. It also makes it quite easy to create UI adaptations for different types of screens.

Summary

I think most of the tasks that can be encountered can be solved with the help of Blazor. And judging by how fast this technology is developing, this is especially noticeable after the release of MAUI and .NET 7, Microsoft will not stop there and will promote it. Also, for people who develop in C# and have never tried themselves as a Web developer, Blazor is a great solution.