C# ASP.Net Web Service, JSON and Jqgrid

Posted by beakersoft | Posted in Programming | Posted on 29-07-2011

1


This week i have been writing a web service in C# that i wanted to use to send data back to a jqrid, and as its been a bit of an uphill battle i thought i’d share what i had found out.

What you Need

First head over to the jqgid page, and download the package.Include all of the base options, and the UI addons to take advantage of the UI theme roller. I would also advise installing the Firebug extension into Firefox, as this can really help you see the interaction between the grid and the web service. Once you have done this, fire up Visual Studio, create a new web project and add a web service (asmx) file, and a web form to your project.

The Web Service

This is where is starts to get interesting, trying to get your web service to return JSON instead of XML. I assume its by design, but even when you change the response format to json as below –

ScriptMethod(ResponseFormat = ResponseFormat.Json)

When you call the web service, it still wraps it in xml tags (for instance, it you return a sting then the response is in a <string> tag), so we need to use a different approach.

Instead of returning a type from your web service, we are going to have no return type, and use the Response.Write functionality to just send text (our json) back to the browser, so in your asmx file you will have a public facing web service that looks something like this –

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public void GetJSONData(int IDNo){

        string JSONToReturn = GetData(intID);
        Response.Write(JSONToReturn);
        Response.End;

}

Now we just need to create our function to give us the data back, formated as a JSON string, that we can feed back into our jQgrid. Before you start creating your JSON, its a good idea to have a validitor to hand, that way you should be able to catch any issues before you try and create your grid. I used one at http://jsonlint.com/ but there are quite a few out there.

Next, we are going to create a very simple class for holding our data in ready to parse into JSON. My example is based on the information you want being in a SQL DB but it could be comming from anywhere. Anyway, here’s the class –

private class MyJSONInfo
{
public MyJSONInfo()
{
        int ID = 0;
        string UserName = string.Empty;
        string EmailAddress = string.Empty;
        string WelcomeMessage = string.Empty;
}

        public int ID { get; set; }
        public string UserName { get; set; }
        public string EmailAddress { get; set; }
        public string WelcomeMessage { get; set; }
}

Now we have a class to hold our data in, we need to popluate it. All we are going to do now is run an sql command to get our data, then put that data into our MyJSONInfo class

SqlConnection myConnection = new SqlConnection("[YOUR DB CONNECTION]");
try
{
myConnection.Open();
}
catch (Exception e)
{
Context.Response.Write("Problem opening DB - " + e.Message);
Context.Response.End();
}
SqlCommand myEntriesCmd = new SqlCommand("SELECT * FROM TABLE1", myConnection);
SqlDataReader myEntriesData = myEntriesCmd .ExecuteReader();
int IDCounter = 1;
var EntriesList = new Collection();

//got some data back
if (myEntriesData.HasRows)
{
while (myEntriesData.Read())
{
EntriesList.Add(new HubInfo {ID = IDCounter, UserName = myEntriesData["UserName"].ToString().Trim(),
        EmailAddress = myEntriesData["EmailAddress"].ToString().Trim(),
        WelcomeMessage = myEntriesData["WelcomeMessage "].ToString().Trim()});
        IDCounter++;
}
}

Almost there now, all we need is information about how rows we are returning, what page number we want to show and how many pages of information we are dealing with. These are all used by the jQgrid to aid its navigation, you will have to work these number out correctly based on your setup. Here we are just going to use dummy numbers.

So, we are going to create an object with these values, along with our MyJSONInfo ready to parse into JSON –

var JsonToReturn = new
{
        total = 5,           //total number of pages in our grid
        page = 1             //page to show in the grid,
        records = IDCounter, //how many records we are dealing with
        rows = EntriesList,  //our actual data
};

Now all that is left to do here is parse our variable into a JSON string. To do that we are going to use the Javascript Serilizer that comes with dotnet4, so make sure you include this at the top of your code –

using System.Web.Script.Serialization;

Once we have that in place, we are ready to create our JSON string. Here we do just that, and then flush it out to the browser –

//now serialize the list to json
var jsonSerializer = new JavaScriptSerializer();
string JsonString = jsonSerializer.Serialize(JsonToReturn);

//return the json
Context.Response.Write(JsonString);
Context.Response.End();

At this point when you connect to you invoke your web service you should get JSON formated data back. As I mentioned before i would run this through a validitor before you go any further, as you will probably find you have to clean up some of the text to make it work.

The jQgrid Page

Create a new web page in your project, and add the required javascript and css to your page header so you can use the jQgid, it is important to put them in this order, i’m not sure why but i have had issues in the past with the order of the scripts –

<script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script><script type="text/javascript" src="Scripts/grid.locale-en.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.14.custom.min.js"></script><script type="text/javascript" src="Scripts/jquery.jqGrid.min.js"></script>

Now you have these, we can create the jQgrid on the page.

<script type="text/javascript">
jQuery(document).ready(function () {
        jQuery("#datalist").jqGrid({
        url: 'HubReader.asmx/GetJSONData
        datatype: 'json',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        colNames: ['User', 'Email', 'Message'],
        colModel: [
        { name: 'UserName', index: 'UserName', width: 13, align: "left" },
        { name: 'EmailAddress', index: 'EmailAddress', width: 8, align: "left" },
        { name: 'Started', index: 'WelcomeMessage', width: 11, align: "left" }
        ],
        //Map the reader as we are using standard JSON format, not the standard jqgrid format
        jsonReader: {
        page: "page",
        total: "total",
        records: "records",
        root: "rows",
        repeatitems: false,
        id: "ID"
        },
        pager: '#pager1',
        altRows: true,
        altclass:'myAltRowClass',
        rowNum: 15,
        rowList: [15, 30, 45],
        height: 500,
        width: 1050,
        caption: "Search Results",
        scrollOffset:2,
        viewrecords: true,
        sortorder: "desc",
        });
        jQuery("#datalist").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false,search: false });
});
</script>

If you have used jQgrid before, most of this should be familiar to you, if not then you should probably have a quick read up on their site about how the grids are created and populated. Once you have built the grid, dont forget to create the elements the grid and pager will live in –

        <table id="datalist" cellpadding="0" cellspacing="0"></table>  
        <div id="pager1"></div> 

Whats happening in the code, well most of the javascript for building the grid is pretty standard, the only bit you might have not seen before is the jsonReader section. As we are not sending the json back in the default format jQgrid understands, we need to tell the grid a little bit about what elements contain what data. This needs to match the info comming out of your JSON. So for example if you have called the section containing the total number of pages TotPages (instead of total like i have) you will have to change the line to –

        total: "TotPages",

more info about the jQgrid data format options can be found at http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

Also make sure you change your url to point to your web service asmx file.

Hopefully your should now be able to get a jQgrid populating with data from an asmx web service. If your are struggling Firebug is probably your best bet, you can tell right away by switching to its console tag what problems you are having, it will even show you the data your service is sending back.

Comments (1)

Hello there,

Where are you specifying the IDNo parameter to your webservice function?

Regards,
Ygor

Write a comment

Comments links could be nofollow free.