Blazor Tutorial C# - Part 2 | Razor Components | dotnet 5 - dotnet 6

Video Description

Blazor Tutorial C# - Part 2 is a Razor Components Tutorial video that covers everything about Razor Components. We'll be including more about Blazor Development (including the Advanced concepts) in our upcoming videos in this series. This video is completely about Blazor Razor Components. Below is the Blazor Tutorial Playlist Link: https://www.youtube.com/playlist?list=PLzewa6pjbr3IQEUfNiK2SROQC1NuKl6PV What is Razor Components? Blazor apps are built using #Razor components. A component is a self-contained portion of user interface (UI) with processing logic to enable dynamic behavior. Components can be nested, reused, shared among projects. What is Blazor? Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries. Blazor can run your client-side C# code directly in the browser, using Blazor WebAssembly. Because it's real .NET running on #WebAssembly, you can re-use code and libraries from server-side parts of your application. Alternatively, Blazor can run your client logic on the server (Blazor Server). Client UI events are sent back to the server using SignalR - a real-time messaging framework. Once execution completes, the required UI changes are sent to the client and merged into the DOM. Blazor is not like Silverlight, Microsoft’s previous attempt at hosting in-browser applications. Silverlight required a browser plugin in order to run on the client, which prevented it from running on iOS devices. Blazor does not require any kind of plugin installed on the client in order to execute inside a browser. Blazor either runs server-side, in which case it executes on a server and the browser acts like a dumb terminal, or it runs in the browser itself by utilising WebAssembly. Because WebAssembly is a web standard, it is supported on all major browsers, which means also client-side Blazor apps will run inside a browser on Windows/Linux/Mac/Android and iOS. Topics Covered in this Video: 0:00 - Intro 1:09 - Final Output of the Blazor Development 3:34 - Blazor Project Setup 8:52 - How to create Razor Components? 17:18 - Arbitrary Parameters 24:37 - Events in Razor 33:07 - Data Binding in Blazor 37:06 - Event Callback in Blazor 44:15 - Render Fragment in Blazor 1:00:47 - Splitting Code and Html Code in Blazor What is Arbitrary Parameters in Blazor? Blazor components can accept additional attributes that are not declared as the component parameters. The ArbitraryAttributeDictionary property is a Dictionary. The keys of the Dictionary will be strings whereas the values will be objects. The ArbitraryAttributeDictionary property is decorated with [Parameter] attribute. This time we also set the CaptureUnmatchedValues property of the Parameter attribute to true. This indicates that any attributes set by the parent component that do not have matching parameter properties in the child component will be made available in the ArbitraryAttributeDictionary. What is Data Binding in Blazor? Razor components provide data binding features with the @bind Razor directive attribute with a field, property, or Razor expression value. What is EventCallback in Blazor? The EventCallback class is a special Blazor class that can be exposed as a Parameter so that components can easily notify consumers when something of interest has occurred. Once a public property of type EventCallback has been declared and decorated with the [Parameter] attribute, consuming components can specify in Razor mark-up which method to call when the event is triggered. You can reach us at Social Media: Facebook: https://www.facebook.com/codingdroplets Twitter: https://twitter.com/codingdroplets Instagram: https://www.instagram.com/codingdroplets/ Github: https://github.com/codingdroplets/