Blazor is changing the game for .NET developers, allowing them to build interactive web apps using C# instead of JavaScript. With support for WebAssembly and server-side rendering, it offers a modern, full-stack development experience. But is it the right choice for your next project? Let’s dive in.
Why Blazor?
We could trust our community blindly and let them post what they want on the app. But for our own peace of mind, we decided to add an admin panel to moderate and handle reports about stories and authors. However, we didn’t want to burden our mobile app further with additional complexity, so we chose to use Blazor instead.
How it started
Just like any dev we started a new project with the base components from Blazor just to see how it works. And look what we found, the classic counter:
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @_currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int _currentCount = 0;
private void IncrementCount()
{
_currentCount++;
}
}
Unlike in React, you don’t need to explicitly define your state here. Blazor recognizes that _currentCount is a state that could change; it triggers a re-render when it detects a change. Later on in the Blazor guide, they talk about a manual way to trigger a re-render with the StateHasChanged() method.
Who doesn't like the weather?
In the new project, we also find the weather tab, which is a feature that generates weather data for display. This tab demonstrates how to effectively handle and present dynamic data within our web application, showcasing the process of generating and displaying data.
After seeing all the generated code, we new most of Blazor would be the same as Razor and MVC. So we got to work we needed a place to moderate all the posts and reports so that is what we did.
Custom pages
We decided to use different pages for our reports (user reports and story reports). So after selecting the new Blazor page we just had to give it a route and we had a page!
These pages we’re nothing fancy just a simple data table to show the usefull data to the moderator.
Our moderators had to be able to take some actions:
- Mark the report as not an issue
- Issue a warning to the author of the story
- Or delete the story completely
We made the same page for user reports but instead of deleting the story, we will ban the user who was reported.
Moderation but for access
Now that our pages existed we needed to be sure that these pages are actually secure and only our admin’s could access them. And like any other developer who has never worked with Blazor we decided to look at the generated code that the demo project provided us.
The code provided was relativly the same as the code from MVC when you generate the identity pages. Here is where a problem occured. We were unable to generate identity pages in Blazor, it would only generate it for MVC. So back to the demo project and bringing stuff over.
Since the only things we really needed were the login and profile pages. We copied those and made some tweaks to support our needs.
The conflict
In another post we talked about Firebase (A thank you letter) which we used to authenticate the users using our mobile app. Since the demo app used Identity Core, we had to make a decision. Do we pool together all our users and moderators, or do we separate them?
We decided to pool them together inside Identity Core, merging what we had with Firebase.
Conclusion
Now that we have successfully created our pages, we can conclude our experiment with Blazor and reflect on our experience with the framework. Overall, we found Blazor to be a relatively straightforward and intuitive tool for building web applications. It was not difficult to use, even for those who may be new to it, and its structure makes it easy to grasp fundamental concepts.
One of the standout features of Blazor is its ability to encapsulate all aspects of a component—its logic, rendering, and styling—within a single file, much like React. This approach simplifies the development process by keeping everything related to a specific component in one place, making the codebase more organized and maintainable.
Additionally, the inclusion of basic yet essential concepts such as routing and attributes plays a crucial role in helping developers understand how to structure and navigate a Blazor web application. The built-in routing system allows for seamless navigation between pages, while attributes provide a clear and concise way to define component behaviors. These features contribute to a more streamlined development experience and make Blazor an approachable choice for building modern web applications.
