c# - 绑定(bind)到列表 ASP.NET MVC 动态 jQuery 索引

Question

我有一组动态创建的列表元素。这些列表元素中的每一个都包含一个输入文本，我想将其值传递给 Controller ​​。

HTML

<ul id="list"></ul>
<button id="add">Add</button>

<script>
    var counter = 1;

    $('#add').click(function () {
        var text = '<input type="text" name="(what should I put here?)"></input>';
        var li = '<li>' + text + '</li>';

        $(li).appendTo('#list');
        counter++;
        return false;
    });
</script>

查看模型

public IEnumerable<string> list {get; set;}
...

如何将这些值隐式绑定(bind)到我的 ViewModel？我试图使用 counter 变量为每个创建的元素分配一个名称(如 list[counter])，但在 Controller 端 list 变量仍然是空的。

Answer 1

首先，我会根据您的未排序列表中的 li 数量来计算您的计数器:

$('#list > li').size()

然后为了让模型 Binder 开心，用列表预先修复你的属性:

'<input type="text" name="list[' + counter + ']"></input>'

完整的代码变成了:

$('#add').click(function () {
    var counter = $('#list > li').size();
    var text = '<input type="text" name="list[' + counter + ']"></input>';
    var li = '<li>' + text + '</li>';

    $(li).appendTo('#list');
    return false;
});

jsFiddle

请注意，您必须将 View 模型属性更改为 IList 或 List 才能使索引也起作用:

public IList <string> list {get; set;}