Pro Asp.net 核心 MVC 如何创建视图列表并将数据列表传递给控制器​​（我如何将数据列表从视图传递给控制器​​）

Question

'public class CutData
        {
            [Key]
            public int DataID { get; set; }//before

            [Required(ErrorMessage = "Please enter a Tool")]
            public string Tool { get; set; }//before
         // (skip 66 )....
            public string Location { get; set; }//before

        }'

模型切割数据

'
    @model List<CutData>
        <a class="btn btn-primary classAdd" style="margin:5px;">Add row</a>
        <div class="editDiv" style="width:100%; height:100%; overflow-x :auto;">
            <form asp-action="Edit" asp-controller="Home" method="post">
                <fieldset>
                    <table id="editTable" class="table table-striped table-bordered table-sm" width="100%" border="0" cellspacing="0" cellpadding="0">
                        <thead>
                            <tr>
                                <th></th>
                                <th class="sticky">Cut Ref</th>
                                <th>Tool</th>
                                <th>Date</th>
        @*(skip...)*@
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                           @for (int i = 0; i < Model.Count; i++)
                           {
                            <tr class="newcutDataInput">
                                <td><div class="form-group"><input type="hidden" name="Model[i].DataID" /></div></td>
                               .....
                                <td><button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>
                            </tr>
                           }
                        </tbody>
                    </table>
                </fieldset>
                <div class="text-center">
                    <button style="position:fixed; margin-top: 40px;" class="btn btn-primary" id="btnSaveAll" asp-controller="Home" type="submit">Save</button>
                </div>
            </form>
        <script type="text/javascript">

         $(document).ready(function () {
                $(document).on("click", ".classAdd", function () {
                    var i = 1;
                    var contacttr = '<tr class="newcutDataInput">' +
                                '<td><div class="form-group"><input type="hidden" name="Model[i].DataID"/></div></td>' +
                               @*(skip...)*@          
                        '<td><button type = "button" id = "btnDelete" class="deleteContact btn btn btn-danger btn-xs"> Remove</button></td > ' +
                        '</tr>';
                    $('#editTable').append(contacttr); // Adding these controls to Main table class
                    rowCount++;
                });
            }); // Adding these controls to Main table class

'

查看通话编辑

'

    [HttpPost]
            public IActionResult Edit(List<CutData> cutDatas)
            {
                try
                {

                    //context.CutDatas.Add(cutDatas);

                    //List<CutData> cutList = new List<CutData>();
                    //foreach (var c in cutDatas)
                    //{

                    //    cutList.Add(new CutData()
                    //    {
                    //        DataID = c.DataID,
                   //             .........
                    //        Location = c.Location,

                    //    });
                    //}
                    //context.SaveChanges();
                    return RedirectToAction("CutList");
                }
                catch (Exception)
                {
                    return View();
                }
            }

'

控制者

Pro Asp.net 核心 MVC 如何创建视图列表并将数据列表传递给控制器​​（我如何将数据列表从视图传递到控制器）- 我知道如何将数据从视图传递到控制器，但我不知道如何将数据列表（添加行）传递给控制器​​。请修复视图和控制器 我正在使用迁移。

Answer 1

您可以使用List<CutData>接收修改后的数据。

视图中的 name attribute 需要与编辑操作收到的 cutDatas parameter 相匹配。

另外，提交按钮不需要添加asp-controller。这将导致您单击按钮并输入默认方法 Home 而不是 Edit 操作。

而js中添加行的index需要在model数据count的基础上添加。

 @model List<CutData>    
<a class="btn btn-primary classAdd" style="margin:5px;">Add row</a>
    <div class="editDiv" style="width:100%; height:100%; overflow-x :auto;">
        <form asp-action="Edit" asp-controller="Home" method="post">
            <fieldset>
                <table id="editTable" class="table table-striped table-bordered table-sm" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Tool</th>
                            <th>Location</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (int i = 0; i < Model.Count; i++)
                        {
                            <tr class="newcutDataInput">
                                <td><div class="form-group"><input type="hidden" name="cutDatas[@i].DataID" asp-for="@Model[i].DataID" /></div></td>
                                <td><div class="form-group"><input type="text" name="cutDatas[@i].Tool" asp-for="@Model[i].Tool" /></div></td>
                                <td><div class="form-group"><input type="text" name="cutDatas[@i].Location" asp-for="@Model[i].Location" /></div></td>
                                <td><button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>
                            </tr>
                        }
                    </tbody>
                </table>
            </fieldset>
            <div class="text-center">
                <button style="position:fixed; margin-top: 40px;" class="btn btn-primary" id="btnSaveAll" type="submit">Save</button>
            </div>
        </form>
    </div>
    <script type="text/javascript">
            $(document).ready(function () {
                  var rowCount = @Model.Count;
                    $(document).on("click", ".classAdd", function () {
                        var contacttr = '<tr class="newcutDataInput">' +
                            '<td><div class="form-group"><input type="hidden" name="cutDatas[' + rowCount + '].DataID"/></div></td>' +
                            '<td><div class="form-group"><input type="text" name="cutDatas[' + rowCount + '].Tool" /></div></td>' +
                            '<td><div class="form-group"><input type="text" name="cutDatas[' + rowCount + '].Location"/></div></td>' +
                            '<td><button type = "button" id = "btnDelete" class="deleteContact btn btn btn-danger btn-xs"> Remove</button></td > ' +
                            '</tr>';
                        $('#editTable').append(contacttr); // Adding these controls to Main table class
                        rowCount++;
                    });
             }); // Adding these controls to Main table class
        </script>

调试结果如下：