0

ウェブグリッドをフィルタリングするために使用されるチェックボックスのあるページがあります。

チェックボックスをオフにして質問にコンテキストを与えるには、ajax リクエストを使用してデータをフィルター処理し、webgrid に表示される結果を減らします。しかし、Web グリッドの下の数字をクリックして、グリッド内の次のレコード セットを循環すると、チェックボックスの現在の状態が失われます。これは、ページを再度ロードしている 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);
            }

        }

ここに画像の説明を入力

誰にも提案はありますか？ありがとう！

4

1 に答える 1

0

コントローラーでアクションを実行する代わりに、チェックボックスのクリックアクションとして、最後に ajax 呼び出しを行う javascript 関数を呼び出すことができます。

于 2012-11-16T14:22:59.463 に答える