The Practical Client

Your First Blazor App

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.

About the Author

Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.

comments powered by Disqus

Featured

  • What's New in Visual Studio 2019 v16.5 Preview 2

    The second preview of Visual Studio 2019 v16.5 has arrived with improvements across the flagship IDE, including the core experience and different development areas such as C++, Python, web, mobile and so on.

  • C# Shows Strong in Tech Skills Reports

    Microsoft's C# programming language continues to show strong in tech industry skills reports, with the most recent examples coming from a skills testing company and a training company.

  • Color Shards

    Sharing Data and Splitting Components in Blazor

    ASP.NET Core Version 3.1 has at least two major changes that you'll want to take advantage of. Well, Peter thinks you will. Depending on your background, your response to one of them may be a resounding “meh.”

  • Architecture Small Graphic

    Microsoft Ships Preview SDK, Guidance for New Dual-Screen Mobile Era

    Microsoft announced a new SDK and developer guidance for dealing with the new dual-screen mobile era, ushered in by the advent of ultra-portable devices such as the Surface Duo.

  • How to Create a Machine Learning Decision Tree Classifier Using C#

    After earlier explaining how to compute disorder and split data in his exploration of machine learning decision tree classifiers, resident data scientist Dr. James McCaffrey of Microsoft Research now shows how to use the splitting and disorder code to create a working decision tree classifier.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events