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

Question

对于我的项目，我需要创建学校并添加在那里学习的学生。但是学校和学生需要在同一个视图中创建。

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

视图模型示例

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; }
}

我想不出一种将学生动态添加到列表中的方法，以及如何临时绑定和存储到 schoolviewmodel 以便将他们的数据放在最后一个“保存”按钮 post 方法中

Answer 1

我创建了一个演示，将弹出模式放在局部视图中以输入学生姓名和 age.After 输入姓名和年龄，单击模式的 Add 按钮，然后它将输入数据附加到主视图中的学生 table。

最后，单击保存时使用 ajax 发送所有数据 button.Followings 是我演示的步骤：

1.Create /Views/Shared/_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>

2.AddSchool.cshtml

@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>
}

3.Controller

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

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

.NET CORE how to bind list of objects in viewmodel through partial view popup

c#

partial-views

.net-core

asp.net-core