Blazor Server – Basics Part 1
Nearly one year ago, at the end of 2021 I was starting my first Blazor Server project, a new version of our old time tracking and vacation planning system which in 2010 was written in ASP.Net Web Applications (.NET Framwork – Web Forms) and VB.Net.
Before I started to create a new version, I first researched what technology will be best and up to date to implement the new requirements.
Besides Node.js, React and Angular, I came quite fast across Blazor Server, a new free and open-source web framework by Microsoft which lets you create web apps using C# and HTML.
ASP.NET Core Blazor
https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-6.0
Hierarchical Blazor Components
https://docs.microsoft.com/en-us/archive/msdn-magazine/2019/march/cutting-edge-hierarchical-blazor-components
As the latest framework to join the single-page application (SPA) party, Blazor had the opportunity to build on the best characteristics of other frameworks, such as Angular and React. While the core concept behind Blazor is to leverage C# and Razor to build SPA applications, one aspect clearly inspired by other frameworks is the use of components.
Blazor is a web framework for building web UI components (Razor components) that can be hosted in different ways. Razor components can run server-side in ASP.NET Core (Blazor Server) versus client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly, Blazor WASM).
More about Blazor Server vs. Blazor WebAssembly you can read in the following Microsoft article https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-7.0
This post is a beginning of a series of posts about Blazor server and some useful features to create rich interactive UIs using primarily C# instead of JavaScript. To tell you right away, we cannot completely abandon JavaScript and still need it for some features.
The Blazor server framework also supports interaction between C# code and JavaScript code which is really cool. You can invoke JavaScript functions directly from your C# code and vice versa.
So you have with C# a real powerful programming language which meets most requirements and by combining it with JavaScript, you have nearly no limits regarding creating highly responsive interfaces like desktop apps.
These scenarios are called JavaScript interoperability (JS interop).
To use it you have to import its namespace and the JavaScript runtime called IJSRuntime.
@using Microsoft.JSInterop
@inject IJSRuntime IJSMore and how exactly we will see later.
One important JavaScript file (framework) which by default will be downloaded to the browser the first time you open a Blazor server website, is the blazor.server.js file (framework).
The blazor.server.js file is an embedded resource in the Microsoft.AspNetCore.Components.Server.dll assembly and you won’t find the file directly in your project path.
The Microsoft.AspNetCore.Components.Server.dll assembly is part of the ASP.NET Core shared framework.
The main job of the blazor.server.js framework is to bootstrap the web app and establish a SignalR connection between the server and the app to handle UI updates and event forwarding.
What is SignalR?
In a nutshell SignalR uses WebSockets if available to establish a consistent bi-directional TCP communication between the browser and server.
In Blazor server on the server side are running razor components which includes HTML and C# code, similar to PHP and C# classes. When a user the first time opens the web app in its browser, the server will send initial the complete website (route Razor template) to the browser (initial payload), similar as for classic websites. Further as mentioned the first time also the blazor.server.js file is sent to the browser.
From that moment, Blazor will remember what the web server was initial sending to the browser by making a virtual snapshot from, so called virtual DOM (Document Object Model) maintained on server side.
Document Object Model (DOM)
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Blazor will now ongoing use that virtual DOM to determine changes in the real DOM (web app running in the browser) and therefore from now on only send the changes instead of the whole site (razor template) to the users browser. These changes will then be updated in the real DOM by the blazor.server.js framework.
As mentioned blazor.server.js will also handle event forwarding, so each user interactions like keyboard inputs or mouse clicks will be send to the server using the SignalR connection.
In the next posts I will show how to create a new Blazor server web app and also I want to show some parts and functionalities from my time tracking and vacation planning system.
In Part 2 you will see how to create a new Blazor server web app.
Blazor Server Series
Blazor Server – Basics Part 1
https://blog.matrixpost.net/blazor-server-basics-part-i/Blazor Server – Basics Part 2
https://blog.matrixpost.net/blazor-server-basics-part-ii/Blazor Server – Basics Part 3 – Custom Layout
https://blog.matrixpost.net/blazor-server-basics-part-iii-custom-layout/Blazor Server – Basics Part 4 – Program.cs File
https://blog.matrixpost.net/blazor-server-basics-part-iv-program-cs-file/Blazor Server – Basics Part 5 – Authentication and Authorization
https://blog.matrixpost.net/blazor-server-basics-part-v-authentication-and-authorization/Blazor Server – Basics Part 6 – Query the on-premise Active Directory
https://blog.matrixpost.net/blazor-server-basics-part-vi-query-the-on-premise-active-directory/Blazor Server – Basics Part 7 – C# Events, Delegates and the EventCallback Class
https://blog.matrixpost.net/blazor-server-basics-part-vii-c-events-and-delegates/Blazor Server – Basics Part 8 – JavaScript interoperability (JS interop)
https://blog.matrixpost.net/blazor-server-basics-part-viii-javascript-interoperability-js-interop/Blazor Server – Basics Part 9 – Responsive Tags and Chips
https://blog.matrixpost.net/blazor-server-basics-part-ix-responsive-tags-and-chips/Blazor Server – Basics Part 10 – MS SQL Server Access and Data Binding
https://blog.matrixpost.net/blazor-server-basics-part-10-ms-sql-server-access-and-data-binding/Blazor Server – Basics Part 11 – Create a Native Blazor UI Toggle Switch Component
https://blog.matrixpost.net/blazor-server-basics-part-11-native-blazor-toggle-switch-by-using-the-eventcallback-class-and-css/Blazor Server – Basics Part 12 – Create a Native Blazor UI Toggle Button Component
https://blog.matrixpost.net/blazor-server-basics-part-12-create-a-native-blazor-ui-toggle-button-component/
Links
Blazor
https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor
Blazor Tutorial – Build your first Blazor app
https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro
Blazor Tutorial – Build your first Blazor app –> Let Jeff walk you through building a full Blazor app from start to finish
https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/next
ASP.NET Core Blazor
https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-6.0
Blazor in Action
https://livebook.manning.com/book/blazor-in-action/
Blazor University
https://blazor-university.com/
Single-Page application (SPA)
https://en.wikipedia.org/wiki/Single-page_application
What’s behind the hype about Blazor?
https://stackoverflow.blog/2020/02/26/whats-behind-the-hype-about-blazor/
What is Blazor? A Tutorial on Building Web Apps with Authentication
https://auth0.com/blog/what-is-blazor-tutorial-on-building-webapp-with-authentication/ASP.NET Core Blazor JavaScript interoperability (JS interop)
https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-7.0
