Rendering components with data passed as parameters to a page - blazor-server-side

Question

On the click of a button, I am rendering a component on a page. This works
very well with my code below. The component is an input box that saves
data to the database
<button type="button" #onclick="GenerateComponents" id="btClickMe">
Show Sign Up Window
</button>
<div id="groups-parent" style="display: block; min-height: 500px; position: relative; border: dashed 1px #888; ">
#foreach (var xAlert in sideItems)
{
<div class="draggable obstacle">
#xAlert
</div>
}
</div>
private async Task GenerateComponents()
{
sideItems.Add(
builder =>
{
builder.OpenComponent<AddComponent>(0);
builder.CloseComponent();
});
StateHasChanged();
}
When the page loads and there is data in the database, I will like to pass the database
data as parameters to the component and render on the page. There could be 10 of them.
With the code above, how can I achieve this? This is more like using the same page for the generation
and display of data from the database.
Let me try to explain further about what I am trying to achieve.
sideItems below is a list of renderFragment. It could have been nice if I can add database data to this
list and that will solve my problem but no I cant do that.
public List<RenderFragment> sideItems { get; set; }
When my main page loads, I want to be able to call the GetData method and return data for each component on the page that is hosting
my component
protected override void OnInitialized()
{
sideItems = new List<RenderFragment>();
//Pull GetData() here
}
public List<Tester> GetData()
{
List<Tester> data = new List<Tester>
{
new Tester{FirstName = "JJ", LastName = "PP"},
new Tester{FirstName = "HH", LastName = "KK"},
new Tester{FirstName = "KK", LastName = "LL"},
};
return data;
}
I want to be able to use this Html page to display the component with associated data on my page
and still be able to click on the button to generate new components at the same time so on my page I have
a combination of components with data from the database and new components without data from the database.
<div id="groups-parent" style="display: block; min-height: 500px; position: relative; border: dashed 1px #888; ">
#foreach (var xAlert in sideItems)
{
<div class="draggable obstacle">
#xAlert
</div>
}
</div>

Answer 1

Edit after clarification by OP:
Wanting to render a list of items when each item is displayed with a razor component is a very common pattern. This is how you should do it:
ListItem.razor
// logic to render Value
First Name: #Value.FirstName
Last Name: #Value.LastName
#code
{
[Parameter]
public Tester Value {get;set;}
}
Note that no particular type OR collection of component types (List<RenderFragment> or List<ListItem> Or even List<Tester>) is used.
ListHolder.razor
<div>
#ListComponents
</div>
#code
{
[Parameter]
public RenderFragment ListComponents {get;set;}
}
Index.razor
<ListHolder>
#foreach(var value in values)
{
<ListItem Value="#value />
}
</ListHolder>
#code
{
IEnumerable<Tester> values;
// some data pull function, could sit in initialize/ use click event handler etc
void PullData()
{
values = GetData();
StateHasChanged();
}
}
Earlier response:
Passing your db values as cascading parameter would let you pass data without explicitly assigning to a component. I will also suggest that you don't tinker with the builder if it is not absolutely required.
Try this:
<button type="button" #onclick="GenerateComponents" id="btClickMe">
Show Sign Up Window
</button>
<div id="groups-parent" style="display: block; min-height: 500px; position: relative; border: dashed 1px #888; ">
<CascadingValue Value="#dbValue">,
#foreach (var componentIndex in componentCount)
{
<div class="draggable obstacle">
<PaneComponent/>
</div>
}
</CascadingValue>
</div>
#code
{
int componentCount = 0;
private async Task GenerateComponents()
{
componentCount++;
StateHasChanged();
}
}