How Can A Browser Execute C# Code?
The answer to this question lies within WebAssembly, which is the secret sauce that allows Blazor to function alongside C# and thus allow for front-end web application development using this language.
Hosting Models For Blazor
Depending on whether you plan to use Blazor (and C#) for front-end (aka client-side) development or back-end/server-side development, there are two different hosting models to know about with Blazor — the aforementioned Blazor WebAssembly and Blazor Server.
What To Know About Blazor WebAssembly
The Blazor WebAssembly hosting model allows your application to run entirely on the user’s browser. This is possible because the complete code of the application, including its dependencies and the .NET runtime, is all compiled into WebAssembly. It is then downloaded by the user’s browser and locally executed.
The benefits offered by the Blazor WebAssembly hosting model are very similar to those provided by Single Page Applications. After the download, the application functions independently of the server, aside from the needed interactions. Additionally, you don’t need an ASP.NET Core Web server to host your application. You can instead use any Web server, since the result of the WebAssembly compilation is just a set of static files. However, be aware of the drawbacks of this hosting model as well. Namely, it’s important to note that the user browser must support WebAssembly for the application to function, and the initial download of the application may take some time before being ready to go on the user side.
What To Know About Blazor Server
By using Blazor Server (also known as the server hosting model), the application is executed on the server from within an ASP.NET Core application. This involves a SignalR connection being established between the client and the server to operate. Whenever an event occurs on the client side (like a button click or form submission), the information about the event is transmitted to the server over the SignalR connection. The server then processes the event, and for the generated HTML a diff (difference) is calculated.
Then, the entire HTML is not sent back again to the client — instead, it’s only the diff that is sent to the client over the existing SignalR connection. The browser then subsequently updates the user interface. Blazor (on both the front-end and back-end) embraces the Single Page Application architecture, which in every case rewrites the same page dynamically in a real-time response to user action. Since only the diff is applied to update the UI, the application feels faster and more responsive to the user, leading to a better user experience.
Machine Pre-Requisites To Build A Web Application Using C# And Blazor
- Install .NET Core 3.0 or more recent
- Build blazor applications using Visual Studio 2019, Visual Studio Code or the .NET Core CLI.
- When using Visual Studio, ensure both ASP.NET and web development workload is installed. To verify that you have this workload installed, click on Tools and then select Get Tools and Features. If not, make sure to download and install these before you begin.
- Knowledge of not just C#, but also CSS and HTML are essential for building functional applications in Blazor. If you haven’t taken coding classes for any of these three languages yet, consider enrolling in one of SoloLearn’s classes to get started before beginning to work with Blazor.