Blazor - The Complete Guide (WASM & Server .NET Core 5)

Explore the basics of Blazor in a server-side project, including data binding, dropdowns, loops, and component parameters, then learn life cycle of components and the event callback through hands-on practice.

Define a blazer room model with id, room name, price, and active flag, instantiate it in a Razor page, and display name and price using one-way data binding in Blazor.

Explore two-way data binding in Blazor by binding the price with bind value and on input to update the model as you type.

Bind the is active flag to a checkbox and display the room status below, updating dynamically to is active when checked.

implement two-way binding for the is active flag with a checkbox, binding via bind-value and the checked property, and display room status as active or inactive.

Explore how a Blazor app handles room properties with a dropdown bound to the selected property, and use a foreach loop to display and bind values in real time.

Add a rooms list to display multiple rooms by creating a list of blazer room objects and initializing two rooms in on initialized to render details on the page.

Display all room details in a Bootstrap table with editable names and prices, room property columns for square feet and occupancy, and a second loop listing room names and prices.

Practice binding properties in Blazor by rendering a dynamic room list with for each loops, input bindings, and nested room props, then display room names and prices.

Move everything from the index page into a new bind prop page, add a nav link, rename index.razor, and define the route with the @page directive to enable Blazor navigation.

Learn to create reusable Razor components in Blazor by turning edit and delete buttons into a shared component and using it across pages.

Pass a boolean parameter to a Blazor component to toggle admin controls like edit and delete buttons. Define the parameter attribute and conditionally render based on its value.

Explore Blazor WASM and server components, break down the room display into an individual room razor component, and pass room properties through parameters to enable nested components and code reuse.

Add a hotel amenities tab, create an amenity model (id, name, description), and build a three-item amenity list with a child component for Demo Hotel.

Learn how to model hotel amenities in a Blazor app, populate an amenities list, display them in a demo hotel, and troubleshoot IntelliSense by restarting Visual Studio.

Explore the Blazor component life cycle by implementing on initialized and on initialized async, logging each event as data loads from services.

Explore Blazor lifecycle methods on parameter set and on parameter set async, showing how they run after initialization and whenever a parent passes updated parameters to a child component.

Discover how on after render and on after render async run after each component render to initialize DOM elements and JavaScript libraries, and manage post-render effects.

Explore how should render returns a boolean to refresh the UI, while the initial render occurs, and how state has changed can be manually invoked to rerender.

Explore how a child component in Blazor triggers a parent method using an event callback to update the total selected rooms in a demo hotel.

Practice the event callback by clicking gray amenity boxes in the demo hotel to pass the selected amenity to the parent component and display it there.

Explore intermediate Blazor concepts like render fragments, attribute splatting, cascading parameters, routing, and the Navigation Manager to build robust Blazor apps.

Learn to implement render fragment in a Blazor app. Pass a title from a parent to a child, and render fragment content with a default message.

Explore event callback patterns in Blazor by wiring a child component button to invoke a parent method via an event callback, using mouse event args and render fragment.

Learn to use multiple render fragments in Blazor by defining child content and danger content, then render them in parent and child components with conditional display.

Practice Blazor render fragments by passing render fragments from the parent hotel page to the individual amenities component, with values hash one and hash two, and display them.

Implement assignment 6 by adding render fragment parameters to individual amenities, pass two fragments from the demo hotel, and display them via RenderFragment from parent to validate the solution.

Explore how attribute splatting passes attributes from a parent Blazor component to a child, overriding placeholder, maxLength, and required, with examples and a look ahead to the next video.

Explore attribute splatting in Blazor, using a dictionary of input attributes to drive defaults and allow parent overrides with the add attributes Razor directive.

See how to simplify attribute passing in Blazor by using capture unmatched value with splatting to automatically capture extra attributes and manage overrides.

Explore passing properties across parent, child, and grandchild components in Blazor and see how long message chains lead to duplicated code and poor architecture.

Learn how to pass data from parent to grandchild in Blazor using cascading values. Retrieve it with cascading parameter and ensure type consistency across components, without requiring child parameters.

Learn to use multiple cascading values in Blazor, passing a message and a lucky number through parent and grandchild, then resolve type conflicts by naming cascading values.

Explore routing in Blazor by implementing learn routing with the route page directive, supporting multiple paths, and handling parameters from the URL to populate component data.

Explore routing in Blazor by passing query parameters, extracting them with navigation manager and parse query strings, and using anchors, nav links, or buttons to navigate between routing pages.

Explore how to navigate between pages using the navigation manager in Blazor, including button and link routing with navigate to a uri.

Add multiple projects to a Blazor solution, then configure DbContext and a database. Create DTOs and implement repositories to access the database with entity framework core.

Design a scalable server side Blazor app by organizing code into multiple net 5.0 class library projects—data access, common, business, and models—and connect them with references.

