繁体   English   中英

Blazor - 动态创建选择框

[英]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 组件,它将具有:

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

像下面这样的东西将完成工作; 请参阅内联注释以获取解释:

@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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM