Programming in Blazor - ASP.NET Core 5

Explore the Razor syntax that blends HTML and C# code, and learn to declare variables, implement conditionals and loops, and generate dynamic HTML in a Razor file.

Learn razor syntax in blazor web assembly by embedding c# expressions with @, declaring variables, displaying values, and wiring event handlers with explicit and lambda expressions.

Learn to define and use classes in Razor files, including local and shared entities, with using and imports, across client, server, and shared projects in a Blazor WebAssembly application.

Use the if conditional and asynchronous loading to simulate fetching a movies list, show a loading message during delay, then foreach over and display movies once loaded.

Explore how to render HTML from variables using the MarkupString type in Blazor, while managing security risks from arbitrary code and applying dynamic styling to items.

Explore how Razor syntax blends C# and HTML in a single file, enabling variable, method, and class declarations, loops, conditionals, and dynamic HTML rendering with MarkupString.

Explore how components form the heart of an application, including creation, parameters, renderer, fragments, and lifecycle. Discover interaction with JavaScript code and JavaScript isolation, plus CCIS isolation in Blazor components.

See how Blazor components receive data through parameters, including strings, dates, UI as Razor code, and methods; design reusable, decoupled components by passing data like a movies list.

Explore arbitrary parameters in Blazor components using IDictionary and CaptureUnmatchedValues, enabling attribute splatting and handling undeclared parameters like placeholder and disabled in a custom dummy textbox.

Learn to handle events in Blazor by wiring the on click event to a delete method for each movie and toggle delete button visibility with a checkbox and data binding.

Expose dynamic content in Blazor components by using RenderFragment parameters, with a child content convention and optional default content, supporting multiple render fragments and generic render fragments.

Build a reusable generic list component in Blazor using a type parameter T and a render fragment with context to render any item type, while handling empty or null lists.

Explore the blazor component life cycle by implementing OnInitialized, OnInitializedAsync, OnParametersSet, OnParametersSetAsync, OnAfterRender, and OnAfterRenderAsync with debug outputs, and observe ShouldRender controlling re-renders in a movies list.

Discover how dependency injection centralizes service configuration in Blazor, using constructor or property injection, and understand service lifetimes: scope, singleton, and transient, and how they behave across components.

Use partial classes to split HTML and C# in Blazor components, declaring the same class in separate files. Compile, organize, and use namespaces and inject attributes to keep code tidy.

Design and implement a persistent layout in Blazor, using the main layout component in the shared folder with @body rendering routable components, and configure routing in app.razor.

JavaScript isolation loads JavaScript modules on demand, loading them only when a user navigates to a component, and invokes them from C# to keep the global state clean and efficient.

Explore cascading parameters in Blazor by defining AppState values in a main layout, accessing them with cascading parameters, and propagating color and size across components.

Clean up a Blazor app by removing unused services and components, then implement a poster-based movie list with a horizontal layout, title shortening, and admin-specific actions to improve UI.

Define routing rules with the page directive to map components to urls. Routes must start with a slash, and a component can have multiple routes, such as / and /counter.

Learn to navigate programmatically with the NavigationManager by wiring a save movie flow to redirect to the movie details page, including route handling and parameter passing.

Learn how Blazor route parameters bind to url segments using an int movieId. Explore string route names, 404 behavior, and titles with dashes for movie details.

Learn how to implement lazy loading in Blazor by deferring assembly downloads until needed, loading the Massenet numerics library only when navigating to the counter component.

Create a Blazor form bound to a Genre model using EditForm and InputText to capture the genre name (ID auto-populated by the database), with validation to prevent empty submissions.

Learn how to implement model-level validations in Blazor with data annotations, including required attributes, on valid submit, and using EditForm, data annotations validator, and custom error messages.

Create a reusable image input component for a Blazor form that selects one image, converts it to base64, displays it, and notifies the parent via a callback.

Build an input markdown component in Blazor that renders markdown to the right of a text area, using a markdown library, with a live biography preview.

Create a movie form in Blazor by adding title, summary as markdown, in theaters flag, trailer id, release date, and poster with data validation and reusable inputs.

Learn to implement a many-to-many relationship between movies and genres with a reusable two-list multi-select component in Blazor, enabling in-memory selection and select all and individual selections.

Learn to implement a Blazor typeahead autocomplete component that provides actor name suggestions, supports selecting and reordering actors, shows loading states, and offers a customizable not-found render fragment.

Build a reusable Blazor component for a type-ahead multi-select with draggable reordering of selected items, using templates for results and list items, and demonstrate with actors like Tom Holland.

Explore building forms in Blazor using model-based validations with data annotations, implement data binding, and create reusable components with text boxes, plus dynamic elements like multiple selectors.

Create a database from your models using Entity Framework, mapping entities to tables in SQL Server; configure many-to-many relations, composite keys, and migrations via startup configuration and EF tools.

Learn to create and post genres using a centralized HTTP service with a generic HTTP response wrapper, a genre repository, and a server-side API controller that saves to the database.

Learn to create a people controller and repository in a Blazor ASP.NET Core 5 app, wire services, and test with sample entry before saving a picture in the next video.

