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"u003eu003ctheadu003eu003ctr class="customHead"u003eu003cth scope="col"u003eu003ca href="/Parameters/CustomData?id=7&sort=Name&sortdir=ASC"u003eNameu003c/au003eu003c/thu003eu003cth scope="col"u003eu003ca href="/Parameters/CustomData?id=7&sort=Value&sortdir=DESC"u003eDataValueu003c/au003eu003c/thu003eu003cth scope="col"u003eDeleteu003c/thu003eu003c/tru003eu003c/theadu003eu003ctbodyu003eu003ctru003eu003ctdu003eNewdatau003c/tdu003eu003ctdu003e123456u003c/tdu003eu003ctdu003eu003ca href=u0027delete/5u0027u003eDeleteu003c/au003eu003c/tdu003eu003c/tru003eu003c/tbodyu003eu003c/tableu003e"}
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);
});
See Question&Answers more detail:os