Banana For Scale

.Net Core 6 - Blazor Crud App Tutorial

March 11, 2021

Part I

Preliminary tasks. Estimated time. 30 minutes.

Install .Net Core 6 Preview

Let’s start by reading this Microsoft announcement on .Net Core 6 Preview

You can find the download here.

Once .Net Core 6 Preview is installed, we can verify the version

~$ dotnet --veresion

We can also view more info as well:

~$ dotnet --info

I’m using MacOS for this article, but your output should look something like this:

.NET SDK (reflecting any global.json):
 Version:   6.0.100-preview.1.21103.13
 Commit:    b8a03527b2

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  11.2
 OS Platform: Darwin
 RID:         osx.11.0-x64
 Base Path:   /usr/local/share/dotnet/sdk/6.0.100-preview.1.21103.13/

Host (useful for support):
  Version: 6.0.0-preview.1.21102.12
  Commit:  9b2776d481

.NET SDKs installed:
  6.0.100-preview.1.21103.13 [/usr/local/share/dotnet/sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.App 6.0.0-preview.1.21103.6 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 6.0.0-preview.1.21102.12 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]

To install additional .NET runtimes or SDKs:
  https://aka.ms/dotnet-download

This project is based off the ASP.NET Core 6.0 Preview, Blazor docs.

Create the Blazor App

~$ dotnet new blazorserver -o BlazorApp --no-https

It is also possible to create additional types of Blazor instances here. For example, to create a WASM app:

dotnet new blazorwasm -o BlazorWasm --no-https

Here is a link to the `dotnet new` commands. The first argument of the `new` command is the <TEMPLATE>. Here is the list of arguments .Net supports. The list is quite long.

Let’s inspect the directory BlazorApp

~$ cd BlazorApp

If successful, your directory contents should look something like this:

total 56
drwxr-xr-x  17 mike.hacker  staff   544 Mar 11 10:42 .
drwxr-xr-x   3 mike.hacker  staff    96 Mar 11 10:40 ..
drwxr-xr-x  12 mike.hacker  staff   384 Mar 11 10:43 .git
-rw-r--r--   1 mike.hacker  staff   387 Mar 11 10:40 App.razor
-rw-r--r--   1 mike.hacker  staff   141 Mar 11 10:40 BlazorApp.csproj
drwxr-xr-x   4 mike.hacker  staff   128 Mar 11 10:40 Data
drwxr-xr-x   8 mike.hacker  staff   256 Mar 11 10:40 Pages
-rw-r--r--   1 mike.hacker  staff   717 Mar 11 10:40 Program.cs
drwxr-xr-x   3 mike.hacker  staff    96 Mar 11 10:40 Properties
-rw-r--r--   1 mike.hacker  staff     0 Mar 11 10:42 READMD.md
drwxr-xr-x   7 mike.hacker  staff   224 Mar 11 10:40 Shared
-rw-r--r--   1 mike.hacker  staff  1753 Mar 11 10:40 Startup.cs
-rw-r--r--   1 mike.hacker  staff   392 Mar 11 10:40 _Imports.razor
-rw-r--r--   1 mike.hacker  staff   195 Mar 11 10:40 appsettings.Development.json
-rw-r--r--   1 mike.hacker  staff   192 Mar 11 10:40 appsettings.json
drwxr-xr-x   7 mike.hacker  staff   224 Mar 11 10:40 obj
drwxr-xr-x   4 mike.hacker  staff   128 Mar 11 10:40 wwwroot

Some of the key files are:

BlazorApp.csproj defines the app project and its dependencies.
Program.cs // the entry point for the app that starts the server.
Startup.cs // where you configure the app services and middleware.
App.razor // the root component for the app.
./Pages // contains some example web pages for the app.

Run the App

~$ dotnet watch run

Open Visual Studio Code and the C# extension installed. If VSCode asks to install the C# Extensions, click yes, we want those.

Screengrab of VSCode asking the user to install the C# Extension

Let’s take a look at the contents of the page that we are viewing at http://localhost:5000/

Screenshot of Blazor running in the web browser.

// Pages/Index.razor
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

Notice the first line above is prefixed with a double forward slash `//`. This is this C# comment syntax.

Part II

Add the CRUD functionality. Estimated time. 30 Minutes.

Additional Tooling

To install the Javascript Debugger Extension, perform the following steps:

  1. Open the extensions browser in Visual Studio Code by selecting the Extensions symbol on the leftmost pane. Or in Windows, select
  2. From the list of enabled extensions, select JavaScript Debugger (Nightly).
  3. To open the extensions settings, select and hold (or right-click) JavaScript Debugger (Nightly) and select Extension Settings.
  4. Scroll to the Debug > JavaScript Use Preview setting.
  5. Select Use the new in-preview JavaScript debugger for Node.js and Chrome.
Mike Hacker

Written by Mike Hacker, a Native Texan, who lives and works in the Austin/San Antonio, Texas area. You should follow him on Twitter