Learn to upload and save an image to Azure storage from a Blazor app, using a storage service, containers for people and posters, and returning the image URL.

offers an alternative to Azure storage by saving images to the www root directory on the local computer, implemented via a local file storage service with dependency injection.

Create and submit a movie form by mapping selected genres and actors, add a temporary character field, and wire a movies repository with async API calls for movie details.

Learn to fetch full movie details in Blazor using a repository, including title, summary, poster, trailer, genres, and actors, with includes and serializer settings to avoid circular references.

Update movies by adding an edit flow that loads movie details and related actors. Create a dedicated update endpoint and wire it through the front end to submit changes.

Add a delete method to the repository interface and implement it in general repository and service class to enable deleting records via http delete across genre, person, and movie entities.

Implement server-side pagination in Blazor ASP.NET Core 5 by calculating total pages from the record count, enforcing records per page, and exposing results via a reusable helper and API response.

Create a reusable front-end pagination component in Blazor, with a radius-based visible page set, plus previous, next, and page selection to navigate data pages.

Use the key attribute to help Blazor's diffing algorithm distinguish items by identity. This fixes navigation errors, such as selecting Inception and seeing Spider-Man, by ensuring correct item ordering.

Use hdd client service to create a vb request class with configuration, build a database from models, store images as blobs, segment results, and filter or sort queries with core.

Configure a Blazor WebAssembly app to use authorization by implementing a dummy authentication state provider, exposing user claims and authentication status, and wiring cascading authentication state for authorized views.

Use AuthorizeView to conditionally render the user interface for authenticated versus anonymous users, and leverage claims (name, role) to customize content and hide buttons and menu items based on authorization.

Access the authentication state in a Blazor counter component using a cascading parameter to increment the counter when authenticated and decrement it when not, while inspecting user identity and claims.

Configure ASP.NET Core Identity with Entity Framework Core, create identity tables, and implement JWT-based authentication and authorization via an accounts controller.

Build authentication components in a Blazor app, including register, login, and logout, with a logging links component, accounts repository, and API calls for user tokens.

Learn how to implement automatic JWT renewal for a Blazor ASP.NET Core 5 app by adding a background timer that refreshes tokens before expiration, ensuring seamless user sessions.

Discover IdentityServer4 as a robust OpenID Connect and OAuth 2.0 authentication framework for Blazor apps, enabling single sign-on, external providers, and centralized authentication management.

Migrate the blazer movies app to identityserver4 by updating packages, configuring identity in startup, scaffolding identity pages, configuring the client, and aligning the front-end to authenticate via identity server.

Define identity and authentication states to verify user status with claims, using an authorized view component to tailor content. Grant permissions by role categories such as common users and admins.

Learn how to deploy a Blazor app with its web API in one place, evaluate cheaper client-only publishing versus full deployment, and automate publishing with Azure DevOps.

Deploy a Blazor app on Azure App Service using IdentityServer4, resolve production certificate setup by generating and uploading a self-signed certificate, and configure the identity store for secure token signing.

Learn to deploy a Blazor WebAssembly app to Azure Storage by enabling static website hosting, publishing the app, and uploading the static files with Storage Explorer.

Learn continuous delivery with Azure DevOps, automating build, test, and deployment to staging or production from the main branch, using GitHub pipelines and migrations.

Publish and host your ASP.NET Core Blazor app on IIS by installing the hosting bundle, publishing to a folder, configuring SQL Server access, and running migrations.

Deploy a Blazor application so end users can access it, either with or without its web API, and automate the deployment process to publish websites.

Learn how to register routable components from multiple Razor class library assemblies in a Blazor app using the router's additional assemblies feature.

Pass data to routable components using cascading parameters and cascading values in Blazor. Define and retrieve ancestor data across components for reusable code in dual architecture contexts.

Migrate the Blazor Movies components into a shared Razor class library to enable a dual architecture and reuse components across server-side and client-side Blazor applications.

Compare Blazor server side and Blazor web assembly to explain how code runs on the server versus the client, and describe initial load, scalability, and device considerations.

Create a Blazor server app, configure authentication, and explore the server-side structure with wwwroot, pages, and shared components, plus real-time web socket communication.

Discover how to use JavaScript in Blazor Server apps, avoiding initialization-time calls and using OnAfterRender with first render checks and a display message service for safe interop.

We adopt a dual architecture to share front-end code and a shared data access layer using entity framework core between blazor web assembly and blazor server side apps.

Prevent OnInitializedAsync from firing twice in Blazor server side by moving logic to OnAfterRenderAsync, run on first render, then call StateHasChanged to display data.

Implement the genres entity in the backend by building a repository, wiring it with dependency injection, and enabling crud operations through the controller.

Configure the people entity in Blazor ASP.NET Core 5 app, wiring a repository, AutoMapper, and dependency injection to support listing, retrieving, and updating people in Blazor WebAssembly and Server.

Explains migrating the movies and ratings entities to their repositories, implementing authentication-aware CRUD operations, includes for related data, and syncing updates across movie details, ratings, and UI components.

Deploy a Blazor server-side app to Azure App Service and configure Azure SignalR for real-time communication by setting the connection string and sticky mode, then publish and connect to database.