在动态添加项目后将数据发布到 MVC 5 中的控制器操作方法答案

【问题标题】：Post data to controller action method in MVC 5 after adding items dynamically在动态添加项目后将数据发布到 MVC 5 中的控制器操作方法
【发布时间】：2017-03-06 04:06:54
【问题描述】：

我有一个模型如下

public class ServiceView
{
    public ServiceView()
    {
        SubServiceView = new List<SubServiceView>();
    }
    public int Id { get; set; }
    public string Name { get; set; }
    public List<SubServiceView> SubServiceView { get; set; }
}

public class SubServiceView
    {
        public int Id { get; set; }
        public int ParentId { get; set; }
        [Required(ErrorMessage="Name is Required")]
        public string Name { get; set; }
        public string Description { get; set; }        
    }

我能够动态加载项目，但发布后我的 SubServiceView 计数始终为 0。下面是我的代码。

创建视图：

<table class="form-group">
                    <thead>
                        <tr>
                            <td class="control-label col-md-2">
                                <label>Name</label>
                            </td>
                            <td class="col-md-10">
                                <input id="SubServiceView_0_Name" name="WeDoShoesCMSAdminPanel.ViewModel.SubServiceView[0].Name" type="text" class="form-control" value="" />
                            </td>                            
                        </tr>
                        <tr>
                            <td class="control-label col-md-2">
                                <label>Description</label>
                            </td>
                            <td class="col-md-10">
                                <input id="SubServiceView_0_Description" name="WeDoShoesCMSAdminPanel.ViewModel.SubServiceView[0].Description" type="text" class="form-control" value="" />
                            </td>
                        </tr>
                    </thead>
                    <tbody id="tbSubServices"></tbody>
                </table>

脚本功能：

function addSubService() {
                @{
                    Model.SubServiceView.Add(new WeDoShoesCMSAdminPanel.ViewModel.SubServiceView());
                }

                var index = $("#tbSubServices").children("tr").length;

                //var indexCell = "<td style='display:none'><input name='SubServiceView.Index' type='hidden' value='" + index + "' /></td>";
                var labelNameCell = "<td class='control-label col-md-2'><label>Name</label></td>";
                var nameCell = "<td class='col-md-10'><input id='SubServiceView_" + index + "_Name' name='WeDoShoesCMSAdminPanel.ViewModel.SubServiceView[" + index + "].Name' type='text' class='form-control' value='' /></td>";
                var labelDescriptionCell = "<td class='control-label col-md-2'><label>Description</label></td>";
                var descriptionCell = "<td class='col-md-10'><input id='SubServiceView_" + index + "_Description' name='WeDoShoesCMSAdminPanel.ViewModel.SubServiceView[" + index + "].Description' type='text' class='form-control' value='' /></td>";
                var removeCell = "<td class='col-md-10'><input id='RemoveSubService' type='button' class='btn btn-default' value='-' onclick='removeSubService(" + index + ");' /></td>";

                var newRow = "<tr id='trSubServices" + index + "'>" +
                            labelNameCell + nameCell + removeCell + "</tr>" +
                            "<tr id='trSubServices1" + index + "'>" +
                            labelDescriptionCell + descriptionCell + "</tr>";
                $("#tbSubServices").append(newRow);
            }

            function removeSubService(id) {
                var controlToBeRemoved = "#trSubServices" + id;
                var controlToBeRemoved1 = "#trSubServices1" + id;
                $(controlToBeRemoved).remove();
                $(controlToBeRemoved1).remove();
            }

验证也不适用于动态添加的子服务，所以我不知道这是否是好的解决方案。由于我是 MVC 的新手，所以任何人都可以指导我如何以某种优化和通用的方式实现相同的要求？

查看：

【问题讨论】：

您希望您的用户界面是什么样的？ - 与列表中的每个项目关联的复选框，以便您选择您想要的？
与每个项目关联的复选框会很棒，否则下拉值也会很好。
您需要编辑您的问题，对 UI 进行更多解释。这里已经很晚了，但我会在早上添加一个答案（我假设除了绑定到它们的 ID 值之外，你真的想显示品牌的名称？
是的，这是正确的，带有值的 ID。
我假设您不打算编辑问题，因此不想要答案。建议您查看this answer 的一种方法。

标签： javascript jquery angularjs ajax asp.net-mvc-5

【解决方案1】：

您可以使用 linq 尝试这样的操作

添加

ProductView.SizeTypes.Add(new SizeTypes(){
//Your items
});

删除

ProductView.SizeTypes.Remove(SizeTypes);

你也可以试试Brands

【讨论】：

我不知道我是否能够解释我的问题，但我想在 MVC 5 上实现相同的创建视图，也为每个添加 SizeType 或 Brands，List 将来自控制器操作方法。