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

如果您创建了一个局部视图，然后使用回发/ajax 方法进行更改，那么您可以将页面的整个部分更改为您想要的外观。

在这里的初始加载中，我在 div 中有一个 Partial 调用

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

Controller 上的 Action 定义为 HttpPost 并返回在初始加载时定义的相同局部视图。

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

因此，success从操作返回的 HTML 会覆盖“#usertime”div 内的部分，并将其替换为新网格。

如果 AJAX，请确保您ViewStart有以下内容可以绕过视图返回的布局绑定：

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