Blazor Components in Razor Page: Zero To Hero in Blazor with Real Time Implementation Part VI

Introduction 

This is part six of the “Blazor: Zero to Hero” article series. Before getting into the Part VI article series, let’s have a Glimpse at previous articles in this series, 

Part V

• Blazor is a component driven framework, i.e. Components are the fundamental build blocks of a Blazor application
• Components can be reused and shared across multiple projects
• The extension of the component file is .razor. This is the reason we term it as Razor Components or Blazor Components
• Component name always start with Upper Case Character. If we name it in lower case, then we get an error message as “Component names cannot start in Lower Case Character.”

Please visit for complete article, 

• Blazor: Zero To Hero – Part 1 
• Blazor: Zero To Hero – Part 2
• Blazor: Zero To Hero – Part 3
• Blazor: Zero To Hero – Part 4
• Blazor: Zero To Hero – Part 5

In this article, We will discuss about the Nested Components and Split razor components into Sperate Files in the Blazor Project.

Nested Components

• Components can be nested under another components
• To nest one component, we use HTML syntax like <ComponentName/>. Here <ComponentName/> denotes the name of the Component to be nested.

Example

Lets take our Counter.razor component, and lets nest this into the Index.razor. Inorder to nest, we should include the instance of the Counter.razor component as <Counter/> in Index.razor.

Components can be placed anywhere in a Blazor project. The Good practice is to keep the web pages under the Pages Folder in the Project.

The reusable and non-page components are placed under the Shared Folder. We can also customize the folders based on the Project.

Split Razor Components

Razor components are combination of both HTML and C# Code. In the above example, both the HTML and C# code are present in a single file, this is fine since our component is simple one. For more complex components, its good practice to keep the HTML and C# code in a separate files.

There are two approaches to achieve this,

• Partial Files
• Base Class

Partial Files

• The HTML part in the component remains in the same .razor file. Example, the HTML code in the Counter.razor will remain in the same component.
• The C# code will be kept in .razor.cs file. Example, the C# code of the Counter.razor will be kept in the Counter.razor.cs file

So, in the Pages folder, let’s create a new class as Counter.razor.cs file.

Now let’s move the C# code from the razor component to the Class file.

In order to access the Counter Class members in the razor component (View File), we need to make Counter Class as Partial Class. At the compile time Partial Class and generated partial class of the razor component (view file) will be combined, so that the Properties and Methods in the class file will be available to the view file.

Base Class

Let’s add a new class files to the Pages folder and name it as CounterBase.cs. The reason to name it as Base because this class is going to be the Base Class for the Counter Component Class.

• To make Base Class for a component, we need to inherit build in Component Base Class. This class is available in Microsoft’s ASPNETCORE.Components namespace.
• Now let’s include our C# Code in this class.
• We need to tell our razor component (view file) to inherit from the base class, to do that we need to include @inherits directive in the razor component, and then specify the Base Class that to be Inherited.

• At this point if we build our application we will get some errors as shown below,

• The reason we get this error is because all the members in the base class are defined as Private access modifier. The derived class should be able to access the members only if its in Protected access modifier.
• Let’s change all the Private access modifiers to Protected access modifiers. Once we build the application, we will have successful build and run the application.

• In both Partial Files and Base Class the application runs as the same way before.

Conclusion

There are two ways to split the HTML and C# code into their own separate files. Hope you all found this article pretty useful. Let’s have a detailed view on other concepts in Blazor in upcoming article. Please feel free to share your feedbacks in the comment section.