Running .NET applications client-side in the browser


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

namespace HelloBlazor

{

public class Todo

{

public string Description { get; set; }

public bool IsComplete { get; set; }

}

}

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

using Blazor.Components;

using System.Collections.Generic;

namespace HelloBlazor

{

public class TodoComponent : RazorComponent

{

public IList<Todo> Todos = new List<Todo>();

public Todo NewTodo = new Todo();

public void AddTodo()

{

if (!string.IsNullOrWhiteSpace(NewTodo.Description))

{

Todos.Add(new Todo { Description = NewTodo.Description, IsComplete = NewTodo.IsComplete });

NewTodo = new Todo();

}

}

}

}

image

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

@using HelloBlazor

@inherits TodoComponent

<h1>Todo List (@Todos.Count(todo => !todo.IsComplete))</h1>

<ul style="list-style: none">

@foreach (var todo in Todos)

{

<li>

<input @bind(todo.Description) />

<input type="checkbox" @bind(todo.IsComplete) />

</li>

}

<li>

<input @bind(NewTodo.Description) />

<input type="checkbox" @bind(NewTodo.IsComplete) />

<button @onclick(AddTodo)>Add</button>

</li>

</ul>

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

<ul class='nav navbar-nav'>

. . .

<li>

<a href='~/TodoList'>

<span class='glyphicon glyphicon-th-list'></span> Todo List

</a>

</li>

</ul>

  • 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

using Microsoft.VisualStudio.TestTools.UnitTesting;

namespace HelloBlazor.Tests

{

[TestClass]

public class TodoComponentTests

{

[TestMethod]

public void AddTodo()

{

//arrange

var todoComponent = new TodoComponent();

var description = "this is a test";

var isComplete = false;

//act

todoComponent.NewTodo.Description = description;

todoComponent.NewTodo.IsComplete = isComplete;

todoComponent.AddTodo();

//assert

Assert.IsTrue(todoComponent.Todos.Count == 1);

Assert.IsTrue(todoComponent.Todos[0].Description == description);

Assert.IsTrue(todoComponent.Todos[0].IsComplete == isComplete);

}

}

}

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

Comments (1)

  1. WhatSortOFTestsAre These says:

    Come on, guys, those aren’t the right asserts to use. You should only use Assert.IsTrue() if you are testing a boolean property or result.

    Assert.AreEqual() results in a better error message.

    Better still, don’t use MsTest (it’s like going back to a 1990’s unit testing framework). If you’re being punished for being bad, and are being forced to use it, at least use FluentAssertions…

Skip to main content