[英]Blazor - Create select box dynamically
我正在将旧的 JavaScript/JQuery 应用程序翻译成 Blazor,我需要弄清楚的最后一件事是如何在 UI 上动态添加带有选项的选择下拉列表。
在旧的 JavaScript 程序中,我通过使“+”可点击来做到这一点:
<span class="add"><span class="add2"> + </span>
单击时,它调用 .on("click") ,它只是用 .insertAfter 呈现 html,并且选择框在前一个元素(也恰好是选择框)之后动态出现。 计数 > 2 到底部保持超过 2 个选择被添加:
$('.add').on('click', function(){
var everything = "<select name='number" + (count + 1) + "' class='number" + (count + 1) + "'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select>'";
$(everything).insertAfter('.number' + count).addClass('add2');
count +=1;
if(count > 2){
$('.add').remove();
}
});
在 Blazor 中,似乎有一些方法可以在没有 JavaScript 的情况下做到这一点,我猜这就是 Blazor 的全部意义所在,例如“RenderFragment”以及“.AddContent”和“.AddAttribute”等方法。我没有尚未找到有关此技术的足够文档以了解它是否可行。 这是 Blazor 计划在 UI 中添加/删除元素的方式吗? 我在正确的道路上吗? 或者很冷,哦这么冷? 我想以最近推荐的 Blazor 方式执行此操作。
任何建议,方向或文档将不胜感激!
您不需要直接使用任何 RenderFragment() 方法。 只需创建一个简单的 Blazor 组件,它将具有:
像下面这样的东西将完成工作; 请参阅内联注释以获取解释:
@page "/Test"
@*Render the button if current number of select boxes is less than 2*@
@if (SelectBoxes.Count < 2)
{
<div>
<button type="button" class="btn btn-primary" @onclick="AddSelectBox">Add</button>
</div>
}
@*Render the corresponding number of select boxes*@
@foreach (var box in SelectBoxes)
{
<div>
<select class="number@(box + 1)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
}
@code {
// this is your view model, ie. a collection of "IDs" of the select boxes
List<int> SelectBoxes = new List<int>();
// this method will add a new item to the collection of select boxes
void AddSelectBox()
{
SelectBoxes.Add(SelectBoxes.Count);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.