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

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:

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:

[CodingDroplets]

🔗Blazor Tutorial Series Playlist link:

[randindondan]

This is a great way you have of explaining, showing all the passages makes it easier to understand! Well done.

[tomarik]

Moving the C# code into a partial class was 🤯🤯🤯!
Great videos.

[munyunu]

Masterwork. Thank you for going slow and taking time to actually explain.

[piriyaie]

Thank you for this video. It has helped me a lot. It is important to mention that you can also extract the entire C# code by right-clicking on @code in Visual Studio and then on “Quick actions and Refactoring...” and then selecting: “Extract block to code behind”. This is much easier than how you show it in the video. Apart from that, I liked the video very much. Thanks again.

[markdavies]

I have watched a few training videos around Blazor but this is by far one of the best ones I have seen. A lot of the information I was looking for has been covered in this one hour video and the way this has been presented is very clear and makes it easy to learn and follow. Love your work.

[OnoderaMyGirl]

thankss againnn
You're really great teacher in youtube
unlike other youtuber their tutorial can't understand by beginner. Thanks for making videos that can easy to understand

[hexoter]

I love the way u explain, u got my subscription

[grzegorzborowski]

Beautiful! All stuff is great. Keep doing your work and thank you for sharing knowledge.

[eraldoka]

Reallyy man, ,,you are amazing teacher..im teaching a lot from you..thank you Big Friendd

[anilkumarmootha]

Excellent video and topics covered are really good.

[miguelsegura]

Thanks, this content is really good and easy to understand.

[JoseOrtega-ocip]

Awesome tutorial!

Subscribed!

Thank you for posting!

[akarmuhialdeen]

you are the best <3 thanks you saved me hundreds of euros.

[bertrandspitz]

Thank you very munch for these great tutos
I just have the following question.
At the 51 minutes mark, when you go with async you have an exeption thrown at line 3.
In my case I have just the info "An unhandled error has orrcured" in the browser window and I have to open the browser's debug tools to see where the error is comming from.
How did you manage to see the exeption in Visula Studio?
Thank you

[DesertScorpionKSA]

I'm assuming the @bind="DisplayEmail" is binding the checked attribute to the DisplayEmail variable. What is you want to bind to a different attribute to some other HTML tag?

[SIR_Studios]

at 20:49 my code is giving exception of edit form, ,, i am using dotnet 6 vs 2022

[YoungGuala]

Awesome content! Keep the videos coming!

[aarefsh]

thank you very much
but I preferred to run the project without debugging so you don't have to run and stop much time since there is no need to debug values or stuff and of course, the hot reload is enabled

[ZenOfKursat]

what if List initial values not defined in Oninitialized method. is it necessary ?. lemme check...