Microsoft Blazor: Building Web Applications in .NET

By Peter Himschoot

Build web applications in C# and Microsoft .NET that run in any modern browser. This second edition is updated to work with the release version of Blazor and covers Blazor’s use in creating both server-side and WebAssembly Blazor applications. Developers are able to use all their experience in .NET along with thousands of existing libraries, right in the browser. 
There is important new coverage in this edition on the new and improved Razor syntax, how to easily validate user input with Blazor validation, and how to build complex interacting components with Cascading Properties and Templated Components. You will learn how to build user interfaces and present data to a user for display and modification, capturing the user’s changes via data binding. The book shows you how to access a rich library of .NET functionality such as a component model for building a composable user interface, including how to develop reusable components that can be used across many pages and websites. Also covered is data exchange with a server, giving you access to microservices and database services. 
Blazor provides a fresh take on web development by eliminating the need for you to learn different languages and frameworks for client- and server-side development. Blazor allows C# and .NET to be used on all sides, providing a robust feature set that is well suited toward scalable, enterprise-level applications. This book gets you started using this important new toolkit for web application development.

What You Will Learn

• Build user interfaces and display data for users to edit
  
• Capture the user’s changes via data binding
  
• Transfer data back and forth between server and client
  
• Communicate with microservices and database services
  
• Develop reusable components and assemble them into bigger components
  
• Use routing to build single-page applications (SPAs)
  
• Build Blazor libraries that are reusable across applications

Who This Book Is For
Experienced .NET developers who want to apply their existing skills toward building professional-quality, client-side web applications that run in any browser. The book is for web developers who want to step away from JavaScript and its complexities, and instead use a proven technology (.NET) that is robust toward creating enterprise-quality applications that scale and are reliable, that provide good user experience. 

• Language: English
• Publisher: Apress
• Release date: May 29, 2020
• ISBN: 9781484259283

Book preview

© Peter Himschoot 2020

P. HimschootMicrosoft Blazorhttps://doi.org/10.1007/978-1-4842-5928-3_1

1. Your First Blazor Project

Peter Himschoot¹ 

(1)

Melle, Belgium

Getting hands-on is the best way to learn. In this chapter, you’ll install the prerequisites to developing with Blazor. These include Visual Studio along with some needed extensions. Then you’ll create your first Blazor project in Visual Studio, run the project to see it work, and finally inspect the different aspects of the project to get a lay of the land view for how Blazor applications are developed.

I learned an important lesson from the first edition of this book: Never underestimate the speed at which Microsoft innovates! All code samples in the first edition of Blazor Revealed became invalid quite rapidly. I do not expect this to happen again with this edition since it is based on the Release To Manufacture (RTM) version of Blazor. If something does not work, simply consult the sources that come with this book. I will keep these up to date.

The source code for this book is available on GitHub via the book’s product page, located at www.apress.com/9781484259276.

Installing Blazor Prerequisites

Working with Blazor requires you to install some prerequisites so in this section, you will install what is needed to get going.

.NET Core

Blazor runs on top of .NET Core , providing the web server for your project which will serve the client files that run in the browser and run any server-side APIs that your Blazor project needs. .NET Core is Microsoft’s cross-platform solution for working with .NET on Windows, Linux, and OS X.

You can find the installation files at www.microsoft.com/net/download. Look for the latest version of the .NET Core SDK (you’ll need at least version 3.1). Download the installer, then simply run it and accept the defaults.

Verify the installation when the installer is done by opening a new command prompt and typing the following command:

dotnet --version

Look for the following output to indicate that you installed the correct version. The version number should be at least 3.1.201.

Should the command’s output show an older version (e.g., 2.1.200), you will need to download and install a more recent version of .NET Core SDK.

Visual Studio 2019

Visual Studio 2019 (from now on I will refer to Visual Studio as VS) is one of the integrated development environments (IDE) we will use throughout this book. The other IDEs will be Visual Studio Code and Visual Studio for Mac. With either one, you can edit your code, compile it, and run it all from the same application. The code samples are also the same. However, VS only runs on Windows, so if you’re using another OS, please continue to the section Visual Studio Code. All samples should also work fine with Visual Studio for Mac.

Download the latest version of Visual Studio 2019 from www.visualstudio.com/downloads/.

Run the installer and make sure that you install the ASP.NET and web development role as shown in Figure 1-1.

../images/469993_2_En_1_Chapter/469993_2_En_1_Fig1_HTML.jpg

Figure 1-1

The Visual Studio Installer Workloads selection

After installation, run Visual Studio from the Start menu. Then open the Help menu and select About Microsoft Visual Studio. The About Microsoft Visual Studio dialog window should specify at least version 16.6.0 as illustrated in Figure 1-2. I am currently using the latest preview version of Visual Studio 2019, but by the time you are reading this, Visual Studio 16.6.0 should be out for general release.

../images/469993_2_En_1_Chapter/469993_2_En_1_Fig2_HTML.jpg

Figure 1-2

About Microsoft Visual Studio

Visual Studio Code

Visual Studio Code is a free, modern, cross-platform development environment with an integrated editor, git source control, and debugger. The environment has a huge range of extensions available allowing you to use all kinds of languages and tools directly from Code. So, if you don’t have access to (because you’re running a non-Windows operating system or you don’t want to use) Visual Studio, use Code.

Download the installer from www.visualstudio.com. Run it and simply choose the defaults.

After installation, I do advise you to install a couple of extensions for Code, especially the C# extension. Start Code, and at the left side, select the Extensions tab as shown in Figure 1-3.

../images/469993_2_En_1_Chapter/469993_2_En_1_Fig3_HTML.jpg

Figure 1-3

Visual Studio Code Extensions tab

You can search for extensions, so start with C# which is the first extension from Figure 1-4. This extension will give you IntelliSense for the C# programming language and .NET assemblies. You will probably get a newer version listed so take the latest.

Click install.

../images/469993_2_En_1_Chapter/469993_2_En_1_Fig4_HTML.jpg

Figure 1-4

C# for Visual Studio Code

Installing the Blazor Templates for VS/Code

Throughout this book, we will create several different Blazor projects. Not all of them can be created from Visual Studio or Code, meaning you’ll need to install the templates for Blazor projects . This section’s example shows how to install those templates from the .NET Core command-line interface, also known as the .NET Core CLI. You should have this command-line interface as part of your .NET Core installation.

Open a command line on your OS, and type the following to install the templates from NuGet:

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates

These templates will allow you to quickly generate projects and items. Verify the installation by typing the following command:

dotnet new –-help

This command will list all the templates that have been installed by the command-line interface. You will see four columns. The first shows the template’s description, the second column displays the name, the third lists the languages for which the template is available, and the last shows the tags, a kind of group name for the template. Among those listed are the following:

Razor Component                           razorcomponent

Blazor Server App                         blazorserver

Blazor WebAssembly App                    blazorwasm

Razor Class Library                       razorclasslib

Generating Your Project with Visual Studio

With Blazor projects, you have a couple of choices. You can create a stand-alone Blazor project (using the blazorwasm template) that does not need server-side code. This kind of project known as Blazor WebAssembly has the advantage that you can simply deploy it to any web server which will function as a file server, allowing browsers to download your site just like any other site.

Or you can create a hosted project (adding the --hosted option) with client, server, and shared code. This kind of Blazor WebAssembly project will require you to host it where there is .NET Core 3.1 support because you will execute code on the server as