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.

Master looping in blazor using foreach to render a movies list with titles and release dates, and for to access indices with a ternary background for even and odd items.

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.

Learn to build and reuse Razor components in Blazor, encapsulating UI and logic, expose reusable movie lists, and use shared components with non-routable design.

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.

Data binding in Blazor synchronizes a textbox with a variable for two-way updates using @bind. See examples with a textbox and a checkbox that reflect changes to currentCount and displaybuttons.

Learn how to pass methods as parameters using EventCallback in Blazor, enabling a child component's events to invoke a parent method (e.g., delete a movie) with a passed argument.

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.

Register an interface-based repository and implement it with an in-memory class to decouple data from the component, then inject it via dependency injection to align with the dependency inversion principle.

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.

Learn to invoke JavaScript from Blazor using IJSRuntime, including confirm dialogs, console logging, and custom JavaScript functions via extension methods and a helper class.

Learn to invoke static C# methods from JavaScript in a Blazor app by using JSInvokable, DotNet.invokeMethodAsync, and IJSRuntime to call a static get current count from JS.

Mark the C# instance method as JSInvokable and expose it to JavaScript. Create a dotnet object reference and use dotnet helper to invoke the increment count method from JS.

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 how css isolation applies styling rules to a single component, such as the counter component, and see that component-scoped rules override global styles.

Grab a component reference with @ref and store it as a field. Invoke its methods or read properties from C# in a confirmation component.

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.

Master Blazor WebAssembly debugging by setting breakpoints, configuring launch settings, and stepping through code in Visual Studio to inspect variables, HTTP requests, and server-side controllers.

Explore using timers in Blazor WebAssembly to drive a rock, paper, scissors game and dispose resources with IDisposable, updating the UI via StateHasChanged.

Explore components that divide apps into visual and logical parts, using parameters, events, and data binding. Learn render fragments, life cycle, initialize parameters, dependency injection, javascript isolation, and css isolation.

Learn to implement routing and navigation in Blazor apps by configuring the router, exploring route parameters and restrictions, and enabling lazy loading to delay the download of the urls.

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 how App.razor wires routing with the Router, customize the not found message, and build routable components with layouts, plus creating movie, person, and genre pages and a details view.

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 the navlink component highlights the active menu item with an active class, using NavLinkMatch.All or Prefix, in a Blazor app for navmenu items.

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.

Learn how directives configure components for routes, layouts, and redirects, read component parameters, define manual links for the US, and apply lazy loading to improve performance.

learn to build forms in blazor using editform component and attribute validations, then create a movie filter with dropdowns and checkboxes, and work with dates, images, markdowns, and multiple selectors.

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.

Build a reusable genre form component in Blazor to power both create and edit workflows, wire OnValidSubmit callbacks, and verify updates by testing in the browser.

Develop a Blazor movie filter component that searches by title, genre, and status (in theaters or upcoming) using horizontal form with bound inputs and enter key press to display results.

Create a reusable person form in Blazor by building a person entity, implementing a shared edit form, validating with data annotations, and wiring create and edit workflows with OnValidSubmit.

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.

Learn backend communication with a web API using the ATP client class, configure entity framework, create databases from code, and manage data with updates, deletes, image saves, filters, and sorting.

Explore the HttpClient service in Blazor to perform Get, Post, Put, and Delete requests to a weather forecast endpoint, and use GetAsync for headers and graceful error handling.

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 read records from the database in Blazor by using a generic repository to fetch lists of genres and people, display them in a table, and wire up endpoints.

Implement name filtering in Blazor with a search endpoint using contains and a five-result limit, and show in theaters and upcoming releases on the movies page via index video DTO.

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.

Implement a Blazor page to update genre records using a repository and API, adding a put-based update endpoint, a get-by-id endpoint, and test navigation and save changes.

Update a person in a Blazor ASP.NET Core 5 app using a repository and AutoMapper to map changes, retrieve by id, and update the photo only when changed.

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.

Finish the Blazor movie filter component by enabling filters for title, genre, in theaters, and upcoming releases, producing shareable results via query strings.

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.

Explore building a secure user system in Blazor, focusing on authentication via the provider. Implement authorization controls at web api and Blazor levels and define roles to manage access.

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.

Learn to protect Blazor components with the authorize attribute, customize not authorized messages, and enforce role-based access such as admin across your app.

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.

Implement a real authentication state provider in a Blazor app using a JWT token from local storage, parsing its claims, and setting the user as anonymous or authenticated.

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.

Create a five-star rating component in Blazor, enabling authenticated users to vote for movies and show the average rating using Font Awesome stars.

Integrate the sweetalert third-party library in a Blazor app to show success and error popups for rating actions, using a display message service with dependency injection and authentication checks.

implement admin role based access in a blazor asp.net core 5 app by creating the admin role, assigning it via jwt claims, and building UI components to manage user roles.

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.

Implement automatic logout in a Blazor app when the user is idle, using a JavaScript inactivity timer that invokes a .NET logout method.

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.

Explore creating a Blazor WebAssembly app with the new authentication template, configure identity with a database, manage user registration and login, and secure API calls with access tokens.

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.

Learn how to add claims to IdentityServer4 by implementing an identity profile service, retrieving user data via the user manager, mapping claims, and registering the service in startup.

Configure two http clients in Blazor: one that sends the jwt token, and one that remains anonymous. Clear inbound claim mapping to preserve role data and enable proper authorization.

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 WebAssembly app to Azure App Service by creating a hosting service, configuring a SQL database, applying migrations, and publishing to production with a JWT key.

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.

Publish Blazor webassembly app not hosted by ASP.NET Core to IIS, including publishing the client project, creating an IIS site and app pool, and verifying the site in a browser.

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 to share components between projects by creating a Razor class library to migrate and reuse components, styling, and JavaScript resources, and explore dependency injection in Razor libraries.

Learn how to create a Razor class library to share Razor components across projects, reference the library from a client project, and use a component with parameters.

Learn how Blazor apps access CSS and JavaScript from Razor class libraries by using the _content keyword in index.html, reference styles and scripts, and interoperate via IJSRuntime.

Demonstrate dependency injection in a shared Blazor component by defining an interface and injecting a flexible implementation. Configure the program to supply different implementations for web assembly and client projects.

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.

Share components via a razor class library within a Blazor project, access resources through additional assemblies, use cascading parameters to pass values, and migrate components into a razor class library.

Explore the transition from Blazor WebAssembly to Blazor server-side, review advantages and disadvantages, and create a sample mortgage application server-side that shares architecture with the client-side version.

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.

Build a Blazor server app using a shared backend class library with entity framework, a data context, migrations, and a repository pattern configured via dependency injection in startup.

Enables authentication in Blazor apps by building a shared authentication state service with server-side and WebAssembly implementations, using cascading parameters to adapt login links and claims for user identity.

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.

Migrate the youth service user management by creating public utilities, mapping identity users to app users, and implementing role retrieval and assignment in the Blazor ASP.NET Core 5 app.

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.

Explore the main characteristics of Blazor server-side and WebAssembly apps, including hosting models, code reuse across architectures, and resources like CSS and JavaScript.