Create the application db context in the Blazor server project, install EF Core SQL Server, add the data access folder, and configure the connection string and services in startup.

Configure the sql server connection string in appsettings.json and wire the db context in startup using use sql server with default connection. Install packages and build to test creating database.

Configure a database for the hidden villa project by adding an empty migration in the data access project and applying migrations to create the database and a migrations history table.

define a hotel room model in the data layer with id, name, occupancy, rate, and timestamps; use dtos for ui privacy, configure a db context, run migrations, and update database.

Create a hotel room DTO to limit data sent between client and server, validate inputs with data annotations for client-side validation, and map properties for CRUD operations in the server.

Create a public IHotelRoomRepository interface for hotel room management with CRUD methods—create, update, get, and get all—and a name-exists check, operating on HotelRoomDTOs and returning DTOs.

Implement the hotel room repository by injecting the application db context, converting the hotel room DTO to a hotel room, and adding it to the database with Automapper.

Explore automapper integration for a hotel room repository in a server-side Blazor app, including mapping profile creation, dto-to-entity conversion, and returning a hotel room DTO after saving.

Get all hotel rooms with a try-catch and map to hotel room DTOs for an I enumerable. Implement get by id, update, and delete using EF Core and DTO mapping.

Explore Blazor forms with built-in validation as you create a hotel rooms page, add new rooms, and display the list on the hotel room index.

Implement a routable Blazor hotel room list page and a single upsert component to create or update rooms, using bootstrap layouts.

Design a create hotel room form in blazor using an edit form, binding a hotel room dto to an input text for the name, with dynamic heading.

Learn to build a Blazor hotel room form with occupancy, rate, square feet, and details, using input number and text area, binding to the model, and adding create with validations.

Learn to implement form validations in Blazor by wiring on valid submit, applying data annotations, and displaying errors with a validation summary or inline validation messages.

Learn to create a hotel room in a Blazor app by validating the room name, injecting the hotel room repository, and navigating back to the hotel rooms list.

Display all hotel rooms in a Blazor page using a bootstrap-styled table. Load rooms from the repository on initialization and show name, occupancy, rate as currency, square feet, and actions.

Learn how to integrate JavaScript with Blazor to access APIs that depend on JavaScript, and practice alerts and toaster notifications through hands-on exercises and assignments.

Explore how to integrate JavaScript in a Blazor app using the JS runtime, and call JavaScript functions via invokeAsync to handle confirmations. Create the BlazorJS component, wire up a confirm box example, and update the UI based on the boolean result to illustrate JavaScript interop in Blazor.

Integrate Toaster into a Blazor app by loading the Toaster JS and CSS via CDN or NuGet, wiring a Show Toaster function, and triggering success and error alerts from Blazor.

Extend the Blazor JS runtime with static toaster extensions for success and error messages, using invoke void async and a helper class wired via underscore imports razor.

Apply JavaScript interop in a Blazor app by adding two buttons that trigger SweetAlert2 for success and error messages, following the example and installation guidance.

Implement sweet alerts in a Blazor app by wiring JavaScript, updating commonjs to show alerts, and using invoke void async for JavaScript interop to display success and error messages, test.

Explore referencing components in Blazor to trigger a child’s toaster success notification from the parent by injecting js runtime and using a private child component with an @ref.

Learn to implement update functionality for a hotel room in a Blazor app by adding an edit route, handling a nullable integer id parameter, and loading data with OnInitializedAsync.

Create a hotel room image model that stores multiple images per room via a foreign key to hotel room, a db set, and migrations to update the database.

Model room image data with a room image DTO, map it in the mapping profile, and implement a hotel image repository with create, delete, and get all room images.

Implement a hotel room image repository in a Blazor app, using dependency injection and a mapper to handle add, delete, and retrieval of hotel room images with async EF Core.

Implement a server-side file upload interface in Blazor, creating an images folder, handling upload and delete operations, and renaming files to gid to avoid confusion.

Implement a file upload interface in Blazor, saving files to wwwroot/room images with renamed grid name via dependency injection and web host environment, creating directory if needed, add delete handling.

Use the Blazor file upload component, wire input file with Onchange, and implement handle image upload to support multiple images by adding a list of images to hotel room DTO.

Handle image uploading by validating jpeg/png extensions, uploading files via a file upload service, and collecting image URLs to display in the hotel room modal with error handling.

Upload multiple images in a Blazor app and preview them as backgrounds before saving. Display image URLs from the hotel room model and render previews with a for each loop.

Upload and assign images to hotel rooms by creating hotel room image entries for each image URL and verifying them in the hotel room images table.

Display and bind hotel room images in a blazor edit view by using entity framework core eager loading with include to load image urls from related hotel room images.

Blazor guide explains updating a hotel room by adding new images only when image URLs are unique, preventing duplicates in the hotel room images table during update.

