C# .NET CORE如何通过部分视图弹出窗口绑定viewmodel中的对象列表

对于我的项目，我需要创建学校并增加在那里学习的学生。但是，学校和学生需要以相同的观点来创建

照片上可以看到这个例子。应输入学校名称。在添加学生按钮上，模式弹出窗口将显示输入学生姓名和年龄的位置。单击“添加”后，弹出窗口中的用户应添加到列表中。您可以添加任意数量的学生。最后单击“保存”时，应将添加了所有学生的学校发送给控制器，以便将其保存在数据库中

Viewmodels的示例

public class SchoolViewModel
{
    public string Name { get; set; }
    public List<Students> Students { get; set; }
}

public class Students
{
    public string StudentsName { get; set; }
    public int Age { get; set; }
}

公共类学校视图模型
{
公共字符串名称{get；set；}
公共列表学生{get；set；}
}
公立班学生
{
公共字符串StudentsName{get；set；}
公共整数{get；set；}
}

---

我想不出一种方法来动态地将学生添加到列表中，以及如何绑定和存储schoolviewmodel的临时数据，以便在最后一次保存按钮张贴方法上保存他们的数据。我创建了一个演示，将弹出模式放置在部分视图中，以输入学生的姓名和年龄。输入姓名和年龄后，单击modal的

添加

按钮，它将在主视图中将输入数据追加到学生表中

最后，单击“保存”按钮时使用ajax发送所有数据。以下是我的演示步骤：

1.在

/Views/Shared/\u AddStudentPartial.cshtml

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Student</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="col-4">
                <label> Student Name</label>
                <input id="tempName" name="tempName" class="form-control" />
            </div>

            <div class="col-4">
                <label> Student Age</label>
                <input id="tempAge" name="tempAge" class="form-control" />
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" id="addStudent" class="btn btn-primary">Add</button>
        </div>
    </div>

</div>

---

您可以使用JS变量并将您的值保存为JSON，最后将数据发布到服务器。Mvc为您提供了大部分现成的功能。使用隐藏的输入操作dom以获取新生数据。

@model SchoolViewModel
<h1>AddSchool</h1>
<div class="row">
    <div class="col-md-4">
        <form>
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label class="control-label">School Name</label>
                <input asp-for="Name" class="form-control" />
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            Student Name
                        </th>
                        <th>
                            Student Age
                        </th>
                    </tr>
                </thead>
                <tbody id="studentList"></tbody>
            </table>
            <div class="form-group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Add Student</button>
            </div>
            <div class="form-group">
                <input type="button" id="saveSchool" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<partial name="_AddStudentPartial" />

@section Scripts{
    <script>
        $(function () {
            //append students to table
            $("#studentList").empty();
            $('#addStudent').on('click', function () {
                var name = $('#tempName').val();
                var age = $('#tempAge').val();

                $('<tr><td>' + name + '</td>' +
                    '<td>' + age + '</td>' +
                    '</tr>').appendTo($('#studentList'));

                $('#exampleModal').modal('hide');
                document.getElementById("tempName").value = "";
                document.getElementById("tempAge").value = "";
            });

            //save school
            $('#saveSchool').on('click', function () {

                var formData = new FormData();
                var schoolName = $('#Name').val();
                formData.append("name", schoolName);

                $("#studentList tr").each(function (i) {
                    $("td", this).each(function (j) {
                        if (j == 0) {
                            formData.append("Students[" + i + "].StudentsName", $(this).text());
                        } else {
                            formData.append("Students[" + i + "].Age", $(this).text());
                        }
                    });
                });


                $.ajax({
                    type: "POST",
                    url: "/Home/AddSchool",//use your url
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                      //deal with the response
                   }

                });
            });
        });
    </script>
}

public IActionResult AddSchool()
{
    return View();
}
[HttpPost]
public IActionResult AddSchool(SchoolViewModel schoolViewModel)
{
    //save to database
}