MVC 3 Razor-如何使用jQuery ajax将新模型绑定到webgrid

我有一个问题，用我的DAL返回的新模型更新我的webgrid。

在我的视图中，我有用于过滤网格上显示的数据的复选框。 勾选一个复选框后，这将调用一些jQuery ajax函数，该函数将复选框值传递给我的控制器中的方法。 然后调用我的DAL，它返回一个具有正确值的模型的新列表。 我将此列表返回到我的视图，但是当页面加载时没有任何不同。 网格看起来是一样的，这不是我想要的，复选框是相同的，这就是我想要的。

我将粘贴我的视图和控制器，所以希望有人知道一个很好的解决方案：

视图

@model IEnumerable @*@model UserManager.Models.vw_UserManager_Model *@ @{ ViewBag.Title = "User Manager Dashboard"; } @Html.ActionLink("Create New User", "CreateUser") @*
 @Html.Label("Select a filter: ") 
 @Html.Label("Hide ALF Intelligence users:")  @Html.Label("Hide ALF Connect users:")  @Html.Label("Hide BRAD users:")  
*@ 
 @Html.Label("Select a filter: ") 
 @Html.Label("Toggle ALF Intelligence users:")  @Html.Label("Toggle ALF Connect users:")  @Html.Label("Toggle BRAD users:")  
 
 @{ 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("")), grid.Column(header: "User logged in", format: @), grid.Column("isApproved"), grid.Column("MaxConcurrentUsers"), grid.Column("email"), grid.Column("group_name"), grid.Column("module_name"), grid.Column(header:"Edit", format:@
 "@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)
), grid.Column(header:"Delete", format:@
 "@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)
) }) 

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

操作结果在控制器中

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

摘要：

有没有人知道如何在使用actionResult方法和包含模型的新列表的ajax请求后更新webgrid？

谢谢！

Answer 1

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

在这里的初始加载中，我在div中进行了部分调用

 
 @Html.Partial("UserTimeLogs", Model.TimeLogDetail)  

然后我调用了一个定义的动作来获取更新的信息/视图

 // 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内的部分，并将其替换为新网格。

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

 @{ if (!Request.IsAjaxRequest()) { Layout = "~/Views/Shared/_Layout.cshtml"; } }