Demonstrate a live image upload indicator in a Blazor app by toggling a flag named isImageUploadProcessStarted to show a spinner and please wait during ten-image uploads.

Add Font Awesome to a Blazor project by creating and applying a kit script. Then implement a delete confirmation component using Bootstrap modals to confirm deletions.

Create a reusable delete confirmation component in the shared folder using bootstrap modal markup, with show and hide logic via commonjs and js interop.

Implement a delete confirmation in a Blazor app by wiring an event callback from the delete confirmation to the parent, manage processing, and delete hotel room images and records.

Fix a delete bug in Blazor by introducing a processing flag and parent-to-child state synchronization. Use on parameter set to update the child and stop the spinner.

Learn to integrate a quill-based rich text editor in a Blazor app using the Blazor Text Editor package, including setup, CSS and JS inclusion, and HTML syncing on render.

Explore how to implement hotel amenity management with CRUD operations in Blazor, using properties like name, description, timing, and Font Awesome icons, with create/edit and list views.

Save complete image URLs in the database and construct them across Blazor server and client projects using NavigationManager and HttpContextAccessor, enabling global image access.

Explore authentication and authorization in Blazor, scaffold the Identity Razor class library, manage login and logout, restrict access, and implement roles across Blazor server and WebAssembly.

Scaffold identity in server project using the ASP.NET Core Identity Razor class library to secure routes with authentication and authorization, then configure services and run migrations to create identity tables.

discover how to integrate identity in a Blazor app by adding identity areas, wiring login and register links, and configuring services for default identity.

Implement dynamic login and logout in a Blazor app using an authorized view and cascading authentication state; switch between login/register and logout, and route users to the home page.

Apply the authorize attribute in Blazor components to restrict access to hotel room and amenity pages to authenticated users, customize not authorized views, and configure the authorized root view.

Explore authenticating in Blazor by reading the authentication state via a cascading parameter, redirecting unauthenticated users to the login page, and returning to the original page with a return URL.

implement role-based access in a blazor app by defining admin, customer, and employee roles and guarding pages with user role checks against a shared common project.

Learn how to add roles, restrict users by those roles on the server side, and seed the database with the first user using a db initializer, without deploying to Azure.

Implement a db initializer to seed roles and create the first admin user via user manager and role manager in a Blazor app with ASP.NET Identity, using dependency injection.

Initialize the database by applying pending migrations, seed roles (admin, customer, employee) and an admin user, and assign the admin role via the identity db context.

Register the db initializer in startup and call its initialize method during app configuration to run on startup, then verify admin role and admin user mappings exist.

Create a .NET 5 API to power Blazor WebAssembly, implementing sign up, sign in, hotel rooms and amenities endpoints, and configure bearer token authentication.

Create a net core web API for the Blazor WebAssembly app, configure startup, identity, DbContext, and repositories, and enable AutoMapper, routing with lowercase url, and swagger for API documentation.

Create a hotel room controller in the api with endpoints for all rooms and a single room. Use a repository and dependency injection with http get routes.

Implement the get hotel room endpoint by validating the room ID, returning a bad request or not found via an error model, and retrieving details from the repository.

Extend identity user by adding a name property through an application user class, migrate the database, and configure startup to use the new application user in server project.

Create an account controller for sign in and sign up. Inject sign in manager, user manager, and role manager via dependency injection for post endpoints: sign in and sign up.

Define and validate registration dto models for sign-up in a Blazor app, including user request and registration response with data annotations and an endpoint.

Add a sign up endpoint with allow anonymous, validate the user request and model state, create the application user, assign the customer role, and return 201 on success.

correctly implement the sign up endpoint as http post receiving a user request from body, test signup returns 201, and create a user with the customer role in the database.

Create sign-in dto models in the account workflow, including authentication dto, authentication response dto, and a user dto, to handle username (email), password, token, and errors.

Explain sign in api endpoint in the account controller, using http post with the sign in manager to validate credentials, returning unauthorized on failure or an authentication response on success.

Configure API settings in appsettings.json with a random secret key, valid audience, and valid issuer, then read them via dependency injection using the options pattern.

Create sign-in helper methods to build signing credentials from a secret key, assemble user claims including email and roles, and generate a token for API authentication.

Create a JWT token from sign-in credentials using claims, issuer, and audience, with a 30-day expiration. Return an authentication response and test 200 and 401 outcomes.

Configure the API to accept a JWT bearer token by loading the secret key from app settings, enabling authentication, and validating issuer, audience, and clock skew.

Enable cross-origin requests by configuring a CORS policy named Hidden Villa that allows any origin, any method, and any header, and integrate Newtonsoft.Json with specific serializer settings.

Test and enable bearer authentication in Swagger by configuring the open API security scheme, adding the bearer token to requests, and enforcing authorization with admin roles on specific actions.