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*
- .NET Core SDK (>2.1.4)
- At command prompt type “dotnet –version”
- Node.js (>8.3)
- At command prompt type “node -v”
- Download: https://nodejs.org/en/
- At command prompt type “node -v”
- Visual Studio (>2017)
- · Blazor.VSExtension.VSIX
* 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.
- 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();
}
}
}
}
- 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.
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.
References
- Steve Sanderson’s Blog http://blog.stevensanderson.com/
- Microsoft ASP.NET https://www.asp.net/
- Blazor on Git https://github.com/aspnet/blazor
- Introduction to Razor Pages in ASP.NET Core https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/?tabs=visual-studio
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.
Light
Dark
0 comments