获取价值复选框使用Ajax Post在MVC中检查

时间:2014-05-19 04:57:25

标签: javascript ajax asp.net-mvc checkbox

有人可以帮帮我..

这是我的代码:

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个问题。

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

  2. 如何在控制器帖子中获取数组的值集合? 例: public ActionResult Index(string RoleID,array [] collChecbox)collChecbox = {'chkinsert-1','chkupdate-2'}的内容,根据用户选中的复选框输入。

  3. 有人能帮助我吗?

1 个答案:

答案 0 :(得分:1)

为什么不使用Ajax.BeginForm()这样可以轻松发送已发布的表单值。

此外,您应该首先创建合适的模型。

MODEL

    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>