使用Ajax在ASP.NET MVC中異步排序GridView

Question

我正在使用WebGrid在客戶端顯示數據， canSort: true設置為canSort: true 。

視圖代碼是：

@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")
            )
            )

}

我可以通過單擊列標題對數據進行排序。

問題：

如何使用Ajax異步對WebGrid進行排序？

Answer 1

感謝Jamie Dunstan指出這一點。

需要確保整個WebGrid代碼位於具有唯一ID的div內。 此外，啟用Javascript時引用jQuery。

 <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