MVC 3剃须刀 - 维护页面请求之间的复选框值

Question

我有一个带复选框的页面，用于过滤webgrid。

要通过取消选中复选框来向我的问题提供一些上下文，我们将使用ajax请求过滤数据，以便在我的webgrid中显示较少的结果。但是，一旦我点击webgrid下面的数字循环浏览网格中的下一组记录，我就会丢失复选框的当前状态。这是因为我再次调用我的ActionResult方法，再次加载页面。

那么如何在页面加载之间保留这些复选框值？

这是我的观点

@model IEnumerable<UserManager.Models.vw_UserManager_Model>


@*@model UserManager.Models.vw_UserManager_Model
*@
@{
    ViewBag.Title = "User Manager Dashboard";
}

    @Html.ActionLink("Create New User", "CreateUser")


<div class="webgrid-filter">
    <b>@Html.Label("Select a filter: ")</b>
    <br />
    @Html.Label("Toggle ALF Intelligence users:")
    <input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("Index", "UserManager")')" id="chkFilterAlfIntell" checked="checked" />
     @Html.Label("Toggle ALF Connect users:")
    <input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("Index", "UserManager")')" id="chkFilterAlfConn" checked="checked"/>
     @Html.Label("Toggle BRAD users:")
    <input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("Index", "UserManager")')" id="chkFilterBrad" checked="checked"/>
</div>

<div id="webgrid-wrapper">
    @Html.Partial("~/Views/Partial/_WebGridUserManager.cshtml", Model)
    </div>
<br />


<script type="text/javascript">
    $(document).ready(function () {

        // Disable checkboxs where a user is not active.
        $(".webgrid-wrapper input:not(:checked)").attr("disabled", "disabled");

        // Style tables.
        function jQueryUIStyling() {
            $('input:button, input:submit').button();

            $('.webgrid-wrapper').addClass('ui-grid ui-widget ui-widget-content ui-corner-all');
            $('.webgrid-title').addClass('ui-grid-header ui-widget-header ui-corner-top');
            jQueryTableStyling();
        } // end of jQueryUIStyling

        function jQueryTableStyling() {
            $('.webgrid').addClass('ui-grid-content ui-widget-content');
            $('.webgrid-header').addClass('ui-state-default');
            $('.webgrid-footer').addClass('ui-grid-footer ui-widget-header ui-corner-bottom ui-helper-clearfix');
        } // end of jQueryTableStyling
    });
</script>
<script type="text/javascript">

    function filterGrid(url) {
        var filters = getFilterVals();
//        console.log(filters);

        $.ajax({
            url: url,
            type: "POST",
            async: true,
            dataType: "html",
            data: "alfConnect=" + filters.alfConnect + "&" + "alfIntelligence=" + filters.alfIntelligence + "&" + "brad=" + filters.brad,
            success: function (data) {
                $('#webgrid-wrapper').empty().html(data);
//                $('#webgrid-wrapper').html(data);
            }
        });
    }

    function getFilterVals() {
        filters = new Object();
        if ($('.webgrid-filter #chkFilterAlfIntell').is(':checked')) {
            filters.alfIntelligence = 1;
        }
        else {
            filters.alfIntelligence = 0;
        }

        if ($('.webgrid-filter #chkFilterAlfConn').is(':checked')) {
            filters.alfConnect = 1;
        }
        else {
            filters.alfConnect = 0;
        }

        if ($('.webgrid-filter #chkFilterBrad').is(':checked')) {
            filters.brad = 1;
        }
        else {
            filters.brad = 0;
        }
        return filters;

    }

    function logUserOff(url) {
        var answer = confirm('Are you sure you want to save this data?')
        if (answer) {
//            alert(url + ": " + value);

            $.ajax({
                url: url,
                type: "POST"
//                data: value
            }).done(function () {
                $(this).addClass("done");
            });


            return true;
        }
        else {
            return false;
        }
    };
</script>

在div类webgrid过滤器中，您可以看到我想要保持其值的复选框。

此视图的actionResult

public ActionResult Index()
        {
            try
            {
                var model = new UserManagerTestEntities().vw_UserManager_Model;
                //var model = new UserManager.Models.vw_UserManager_Model();
                return View(model.ToList());

            }
            catch (Exception ex)
            {
                return View(ViewBag);
            }

        }

有人有建议吗？谢谢！

Answer 1

而不是在您的控制器上执行操作，也许您可​​以：在复选框调用javascript函数上单击操作，最后将执行ajax调用。