呈现带有作为参数传递给页面的数据的组件

Question

在单击按钮时，我在页面上呈现组件。这是很好与我的代码下面。该组件是一个保存的输入框数据到数据库

<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();
}

当页面加载并且数据库中有数据时，我想传递数据库数据作为组件的参数并呈现在页面上。可能有10个。

使用上面的代码，我如何实现这一点?这更像是对生成使用相同的页面并显示数据库中的数据。

让我试着进一步解释一下我想要达到的目标。

sideItems下面是renderFragment的列表。如果我能把数据库数据加进去就好了列表，这将解决我的问题，但不，我不能这样做。

public List<RenderFragment> sideItems { get; set; }

当我的主页加载时，我希望能够调用GetData方法并返回托管页面上每个组件的数据我的组件

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;
}

我希望能够使用这个Html页面在我的页面上显示与相关数据的组件并且仍然能够点击按钮来生成新的组件在同一时间，所以在我的页面上我有包含数据库数据的组件和不包含数据库数据的新组件的组合。

<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

经OP澄清后编辑:

想要在每个项目与razor组件一起显示时呈现一个项目列表是一个非常常见的模式。你应该这样做:

ListItem.razor

// logic to render Value
First Name: @Value.FirstName
Last Name: @Value.LastName
@code
{
[Parameter]
public Tester Value {get;set;}
}

注意，没有使用特定类型或组件类型的集合(List<RenderFragment>或List<ListItem>甚至List<Tester>)。

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();
}

}

早些时候回应:

将db值作为级联参数传递，可以让您在不显式分配给组件的情况下传递数据。我还建议，如果不是绝对需要的话，不要对构建器进行修改。试试这个:

<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();
}
}