Question

我正在使用WebGrid在客户端显示数据，Cells(i, 8) = Cells(i, 8) & Cells(i + 1, 8)已设置。

view代码为：

Cells(i, 8) = Cells(i, 8) & " " & Cells(i + 1, 8)

我可以点击列标题对数据进行排序。

问题：

如何使用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>

请注意，由于replaced

，.live函数为depreciation且.on

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

1 个答案: