Running .NET applications client-side in the browser

Premier Developer

Premier

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.

Pre-requisites*

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

Setup

  • 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
      or
    • 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.

image

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

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

image

  • 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.

image

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.

image

References


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   

No Comments.