Web App Development Sans JavaScript, with Microsoft Blazor

In this tutorial, David Eastman dives into the JS-less world of Microsoft's Blazor, with a little help from a man in a shiny purple blazer.

Mar 11th, 2023 4:00am by David Eastman

Featued image for: Web App Development Sans JavaScript, with Microsoft Blazor

Blazor is a Microsoft framework that encourages developers to “use the power of .NET and C# to build full-stack web apps without writing a line of JavaScript.” Well, you had me at “without writing a line of javascript.” Sensible developers might well wonder if this is just blundering headlong into the juggernaut that is React. And comparisons between the two stacks were potentially not good for Microsoft, as they haven’t had a great record with modern web technology. But as Blazor can use WebAssembly (Wasm) to run in the browser, it should have an interesting future, so I thought I would drop in and see how it works. In this post, I’ll make sure Blazor follows standard expectations for web app development. So, what do I expect to see as a reasonably experienced web stack developer?

Strong Visual Studio integration. After all, this is the shining star in the .NET firmament.
Some sort of clean template method for the HTML.
Either the ability to use Bootstrap or something with a similar modular nature for visual components.
A relatively painless loop between editing and seeing the result. This form of hot reloading is what you spend most of your time doing with web development.

First of all, I went through the introductory videos (there are 11 of them). This featured a man in a shiny purple blazer offering a “nickel tour”, but he did get stuck in very quickly. First of all, he installed a version of .NET, leaving me a little unsure whether my higher-number version was good or not.

<code class="language-bash">TheNewStack> dotnet --version
7.0.200</code>

I had never used the dotnet command on the command line, but it seemed a familiar way to start a new project with templates:

<code class="language-bash">TheNewStack> dotnet new
The 'dotnet new' command creates a .NET project based on a template.
Common templates are:
Template Name         Short Name    Language    Tags

---

[ASP.NET](http://asp.net/) Core Web App  webapp,razor  [C#]        Web/MVC/Razor Pages
Blazor Server App     blazorserver  [C#]        Web/Blazor
Class Library         classlib      [C#],F#,VB  Common/Library
Console App           console       [C#],F#,VB  Common/Console</code>

It looks somewhat different to the demo, but the Blazor project templates are already mentioned, which is reassuring. Also, I was on an Apple Mac, which I was politely told should work just fine.

<code class="language-bash">>dotnet new blazorserver -o FirstBlazorApp</code>

The result was a csproj file. We are then directed to open this in VS Studio 2019 (I have 2022). Within, I see an Index.razor file:

This is pleasantly HTML with some obvious adaptions. (So technically, Razor is the server-side markup language, and is the bit doing the templating — hence the suffix.) After some certificate admin, the app runs and directs me to a simple demo front end on my localhost:7075.

If you are familiar with Rails or Sinatra, you will recognize the @page directive in Index.razor as a route to handle HTTP requests — in this case, those requesting the root of the site. Visual Studio helps me see that SurveyPrompt and PageTitle are clearly HTML interlopers, but that’s what we need. In fact, as the man in the purple jacket points out, there is already a SurveyPrompt.razor file within the shared directory. So we have a nice component architecture (or partial in something like Rails) and it is clear the parent passes the parameter Title into the mix:

<code class="language-html"><div class="alert alert-secondary mt-4">
    ...
        <strong>@Title</strong>
        ...
        and tell us what you think.
</div>

@code {
    // Demonstrates how a parent component can supply parameters
    [Parameter]
    public string? Title { get; set; }
}</code>

So this already answers the template question I posed at the start. When you munge code and HTML together, every part has to compromise a bit — but this seems within reason. You can write code in C#, and pass values back and forth to the HTML quite easily. And the bottom code part is cleanly separated from the HTML in the example above. I couldn’t hot reload on my Mac / Visual Studio / Chrome setup, although Mr Purple clearly did with his older VS, Edge and maybe IIS Express connection. For me, a new page was started if I attempted to make small changes. I’ll come back to this later, if I can. Otherwise, my mongrel setup worked out of the box — not something I would have bet on with Microsoft a decade ago. It seems that a razor file can be used as a component or a page. While the purple man added the Counter component to the index page (much like the SurveyPrompt), Counter.razor sits inside the pages directory. And appears in the layout of the site:

So one would assume it had a “/Counter” route of some sort. And it does:

<code class="language-html">@page "/counter"

<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++;
    }
}</code>

And indeed you can add routes at will on any page with the @page directive. Digging a little deeper, we can see how the routing pushes pages through a layout within the App.razor file:

<code class="language-html"><Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router></code>

Between the router plumbing, the reference to the current assembly and the 404 page not found warning, is the “MainLayout” argument. And yes, MainLayout.razor is another shared component:

<code class="language-html">@inherits LayoutComponentBase

<PageTitle>FirstBlazorApp</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div></code>

And this indicates that some type of modular CSS, which looks decidedly Bootstrapish, is happily included. So we have Visual Studio integration, components, pages and layouts. I’d say we are mainly good. The purple man in the video speaks the truth. In the next post, I’ll go deeper into Blazor, and look at the nature of the beast beyond basic web development.

David has been a London-based professional software developer with Oracle Corp. and British Telecom, and a consultant helping teams work in a more agile fashion. He wrote a book on UI design and has been writing technical articles ever since....