Building Applications with Blazor in .NET Core 3.1/.NET 5.0

Explore what Blazor is and why to use it, review hosting options, compare development environments, and build and review your first Blazor app from the out-of-the-box code.

Blazor provides a framework for building interactive client-side web UI with .NET, enabling a single-page application powered entirely by .NET on the ASP.NET Core version.

Compare Blazor hosting models: Web Assembly and Blazor Server, detailing static file hosting, Web API with JSON, and how server or client execution affects latency.

Choose your development environment for Blazor development, with Visual Studio Community edition, or use Visual Studio Code with the C# extension, JetBrains Rider, or any editor via the command line.

Open Visual Studio 2019, create a Blazor project from template, choose WebAssembly hosting with dotnet 3.1 or 5, and enable a hosted backend with a Web API and PWA boilerplate.

Explore how a Blazor WebAssembly app is generated, run, and examined, including home, counter, and fetch data weather forecast pages, and the client, server, and shared projects.

Create a Blazor app with the dotnet cli and generate the same client, server, and shared code as Visual Studio, using templates like blazorwasm, with --hosted and optional --auth none.

Learn what Blazor is and hosting models. Set up your development environment and build your app with Visual Studio or command line, then review generated code for animal shelter app.

Explore the basics of components in Blazor applications, learn how to determine necessary components, and gain hands-on experience building and enabling interaction between components.

Identify components as the building blocks of a Blazor UI, and implement rendering logic and event handling with Razor, HTML, and C#, composing navigation, forms, and cards.

Build your first Blazor component, AnimalCard, using one-way binding to display a dog or cat with an image, name, age, and gender, and expose the route /animal for testing.

Complete the assignment to create a product component in Blazor by binding properties in markup, testing with one-way binding using @, and viewing the result at the product route.

Create an animal overview component that lists shelter animals with an animal cart for each, passing data via parameters and iterating with Razor foreach in a Blazor app.

Build a product overview component in Blazor by converting the product list into a table, nesting components, and passing parameters, then add event handling.

Adopt an animal by raising an event from the animal card to the overview and remove it with change tracking. Use JavaScript interop to confirm deletion before updating the UI.

Explore building a delete-with-confirm workflow for a product list in Blazor using components, event callbacks, and JavaScript interop, updating the list after user confirmation.

Explore components, build four components, apply razor syntax for one-way data binding, events, and conditional logic; cover nested components, parameter parsing, routing, and forms in the next section.

Explore building forms in a Blazor browser app, learn form creation and validation, use parameters, and store in-memory data in a service registered via dependency injection.

Move animal data to a dedicated Blazor service by creating an interface and implementation, seeding animals, and registering a singleton service for shared access across components.

Move product data to a product service with list, get, add, and delete methods, seed data, and register it as a singleton; use it in the product overview.

Build an animal form in Blazor that binds inputs (name, date of birth, age, kind, gender, image) to a model, then create and navigate to the overview.

Build a product form in Blazor that supports create and edit flows, with bound name, price, fat percentage, and image URL, computes net price, and navigates to overview or details.

Implement data annotations to validate animal form inputs in Blazor, enforcing required fields, length, range, and URL validation, with a validation summary and per-field messages.

Add validation to the product form using data annotations, enforcing required fields (except net price), a name of at least three characters, and a fat percentage 0–50.

Learn to refine Blazor forms with validation, use grouped parameters and local data via a service, and integrate a custom service with dependency injection and lifetimes; future database integration awaits.

Learn how to build and integrate a backend Web API with Blazor, enabling server data storage and a smooth migration to WebAssembly.

Create the database and add animal tables using Entity Framework code-first with SQL Server, generate migrations, apply the changes, and seed initial data.

Add a product to the database by configuring EF Core with money type for price fields, adding a DbSet, seeding data, and exposing a Web API interface.

Create the animal and product web api to expose data via a controller and standard http verbs. Test and update data using Postman, and apply changes with entity framework.

Integrate a Web API into a Blazor animal service using HttpClientFactory, perform get/post/put/delete calls with GetFromJsonAsync, and manage base address and HttpClient lifetimes.

Inject the API client into the product service, convert methods to async, and use the product web API to fetch all products, a product, and support create, update, and delete.

Learn to build a backend web API, use IFFCO for data access in Place app, and communicate with the service via the HP client, while prioritizing security from start.

Learn to implement authentication in a blazer app and review the default generated security-focused authentication code from blazer templates, ensuring secure data flow between the app and the API backend.

Explore the generated security code for a Blazor app, covering authentication options, identity with identity server, login redirects, tokens, and cascading authentication state.

Secure animal components in Blazor by applying the authorize attribute to details and overview pages, guiding users to login or register as needed and access the user via claims principal.

Add authentication to product components by securing product overview and detail pages with the authorized attribute, and hide menu links from unauthenticated users to protect the Blazor app.

Secure the web API endpoints in a Blazor app by applying the authorize attribute and using a base authorization message handler with the HTTP client factory, redirecting on missing token.

Apply authentication and built-in security components to protect apps and APIs, guard components for unauthenticated use, and prepare your Blazor app for deployment in the next section.

Explore deploying a Blazor app end to end, from local development to Azure, including deploying SQL Server database and the API as an App Service.

Deploy a SQL Server database in Asia, configure firewall access, create a production connection string, and deploy the database using Entity Framework tools before deploying the API.

Deploy a Blazor app to Azure by creating a webapp app service, configuring subscription and region, and publishing from Visual Studio using a development identity server profile.

Deploy a Blazor app to Azure with a SQL Server database, an App Service, and release mode configuration using Visual Studio, and enable a CI/CD pipeline for automatic updates.

Build and deploy a Blazor app using components, forms with validation, JavaScript interop, and Azure deployment, securing both the app and its API.