在 ASP.NET MVC 中插入多行

Question

我在我的数据库中插入多个数据时遇到问题。这是我下面的代码：

上下文类：

 public void Add(IEnumerable<UserInformation> model)
 {   
        foreach(UserInformation user in model)
        {
            _db.Add(user);
        }

        _db.SaveChanges();                                        
 }

这是我的控制器：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Add(IEnumerable<UserInformation> userInformation)
{
        if (!ModelState.IsValid)
        {
        }   

       _ui_context.Add(userInformation);

        return new JsonResult("User Saved!");
}

这是我的看法：

 @model IEnumerable<MyMVC.Models.UserInformation>
 <form method="POST" id="form_data">                                               
                    <input type="hidden" id="action_value" value="" />
                    <table id="tbl_data" class="table table-bordered">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Location</th>
                            </tr>
                        </thead>
                        <tbody id="table_data">

                            <tr>
                                <td>
                                    <input  type="hidden" id="txtId" class="form-control" />
                                    <input name="firstname" class="form-control" id="txtFirst" />
                                    <span class="text-danger"></span>
                                </td>
                                <td>
                                    <input name="lastname" class="form-control" id="txtLast" />
                                    <span class="text-danger"></span>
                                </td>
                                <td>
                                    <input  name="location" class="form-control" id="txtLocation" />
                                    <span class="text-danger"></span>
                                </td>
                            </tr>


                        </tbody>                             
                    </table>                                   
                </form>              
                <a class="btn btn-info" id="btnAddField">Click to Add more Fields</a>

这是我的 AJAX：

添加字段的代码

//Add fields
        var i = 1;
        $(document).on("click", "#btnAddField", function () {

            $("#table_data").append("<tr>"
                + "<td><input asp-for='FirstName' name='firstname' class='form-control' id='txtFirst" + i + "' />"
                + "<span class='text-danger'></span ></td>"
                + '<td><input asp-for="LastName" name="lastname" class="form-control" id="txtLast' + i + '" />'
                + '<span class="text-danger" ></span ></td>'
                + '<td><input asp-for="Location" name="location" class="form-control" id="txtLocation'+i+'" />'
                + '<span class="text-danger"></span ></td>'
                + "</tr > ");

            i++;
        });

POST 中的代码

var data = $('#form_data').serialize();                

                $.ajax({
                    method: "POST",
                    url: "/UserInformation/Add",
                    data: data,
                    dataType: "JSON",
                    success: function (data) {
                        alert(data);
                        clearFields();
                        $("#exampleModal").modal("hide");
                        loadUser();
                    }
                });        

我每次调试 ajax 时都会得到一个空响应。如果您能帮我解决这个问题，我将非常感激。

谢谢！

Answer 1

要使模型绑定起作用，您需要在 name 属性中为字段提供索引。 看看这个问题，我answered 有一个非常相似的问题：

所以您的代码需要如下所示，但请注意，在 javascript 中使用 asp-for 可能不起作用，因为要使其工作，标签助手必须呈现在服务器端，您只是在其中附加 html到dom。

您还需要为索引保留一个运行总计，因为每个 i 对于该组 UserInformation 都必须是唯一的。

<tr>
    <td>
        <input  type="hidden" id="txtId" class="form-control" />
        <input name="UserInformation[0].firstname" class="form-control" id="txtFirst" />
        <span class="text-danger"></span>
    </td>
    <td>
        <input name="UserInformation[0].lastname" class="form-control" id="txtLast" />
        <span class="text-danger"></span>
    </td>
    <td>
        <input  name="UserInformation[0].location" class="form-control" id="txtLocation" />
        <span class="text-danger"></span>
    </td>
</tr>

//Add fields
var i = 1;
$(document).on("click", "#btnAddField", function () {

    $("#table_data").append("<tr>"
        + "<td><input asp-for='FirstName' name='UserInformation[i].firstname' class='form-control' id='txtFirst" + i + "' />"
        + "<span class='text-danger'></span ></td>"
        + '<td><input asp-for="LastName" name="UserInformation[i].lastname" class="form-control" id="txtLast' + i + '" />'
        + '<span class="text-danger" ></span ></td>'
        + '<td><input asp-for="Location" name="UserInformation[i].location" class="form-control" id="txtLocation'+i+'" />'
        + '<span class="text-danger"></span ></td>'
        + "</tr > ");

    i++;
});