How do we create a reusable RenderFragment in a separate code file? - razor

Question

In this Microsoft article, they show how to extract a piece of Blazor code into a method so that it can be reused. They show the following example...
<h1>Hello, world!</h1>
#RenderWelcomeInfo
<p>Render the welcome info a second time:</p>
#RenderWelcomeInfo
#code {
private RenderFragment RenderWelcomeInfo = __builder =>
{
<p>Welcome to your new app!</p>
};
}
They then go on to explain that if you want to extract this method into a separate .razor file, you can make it static.
That's all fine for a simple example such as the ones they show, but if you want to anything realistic, chances are you will need to pass at least one parameter to the method.
However, if you change their SayHello example to take a parameter...
public static RenderFragment SayHelloName(string name) = __builder => {
<h1>Hello #name</h1>
};
...then you get an interesting mix of compiler errors...
The = sign has a red underline, and hovering over it gives an error Function body expected
The variable __builder is highlighted in red, and hovering over it gives an error Cannot resolve symbol __builder
The space right after the variable __builder is highlighted in red, and hovering over it gives an error Cannot resolve symbol __builder\n\nUnexpected token
The => has a red underline, and hovering over that gives an error Not all code paths return a value in lambda expression of type 'RenderFragment' (which is interesting, as the return type doesn't have a generic type)
The usage of name in the body of the method is red with an error Cannot resolve symbol 'name'
The }; right at the end is underlined in red and shows an error of } expected, with the opening braces being the class declaration.
To confuse matters more, only the 4th and 5th of these errors show up in the Error panel, albeit with slightly different wording.
Following the example show in Telerik's KB, I tried the following...
public static RenderFragment<object> SayHelloName(string name) => context => __builder => {
<h1>Hello #name</h1>
};
However, when I try to use this...
<div>#SayHelloName("Jim")</div>
...the following is rendered on the page...
Microsoft.AspNetCore.Components.RenderFragment`1[System.Object]
...instead of "Hello Jim" as I expected.
Anyone able to explain what I'm doing wrong? How do I extract a RenderFragment method that takes parameters into a separate class?

Answer 1

Alternative syntax:
#page "/razor-template"
#timeTemplate
#petTemplate(new Pet { Name = "Nutty Rex" })
#code {
private RenderFragment timeTemplate = #<p>The time is #DateTime.Now.</p>;
private RenderFragment<Pet> petTemplate = (pet) => #<p>Pet: #pet.Name</p>;
private class Pet
{
public string? Name { get; set; }
}
}
This is from the docs: https://learn.microsoft.com/en-gb/aspnet/core/blazor/components/?view=aspnetcore-6.0#razor-templates

Answer 2

Reading a bit further down the page you linked to:
RenderFragment delegates can also accept parameters. The following
component passes the message (message) to the RenderFragment delegate:
<div class="chat">
#foreach (var message in messages)
{
#ChatMessageDisplay(message)
}
</div>
#code {
private RenderFragment<ChatMessage> ChatMessageDisplay = message => __builder =>
{
<div class="chat-message">
<span class="author">#message.Author</span>
<span class="text">#message.Text</span>
</div>
};
}
So it looks like you need
public static RenderFragment<string> SayHelloName = name => __builder => {
<h1>Hello #name</h1>
};
If you want to pass in more parameters, wrap them in a type e.g Greeting:
public class Greeting
{
public string Title { get; set; }
public string Name { get; set; }
}
and then pass the Greeting as a type parameter similar to ChatMessage example in the docs:
public static RenderFragment<Greeting> SayHelloName = greeting=> __builder => {
<h1>Hello #greeting.Title #greeting.Name</h1>
};
Or you can use a non-generic version:
public static RenderFragment SayHelloName(string title, string name) => __builder => {
<h1>Hello #greeting.Title #greeting.Name</h1>
};

Answer 3

The key thing to understand about RenderFragment is it's a delegate. The code within the fragment will run in the context of the class where it is defined.
There are many ways to define one. Here are a few:
<h3>RenderFragments.razor</h3>
#code {
public static RenderFragment SayHello = (builder) =>
{
builder.OpenElement(0, "div");
builder.AddContent(1, "Hello");
builder.CloseElement();
};
public static RenderFragment SayHelloAnotherWay => (__builder) =>
{
<div>
Hello Another Way
</div>
};
public static RenderFragment SayHelloAnotherWay1(string name) => (__builder) =>
{
<div>
Hello Another Way #name
</div>
};
public static RenderFragment SayHelloToName(string name) => (builder) =>
{
builder.AddMarkupContent(0, $"<div>Hello {name}</div>");
};
public static RenderFragment<string> SayHello1 => (context) => (builder) =>
{
builder.AddMarkupContent(0, $"<div>Hello {context}</div>");
};
}
And usage:
#page "/"
#RenderFragments.SayHello
#RenderFragments.SayHelloToName("Fred")
#RenderFragments.SayHello1(Name)
#RenderFragments.SayHelloAnotherWay
#RenderFragments.SayHelloAnotherWay1(Name)
#code {
string Name = "John";
}