wiki:user:lorenzo.soncini

ASP.NET Example

In this page I wrote a step by step quide for use jqGrid with ASP.NET I'm using Visual Studio 2010 Professional and ASP.NET project based on versione 3.5

The project for starting is very simple. Is just an index.html file for the frontend and a webservice called wsJqTest.asmx for get jqGrid data.

I would use JSON for comunication between client and server

The result is a simple table with three column FirstName,LastName,BirthDate.

The solution in visual studio are:

Prepare the webservice

From the documentation json_data we need a JSON response from the webservice formatted as is:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

The web service have two methods who build the JSON response with different sistem:

write directly as text string
using builtin JSON feature of ASP.NET

In all the two method we return JSON data formatted with ASP.NET standard. So the result from the web server it's like this:

{"d":
  { 
    "total": "xxx", 
    "page": "yyy", 
    "records": "zzz",
    "rows" : [
      {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
      {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
    ]
  }
}

I don't have found the method to change or delete the root element “d”. The {d} prefix is part of the expected response for the ASP.NET AJAX library.

In the webservice source code we need to add some attribute. The first is on the class: [System.Web.Script.Services.ScriptService], the webservice can be called using ASP.NET AJAX script. The second is on the method: [System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)], the result of the webservice was in JSON format

This is the webservice source:

using System;
using System.Web;
using System.Web.Services;

/// <summary>
/// Demo web service for jqGrid
/// </summary>
[WebService(Namespace = "http://www.zzsoft.it/jqsample")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// Needed for call with ASP.NET AJAX
[System.Web.Script.Services.ScriptService]
public class wsJqTest : System.Web.Services.WebService {

    // Constructor: nothing to do
    public wsJqTest () {

    }
    
    [WebMethod(Description = "Return a lists of People")]
    [System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
    public string getTextPeopleList() {
        System.Text.StringBuilder resStrBuild = new System.Text.StringBuilder();
        resStrBuild.Append("{\"total\":\"1\",\"page\":\"1\",\"records\":\"5\",\"rows\":[");
            resStrBuild.Append("{\"id\":\"1\",\"cell\":[\"Lorenzo\",\"Soncini\",\"09/07/1973\"]},");
            resStrBuild.Append("{\"id\":\"2\",\"cell\":[\"Giuseppe\",\"Verdi\",\"09/10/1813\"]},");
            resStrBuild.Append("{\"id\":\"3\",\"cell\":[\"Gioacchino\",\"Rossini\",\"29/02/1792\"]},");
            resStrBuild.Append("{\"id\":\"4\",\"cell\":[\"Giacomo\",\"Puccini\",\"22/12/1858\"]},");
            resStrBuild.Append("{\"id\":\"5\",\"cell\":[\"Vincenzo\",\"Bellini\",\"03/11/1801\"]},");
        resStrBuild.Remove(resStrBuild.Length - 1, 1);
        resStrBuild.Append("] }");
        return resStrBuild.ToString();    
    }
    
}

If I call the webservice method using the url I get the response in XML format. Calling url: http://localhost/jqGridSample/ws/wsJqTest.asmx/getTextPeopleList Response

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://www.zzsoft.it/jqsample">{"total":"1","page":"1","records":"5","rows":[{"id":"1","cell":["Lorenzo","Soncini","09/07/1973"]},{"id":"2","cell":["Giuseppe","Verdi","09/10/1813"]},{"id":"3","cell":["Gioacchino","Rossini","29/02/1792"]},{"id":"4","cell":["Giacomo","Puccini","22/12/1858"]},{"id":"5","cell":["Vincenzo","Bellini","03/11/1801"]}] }</string>

For retrieve the JSON format I need specify the content type in the request header (see after).

Prepare the index.html

First step is download and install the jqGrid javascript following the how_to_install documentation.

In this sample we use the JQuery with the start theme. All file in js and css are stadard file and are not modified.

Import the necessary script on the HTML

In the <HEAD> section of the file we add the link of the correct javascript:

 <!-- jqGrid stadard CSS --> 	
 <link type="text/css" href="css/ui.jqgrid.css" rel="stylesheet" />	
 <!-- jQuery stadard CSS for START theme-->
 <link type="text/css" href="css/start/jquery-ui-1.8.2.custom.css" rel="stylesheet" />	
 <!-- JQuery script -->
 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
 <!-- jqGrid selected localization -->
 <script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
 <!-- jqGrid disable old API command -->
    <script type="text/javascript">
        jQuery.jgrid.no_legacy_api = true;
    </script>
 <!-- jqGrid worjing script -->
 <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

Is mandatory to load a localization script. If not you receive an error on parsing data function.

Now we need to write the Javascript code on the html page for retriving and display data. This is the part where I have found same problem…and not solution but workaraound. I was unable using the default JQuery and jqGrid notation form making the POST call at the webservice probably beacuse the data returned from the webservice are not in correct format (the {d} root element…).

The base function is the jQuery main client function:

	$(document).ready(function () {
	    $("#tabPeopleList").jqGrid({
			datatype: function (pdata) {
			    AjaxRequestGetPeopleList();
			},
			colName: ['First Name','Last Name','Birth date'],
			colModel: [
					{ name: 'FirstName' },
					{ name: 'LastName' },
					{ name: 'BirthDate' },
				],
			rowNum: 10,
			rowList: [10, 20, 30],
			pager: '#tabPagerBar',
			sortname: 'FullName',
			viewrecords: true,
			sortorder: "desc",
			caption: "Customer list"
		});
               $("#tabPeopleList").jqGrid('navGrid', '#tabPagerBar', { edit: false, add: false, del: false });
	});

the parameter are standard and document here

thethe difference is who I use a function in javascript as my “datasourceA and need to specify that in the dataoption parameter

Discussion

Christian, 2011/11/05 17:55

I have tried putting a parameter in the web service but I could make it work. I added this line → data: ”{'proveedor':'clarin.com'}” in the jqgrid. Please if anybody can tell me what is wrong. $(”#list”).jqGrid({

          data: "{'proveedor':'clarin.com'}",
    datatype: function (pdata) {
    AjaxRequestGetPeopleList();
    },
    colName: ['Proveedor','Aviso','Precio','Comprar'],
	
    colModel: [
         	{ name: 'Proveedor' },
		{ name: 'Aviso' },
	        { name: 'Precio' },
		{},
		],
		rowNum: 10,
		rowList: [10, 20, 30],
		pager: '#pager',
		sortname: 'FullName',
		viewrecords: true,
		sortorder: "desc",
		caption: "Avisos"
	});

You could leave a comment if you were logged in.