Split Blazor Component with Partial Class | Base Class

Split Blazor Component with Partial Class | Base Class

When our ASP.NET Core blazor or razor component is getting more complex then we can split the component in two parts.
1.HTML file
2.Class file

We can achieve the split of the component by two ways
1.Partial Class
2.Base Class

I strongly recommend you to watch the previous video/post before proceeding.
Blazor or Razor Component

For Partial class, Follow the steps with Counter.razor component:
1.Create a class in pages folder with the same name as the component name. eg. Counter.razor.cs
2.Make it partial using partial keyword.
3.Put all the C# code in the partial class and remove from component (Counter.razor).
4.Remove the @code{} block as well from the component (Counter.razor) file.
5.Change the access specifier from private to at least protected. So that at compile time counter auto-generated partial class and our partial get merged.
6.Save the changes and Run the project.

For Base Class, Follow the steps with Counter.razor component:
1.Create a class in pages folder with the name like. eg. CounterBase.cs
2.CounterBase class will be inherited by ComponentBase class. (Press ctl+. to include the required namespace for that)
3.Put all the C# code in the partial class and remove from component (Counter.razor).
4.Remove the @code{} block as well from the component (Counter.razor) file.
5.In Counter component, after @page directive we will use @inherit directive and use CounterBase class.
6.Save the changes and Run the project.

Click below to see the full video steps in Action.