asp.net - PartialView $ ('#webgrid' ).html(data) 导致 webgrid col 单击仅显示网格且不带 css？

Question

我正在 MVC3 中使用 WebGrid 进行一些部分页面更新，但是当我使用 $('#grid').html(data) 更新网格，然后单击网格中的列/链接以按该列排序时，我的页面重新加载时仅使用非 CSS 格式的网格。我该如何解决这个问题？

Index.cshtml

 // ...
 // grid partial view
 <div id="gridview" class="gen">@Html.Partial("_gridPartialView", Model.Data)</div>

// On button click on main page to get filtered data to new grid
$.get('@Url.Action("GetFilteredData")', { 'statusFilter': filterstuff }, function (data) {
   $('#gridview').html(data);
});

_gridPartialView.cshtml

@model IEnumerable<.Models.Data>
@{           
  var grid = new WebGrid(source: Model,
  //defaultSort: "DataId",
             rowsPerPage: 50);                     
}
@grid.GetHtml(
    tableStyle: "webgrid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
    grid.Column("DataId", "Id"),
    grid.Column("DataName", "Name"),
    //...

Controller 操作结果:

public ActionResult GetFilteredData(int[] statusFilter)
{
   // Do filtered query on data model
   return PartialView("_gridPartialView", cvm.Campaigns);
}

Answer 1

在您的_gridPartialView.cshtml中将网格声明更改为:

 var grid = new WebGrid(source: Model,
    //defaultSort: "DataId",
    ajaxUpdateCallback: "GridUpdate",
    ajaxUpdateContainerId: "grid"
    rowsPerPage: 50); 

确保您的 .GetHtml 方法具有:

@grid.GetHtml(
    htmlAttributes: new { id = "grid" }, 
//.. rest of the options here
)

并将以下内容添加到您的Index.cshtml

<script type="text/javascript">
    function GridUpdate(data) {
        $('#gridview').html(data);
    }
</script>