Blazor WebAssembly ByExample
Second Edition ,Toi B. Wright
Use practical projects to start building web apps with
.NET 7, Blazor WebAssembly, and C#
Chapter 1: Introduction to Blazor WebAssembly
Benefits of using the Blazor framework 2
.NET Framework
Open source
SPA framework
Razor syntax
Awesome tooling
Supported by Microsoft
Hosting models
Blazor Server
Advantages of Blazor Server
Disadvantages of Blazor Server
Blazor Hybrid
Advantages of Blazor Hybrid
Disadvantages of Blazor Hybrid
Blazor WebAssembly
Advantages of Blazor WebAssembly
Disadvantages of Blazor WebAssembly
Hosting model differences
What is WebAssembly? 11
WebAssembly goals • 11
WebAssembly support • 12
Setting up your PC 12
Installing Microsoft Visual Studio Community Edition • 14
Installing .NET 7.0 • 15
Installing Microsoft SQL Server Express • 16
Create a Microsoft Azure account • 17
Summary 18
Questions 19
Further reading 19
Chapter 2: Building Your First Blazor WebAssembly Application 21
Creating the Demo Blazor WebAssembly Project Technical Requirements 22
Razor components 22
Using components • 22
Parameters • 23
Required parameters • 24
Query strings • 24
Naming components • 26
Component life cycle • 26
Component structure • 26
Directives • 27
Markup • 28
Code block • 28
Routing 29
Route parameters • 29
Optional route parameters • 31
Catch-all route parameters • 31
Route constraints • 32
Table of Contents xi
Razor syntax 33
Inline expressions • 34
Control structures • 34
Conditionals • 34
Loops • 35
Hot Reload 37
Creating the Demo Blazor WebAssembly project 38
Project overview • 39
Getting started with the project • 39
Running the Demo project • 41
Examining the Demo project’s structure • 43
The Properties folder • 44
The wwwroot folder • 45
The App component • 47
The Shared folder • 48
The Pages folder • 48
The Client folder • 49
The _Imports.razor file • 49
Examining the shared Razor components • 50
The MainLayout component • 50
The NavMenu component • 52
The SurveyPrompt component • 53
Examining the routable Razor components • 53
The Index component • 53
The Counter component • 54
The FetchData component • 55
Using a component • 57
Modifying a component • 58
Adding a parameter to a component • 60
Using a parameter with an attribute • 61
xii Table of Contents
Adding a route parameter • 62
Using partial classes to separate markup from code • 63
Summary 64
Questions 64
Further reading 65
Chapter 3: Debugging and Deploying a Blazor WebAssembly App 67
Technical requirements 68
Debugging a Blazor WebAssembly.app 68
Debugging in Visual Studio 69
Debugging in the browser • 69
Understanding logging 72
Understanding log levels • 74
Setting the minimum log level • 76
Handling exceptions 77
Setting error boundaries • 79
Creating a custom error component • 81
Using ahead-of-time (AOT) compilation 83
Deploying a Blazor WebAssembly app to Microsoft Azure 83
Creating the “guess the number” project 89
Project overview • 90
Getting started with the project • 90
Adding a Game component • 93
Adding the code • 94
Adding a style sheet • 97
Setting up and playing the game • 98
Adding logging • 99
Debugging in Visual Studio • 100
Updating the code • 101
Debugging in the browser • 102
Table of Contents xiii
Adding an ErrorBoundary component • 104
Deploying the application to Microsoft Azure • 104
Summary 105
Questions 105
Further reading 106
Chapter 4: Building a Modal Dialog Using Templated Components 107
Technical requirements 108
Using RenderFragment parameters 108
Using EventCallback parameters 111
Understanding CSS isolation 112
Enabling CSS isolation • 113
Supporting child components • 116
Creating the modal dialog project 116
Project overview • 117
Getting started with the project • 117
Adding the Dialog component • 120
Add a CSS file • 121
Test the Dialog component • 122
Add EventCallback parameters • 124
Add RenderFragment parameters • 125
Create a Razor class library • 128
Test the Razor class library • 129
Add a component to the Razor class library • 130
Summary 131
Questions 131
Further reading 132
xiv Table of Contents
Chapter 5: Building a Local Storage Service Using JavaScript
Interoperability (JS Interop) 133
Technical requirements 134
Why use JavaScript? 134
Exploring JS interop 135
Loading JavaScript code • 135
Invoking a JavaScript function from a .NET method • 136
InvokeAsync • 137
InvokeVoidAsync • 139
IJSInProcessRuntime • 141
Invoking a .NET method from a JavaScript function • 142
Using local storage 146
Creating the local storage service 147
Project overview • 149
Getting started with the project • 149
Writing JavaScript to access local storage • 151
Adding the ILocalStorageService interface • 152
Creating the LocalStorageService class • 153
Creating the DataInfo class • 154
Writing to local storage • 155
Adding a collocated JavaScript file • 157
Reading from local storage • 158
Summary 159
Questions 160
Further reading 160
Chapter 6: Building a Weather App as a Progressive Web App (PWA) 161
Technical requirements 162
Understanding PWAs 162
HTTPS • 163
Table of Contents xv
Manifest files • 163
Service workers • 164
Working with manifest files 164
Working with service workers 166
Service worker life cycle • 166
Install • 167
Activate • 167
Fetch • 167
Updating a service worker • 167
Types of service workers • 169
Offline page • 169
Offline copy of pages • 169
Offline copy with offline page • 169
Cache-first network • 170
Advanced caching • 170
Background sync • 170
Using the CacheStorage API 170
Using the Geolocation API 172
Using the OpenWeather One Call API 173
Creating a PWA 175
Project overview • 176
Getting started with the project • 176
Add JavaScript to determine our location • 179
Invoke the JavaScript function • 180
Add an OpenWeather class • 183
Install Bootstrap • 184
Add a DailyForecast component • 186
Fetch the forecast • 187
Display the forecast • 189
Add the logo • 190
xvi Table of Contents
Add a manifest file • 190
Add a simple service worker • 192
Test the service worker • 195
Install the PWA • 198
Uninstall the PWA • 200
Summary 201
Questions 201
Further reading 202
Chapter 7: Building a Shopping Cart Using Application State 203
Technical requirements 204
Introducing the application state 204
Understanding DI 204
DI containers • 205
Service lifetimes • 205
Singleton • 206
Scoped • 206
Transient • 206
Creating the shopping cart project 207
Project overview • 208
Creating the shopping cart project • 208
Installing Bootstrap • 210
Adding a Store component • 213
Adding a Product class • 214
Finishing the Store component • 216
Demonstrating that the application state has been lost • 219
Creating the the ICartService interface • 220
Creating the CartService class • 221
Registering CartService in the DI container • 222
Injecting CartService into the Store component • 222
Table of Contents xvii
Adding the cart total to all the pages • 224
Using the OnChange method • 224
Summary 226
Questions 226
Further reading 226
Chapter 8: Building a Kanban Board Using Events 229
Technical requirements 230
Event handling 230
Lambda expressions • 232
Preventing default actions • 233
Focusing an element • 233
Attribute splatting 235
Arbitrary parameters 237
Creating the Kanban board project 239
Project overview • 240
Create the Kanban board project • 240
Install Bootstrap • 242
Add the classes • 244
Create the Dropzone component • 245
Add a stylesheet • 247
Create the Kanban board • 248
Create the NewTask component • 251
Use the NewTask component • 253
Summary 254
Questions 254
Further reading 255
Chapter 9: Uploading and Reading an Excel File 257
Technical requirements 258
Uploading files 258
xviii Table of Contents
Resizing images • 260
Handling multiple files • 263
Using virtualization 264
Rendering Local Data • 266
Rendering Remote Data • 267
Reading Excel files 268
Creating the Excel reader project 272
Project overview • 273
Create the Excel reader project • 273
Install the Open XML SDK • 276
Add the Medals class • 276
Upload the Excel file • 277
Read the Excel file • 279
Populate the medals collection • 281
Render the Medals collection • 284
Summary 285
Questions 286
Further reading 286
Chapter 10: Using Azure Active Directory to Secure a Blazor
WebAssembly Application 287
Technical requirements 288
Understanding the difference between authentication and authorization 288
Authentication • 289
Authorization • 291
Working with authentication 292
Controlling the user interface using authorization 294
The Authorize attribute • 294
The AuthorizeView component • 295
Creating the claims viewer project 298
Project overview • 299
Table of Contents xix
Create the claims viewer project • 299
Add the application to Azure AD • 301
Add a user and a group to Azure AD • 304
Add the required NuGet packages • 307
Enable authentication • 308
Add an Authentication component • 310
Add a LoginDisplay component • 311
Add a Secure component • 313
Add a WhoAmI component • 316
View the JSON Web Token (JWT) • 318
Add an authentication policy • 319
Summary 322
Questions 322
Further reading 322
Chapter 11: Building a Task Manager Using ASP.NET Web API 325
Technical requirements 326
Understanding hosted applications 326
Client project • 328
Server project • 328
Shared project • 328
Using the HttpClient service 328
Using JSON helper methods 329
GetFromJsonAsync • 330
PostAsJsonAsync • 331
PutAsJsonAsync • 332
HttpClient.DeleteAsync • 332
Creating the TaskManager project 333
Project overview • 333
Create the TaskManager project • 334
Adding the TaskItem class • 337
xx Table of Contents
Adding the TaskItem API controller • 337
Setting up SQL Server • 339
Install Bootstrap • 342
Displaying the tasks • 344
Completing the tasks • 346
Deleting tasks • 348
Adding new tasks • 350
Summary 351
Questions 352
Further reading 352
Chapter 12: Building an Expense Tracker Using the EditForm Component 353
Technical requirements 354
Creating a data entry form 354
Binding a form • 355
Submitting a form • 356
Using the built-in input components 357
InputCheckbox • 357
InputDate • 357
InputFile • 357
InputNumber • 358
InputRadio • 358
InputRadioGroup • 358
InputSelect • 358
InputText • 358
InputTextArea • 358
Using the validation components 359
Locking navigation 360
Creating the expense tracker project 362
Project overview • 364
Table of Contents xxi
Chapter 1 introduces the Blazor WebAssembly framework.
It explains the benefits of using the Blazor framework
and describes the differences between the three hosting models:
Blazor Server, Blazor Hybrid, and Blazor WebAssembly.
After highlighting the advantages of using the Blazor WebAssembly framework,
the goals and support options for WebAssembly are discussed.
Finally, it guides you through the process of setting up your computer
to complete the projects in this book.
By the end of this chapter,
you will be able to proceed to any of the other chapters in this book
Blazor WebAssembly is Microsoft’s new single-page application (SPA) framework
for building interactive web applications on .NET Framework.
Since it is built on .NET Framework, Blazor WebAssembly allows you
to run C# code on the client as well as the server.
Therefore, instead of being forced to write JavaScript on the client,
we can now use C# everywhere.
In this chapter,
we will explain the benefits of using the Blazor framework.
We will introduce the three different Blazor hosting models
and discuss both the advantages and disadvantages of each of them.
Also, we will discuss the goals of WebAssembly and share where it is supported.
Finally, we will guide you through the process of setting up your computer
to complete the projects in this book.
In this chapter, we will cover the following topics:
• Benefits of using the Blazor framework
• Hosting models:
• Blazor Server
• Blazor Hybrid
• Blazor WebAssembly
• Differences between the Blazor hosting models
• What is WebAssembly?
• Setting up your PC
Benefits of using the Blazor framework
Using the Blazor framework offers several benefits. For starters, it is a free and open-source framework
built on Microsoft’s robust and mature .NET Framework. Also, it is a SPA framework that
uses Razor syntax and can be developed using Microsoft’s exceptional tooling. Finally, Microsoft
is actively supporting and updating the Blazor framework. Let’s examine each of these benefits
in detail in the following sections.
.NET Framework
The Blazor framework is built on .NET Framework. Therefore, anyone familiar with .NET Framework
can quickly become productive using the Blazor framework. The Blazor framework leverages
the robust ecosystem of .NET libraries and NuGet packages from .NET Framework. Also, since the
code for both the client and server can be written in C#, the client and server can share code and
libraries. For example, the client and server can share the application logic used for data validation.
Open source
The Blazor framework is open source. Since Blazor is a feature of the ASP.NET framework, all the
source code for Blazor is available on GitHub as part of the dotnet/aspnetcore repository, which
is owned by the .NET Foundation. The .NET Foundation is an independent, non-profit organization
established to support the innovative, commercially friendly, open-source ecosystem around
the .NET platform. The .NET platform has a strong community of over 100,000 contributions
from more than 3,700 companies.
Since .NET Framework is free, this means that Blazor is also free. There are no fees or licensing
costs associated with using Blazor, including for commercial use.
SPA framework
The Blazor framework is a SPA framework. As the name implies, a SPA is a web app that consists
of a single page. The application dynamically rewrites the areas of the page that have changed
instead of loading an entirely new page in response to each UI update. The goal is faster transitions
that make the web app feel more like a native app.
When a page is rendered, Blazor creates a render tree that is a graph of the components on the
page. It is like the Document Object Model (DOM) created by the browser. However, it is a virtual
DOM. Updates to the UI are applied to the virtual DOM and only the differences between the
DOM and the virtual DOM are rendered by the browser.
Razor syntax
Razor is the ASP.NET view engine used to create dynamic web pages with C#. Razor is a syntax for
combining HTML markup with C# code that was designed for developer productivity. It allows
the developer to use both HTML markup and C# in the same file.
Blazor web apps are built using Razor components. Razor components are reusable UI elements
that contain C# code, markup, and other Razor components. Razor components are quite literally
the building blocks of the Blazor framework. For more information on Razor components, refer
to Chapter 2, Building Your First Blazor WebAssembly Application.
The name of the Blazor framework has an interesting origin story. The term Blazor is a combination
of the word browser and the word razor.
Awesome tooling
You can use either Microsoft Visual Studio or Microsoft Visual Studio Code to develop Blazor
applications. Microsoft Visual Studio is an integrated development environment (IDE), while
Microsoft Visual Studio Code is a lightweight, yet powerful, editor. They are both incredible tools
for building enterprise applications. As an added bonus, there are versions of both tools that are
available for free.
Supported by Microsoft
Although the Blazor framework is open source, it is maintained by Microsoft. They continue to
make large investments in the future of Blazor. The following list includes features that Microsoft
is actively working on adding to Blazor:
• Hot reload improvements
• Ahead-of-time (AOT) compilation performance improvements
• Authentication improvements
• Additional built-in components
• Multithreading
There are many benefits associated with using the Blazor framework to develop web applications.
Since it is built on .NET Framework, it enables developers to use the skills, such as C#, and the
tools, such as Visual Studio, that they have already mastered. Also, since it is a SPA framework,
Blazor web apps feel like native apps to the user. Finally, Microsoft is making a large investment
in the future of Blazor.
Hosting models
As we mentioned earlier, Razor components are the building blocks of Blazor applications. Where
those Razor components are hosted varies depending on the hosting model.
Blazor has three different hosting models:
• Blazor Server
• Blazor Hybrid
• Blazor WebAssembly
The first hosting model that Microsoft released was Blazor Server. In this hosting model, the Razor
components are executed on the server. The second hosting model that Microsoft released, and
the topic of this book, is Blazor WebAssembly. In this hosting model, the Razor components are
executed on the browser using WebAssembly. The newest hosting model is Blazor Hybrid. Blazor
Hybrid allows you to build native client apps by hosting the Razor components in an embedded
Web View control.
Each hosting model has its own advantages and disadvantages. However, they all rely upon the
same underlying architecture. Therefore, it is possible to write and test your code independently
of the hosting model.
Chapter 1 5
The major differences between the hosting models concern where the code executes, latency,
security, payload size, and offline support. The one thing that all the hosting models have in
common is the ability to execute at near native speed.
Blazor Server
As we just mentioned, the Blazor Server hosting model was the first hosting model released by
Microsoft. It was released as part of the .NET Core 3 release in September 2019.
The following diagram illustrates the Blazor Server hosting model:
Figure 1.1: Blazor Server
In this hosting model, the web app is executed on the server and only updates to the UI are sent
to the client’s browser. The browser is treated as a thin client and all the processing occurs on
the server. Therefore, this model requires a constant connection to the server. When using Blazor
Server, UI updates, event handling, and JavaScript calls are all handled over an ASP.NET Core
SignalR connection.
Advantages of Blazor Server
There are a few advantages of using Blazor Server versus using Blazor WebAssembly. However,
the key advantage is that everything happens on the server. Since the web app runs on the server,
it has access to everything on the server. As a result, security and data access are simplified. Also,
since everything happens on the server, the assemblies (DLLs) that contain the web app’s code
remain on the server.
Another advantage of using Blazor Server is that it can run on thin clients and older browsers,
such as Internet Explorer, that do not support WebAssembly.
Finally, the initial load time for the first use of a web app that is using Blazor Server can be much
less than that of a web app that is using Blazor WebAssembly because there are much fewer files
to download.
Disadvantages of Blazor Server
The Blazor Server hosting model has several disadvantages versus Blazor WebAssembly. The biggest
disadvantage is that the browser must maintain a constant connection to the server. Since
there is no offline support, every single user interaction requires a network roundtrip. As a result
of all these roundtrips, Blazor Server web apps have higher latency than Blazor WebAssembly
web apps and can feel sluggish. Also, network interruptions may cause a client to unexpectedly
disconnect.
Another disadvantage of using Blazor Server is that it relies on SignalR for every single UI update.
Microsoft’s support for SignalR has been improving, but it can be challenging to scale. When too
many concurrent connections to the server are open, connection exhaustion can prevent other
clients from establishing new connections.
Finally, a Blazor Server web app must be served from an ASP.NET Core server.
Blazor Hybrid
The Blazor Hybrid hosting model is the most recent hosting model released by Microsoft. It was
released as part of the .NET 6 release in November 2021.
The following diagram illustrates the Blazor Hybrid hosting model:
Figure 1.2: Blazor Hybrid
In this model, the Razor components run in an embedded Web View control. Blazor Hybrid apps
include Windows Forms, WPF, and .NET MAUI apps. By using the Blazor Hybrid hosting model,
your apps have full access to the native capabilities of the devices that you choose to target.
Advantages of Blazor Hybrid
The advantage of using this model versus Blazor WebAssembly is that it does not require Web-
Assembly. Also, since the component’s C# code is executed in the host process, the Blazor Hybrid
apps have access to the native capabilities of the device.
Disadvantages of Blazor Hybrid
The major disadvantage of using Blazor Hybrid is that they are hosted in a Web View component
in the native app. So, the developer must know how to develop each type of native client app that
they want to target. Another disadvantage is that they usually require a server to deliver the app.
In contrast, a Blazor WebAssembly app can be downloaded as a set of static files.
Blazor WebAssembly
The Blazor WebAssembly hosting model is the topic of this book.
Blazor WebAssembly 3.2.0 was released in May 2020.
Blazor WebAssembly in .NET 5 was released
as part of the .NET 5.0 release in November 2020.
ASP.NET Core Blazor was released
as part of the .NET 6.0 release in November 2021,
and it is a long-term support (LTS) release.
The most recent release of Blazor WebAssembly was released
as part of the .NET 7 release in November 2022.
This book will be using Blazor WebAssembly
in .NET 7 for all the projects.
The following diagram illustrates the Blazor WebAssembly hosting model:
In this hosting model,
the web app is executed on the browser.
For both the web app and the .NET runtime to run on the browser,
the browser must support WebAssembly.
WebAssembly is a web standard supported by all modern browsers,
including mobile browsers.
While Blazor WebAssembly itself does not require a server,
the web app may require one for data access and authentication.
In the past,
the only way to run C# code on the browser was to use a plugin,
such as Silverlight.
Silverlight was a free browser plugin provided by Microsoft.
It was very popular until Apple decided to forbid
the use of any browser plugins on iOS.
As a result of Apple’s decision, Silverlight was abandoned by Microsoft.
Advantages of Blazor WebAssembly
Blazor WebAssembly has many advantages.
1. since it runs on the browser,
it relies on client resources instead of server resources.
Therefore, the processing is offloaded to the client.
2. Also, unlike Blazor Server,
there is no latency due to each UI interaction requiring a roundtrip to the server.
3. Blazor WebAssembly can be used to create a Progressive Web App (PWA).
A PWA is a web app that looks and feels like a native application.
They provide offline functionality, background activity, native API layers,
and push notifications.
They can even be listed in the various app stores.
By configuring your Blazor WebAssembly app as a PWA,
your app can reach anyone, anywhere, on any device with a single code base.
For more information on creating a PWA, refer to Chapter 6,
Building a Weather App as a Progressive Web App (PWA).
4. a Blazor WebAssembly web app does not rely on an ASP.NET Core server.
In fact, it is possible to deploy a Blazor WebAssembly web app
via a Content Delivery Network (CDN).
Disadvantages of Blazor WebAssembly
To be fair, there are some disadvantages
when using Blazor WebAssembly that should be considered.
For starters,
when using Blazor WebAssembly, the .NET runtime,
the dotnet.wasm file, and your assemblies need to be downloaded
to the browser for your web app to work.
Therefore, the first time you run a Blazor WebAssembly application
it usually takes longer to initially load than an identical Blazor Server application.
However, there are strategies that you can use to speed up the initial load time,
such as deferring the loading of some of the assemblies until they are needed.
Also, this is only an issue during the initial load
since subsequent runs of the application will access the files from a local cache.
Another disadvantage of Blazor WebAssembly web apps is
that they are only as powerful as the browser that they run on.
Therefore, thin clients are not supported.
Blazor WebAssembly can only run on a browser that supports WebAssembly.
Luckily, due to a significant amount of coordination
between the World Wide Web Consortium (W3C) and engineers from Apple, Google,
Microsoft, and Mozilla, all modern browsers support WebAssembly.
Hosting model differences
The following table indicates the differences between the three models:
The Blazor framework provides three different hosting models,
Blazor Server, Blazor Hybrid, and Blazor WebAssembly.
A Blazor Server web app runs on the server
and uses SignalR to serve the HTML to the browser.
A Blazor Hybrid web app runs in a Web View control in the native app.
A Blazor WebAssembly web app runs directly in the browser using WebAssembly.
They each have their advantages and disadvantages.
However,
if you want to create interactive, highly responsive,native-like web apps
that can work offline, we recommend Blazor WebAssembly.
Let’s learn more about WebAssembly in the next section.
What is WebAssembly?
WebAssembly is a binary instruction format
that allows code written in high-level languages,
such as C#, to run on the browser at near-native speed.
To run .NET binaries in a web browser,
it uses a version of the .NET runtime
that has been compiled to WebAssembly.
You can think of it as executing natively compiled code in a browser.
WebAssembly is an open standard
developed by a W3C Community Group.
It was originally announced in 2015, and the first browser
that supported it was released in 2017.
WebAssembly goals
When WebAssembly was originally being developed,
there were four main design goals for the project.
This is a list of the original goals for WebAssembly:
• Fast and efficient
• Safe
• Open
• Don’t break the web
WebAssembly is fast and efficient.
It is designed to allow developers to write code in any language
that can then be compiled to run in the browser.
Since the code is compiled, it is fast and performs at near-native speed.
WebAssembly is safe.
It does not allow direct interaction with the browser’s DOM.
Instead, it runs in its own memory-safe, sandboxed execution environment.
You must use JavaScript interop to interact with the DOM.
The project in Chapter 5, Building a Local Storage Service Using JavaScript
Interoperability (JS interop), will teach you how to use JavaScript interop.
WebAssembly is open.
Although it is a low-level assembly language,
it can be edited and debugged by hand.
WebAssembly didn’t break the web.
It is a web standard that is designed to work with other web technologies.
Also, WebAssembly modules can access the same Web APIs
that are accessible from JavaScript.
Overall,
WebAssembly was able to meet all of the original goals
and rapidly gained support from all of the modern browsers.
WebAssembly support
As mentioned earlier,
WebAssembly runs on all modern browsers, including mobile browsers.
As you can see from the following table,
all current versions of the most popular browsers are
compatible with WebAssembly:
WebAssembly is a web standard
that allows developers to run code written in any language in the browser.
It is supported by all modern browsers.
Now that we have discussed the benefits of
using the Blazor framework and compared the various hosting models,
it’s time to start developing using the Blazor WebAssembly framework.
However, before we can get started, you need to set up your PC.
Setting up your PC
For the projects in this book, we use
Microsoft Visual Studio Community 2022,
.NET 7,
Microsoft SQL Server 2022 Express Edition, and
Microsoft Azure.
All the projects are built using
Microsoft Visual Studio Community 2022 (64-bit)
– Current Version 17.4.2 with the ASP.NET and Web Development workload.
If you need to install Microsoft Visual Studio Community 2022,
follow the directions in the Installing Microsoft Visual Studio
Community Edition section later in this chapter.
Blazor WebAssembly in .NET 7 requires .NET 7.0.
To determine the version of .NET that is running on your computer,
open Command Prompt and enter the following command:
dotnet –-versionIf your computer is not running .NET 7.0 or higher,
follow the directions in the Installing .NET 7.0 section later in this chapter.
Chapters 3 and 10 use Microsoft Azure.
Chapter 3 uses Microsoft Azure to publish a Blazor WebAssembly application and
Chapter 10 uses Microsoft Azure Active Directory to secure a Blazor
WebAssembly application.
The final two projects in this book
use Microsoft SQL Server 2022 Express Edition as the backend database.
If you need to install Microsoft SQL Server Express Edition,
follow the directions in the Installing Microsoft SQL Server Express section
later in this chapter.
Installing Microsoft Visual Studio Community Edition
Microsoft Visual Studio Community Edition is
the free edition of Microsoft Visual Studio.
To install Microsoft Visual Studio Community Edition,
perform the following steps:
1. Download the Visual Studio installer from https://visualstudio.microsoft.com.
2. Once the download is complete, run the installer to complete the installation.
3. During the first step in the installation process, the Visual Studio installer will check the
system for existing versions of Visual Studio. Once the installer has finished checking for
installed versions, it will open the following installation dialog:
4. Select the ASP.NET and web development workload
and click the Install button to complete the installation.
Installing .NET 7.0
To install .NET 7.0, perform the following steps:
1. Download the .NET 7.0 installer from https://dotnet.microsoft.com/download/dotnet/7.0.
We are using the Windows x64 SDK Installer.
2. Once the download completes,
run the installer to complete the installation of .NET 7.0 on your computer.
3. Open Command Prompt and enter the following command
to verify that your computer is now running .NET 7.0:
dotnet –-version
The following screenshot is from a computer that is running .NET 7.0:
Figure 1.6: .NET version
Installing Microsoft SQL Server Express
Microsoft SQL Server Express is the free edition of Microsoft SQL Server. To install Microsoft SQL
Server Express, do the following:
1. Download the Microsoft SQL Server installer for SQL Server Express from https://www.
microsoft.com/en-us/sql-server/sql-server-downloads.
2. After the download completes, run the SQL Server installer.
3. Select the Basic installation type:
Figure 1.7: The SQL Server installer
4. Click the Accept button to accept the Microsoft SQL Server License Terms.
5. Click the Install button to complete the installation.
Chapter 1 17
The following screenshot shows the dialog that appears after SQL Server Express has
been successfully installed:
Figure 1.8: SQL Server Express Edition
Create a Microsoft Azure account
Microsoft Azure is Microsoft’s cloud platform and it offers over 200 products and cloud services.
You can use it to run and manage applications with the tools and frameworks of your choice.
If you do not already have a Microsoft Azure account, you can create a free account. Each free
account comes with a generous $200 credit to get you started and over 55+ free services.
18 Introduction to Blazor WebAssembly
Figure 1.9: Microsoft Azure
To create a free Microsoft Azure account, do the following:
1. Navigate to the Microsoft Azure page, https://azure.microsoft.com/.
2. Click the Free account button.
3. Click the Start free button.
4. Complete the agreement and click the Sign up button.
To complete all the projects in this book, you will need a code editor, such as Microsoft Visual
Studio Community 2022, .NET 7.0, Microsoft Azure, and Microsoft SQL Server. In this chapter,
we showed you how to install Visual Studio 2022 Community Edition, .NET 7.0, and SQL Server
2022 Express Edition. We also showed you how to open a free Microsoft Azure account.
Summary
After completing this chapter, you should understand the benefits of using Blazor WebAssembly
versus other Blazor hosting models and be prepared to complete the projects in this book.
In this chapter, we introduced the Blazor framework. The Blazor framework is built on .NET
Framework and allows web developers to use C# on both the client and the server of a web app.
After that, we compared Blazor WebAssembly with both Blazor Server and Blazor Hybrid. All
three hosting models are used to host Razor components. They each have their own advantages
and disadvantages. We prefer Blazor WebAssembly.
Chapter 1 19
In the last part of the chapter, we explained how to set up your computer with Microsoft Visual
Studio Community Edition, .NET 7.0, and Microsoft SQL Server Express and how to open a
Microsoft Azure account, all of which are required to complete the projects in this book.
Now that your computer is set up to complete the projects in this book, it is time to get started.
In the next chapter, you will create your first Blazor WebAssembly web app.
Questions
The following questions are provided for your consideration:
1. Which of the following hosting models requires a constant connection to a server: Blazor
WebAssembly, Blazor Server, or Blazor Hybrid?
2. Does using Blazor WebAssembly mean that you will never need to write JavaScript ever
again?
3. Does Blazor WebAssembly require any plugins to be installed on the browser?
4. How much does it cost to get started developing with Blazor WebAssembly?
Further reading
The following resources provide more information concerning the topics in this chapter:
• For more information on Blazor, refer to https://blazor.net.
• For more information on the .NET Foundation, refer to https://dotnetfoundation.org.
• For more information on the ASP.NET repository on GitHub, refer to https://github.
com/dotnet/aspnetcore.
• For general information on WebAssembly, refer to https://webassembly.org.
• For more information on browser compatibility with WebAssembly, refer to https://
caniuse.com/?search=wasm.
• For more information on Razor Pages, refer to https://learn.microsoft.com/en-us/
aspnet/core/razor-pages.
댓글