使用 Ajax 在 ASP.NET MVC 中对 GridView 进行异步排序 [英] Asynchronously sort GridView in ASP.NET MVC using Ajax

问题描述

我使用 WebGrid 在客户端显示数据，canSort: true 已设置.

视图 代码是:

@model UI.Models.TestModel@if (Model.listTestModel != null){var grid = new WebGrid(Model.listTestModel,空值，默认排序:列A"，每页行数:25，canPage:真实，canSort: 真);@grid.GetHtml(模式:WebGridPagerModes.All，列:grid.Columns(grid.Column(columnName: "ColumnA", header: "ColumnA"),grid.Column(列名:ColumnB"，标题:ColumnB")))}

我可以通过单击列标题对数据进行排序.

问题:

如何使用 Ajax 对 WebGrid 进行异步排序?

解决方案

感谢 杰米·邓斯坦 指出了这一点.

<块引用>

需要确保整个 WebGrid 代码都位于具有 唯一 id 的 div 中.此外，在启用 Javascript 时会引用 jQuery.

 
@model UI.Models.TestModel@if (Model.listTestModel != null){var grid = new WebGrid(Model.listTestModel,空值，默认排序:列A"，每页行数:25，canPage:真实，canSort: 真,ajaxUpdateContainerId:唯一的 id 放在这里");@grid.GetHtml(模式:WebGridPagerModes.All，列:grid.Columns(grid.Column(columnName: "ColumnA", header: "ColumnA"),grid.Column(列名:ColumnB"，标题:ColumnB")))}<div><脚本>$(document).ready(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);});

注意 .live 函数被替换为.on 因为折旧

I'm using WebGrid to display data on client side, canSort: true is set.

The view code is:

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

}

I'm able to sort data by clicking column headers.

Problem:

How can someone asynchronously sort the WebGrid using Ajax?

解决方案

Thanks to Jamie Dunstan for pointing this out.

One need to make sure that the entire WebGrid code is inside a div with a unique id. Also, jQuery is referenced while Javascript is enabled.

 <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>

Notice that .live function is replaced with .on because of depreciation

这篇关于使用 Ajax 在 ASP.NET MVC 中对 GridView 进行异步排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！