我刚开始学习Blazor(v0.3),并进行了一些测试。我想使用Blazor添加一个列表。
首先,我创建了一个List<string>
来测试在同一页上显示一个简单的列表。
<ul>
@foreach (var item in listItems)
{
<li>@item</li>
}
</ul>
@functions {
private List<string> listItems = new List<string>();
private string newItem;
private void AddItem()
{
if (string.IsNullOrEmpty(newItem))
return;
listItems.Add(newItem);
newItem = "";
}
}
这个现在运作得很好,每当我添加一个元素时就会将其添加到列表中。但是,当我尝试添加组件时,添加单个组件很容易,基于这个问题 这里, 但对于列表,我遇到了下一个问题:
- 我创建了一个
<li>
组件,用于测试组件的功能性,以下是该组件的视图
<li id="@ID">
@Text
</li>
@functions {
[Parameter]
string Text { get; set; }
[Parameter]
string ID { get; set; }
}
- 然后在父视图中执行
<input type="text" bind="TxtExample" name="inpAdd"/>
<button onclick="@addCompoment">add comp1</button>
<div class="simple-list-list">
@if (!componentListTest.Any())
{
<p>You have no items in your list</p>
}
else
{
<ul>
@foreach (var item in componentListTest)
{
@item
}
</ul>
}
</div>
@functions {
private List<RenderFragment> componentListTest { get; set; }
private int currentCount {get; set;}
private string TxtExample { get; set; }
protected override void OnInit()
{
currentCount = 0;
componentListTest = new List<RenderFragment>();
}
protected void addCompoment()
{
componentListTest.Add(CreateDynamicComponent(currentCount));
currentCount++;
}
RenderFragment CreateDynamicComponent(int counter) => builder =>
{
var seq = 0;
builder.OpenComponent(seq, typeof(listExample));
builder.AddAttribute(++seq, "Text", "text -- "+TxtExample);
builder.AddAttribute(++seq, "id","listed-"+counter);
builder.CloseComponent();
};
}
当我加载第一个元素时,它被正确地加载了:
![enter image description here](https://istack.dev59.com/Heloa.webp)
![enter image description here](https://istack.dev59.com/EEkZW.webp)