My Favorite C# Features - Part 5: Build for the Modern Web with Blazor

I've written a bit about the various language features that I really like about C# over the last few months, but today I'm going to pivot slightly and talk about how much fun it is to write web applications with the Blazor web framework.

What is Blazor?

Blazor is a modern component-based web framework that is built on top of the .NET runtime and can run on either a web server OR in a browser using Web Assembly. Blazor was introduced as an experiment by Steve Sanderson at NDC Oslo in 2017:

This initial simple concept for building and running C# and .NET code in the browser as a "new SPA framework" captured the imaginations of .NET developers. After 2 years of experimentation and exploration by the .NET engineering team, Blazor became an official .NET framework with Web Assembly and Server hosted versions available.

Web Assembly AND Server version?

Blazor gives developers a way to define components and pages using C# with Razor templates. What if you really like the Blazor technology, but don't want to deliver and run the content in the browser using Web Assembly? Maybe you have some code that you need to ensure is run in a validated and protected server-based environment, well you can do that with Blazor Server-Side.

In this model, Blazor pages and components are rendered on the server and delivered to the web browser using web sockets and more specifically the SignalR framework. All interactions in the browser are transmitted to the server over a SignalR connection (typically an abstraction over web sockets) and the rendered HTML is returned and updated by the Blazor Server-Side framework.

How do I get started?

Blazor is part of the .NET toolset. You can get started by headed to https://blazor.net and installing the .NET command-line tools or Visual Studio. I have a new playlist of videos that will walk you through some simple scenarios that you can find on YouTube:

Sample Page

A simple Blazor page that can be used to fetch some data from an HTTP-based API can be queried and its contents displayed with a Blazor page like the following:

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
}

This is the basic FetchData sample that is delivered in the Blazor templates. It shows the following techniques in building a Blazor page:

• Defining that this is a page with an address to be routed to using the @page directive on the first line.
• Injecting an HttpClient named Http with the @inject directive on the second line. The HttpClient is later used to get data in JSON format and convert it to an array of WeatherForecast objects to be painted on screen.
• Emitting some standard table HTML tags with a for-loop across our collection of weather forecasts. The C# code in a Razor template is denoted by the @ character
• Handling the OnInitializedAsync event on the page to load data when the Blazor runtime initializes the page.

Community Support and Interactions

There is a growing and enthusiastic community of Blazor developers, projects, and companies building tools and samples for Blazor. Check out the Awesome Blazor list on GitHub to see more:

AdrienTorris / awesome-blazor

Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Awesome Blazor

A collection of awesome Blazor resources.

Blazor is a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Contributions are always welcome! Please take a look at the contribution guidelines pages first. Thanks to all contributors, you're awesome and wouldn't be possible without you!

If you need to search on this list you can try this great website: Awesome Blazor Browser Thanks @jsakamoto for this! Source code .

Contents

• Introduction
• General
• Templates
• Sample Projects
• Tutorials
• Libraries & Extensions
• Source generators
• Real-World applications
• Videos
• Articles
• Podcasts
• Presentations slides
• Tooling
• Books
• E-Books
• Courses
• Community
• Other Languages

Introduction

What is Blazor?

Blazor is a .NET web framework to build client web apps with C#.

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and…

View on GitHub

Summary

Building web applications with Blazor is a great way for developers who enjoy C# and .NET to create interactive web applications. I encourage you to check out the Blazor 101 video series published on YouTube and check out https://blazor.net for more learning materials and the tools to get started with Blazor.