As we saw in the previous article, the .razor file consists of an HTML and C# code in the same file. But if we want, we can split this file into two files, one for the HTML logic and another one for the C# logic. So, in this article, we are going to learn how to use Partial Classes to split the .razor file, and additionally, we are going to talk about using the RenderFragment parameters to send content to the component. Finally, we have to mention the lifecycle in the Blazor WebAssembly applications. That said, we are going to explain different lifecycle methods we can use while developing a Blazor application.

To download the source code for this article, you can visit the Blazor partial classes repository.

For the complete navigation for this series, you can visit the Blazor Series page.

We are going to divide this article into the following topics:

Let’s get going.

Blazor Partial Classes Implementation

With the .NET Core 3.1 framework, we can separate our .razor file into two separate (but still connected) files. To accomplish that, we have to add a new class to the .razor file. Let’s use the Home.razor file for this example.

If we inspect this file, we can see the C# logic in the @code part. This is a small file and having both parts in the same file is not an issue at all. But as our projects grow, we are ending up with more and more HTML and C# logic and that can become hard to read and maintain as well. So, it is a good thing to separate these two parts. To do that, we have to create a new class in the Component folder and name it Home.razor.cs:

Partial class creation

As we can see, the Visual Studio attaches this file to the Home.razor file. But, if we inspect our new class, we are going to see an error. That’s because this new class has to be a partial one. So, let’s add a partial keyword:

Now, we can open the Home component file, and cut all the code from the @code section and remove the @code directive:

And finally, paste the code in the Home class:

Of course, we have to add the using Microsoft.AspNetCore.Components statement to remove all the attribute errors.

Excellent.

If we build and run our application, everything should work as it supposed to, without a single problem.

One more thing. We can use multiple partial classes if we need them to. The important part is to name them differently, for example, Home.razor.data.cs, Home.razor.internal.cs etc. Of course, all of these files have to be partial.

Using RenderFragment Parameters in Blazor WebAssembly

In addition to sending parameters to the component, we can send the content as well. This is very useful when we have an HTML markup that we want to use inside the component. It is a bad solution trying to send the HTML code through the parameters to the component because it would be so hard to maintain and it is not readable at all. The better solution is to use RenderFragment.

Let’s see, how we can use the RenderFragment parameter in our Home component.

The first thing we are going to do is to modify the Home class:

So, there is another property of type RenderFragment and we decorate it with the [Parameter] attribute. The Blazor will use this property to attach embedded content. This content may be plain text, HTML elements, or any other Blazor component.

The next thing we want to do is to modify the Home component file, by cutting the code inside the first p tag, and replace it with our newly created property:

And finally, let’s modify the Index file:

As you can see, we place the content we want to send to the component, between the open and close component tags. By doing that, we state what content we want to bind to the ChildContent property inside the Home component.

As soon as we do that, we can start our application and confirm that it runs as expected.

Now, we have to mention one thing here. The RenderFragment property must have the ChildContent name for this to work. So, to see this in action, let’s modify the name of the ChildContent property to the VisitShopeContent in both .cs and .razor files:

Now, if we start our application, we won’t get any error, but we won’t get the content as well:

Missing content for RenderFragment

To make this work, we have to explicitly specify the name of the RenderFragment property in the Index.razor file:

Now, once we start our application, the missing part will reappear for sure. In this way, we can use multiple RenderFragment parameters for a single component.

Blazor Lifecycle Methods

Blazor has several actions that trigger on the certain stages of the application’s lifecycle. These methods can be synchronous and asynchronous as well. If we want to use them, we have to override them in our code. Of course, we have to use async lifecycle methods only if we have async actions in these methods.

SetParameterAsync

This method will trigger first as soon as the component is created. All the parameters, sent to the component, will be stored in the ParameterView object. So, if we want to take some async actions before any parameter value is assigned to the respective properties, this is the place to do it:

OnInitialized and OnInitializedAsync

These methods trigger as soon as the component initializes and receives all the parameters from the parent component:

OnParameterSet and OnParameterSetAsync

These methods trigger after the component receives its parameters and their values are assigned to their respective properties. These methods will trigger repeatedly as soon as the parameter’s value gets updated:

OnAfterRender and OnAfterRenderAsync

As soon as the component finishes rendering, these methods get called. We should use this stage to perform additional initialization steps using the rendered content. These methods have the firstRender parameter set to true only the first time the method executes. Every other time the value is false:

ShouldRender

We can use this method to force the component to render again after the initial rendering:

Lifecycle Example

To see this with an example, we are going to modify the Counter.razor file and create a new CounterPrint component. So, let’s first create a new component and modify it:

So, nothing special here, we have two parameters and our lifecycle methods that print some output to the console.

Now, let’s modify the Counter.razor file:

As you can see, we are using our new component here and pass the Title and the CurrentCountvalues to it. The CurrentCount increments every time we click the Click me button.

Now, let’s start the application open the developer console window and navigate to the Counter page:

Blazor application Lifecycle initial load with RenderFragment parameters

We can see that on initial load all three lifecycle methods trigger and we can confirm this is the first render. But as soon as we click the Click me button:

Second render with parameter change

Only the OnParameterSet method triggers because the CurrentCount parameter is updated. Of course, we can confirm this is not the first render anymore. Additionally, the Curren count in the UI is updated from 0 to 1.

Now, let’s stop the application, and modify the CounterPrint component by returning false in the ShouldRender method:

We can start the application again, press F12, navigate to counter and press the Click me button:

Component is not rendering

This time the UI doesn’t update the current count value. So, we can see how to control the render actions on our pages.

Conclusion

In this article, we have learned:

  • How to use partial classes to separate the C# and HTML logic in a component
  • How to use RenderFragment parameters to pass dynamic content to the component
  • About lifecycle methods and their execution in the Blazor application

In the next article, we are going to talk about Routing and how to navigate to different pages.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published .NET Core content we encourage you to subscribe to our blog.