Blazor - 动态创建选择框

Question

我正在将一个旧的 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 的全部要点，例如带有“.AddContent”和“.AddAttribute”等方法的“RenderFragment”。我还没有找到足够的关于这种技术的文档来知道它是否可行。这是 Blazor 计划在 UI 中添加/删除元素的方式吗？我在正确的道路上吗？还是很冷，哦，这么冷？我想以最近推荐的 Blazor 方式执行此操作。

任何建议、指示或文档将不胜感激！

Answer 1

您不需要直接使用任何 RenderFragment() 方法。只需创建一个简单的 Blazor 组件即可：

• 用于保存动态表单状态“描述”的视图模型
• 将视图模型转换为 HTML 的相应逻辑

类似下面的东西可以完成工作；请参阅内联 cmets 进行解释：

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