Running .NET applications client-side in the browser

Premier Developer


In this post, App Dev Managers Robert Schumann and Ben Hlaban, introduce us to Blazor – an experimental web UI framework based on C#, Razor, and HTML that runs in the browser via WebAssembly.

This journey started from a blog by Daniel Roth. Other than the YouTube of Steve Sanderson’s prototype demo at NDC Oslo, this wasn’t much information to draw from.

A few days later I mention Blazor to my colleague Ben, and he starts asking a bunch of rapid-fire questions. Whoa! Time-out. With coffee top-offs, we start a Skype call, launch Visual Studio, git clone repo, and intrigue quickly ensued.

This blog is about getting started with Blazor. We’ll provide setup guidance, develop a cursory ToDo List application using the MVC pattern, and even do some unit testing. A second blog is intended to delve into E2E testing the application using Selenium and demonstrate how to position the project for CI/CD.


* If you had to install any of the above please do cursory system reboot


  • Launch Visual Studio Installer
    • Make sure Visual Studio is up-to-date
    • Make sure “ASP.NET and web development” is enabled
    • Make sure “.NET Core cross-platform development” is enabled
  • Install Blazor project template
    • Double-click previously downloaded file Blazor.VSExtension.VSIX
    • At command via VSIXInstaller.exe Blazor.VSExtension.VSIX

Here we go…

  • In Visual Studio 2017, select File | New Project | Visual Studio | Web | Blazor application
  • Name this new project “HelloBlazor”. Click OK button.
  • Press CTRL + F5 to make sure the default baseline project works. IIS Express should spin-up. The project eventually loads and is a typical Visual Studio templated SPA with Home, Counter, and Fetch Data features OTB.


  • Right-click HelloBlazor project | Add | Class | Name = “Todo.cs” | OK

  • Right-click HelloBlazor project | Add | Class | Name = “TodoComponent .cs” | OK


  • Right-click HelloBlazor project | Add | New Item | Web | ASP.NET | Razor View | Name = “TodoList.cshtml” | OK

  • Finally, let’s add a menu link to the new page
    • Double-click or open the file Shared/NavMenu.cshtml
    • Add a new list item to the existing unordered list;
  • Press CTRL + F5 to make sure the modified project works. The new page should be available on the left navbar from the “Todo List” link.


Unit Testing

  • Right-click HelloBlazor solution | Add | New Project | Installed | Visual C# | Web | .NET Core | MSTest Test Project (.NET Core) | Name = HelloBlazor.Test | OK
  • Right-click Dependencies | Add Reference | Projects | Solution | HelloBlazor | OK
  • Right-click UnitTest1.cs file | Rename | Name = TodoComponentTests.cs | Yes
  • Within the TodoComponentTests class rename TestMethod1 to AddToDo

  • Press CTRL+R,A to run all tests.



Premier Support for Developers provides strategic technology guidance, critical support coverage, and a range of essential services to help teams optimize development lifecycles and improve software quality.  Contact your Application Development Manager (ADM) or email us to learn more about what we can do for you.

Premier Developer
Premier Developer

Premier Support for Developers

Follow Premier   


Leave a comment