Asynchronously sort GridView in ASP.NET MVC using Ajax

Question

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?

Try this answer: http://stackoverflow.com/questions/4518039/asp-net-mvc-3-webgrid-sorting-remains-sortdir-asc — Dean.DePue, Nov 30 '15 at 16:30
Hi @Dean.DePue - The suggestion is nice because the `ModelState` is the problem for me as well, however *in this particular case* I'm concerned more with asynchronous loading — Zameer Ansari, Nov 30 '15 at 16:35
Maybe I'm misunderstanding the question, but isn't the answer to this in the MSDN magazine link you have used in your question? Under the heading `AJAX: Client-Side Changes`? — Jamie Dunstan, Nov 30 '15 at 16:46
@JamieDunstan - I think you're right. I only saw the upper half. +2 for opening my eyes! — Zameer Ansari, Nov 30 '15 at 16:53
@student - you are welcome. If you get working, maybe you can write an answer here for future visitors so that they can quickly see the solution :) — Jamie Dunstan, Nov 30 '15 at 16:59

score 4 · Accepted Answer · edited May 23 '17 at 11:45

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

Yeah, finally it works like a charm. Thanks for pointing that out :) — Zameer Ansari, Dec 01 '15 at 14:52

Asynchronously sort GridView in ASP.NET MVC using Ajax

1 Answers1

Linked