The Practical Client

Your First Blazor App

• By Peter Vogel
• 08/01/2018

Before you consider reading this column, be aware that, for all of its potential wonderfulness, Blazor is still an experimental toolset with no/none/nada/zippo support from anyone (except from those with kind hearts). Really, this particular column should be called "The IMpractial Client."

And, as an experimental technology, Blazor has some limitations: It's only available in ASP.NET Core, for example, and, as a result, only in C# and in Visual Studio 2017. I didn't test in Visual Studio 2017 Community Edition so I can't guarantee it will work there. I can tell you that you need the latest version of Visual Studio (see below).

What Blazor Means
When you create a Blazor "project" you actually end up with a Visual Studio solution containing three interrelated projects:

• <yourprojectname>.Client: Holds your Blazor pages
• <yourprojectname>.Server: Holds an ASP.NET Core project
• <yourprojectname>.Shared: Holds a Standard Class Library

Using Blazor (at least, at this stage) means committing to client-side development. The Client project is, essentially, your application's front-end and has no server-side component. The Server project holds a set of Web Services that can be called from the Blazor pages in the Client project. The Shared project, as a Standard Class Library Version 2.0, holds any code that you want to share with the other two projects. In fact, because the Shared library follows Microsoft's new cross-platform standard, it should be portable across multiple platforms, making it a good home for any code you want to share among any other projects.

The Blazor pages that you add to your Client project will appear to be part of your ASP.NET Server project in the sense that they will share URLs with your Server project. What you can't do (at least, not yet) is generate a Blazor page from your ASP.NET controller: Your controller can request Views in your Server project, but your Blazor pages must live in the Client project. Your Blazor pages can, however, make HTTP/Ajax requests to the Web Services in your Server project.

The goal behind Blazor is to allow you to write client-side code in C# with all the support you expect for a datatyped, object-oriented language while leveraging the .NET Framework languages. And, by and large, that's true. However, you often write your code inside something very much like a Razor page, not in a class file. It's still C# code, of course, but "C# like you write in a View" -- ASP.NET MVC developers will feel right at home.

However, to have your code execute, you also need to leverage an event model more like Windows Forms or WebForms than MVC: Your code often must go into the right event for it to run at the right time.

Setting Up
Before starting your first Blazor app, make sure that all your tools are in order (this can take up to a couple of hours):

• There's no sense in taking chances: Apply all the outstanding updates to Visual Studio 2017. You can do this by going to Tools > Extensions and Updates in Visual Studio and selecting Updates from the menu on the left.
• Exit and restart Visual Studio to trigger installing your updates through the VSIX installer. To actually install your updates, you must click the Modify button in the installer's lower right-hand corner.
• Make sure that you're running the latest version of Visual Studio (I built this app on 15.7.4).
• Install .NET Core 2.1.
• Finally, back in Visual Studio, add Blazor support by returning to Tools > Extensions and Updates, then selecting Online from the menu on the left, and searching for "Blazor." Once you find it, install it as you did with the other updates.
• Again, exit and restart Visual Studio to trigger the VSIX installer. Don't forget to click the Modify button when the installer appears.

If you've done all that, you should be ready to create an ASP.NET Core project that includes Blazor.

To do that, in Visual Studio select File > New > Project to open the Add Project dialog. Under Visual C#, select Web > .NET Core, pick the ASP.NET Core Web Application, and click the OK button. In the dialog that appears you should find two templates: Blazor and Blazor (ASP.NET Core Hosted). To create a project that integrates Blazor pages with ASP.NET Web Service, pick the ASP.NET Core Hosted choice and click the OK button. When the smoke clears, you'll see the three projects that make up your Blazor solution.

Creating a Blazor Page
You're now ready to start creating a Blazor "Hello World" app. In the Client project's Pages folder, right-mouse click and select Add > New Item. From the Add Item menu, select ASP.NET Core > Razor page, give your page a name, and press the Add button (I called my page HelloWorld).

In your page, delete the default code and add a page directive to set the route to your Blazor page. I used this:

@page "/helloworld"

With this addition, if my Server project is at http://localhost:1492, then I can reach my Blazor page with the URL http://localhost:1492/helloworld.

For this application, you might as well follow the page directive with your code (in a real application, you might want to begin with your HTML). Blazor code must be wrapped in a code block called functions. To have code run at startup, inside the functions block you need to override the OnInitAsync method. You can do that just the way you'd do it in a normal class file: type the word override, tap the space bar, then select OnInitAsync from the IntelliSense dropdown list, and press the Tab key.

This code declares a global variable called name and, in the OnInitAsync method, sets it to my name:

@functions {
  string name;

  protected override async Task OnInitAsync()
  {
    name = "Peter Vogel";
    return null;
  }
}

With the code in place, you can write some HTML that uses the name variable. Here's one example:

<h1>Say "Hello, @name"</h1>

As you type in this HTML, you should find that you get IntelliSense support for the name variable.

I tested my code using the ... helloworld URL from earlier in this article in both Chrome and Edge and it worked identically in both. I was not, however, able to get any debugging support in either browser. Right now, that's my biggest concern simply because my code never works the first time. The good news here is that a Console.WriteLine in my OnInitAsync method did show up in the Console window of both browsers' Developer Tools.

And, of course, none of this is very useful until you can integrate with a real page and the Web Services in your Server project. That's for a later column.