Building a Web App with Blazor

and ASP.NET Core

04/24/2025 2
 What is Blazor?

Blazor is a framework for building interactive web UIs with C# instead of
JavaScript.

The name Blazor comes from "Browser" + "Razor" (the .NET templating
engine).

It supports two hosting models:

Blazor Server: Runs on the server, with UI interactions handled over a
SignalR connection.

Blazor WebAssembly (WASM): Runs entirely on the client, compiled into
WebAssembly.

04/24/2025 3
 Blazor Key Features

C# Everywhere: Write client and server code in C#.

Reusable Components: Build UIs using components that can be reused across
pages and projects.

Full-Stack .NET: Share libraries, models, and validation logic between the client
and server.

Dependency Injection: Built-in support for dependency injection to manage
services.

Routing: Built-in routing support for creating Single Page Applications (SPAs).

04/24/2025 4
 ASP.NET Core Blazor

ASP.NET Core Blazor is an open-source web framework for building interactive
web UIs using C# and HTML.

Purpose: It enables developers to create single-page web applications (SPA)
with rich interactivity and real-time updates.

Key Features:

Utilizes WebAssembly to run C# code in the browser.

Supports both client-side (WebAssembly-based) and server-side rendering
models.

Provides a component-based architecture for building reusable UI
components.

04/24/2025 5
 ASP.NET Core Blazor

ASP.NET Core Blazor is a powerful framework for building interactive web
UIs using C# and HTML.

Blazor has gained traction among developers for its simplicity,
productivity, and flexibility.

Microsoft continues to invest in Blazor, with ongoing updates and
improvements to the framework and tooling.

04/24/2025 6
 Two Rendering Modes in Blazor

Client-side Rendering:

C# code runs in the browser via WebAssembly.

Entire application is downloaded to the client's browser and executed locally.

Suitable for scenarios requiring offline support or when server interaction is
minimal.

Server-side Rendering:

C# code runs on the server.

UI updates are sent to the client over a SignalR connection.

Reduces initial download size and supports older browsers.

Provides centralized logic and security on the server.

04/24/2025 7
 Hosting Models Comparison

Feature Blazor Server Blazor WebAssembly

Execution Runs on the server Runs in the browser

Performance Low latency but requires a persistent High latency for large initial
connection download but no server interaction
after load

Use Case Internal apps, reliable networks

04/24/2025 8
 Benefits of ASP.NET Core Blazor

Single Language: Developers can build entire web applications using C#
and HTML, reducing the need for multiple languages.

Reusability: Components can be reused across different parts of the
application, leading to code efficiency and consistency.

Full-stack Development: Blazor enables full-stack development with .NET,
allowing developers to use the same language and framework for both
client and server code.

Performance: Client-side rendering offers fast and responsive user
experiences, while server-side rendering provides efficient resource
utilization and scalability.


04/24/2025 9
 Build web app with ASP.NET Core Blazor


04/24/2025 10
 Build web app with ASP.NET Core Blazor

Program.cs is the entry point for the app that starts the server and where you
configure the app services and middleware.

Inside the Components directory:

App.razor is the root component for the app.

Routes.razor configures the Blazor router.

The Pages directory contains some example web pages for the app.

BlazorApp.csproj defines the app project and its dependencies and can be
viewed by double-clicking the BlazorApp project node in the Solution Explorer.

The launchSettings.json file inside the Properties directory defines different
profile settings for the local development environment. A port number is
automatically assigned at project creation and saved on this file.
04/24/2025 11
 Project Structure

A typical Blazor Web App consists of:

Pages Folder: Contains Razor components/pages (e.g., Index.razor,
FetchData.razor).

Shared Folder: Holds shared components (e.g., NavMenu.razor).

wwwroot: Contains static files like CSS, JavaScript, and images.

_Imports.razor: Commonly used namespaces are declared here.

Program.cs: Sets up the application and configures services.

04/24/2025 12
 Blazor Component - 1

A Blazor Component is the fundamental building block of a Blazor application.

It represents a piece of the user interface (UI) in the form of reusable, self-
contained code written using Razor syntax (a blend of HTML and C#).

Components are used to build dynamic, interactive web pages and applications
in Blazor.

Basic Structure of a Blazor Component - A Blazor component is typically
defined in a .razor file.

Once you create a component, can use it in other components or pages by
referencing its name. If you created a component named MyComponent.razor,
you can use it like this: <MyComponent />

04/24/2025 13
 Blazor Component - 2

Reusable UI Units:

Components can be used multiple times across different pages or projects.

They encapsulate the rendering logic and behavior.

Razor syntax allows you to combine HTML markup with C# code seamlessly.

Data can be passed into a component using parameters, allowing components
to be more dynamic and configurable.

Components handle user interactions like button clicks and form submissions.

Components support one-way and two-way data binding to synchronize the UI
with data.

04/24/2025 14
 Advanced Features of Components

Parent-Child Relationships

Components can have child components, and data can flow between them.

Cascading Values

Share data between nested components using cascading parameters.

Dynamic Rendering

Render components dynamically using RenderFragment.

04/24/2025 15
 Build web app with ASP.NET Core Blazor


04/24/2025 16
 Build a simple Todo list with Blazor - 1

Choose Blazor Web App

04/24/2025 17
 Build a simple Todo list with Blazor - 2

Choose .NET 8 Framework for Blazor Web App

04/24/2025 18
 Build a simple Todo list with Blazor - 3

The Blazor Web App with wwwroot, Components and Program.cs

04/24/2025 19
 Build a simple Todo list with Blazor - 4

Add Razor Component

04/24/2025 20
 Build a simple Todo list with Blazor - 5

Add a menu item for todo function

04/24/2025 21
 Build a simple Todo list with Blazor - 6

Add a menu item for todo function and create class TodoItem.cs

04/24/2025 22
 Build a simple Todo list with Blazor - 7

Add an AddTodo method to the
Todo component and register the
method for the button using the
@onclick attribute.

The AddTodo C# method is called
when the button is selected.

04/24/2025 23
 Build a simple Todo list with Blazor - 8

Run Blazor App

04/24/2025 24
 Build a Blazor movie database app - 1

Select Blazor Web App from the list of project templates..

Create a project named BlazorWebAppMovies

04/24/2025 25
 Build a Blazor movie database app - 2

Create Movie model class

04/24/2025 26
 Build a Blazor movie database app - 3

Add New Scaffolded Item

04/24/2025 27
 Build a Blazor movie database app - 4

Add Razor Components using Entity Framework (CRUD)

04/24/2025 28
 Build a Blazor movie database app - 5

Code generated in Program.cs

04/24/2025 29
 Build a Blazor movie database app - 6

Change the Connection string in appsettings.json


dotnet ef migrations add “InitialDB”

dotnet ef database update

04/24/2025 30
 Build a Blazor movie database app - 7

Run the Blazor Web App with CRUD - Movie

04/24/2025 31
 Build a Blazor movie database app - 8


04/24/2025 32
Summary

Concepts were introduced:

ASP.NET Core with Blazor

Key Features

Blazor Component

Blazor Hosting Models Comparison

Build a Blazor Web App

Build a Blazor Web App with Entity Framework Core

33