Blazor Fundamentals with VS 2022

Explore Razor syntax as a server-side method for embedding C# into HTML. Understand Razor file extensions and how this approach compares to popular template engines like Angular, React, and Vue.

Set up a new project using the empty template, add razor pages, create a pages folder with a blank razor page, and test razor syntax by displaying hello razor.

Blend html and c# in razor using @ symbol to display current time with minutes and seconds, and enable hot reload for updates; escape @ by doubling, emails render automatically.

Learn implicit Razor expressions in Blazor fundamentals with Visual Studio 2022, covering spacing rules, valid await usage, and issues with generics and the compare ordinal method.

Master explicit razor expressions by delimiting code with opening and closing parentheses, using h2 tag to separate code, ensuring correct evaluation of current date and generics with an at sign.

Explore Razor code blocks in Blazor, enabling multi-line C# inside a Razor file. Understand how variables, methods, and scope work, and how block order changes output.

Learn how razor transitions enable html rendering inside code blocks, using implicit transitions to render html, and explicit delimited and explicit line transitions for text and numbers.

Explore C# control structures in Razor and Blazor files, including if/else, switch, for and foreach loops, while and do-while, using, and try/catch handling.

Explore Razor components in Blazor, combining HTML and C# to enable dynamic behavior with nested, reusable components in a Visual Studio 2022 Blazor WebAssembly project.

Create a razor component by organizing a components folder, naming with PascalCase and a capital letter, and referencing it with the full namespace to avoid compile errors.

Learn to nest razor components within other components using standard HTML syntax, and style them with bootstrap cards and a go to course button to present related courses.

Import namespaces with a using directive at the top of razor files to simplify component references, and use underscore imports to share these namespaces across projects for razor components.

Explore Razor directives and the @code directive, learn how add code enables C# members—fields, properties, and methods—in a component, and compare it with the Razor code block for greater flexibility.

Explore one-way binding in Blazor by pairing Razor components with C sharp code to drive dynamic content through unidirectional updates, including property binding and list loops.

Learn how to create reusable Blazor components with public properties and the parameter attribute to pass title, description, features, and price from external components.

Replace the list with a foreach loop to render features in a Blazor component, initialize a generic list with explicit expressions, and use developer tools to debug null reference errors.

Examine how to use component parameters in Blazor, showing why text concatenation with parameter assignments fails and how to use auto load properties and editor required to ensure values.

Explore two-way binding in Blazor by creating a contact us component, wiring an input's value to a property, and using the bind directive for bidirectional updates.

Learn bidirectional binding in Blazor with VS 2022, switching from onchange to the on input event using the add bind attribute for immediate updates.

Discover how Blazor assigns standard JavaScript events to elements in components and handles them with C# delegates, and review the most common HTML events and their functions.

Develop a Blazor raffle winner component that randomly selects a winning number and displays it via onClick binding. Save chosen numbers to a history list with a bidirectional binding control.

Explore how Blazor handles invalid data in a two-way bound integer input, showing that decimal entries are rejected and the previous value remains, with built-in validations.

Create a color switcher Blazor WebAssembly app in VS 2022 that uses three sliders to dynamically update a div's RGB background color with two-way binding and real-time preview.

Enhance a Blazor WebAssembly counter by adding bootstrap styling, decrement, reset, and increase buttons, and dynamic color changes for positive, negative, and zero counts.

Convert a razor component into a navigable page by adding the @page directive with a route, and understand how App.razor drives routing with multiple routes.

Learn to bind route parameters to a Blazor component using a public customer property, the parameter attribute, and a route that matches the property name, including optional parameters.

Add a new page to the Blazor sidebar by updating the nav menu's nav links with href, display text, and an included icon, then test the match behavior.

Enable query string manipulation in Razor components by using the supply parameter from query attribute to bind the string id property.

Learn to control the head section in Blazor, using the Page Title and Head Content components to set dynamic page titles and meta descriptions for better SEO.

Build a Blazor WebAssembly BMI calculator with a page, height and weight inputs, and a calculate button that shows underweight, normal, overweight, or obesity.

Create a todo items application in a Blazor WebAssembly project by adding a TaskComponent Razor component with bootstrap form-check styling, a checkbox input, and a label, then test.

Create a TaskModel with name and completion status, and bind it to a component using a 1-to-1 model reference, leveraging an if statement to conditionally apply an input attribute.

Create a Blazor Tasker page that binds the task model’s isComplete property to a checkbox with onchange handling, and add a Tasker page with routing and a pending task list.

Bind the input to a task name field with two-way binding, create a generic task list, and replace manual components with a foreach loop that binds task models to components.

Resolve id conflicts by separating the model from the component and assigning a unique id to each task input, then test by adding tasks and using tags.

Override set parameters async to see how a component is created and receives parameters in a Blazor app, using parameter view to print values or note when none exist.

Demonstrates the uninitialized method and its async form, invoked on component initialization after parameter reception, showing a synchronous call followed by an asynchronous call with set parameters async.

Explore how on parameter set and on parameter set async respond to changes from parent to child components, demonstrated with a change name button and updates in index.razor.

Learn how Blazor handles the component life cycle with after render methods, both synchronous and asynchronous, including first render checks and dom interop via javascript.

Explore how the state has changed notifies a Blazor component when state updates, how to trigger it manually, and how should render governs the countdown UI.

Explore the edit form component in Blazor for built-in validation and bind a test model to the form in a Blazor WebAssembly forms demo.

Bind Blazor form components to model properties using bind value, mapping booleans to checkboxes, dates to date inputs, numbers to numeric inputs, and enums to selects.

Apply data annotations to model properties to validate blazor forms using data annotations validator, and display errors with validation summary and validation message components for required, max length, and range rules.

Explore Blazor form submissions by using Onsubmit, on valid submit, and on invalid submit with edit context validation to show submitting or error messages.

Discover how dependency injection wires shared services in a Blazor server app, using a singleton weather forecast service via add inject and consuming GetForecastAsync.

Learn to register, create, and use dependencies in Blazor with vs 2022, comparing transient, scoped, and singleton lifetimes and implementing dependency injection with interfaces.