PartialView $ ('# webgrid'). Html (data) приводит к тому, что щелчок веб-сетки вызывает отображение только сетки и без CSS?

Question

Я делаю некоторые частичные обновления страницы с помощью WebGrid в MVC3, но когда я обновляю свою сетку с помощью $ ('# grid'). Html (данные), а затем нажимаю столбец / ссылку в сетке, чтобы отсортировать по этому столбцу мой страница загружается только с сеткой в ​​не-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"),
    //...

Результат действия контроллера:

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>