Blazor Code Separation - Easily Moving Code to a Code Behind File

When you see demos in Blazor, you often see the code on the same page as the HTML and Razor syntax. But for a production app, you more often want the code to be in a separate file. In this video, I will show you how to easily move the code from the component to a separate file.

[rbee]

Another added benefit of using code behind is that at the moment razor Intellisense is pretty wonky, using code behind restores your access to the much needed Intellisense.

[LlamaNL]

You CANNOT use contstructor injection with Blazor:
It will throw this error: Cannot dynamically create an instance of type Reason: No parameterless constructor defined.

If you want to inject in the code behind you do it like this:
[Inject] public WeatherForecastService ForecastService { get; set; } = default!;

[satyabratamohapatra]

Oh my goodness!!. I was doing it manually. Thanks a lot Tim.

[Tymonello]

Hello Tim, another Tim here and I would like to report a mistake in this video. At 6:20 you say that we can create a constructor in code-behind file and inject the service there, but that's a mistake. We can't use Constructor DI in Blazor pages, because it produces an error: MissingMethodException: Cannot dynamically create an instance of type 'FetchData'. Reason: No parameterless constructor defined. So DI in Blazor can only be done via @inject in the view or with [Inject] attribute over a property in code-behind.

[Sander-Brilman]

Great video.

This concept of quikly explaining a task/subject in 10 minutes is awesome, i like your 50+ minutes explainer video's aswell but this is a much more accessible time format to quikly learn something useful. keep them comming!

[MiningForPies]

Woo just saved me about 7 hours work refactoring. Cheers Tim

[nahdinet]

Hi Tim! Thanks so match for your great tutorial 💯💥

[imadabab]

Brilliant. Thanks a lot. You remember me with webforms.

[manuelgamezz]

Thanks Tim, I didn't know this feature in blazor, I think is very usefull when you have a big razor component html code + c# code.

[sreenucnu]

We can create component class for each razor file and inherit from ComponentBase class and use it in razor file right. Is there any advantages in without using ComponentBase class for separating code?

[Tielc]

Another big advantage is code analyzers like StyleCop don't work on a .razor page, but do in the .cs files. It took [Inject] for me to able to finally separate my code completely, which is awesome.

[TYNEPUNK]

very useful indeed. is there any html equivalent, I think you just make a razor component and call it like <MyComponent></MyComponent> and that way you can call on bits of html/markup without them having to be in the same file. Sorry I am new to all this trying to make it neater :)

[bootsector]

Hi Tim! Thanks for the great video again. I've been using this feature for almost a year now. We can also create a css file for each razor file (e.g Counter.razor.css).

[SKIDDOW]

Oh! Thanks! I was creating it manually.
Additionally, here we don't need to use ViewModel architecture. Don't we?

[karliskalviss]

Awesome vids,
Video Idea:

Can you talk about the issue with Blazor client DLLs beeing block by Antivirus, and If your customers are Companies with internal security layers most likely default Blazor WASM will not work.

This would be nice to know before I started to build My App with Blazor and maybe other beginners would Like to know this aswell.

[amnesia]

thanks, i was doing it manually took me ages

[louiseeggleton]

I like this idea, but what about code that needs to be on more than one page? Is there a way to have a common "code behind" page that can be shred by multiple pages?

[minimalstory]

How many partial classes can l create in component??

[TahmidRadit]

Is it wrong to call web API in Blazor Server or is it wrong using controllers to use web API in Blazor Server?

[trevordennis]

Been wishing for this feature. Turns out my ReSharper settings was set to hide the VS quick actions... :( Had an issue though. I tried this on a couple of my razor files and started getting errors in the code behind saying there is no suitable method to override for OnInitalized, and it doesn't see anything else from the parent classes I was inheriting from. I have also seen this when manually moving code to code behind so it's probably a VS bug (17.5.3).

After checking my Git changes, I found out that VS was adding an ItemGroup with Compile statements for the code behind files to my other project in VS that I use for the web server side and not the Blazor WebAssembly project that I was actually editing in. Removing the ItemGroup seemed to fix things up. Just in case anyone else runs into this :^)