How to Use Code Behind for Blazor Components | 2 Solutions

[@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. 😎

[@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

[@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?

[@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

[@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.