在 MVC 中发送项目列表答案

【问题标题】：Send list of items in MVC在 MVC 中发送项目列表
【发布时间】：2017-04-13 01:28:45
【问题描述】：

这是我的物品

public class RequestViewModel
{    
    public long FeederId { set; get; }

    public int A { set; get; }

    public int B { set; get; }

    public int C { set; get; }

    public int Remain { set; get; }
}

这是我想从表单发送到控制器的 Add 模型

public class RequestAddListViewModel
{
    public List<SuppliantRequestFeederAddViewModel> SuppliantRequestFeederAddViewModels { set; get; }

    public List<SelectListItem> FeederSelectListItems { set; get; }

    public long NodeId { set; get; }
}

第一次加载我的表单时我有一个项目我有一个button 当我单击它时我的第一行克隆和append 到我的表单例如现在我的表单上有 8 个项目，我可以删除每个项目在客户端。如果我没有删除任何项目并提交表单没有问题。我的问题是当删除一个项目时，例如删除第二个项目，然后提交我的表单，我的控制器上没有项目。没有任何东西发送到控制器。

查看

@for (int index = 0; index < Model.RequestAddListViewModel.Count; index++)
{
    var req = Model.RequestAddListViewModel[index];
    <tr class="requestrow">
        <td>
            @Html.DropDownListFor(p => p.req[index].FeederId,     Model.FeederSelectListItems, new { @class = "form-control" })
        </td>
        <td>
            @Html.TextBoxFor(p => p.req[index].A, new { @class = "form-control" })
        </td>
        <td>
           @Html.TextBoxFor(p => p.req[index].B, new { @class = "form-control" })
        </td>
        <td>
            @Html.TextBoxFor(p => p.req[index].C, new { @class = "form-control" })
        </td>
        <td>
            <button type="button" class="btn btn-primary btn-icon btn-rounded newfeeder"><i class="icon-plus2"></i></button>
        </td>
    </tr>
}

和我的 jQuery 脚本（已编辑）：

var inputCount=0;
$(document).on('click', '.newfeeder', function () {
    inputCount++;
    var tr = $(this).closest("tr").clone();
    tr.find("input").val(0);
    tr.find("button").removeClass("btn-primary").addClass("btn-danger").removeClass("newfeeder").addClass("deleterow");
    tr.find("button i").removeClass("icon-plus2").addClass("icon-trash");
    tr.find("input,select").each(function () {
        $(this).attr({
            'name': function (_, name) { return name.toString().replace('0', inputCount) },
            'id': function (_, id) { return id.toString().replace('0', inputCount) }
        });

    });
    $(this).closest("tr").after(tr);
});

$(document).on('click', '.deleterow', function() {
    $(this).closest("tr").remove();
});

【问题讨论】：

您需要为集合索引器添加隐藏输入。请参阅this answer。既然你有一个下拉列表，那么就使用BeginCollectionItem() 方法。而您var tr = $(this).closest("tr").clone(); 的代码行将永远无法正常工作，无法在您提交时绑定到您的模型
@StephenMuecke，请看编辑部分。
然后您查看链接以了解如何正确操作：)
@SalarAfshar，您的 razor 视图标记和 JS 需要确保下拉列表和文本框的名称格式为 SuppliantRequestFeederAddViewModels[<index>].<property>，其中 index 是升序排列的。
@StephenMuecke 我的问题是当我删除其中一个项目时，例如我有 8 个项目，当删除第 3 个项目并提交表单时，只得到 2 个第一个项目和第 3 个项目之后的所有项目不显示在控制器上

标签： javascript c# jquery asp.net-mvc forms

【解决方案1】：

在表单中添加或删除新项目后，我终于找到了解决方案我称这个函数为ReCreateIndex()

function ReCreateIndex(container) {
    $(container).each(function (index, obj) {
        $("input,select", $(this)).each(function () {
            if ($(this).attr("name")) {
                var name = $(this).attr("name").replace($(this).attr("name").replace(/[^0-9]/gi, ''), index);
                $(this).attr("name", name);
            }

            if ($(this).attr("id")) {
                var id = $(this).attr("id").replace($(this).attr("id").replace(/[^0-9]/gi, ''), index);
                $(this).attr("id", id);
            }
        });
    });
}

这意味着在对项目进行任何更改后，重新创建项目索引。

【讨论】：