Асинхронно сортировать GridView в ASP.NET MVC с помощью Ajax

Я использую WebGrid для отображения данных на стороне клиента, canSort: true установлен.

Код view:

@model UI.Models.TestModel

@if (Model.listTestModel != null)
{
    var grid = new WebGrid(Model.listTestModel,
    null,
    defaultSort: "ColumnA",
    rowsPerPage: 25,
    canPage: true,
    canSort: true
    );

    @grid.GetHtml(
     mode: WebGridPagerModes.All,

    columns: grid.Columns
            (
            grid.Column(columnName: "ColumnA", header: "ColumnA"),
            grid.Column(columnName: "ColumnB", header: "ColumnB")
            )
            )

}

Я могу сортировать данные, щелкая заголовки столбцов.

Проблема:

Как кто-то может асинхронно сортировать WebGrid с помощью Ajax?

ОТВЕТЫ

Ответ 1

Спасибо Джейми Данстан за это.

Нужно убедиться, что весь код WebGrid находится внутри div с уникальным id. Кроме того, jQuery ссылается при включенном Javascript.

 <div id='unique id goes here'>

@model UI.Models.TestModel

@if (Model.listTestModel != null)
{
    var grid = new WebGrid(Model.listTestModel,
    null,
    defaultSort: "ColumnA",
    rowsPerPage: 25,
    canPage: true,
    canSort: true,
    ajaxUpdateContainerId: "unique id goes here"
    );

    @grid.GetHtml(
     mode: WebGridPagerModes.All,

    columns: grid.Columns
            (
            grid.Column(columnName: "ColumnA", header: "ColumnA"),
            grid.Column(columnName: "ColumnB", header: "ColumnB")
            )
            )

}
<div>

<script>
    $(document).ready(function () {

  function updateGrid(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var grid = $(this).parents('.ajaxGrid');
    var id = grid.attr('id');
    grid.load(url + ' #' + id);
  };
  $('.ajaxGrid table thead tr a').on('click', updateGrid);
  $('.ajaxGrid table tfoot tr a').on('click', updateGrid);
 });
</script>

Обратите внимание, что .live функция заменена .on из-за обесценения