Sorting not working with Json Result giving encoded output

Question

I am using Json Result to show a table, it is working fine when I show the result. Now I wanted to add a sort feature to it, so I used the canSort:true property. But now whenver I click on the header of the table for the sort to happen I get the below encoded string in my browser, it seems it is sorted too but some kind of encoding is done to it, it is as below.

{"Data":"\u003ctable class=\"paramCustomDataTable\"\u003e\u003cthead\u003e\u003ctr class=\"customHead\"\u003e\u003cth scope=\"col\"\u003e\u003ca href=\"/Parameters/CustomData?id=7&sort=Name&sortdir=ASC\"\u003eName\u003c/a\u003e\u003c/th\u003e\u003cth scope=\"col\"\u003e\u003ca href=\"/Parameters/CustomData?id=7&sort=Value&sortdir=DESC\"\u003eDataValue\u003c/a\u003e\u003c/th\u003e\u003cth scope=\"col\"\u003eDelete\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003eNewdata\u003c/td\u003e\u003ctd\u003e123456\u003c/td\u003e\u003ctd\u003e\u003ca href=\u0027delete/5\u0027\u003eDelete\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e"}

I know there might be some inconsistencies in the code below as I had to remove the actual columns for copyright issues.

---

C# code
[CacheControl(HttpCacheability.NoCache), AcceptVerbs(HttpVerbs.Get)]
 public JsonResult GetMyData(int id)      {
            var result = _myRepository.GetmyDataWithId(id).ToList();
            var grid = new WebGrid(result, rowsPerPage: 5, canSort:true);
            var htmlString = grid.GetHtml(
                                          columns: grid.Columns(
                                              grid.Column("Name", "Name"),
                                              grid.Column("Value", "DataValue"),                                              
                                              ));
        return Json(new
        {
           Data = htmlString.ToHtmlString()
        }
        , JsonRequestBehavior.AllowGet);
    }

---

Javascript Code

 $.getJSON('@Url.Action("GetMyData")', { id: 1 }, function (result) {
                var customDataList = $('#grid');
                customDataList.empty();
                customDataList.append(result.Data);
            });

Answer 1

in ASP MVC 4 you can do next IQueryable Support

Next cool feature is IQueryable support. If you need to, instead of returning "plain" IEnumerable objects from the API action, you might return IQueryable. Why?

Remember the times we implemented paging & sorting with ASP.NET MVC application. It was possible of cause, but it required a lot of manual job. Actions had to be extended with additional parameters, code have to respect those parameters and return exact portion of data we require to. The same story with sorting. In Web API it much simpler.

Change the signature and return type to IQueryable.

public IQueryable<Product> Get()
{
    return _storage.AsQueryable();
}

Now, if Web API sees the method like that, it will allow to access with with Open Data Protocol (OData) query string parameters. OData provides support for following queries: $filter, $orderby, $skip, $top.

Now, if I do the request:

**http://localhost:5589/api/products?$top=3**

I will receive, 3 top products. Or something like,

**http://localhost:5589/api/products?$skip=2&$top=3**

I will skip 2 and take rest 3. In short, having IQueryable and 4 OData query parameters it's much more easy to do the stuff required more time before.

Answer 2

Take a look at this:

http://demos.telerik.com/aspnet-mvc/grid