. NET CORE, как связать список объектов в viewmodel через всплывающее окно частичного представления

Question

Для моего проекта мне нужно создать школы и добавить студентов, которые там учатся. Но школа и ученики должны быть созданы в едином представлении.

Пример можно увидеть на фото. Название школы должно быть введено. На кнопке «Добавить учащегося» появится модальное всплывающее окно, где вводятся имя и возраст учащегося. После нажатия кнопки «Добавить» во всплывающем окне необходимо добавить пользователя в список. Вы можете добавить столько учеников, сколько захотите. В конце, при нажатии кнопки «Сохранить» школа со всеми добавленными учениками должна быть отправлена ​​на контроллер для сохранения их в базе данных.

Пример 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; }
}

Я не мог придумать, как динамически добавлять учеников в список и как привязывать и сохранять временные данные для модели schoolview, чтобы иметь их данные. на последнем методе сохранения сообщения кнопки

Answer 1

Я создаю демо-версию, в которой всплывающее модальное изображение частично отображается для ввода имени и возраста учащегося. После ввода имени и возраста нажмите кнопку модального Add, после чего она добавит входные данные в таблицу учеников в главном представлении. .

Наконец, отправьте все данные, используя ajax при нажатии кнопки СОХРАНИТЬ. Ниже приведены шаги моей демонстрации:

1.Создайте частичное представление в /Views/Shared/_AddStudentPartial.cshtml

* 1008. *

2.AddSchool.cs html

@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.Контроллер

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