1

DAL から返された新しいモデルで webgrid を更新する際に問題があります。

私の見解では、グリッドに表示されるデータをフィルタリングするために使用されるチェックボックスがあります。チェックボックスにチェックを入れると、コントローラーのメソッドにチェックボックスの値を渡す jQuery ajax 関数が呼び出されます。これで DAL が呼び出され、モデルの新しいリストが正しい値で返されます。このリストを自分のビューに返しますが、ページが読み込まれると何も変わりません。グリッドは同じように見えますが、これは私が意図したものではなく、チェックボックスは同じであり、私が望む方法です。

ビューとコントローラーを貼り付けますので、誰かが良い解決策を知っていることを願っています:

意見

@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("Hide ALF Intelligence users:")
    <input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager", new { filterVal = Model.FirstOrDefault().alfIntelligence + "," + "alfIntelligence" })')" id="chkFilterAlfIntell" />
     @Html.Label("Hide ALF Connect users:")
    <input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager", new { filterVal = Model.FirstOrDefault().alfIntelligence + "," + "alfIntelligence" })')" id="chkFilterAlfConn" />
     @Html.Label("Hide BRAD users:")
    <input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager", new { filterVal = Model.FirstOrDefault().alfIntelligence + "," + "alfIntelligence" })')" id="chkFilterBrad" />
</div>*@


<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("FilterGrid", "UserManager")')" id="chkFilterAlfIntell" checked="checked" />
     @Html.Label("Toggle ALF Connect users:")
    <input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager")')" id="chkFilterAlfConn" checked="checked"/>
     @Html.Label("Toggle BRAD users:")
    <input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager")')" id="chkFilterBrad" checked="checked"/>
</div>


<div class="webgrid-wrapper">



@{
    ViewBag.Title = "Jobs";
    WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 15, selectionFieldName: "selectedRow", fieldNamePrefix: "gridItem");

}

    @grid.GetHtml(
    fillEmptyRows: true,
        tableStyle: "webgrid",
                alternatingRowStyle: "webgrid-alternating-row",
                headerStyle: "webgrid-header",
                footerStyle: "webgrid-footer",
                selectedRowStyle: "webgrid-selected-row",
            rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
columns: new[] {
    grid.Column("UserName"),
    grid.Column("salutation"),
    grid.Column("FirstName"),
    grid.Column("LastName"),
    grid.Column("Password"),
    //grid.Column("isactive"),
    //grid.Column(header: "Is logged in?", format: (model) => @Html.Raw("<input type='checkbox' checked='" + ((model.isactive) ? "checked" : "unchecked") + "' />")),  
    grid.Column(header: "User logged in", format: @<text><input name="User logged in" 
      type="checkbox"  @(item.isactive == true ? "Checked" : null) onclick="logUserOff('@Url.Action("LogUserOff", "UserManager", new {userid = item.userid} )')" id="chkboxIsActive" /></text>),
    grid.Column("isApproved"),  
    grid.Column("MaxConcurrentUsers"),
    grid.Column("email"),
    grid.Column("group_name"),
   grid.Column("module_name"), 


     grid.Column(header:"Edit", format:@<text><div id="btnEditSelectedRow">
         "@Html.ActionLink("Edit record", "EditUser", "UserManager", new {
         userid = item.userid,
         salutation = item.salutation,
         firstname = item.FirstName, 
         lastname = item.LastName, 
         password = item.Password, 
         isactive = item.isactive,
         isapproved = item.IsApproved,
         maxconcurrentusers = item.MaxConcurrentUsers,
         email = item.email, 
         module = item.module_name, 
         group = item.group_name }, null)</div></text>),

    grid.Column(header:"Delete", format:@<text><div id="btnDelSelectedRow">
        "@Html.ActionLink("Delete record", "DeleteUser", "UserManager", new {
         userid = item.userid,
         username = item.UserName,
         salutation = item.salutation,
         firstname = item.FirstName, 
         lastname = item.LastName, 
         password = item.Password, 
         isactive = item.isactive, 
         email = item.email, 
         module = item.module_name, 
         group = item.group_name }, null)</div></text>)


})
</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) {
        alert("entering filter grid");
        var filters = getFilterVals();
        console.log(filters);

        $.ajax({
            url: url,
            type: "POST",
            async: false,
            data: "alfConnect=" + filters.alfConnect + "&" + "alfIntelligence=" + filters.alfIntelligence + "&" + "brad=" +  filters.brad
            //                data: value
        }).done(function () {
            $(this).addClass("done");
        });
    }

    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>

コントローラのアクション結果

 public ActionResult FilterGrid(int alfConnect, int alfIntelligence, int brad)
        {
            List<UserManager.Models.vw_UserManager_Model> modelList  = DAL.getGrid(alfConnect, alfIntelligence, brad);
            return View("Index", modelList);
        }

概要：

actionResult メソッドとモデルを含む新しいリストを使用して、ajax リクエストの後に webgrid を更新する方法を知っている人はいますか?

ありがとう！

4

1 に答える 1

2

部分ビューを作成し、それをpostback / ajaxメソッドで変更した場合は、ページのセクション全体を希望どおりの外観に変更できます。

ここでの初期ロードでは、divで部分呼び出しがあります

<div id="userTime">
    @Html.Partial("UserTimeLogs", Model.TimeLogDetail)
</div>

次に、更新された情報/ビューを取得するために定義されたアクションを呼び出します

// Fired on click event of object, use live "click" if control in in the partial view as well. in this case it is on a date change in a textbox.
Post(baseUrl + "User/AjaxUserLogTimes/" + loginId, loginId, $("#date").val(), "#userTime");


function Post(PostUrl, id, dateTime, control) {
    $.ajax({
        type: "POST",
        url: PostUrl,
        async: false,
        data: { id: id, requestedDate: dateTime},
        dataType: "html",
        error: function (xhr, status, error) {
            // you may need to handle me if the json is invalid
            // this is the ajax object
            alert(xhr.statusText);
        },
        success: function (data) {
            $(control).html(data);
        }
    });

コントローラのアクションはHttpPostとして定義され、初期ロードで定義されたものと同じ部分ビューを返します。

    [HttpPost]
    public ActionResult AjaxUserLogTimes(Guid id, DateTime requestedDate)
    {
        return View("UserTimeLogs", timeLogService.GetLogsForUser(id, Period.Daily, requestedDate));
    }

そのsuccessため、アクションから返されたHTMLで、「＃usertime」div内のセクションが上書きされ、新しいグリッドに置き換えられます。

ViewStartAJAXの場合、ビューリターンでレイアウトバインドをバイパスするために、次のものがあることを確認してください。

@{
    if (!Request.IsAjaxRequest())
    {
    Layout = "~/Views/Shared/_Layout.cshtml";
    }
}
于 2012-11-15T13:17:47.437 に答える