returning json data from controller

Question

Hi,

My Colmodel in javascript looks like this

jQuery("#testGrid").jqGrid(

//Some code

colModel: [
 { name: 'field1',index: 'field1', width: 113, align: 'Center', formatter: selectCheckboxFormatter, sortable: false },
{ name: 'field2', index: 'field2', width: 113, align: 'Center' },
{ name: 'field3', index: 'field3', width: 120, align: 'left' }
];

)

and my javascript for datasource look as follows. I call this function at some point in my javascript to populate the grid.

function PopulateDummyData() {
var mydata = [
{ field1: "Yes", field2: "1", field3: "54555464"},
{ field1: "No", field2: "2", field3: "54555464"},
];
}

but I want to get the data in the above function from the controller code, such that the controller action returns a JSON data in the above format, which I can use to populate my grid. and the controller code will be invoked by the grid's URL action using the following code snippet in javascript.

url: UrlAction('MyController', 'PopulateDummyData').

But I am not sure about how the controller code should be? any thoughts or comments??

Answer 1

From some blog:

public JsonResult GetStateList() {
  var list = new List<ListItem>() {
    new ListItem() { Value = "1", Text = "VA" },
    new ListItem() { Value = "2", Text = "MD" },
    new ListItem() { Value = "3", Text = "DC" }
  };
  return this.Json(list);
}

Answer 2

See the answer below, there are many examples on StackOverflow of how to do this:

http://stackoverflow.com/questions/227624/asp-net-mvc-controller-actions-that-return-json-or-partial-html

Answer 3

Have a look at the jqGrid documentation on how to load from an AJAX source.. this is how i did it getting the data from httphandler

jQuery("#list").jqGrid({
            url: 'example.ashx', //this url points to where the data comes from
            datatype: 'xml',  //this is the data type, can be JSON etc etc              
            mtype: 'GET',
            colNames: ['Name', 'Email', 'Archive'],
            colModel: [
            { name: 'Name', index: 'Name', width: 200,editable:true},
            { name: 'Email', index: 'Email', width: 250, editable: true },
            { name: 'Archive', index: 'Archive', width: 80, align: 'center', editable: true, formatter: 'checkbox', edittype: "checkbox",value: "True:False" }
            ],
            pager: jQuery('#pager'),
            rowNum: 5,
            rowList: [5,10,15,20],
            sortname: 'id',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/jqGrid-3.5.alfa/themes/lightness/images',
            caption: 'My first grid'
        }).navGrid("#pager", { edit: false, add: false, del: false,refresh:false,search:false });
    });

then my httphandler code looks like

public String GenerateGrid(HttpContext context, List lstData) { context.Response.ContentType = "text/xml;charset=utf-8"; string xml = "" + page + " + totalpages + "" + "" + count + "";

    List<customObject> temp = lstData.Skip((page - 1) * limit).Take(limit).ToList();

    foreach (var tempOBJ in temp)
    {
        xml += "<row id='" + tempOBJ.id+ "'>";
        xml += "<cell>" + tempOBJ.name+ "</cell>";
        xml += "<cell>" + tempOBJ.lastname + "</cell>";
        xml += "<cell>" + tempOBJ.email + "</cell>";
        xml += "</row>";
    }
    xml += "</rows>";

    return xml;
}