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

Posted 2023-02-22

【中文标题】使用 Ajax 在 ASP.NET MVC 中对 GridView 进行异步排序

【英文标题】：Asynchronously sort GridView in ASP.NET MVC using Ajax

【发布时间】：2016-03-04 08:26:18

【问题描述】：

我使用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")
            )
            )

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

问题：

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

【问题讨论】：

试试这个答案：***.com/questions/4518039/…

嗨@Dean.DePue - 这个建议很好，因为ModelState 也是我的问题，但是在这种特殊情况下我更关心异步加载

也许我误解了这个问题，但是您在问题中使用的 MSDN 杂志链接中没有对此的答案吗？在标题AJAX: Client-Side Changes?

下

@JamieDunstan - 我认为你是对的。我只看到了上半部分。 +2 让我大开眼界！

@student - 欢迎您。如果您开始工作，也许您可​​以在这里为未来的访问者写一个答案，以便他们可以快速看到解决方案:)

【参考方案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 函数是 replaced 和 .on 因为 depreciation

【讨论】：

是的，最后它就像一个魅力。感谢您指出这一点:)