Как передать массив записей таблицы при проверке на контроллер с помощью Javascript

Question

У меня есть списки таблиц, в которых отображаются курсы студентов, где студент выбирает каждую строку (то есть курсы, которые он хочет зарегистрировать), а затем нажимает кнопку регистрации, чтобы зарегистрировать выбранные им курсы.

У меня естьКод Javascript, который выбирает идентификатор выбранных им курсов и контроллер, который получает выбранные идентификаторы.

 <tbody>

                                            @foreach (var item in Model.AdmInstAssignCourses.Where(m => m.IsCompulsory == true))
                                            {
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="checkBox" name="check" value="@item.AdmInstCourses.CourseId" />
                                                    </td>
                                                    <td>  @Html.DisplayFor(modelItem => item.AdmInstCourses.CourseCode) </td>
                                                    <td> @Html.DisplayFor(modelItem => item.AdmInstCourses.CourseName)</td>
                                                    <td> @Html.DisplayFor(modelItem => item.AdmInstCourses.Units)</td>

                                                </tr>
                                            }
                                        </tbody>

 <input type="submit" value="Register Courses" id="register" class="btn btn-rose" />
        <script>
            $(document).ready(function () {

                $("#register").click(function () {
                    var selectedIDs = [];
                    $('input:checkbox.checkBox').each(function () {
                        if ($(this).prop('checked')) {
                            selectedIDs.push($(this).val());
                        }
                    });

                    var options = {};
                    options.url = "/Course/SaveCourse";
                    options.type = "POST";
                    options.dataType = "json";
                    options.data = JSON.stringify(selectedIDs);
                    options.contentType = "application/json; charset=utf-8;";
                    options.traditional = true;
                    options.success = function () {
                        alert("Registering Courses");
                    };
                    options.error = function () {
                        alert("Error while Registering Courses");
                    };
                    $.ajax(options);
                });

            });

        </script>

Contoller

 [HttpPost]
        public JsonResult SaveCourse(List<CourseIDs> courseIDs)
        {

            var user = HttpContext.Session.GetString("currentUser");
            if (user == null)
            {
               RedirectToAction("Login", "Account");
            }
            ViewBag.student = user;
            var pendingPayment = (from row in _context.BursaryTransactions where row.MatricNo == user && row.ResponseCode == "00" select row).Count();
            if (pendingPayment > 0)
            {
                RedirectToAction("PaymentSummary", "Student");
            }

            foreach (var courseID in courseIDs)
            {
                AdmInstAssignCourses obj = _context.AdmInstAssignCourses.Find(courseID);
                var mycourses = new CourseRegModel { CourseCode = obj.CourseCode, CourseTitle = obj.CourseName, CourseUnit = obj.Units};
                _context.Add(mycourses);

            }
             _context.SaveChanges();
            return Json(courseIDs);
        }

Мне нужен результат, когда студент нажимает накнопка регистрации и все записи, которые он выбрал (т. е. "CourseCode", "CourseTitle", "CourseUnits"), передаются в контроллер и сохраняются в CourseRegModel таблице

Answer 1

Вы можете использовать JQuery для получения всех значений (CourseCode, CourseTitle, CourseUnits) из каждого тега <td>, а также для отправки объекта в массив и отправки на сторону сервера:

<script>
        $(document).ready(function () {

            $("#register").click(function () {

                var items = [];
                $('input:checkbox').each(function () {

                    if ($(this).is(':checked')) {
                        var item = {};
                        item.CourseID = $(this).val();
                        item.CourseCode = $(this).parent().next().html();
                        item.CourseName = $(this).parent().next().next().html();
                        item.Units = $(this).parent().next().next().next().html();
                        items.push(item);
                    }
                });

                var options = {};
                options.url = "/Course/SaveCourse";
                options.type = "POST";
                options.dataType = "json";
                options.data = JSON.stringify(items);
                options.contentType = "application/json; charset=utf-8;";
                options.traditional = true;
                options.success = function () {
                    alert("Registering Courses");
                };
                options.error = function () {
                    alert("Error while Registering Courses");
                };
                $.ajax(options);
            });

        });
</script>

И на сервересторона вы можете получить список объектов через FromBody:

[HttpPost]
public JsonResult SaveCourse([FromBody]List<AdmInstCourses> AdmInstCourses)
{
    .....
}