How to Use Code Behind for Blazor Components | 2 Solutions

Usually, when we see Blazor components, the C# code handling the interaction for the component template is placed below the template within the same .razor file.
However, there are other ways to implement Blazor components. I will show two alternative approaches to splitting the template and the C# code into separate files.
00:00 Introduction
00:30 Reasons for Separating Code and Template
02:18 The Code-Behind Solution
04:02 Dependency Injection in Code-Behind
05:42 Inheriting from ComponentBase
07:26 Conclusion
🔥 C#/.NET Bootcamp: The Fundamentals & more (Code FRIENDS10 for 10% OFF)*
claudiobernasconi.ch/dotnet-c...
📌 .NET Developer Roadmap
claudiobernasconi.ch/learn-do...
📌 KZbin Playlists:
The FREE Blazor Crash Course: • The FREE Blazor Crash ...
C# Programming: • How to Create Modern C...
✅ SUBSCRIBE FOR MORE VIDEOS
Subscribe: 🔔 claudiobernasconi.ch/Subscribe
🚀 CONNECT & SUPPORT
Twitter: / chbernasconic
Blog: claudiobernasconi.ch
Newsletter: claudiobernasconi.ch/newsletter
* Affiliate Link: I earn a small commission at no additional cost

[@ClaudioBernasconi]

What approach of separating the template and the interaction code for Blazor components do you like the most? Do you always keep all the code within the same razor file? 🙂

[@EricKing]

I initially disliked having the code and the markup in the same file, being used to separate files for many years. But, having decided to give the singe-file approach a try a few years ago, I actually much prefer keeping the code and the markup together now. The main reason is that doing so encourages keeping the UI component code itself as simple as possible, delegating complex work to separate non-component classes where they can be isolated and reasoned about and tested easier. If I find my UI component file to be getting large and unwieldy, that's a sign that I should take a closer look at the component to see how I can simplify it by maybe breaking it down into smaller components or possibly extracting the complex logic into a separate class or classes decoupled from the component. IMO, a well-designed component is much easier to read when the code and the markup are together.

[@RajK09]

I was looking for same content and your video played automatically. Thank you for the content.

[@ClaudioBernasconi]

Thanks for your kind comment and thanks for watching.

[@Codewrinkles]

I actually like this video very much. Very condensed and cllear information. And very nice editing.

[@ClaudioBernasconi]

Thanks a lot. That's very kind of you and means a lot to me. I try to make every video a little bit better than the previous. 😎

[@netrixtechie]

Good work bro, we reaaly appreciate your effor. PLS CAN HELP WITH USING CUSTOM HTML TEMPLATES IN BLAZOR ASIDE THE BOILER TEMPLATE FROM MICROSOFT. Plsssss

[@TebohoPhofu]

For the code-behind, is it possible to inject _todoService using the Constructer instead of using the Inject Attribute and make the TodoSerivce a property?

[@ClaudioBernasconi]

Great question! It doesn't work for me. I could only speculate why it's not possible, but I'm not the right person to provide that information. As far as I can tell, only parameter injection works for Blazor components.

[@tacticoolrick5562]

Since your razor component inherts from the base component, can you then override in your @code block or in your razor.cs file?

[@ClaudioBernasconi]

I'm not sure I understand your question, but I give it my best to provide a helpful answer here. Every Blazor/Razor component inherits from the ComponentBase class. You can use either of the inheritance definition models, but you cannot mix and match. I would not advise building a component tree. I would always build components based on the ComponentBase class. I do not have any experience with components inheriting from each other and overriding functionality. In my opinion, this adds too much complexity to justify it. I'd rather extract code into another class to share code between two Blazor components. I hope that helps answer your question. Otherwise, feel free to provide a link to a GitHub repo or a Gist so we can discuss more hands-on.

[@tacticoolrick5562]

@@ClaudioBernasconi - oh let me rephrase, in your video you created a component base class, call it MyComponentBase, and then used the @inherit MyComponentBase in your blazor component. Can you then override MyComponentBase methods, from your blazor page, if you needed to?

[@krccmsitp2884]

4:45 Does Blazor also support regular constructor injection we use in MVC or Controller API?

[@ClaudioBernasconi]

Yes, it's possible with one of the "code-behind" approaches: kzbin.info/www/bejne/oZu6pHqipb56o7M

[@krccmsitp2884]

@@ClaudioBernasconi great, thanks

[@lgmsampaio]

I don't trust any developer that don't use Dark mode in VStudio. And you should have added "= default!;" to the declaration of your TodoService in the code behind.

[@ClaudioBernasconi]

That sounds like trust issues. However, I don't judge you.