使用Ajax Post在MVC中勾选获取值复选框

Get Value Checkbox Checked in MVC using Ajax Post

本文关键字：获取 复选框 Ajax Post MVC 使用      更新时间：2023-09-26

谁能帮帮我…

这是我的代码

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

我想问两个问题。

  1. 如何使用ajax解析列表选中复选框的值?我想解析复选框的类名，我检查的例子，我需要数组的列表，如果我检查行管理员，{'chkinsert-1'，'chkupdate-2'}

  2. 我如何在控制器后得到数组的值集合?例子:public ActionResult索引(string RoleID, array[] collChecbox) collChecbox = {'chkinsert-1'，'chkupdate-2'}的内容，根据用户对复选框输入的勾选

谁能帮帮我??

为什么不使用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>
相关文章：