如何将值为 Id 的复选框列表保存到数据库中？

Question

我有来自不同表的课程列表显示在同一视图上，如下所示

我希望用户通过选中复选框来选择他想要注册的课程。 如何获取所选课程的 ID，然后传递给控制器​​以保存到另一个表。

我的 HTML 代码是这样的

    @model FlexSchool.Data.Models.ClassModelIndex

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

其中ClassModelIndex 是IEnumerable 的一个类，我用于显示要列出的不同表格。

我的按钮是这样<input type="submit" value="Register Courses" id="register" class="btn btn-rose" />

我的脚本是这样的

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

        $("#register").click(function () {
            var selectedIDs = [];
            $('input[type=checkbox]').each(function () {
                selectedIDs.push($(this).val());
            });
            $.ajax({

                url = "/Course/RegisterCourse",
                type = "POST",
                data = JSON.stringify({ courseIDs: selectedIDs }),
                contentType = "application/json; charset=utf-8",
                dataType = "json",
                success = function (data) {
                    alert(data);
                },
                error = function () {
                    alert("Error while registering courses!");
                },
            });
        });



</script>

我的Controller 是

    [HttpPost]
        public async Task<ActionResult> RegisterCourse(List<string> courseIDs)
        {

            var user = HttpContext.Session.GetString(InstName);
            if (user == null)
            {
                return RedirectToAction("Login", "Account");
            }

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

            }
            await _context.SaveChangesAsync();
            return RedirectToAction("MyCourses", "Course");
        }

但是当我在调试模式下运行代码时，我注意到我的courseIDs 没有得到任何字符串列表作为 ID。因此，script 没有将复选框传递给控制器​​。

我到底做错了什么？

Answer 1

问题在于 JavaScript 代码。您错过了:checked。使用以下代码获取所有检查值。并确保input[type="checkbox"] 和:checked 之间没有空格。

var selectedIDs = [];
$('input[type="checkbox"]:checked').each(function () {
    // looping through each checkbox and storing values in array for checked ones.
    selectedIDs .push($(this).val());
});

Answer 2

请尝试下面的 Ajax 代码：

var selectedIDs = [];
$('input[type=checkbox]').each(function () {
    selectedIDs.push($(this).val());
});

$.ajax({
        url : '/Course/RegisterCourse',
        type : "POST",
        data: JSON.stringify(selectedIDs),
        contentType : "application/json; charset=utf-8",
        dataType : "json",
        success : function (data) {
            alert(data);
        },
        error : function () {
            alert("Error while registering courses!");
        }
    });

直接将json字符串(JSON.stringify(selectedIDs))传给服务器端，在控制器方法中，使用[FromBody]取值：

[HttpPost]
public async Task<ActionResult> RegisterCourse([FromBody]List<string> courseIDs)
{


}

Answer 3

首先，你不能将 ids 放在复选框值中，因为复选框的值可以是真或假。

尝试使用 html.HiddenFieldFor(model => model.YourModel[i]) 并将 foreach 替换为 for。