在 MVC 中发送项目列表

Posted 2023-05-09

【中文标题】在 MVC 中发送项目列表

【英文标题】：Send list of items in 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 个项目之后的所有项目不显示在控制器上

【参考方案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);
            
        );
    );

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