使用 Ajax Post 在 MVC 中检查值复选框答案

【问题标题】：Get Value Checkbox Checked in MVC using Ajax Post使用 Ajax Post 在 MVC 中检查值复选框
【发布时间】：2025-11-24 20:50:02
【问题描述】：

谁能帮帮我..

这是我的代码：

Index.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>jQuery With Example</title>
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        $(function () {

            $('.chkview').change(function () {
                $(this).closest('tr').find('.chkitem').prop('checked', this.checked);
            });

            $(".chkitem").change(function () {
                var $tr = $(this).closest('tr'), $items = $tr.find('.chkitem');
                $tr.find('.chkview').prop('checked', $items.filter(':checked').length == $items.length);
            });
        });

        function Save() {
            $.ajax({
                url: @Url.Action("Index", "Home" , "Index"),
                type: "POST",
                data: formData ,
                dataType: "json",
                success: function(data){
                    alert(data.RoleID)
                },
                error: function(e){
                    debugger;
                }
        }

</script>
</head>
<body>
    <h2>Access Control-Home</h2>

    <br />
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { RoleID="RoleID" }))
{
    <input type="hidden" name="RoleID" value="1" id="RoleID" />
    <table id="mytable">
        <tr>
            <td>View</td>
            <td>Insert</td>
            <td>Update</td>
            <td>Delete</td>
        </tr>
        <tr>
            <td>Administrator</td>
            <td>
                <input type="checkbox" class="chkview chkview-1" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-1" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-1" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-1" />
            </td>
        </tr>
        <tr>
            <td>Free User</td>
            <td>
                <input type="checkbox" class="chkview chkview-2" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-2" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-2" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-2" />
            </td>
        </tr>
    </table>
    <br />

        <button type="submit" class="buttons buttons-style-1" onclick="Save()">Save</button>
}

</body>
</html>

HomeController.cs

[HttpPost]
public ActionResult Index(string RoleID)
{
   var _roleID = RoleID;
   return View();
}

我想问 2 个问题。

如何使用 ajax 解析列表选中复选框的值？我想解析我检查的复选框的类名如果我检查了行管理员，我需要数组列表，{'chkinsert-1','chkupdate-2'}
如何在控制器后获取数组的值集合？例子： public ActionResult Index(string RoleID, array[] collChecbox) collChecbox = { 'chkinsert-1','chkupdate-2'} 的内容根据用户勾选的复选框输入。

有人可以帮我吗？

【问题讨论】：

标签： javascript ajax asp.net-mvc checkbox

【解决方案1】：

你为什么不使用 Ajax.BeginForm() 这使得发送表单值变得如此容易。

另外，你应该先创建合适的模型。

型号

    public class UserRole
    {
    public Administrator Administrator { get; set; }
    public FreeUser FreeUser { get; set; }
    }
    public class Administrator
    {
    public int Checkbox1 { get; set; }
    }
    public class FreeUser
    {
    public int Checkbox1 { get; set; }
    }

在视图中执行以下操作。

    @model Model.UserRole
    <div id="result"></div>
    @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
    {
        <input type="hidden" name="RoleID" value="1" id="RoleID" />
        <table id="mytable">
            <tr>
                <td>View</td>
                <td>Insert</td>
                <td>Update</td>
                <td>Delete</td>
            </tr>
            <tr>
                <td>Administrator</td>
                <td>
                    @Html.CheckBoxFor(m => m.Administrator.Checkbox1)
                </td>
            </tr>
            <tr>
                <td>Free User</td>
                <td>
                    @Html.CheckBoxFor(m => m.FreeUser.Checkbox1)
                </td>
            </tr>
        </table>
        <br />
        <button type="submit" class="buttons buttons-style-1" onclick="Save()">Save</button>
    }

控制器动作

    [HttpPost]
    public ActionResult Index(UserRole model)
    {
        return View();
    }

也不要忘记包含 ajax 库。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

【讨论】：