Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:user:lorenzo.soncini [2010/07/05 11:18]
lorenzo.soncini
wiki:user:lorenzo.soncini [2010/07/07 11:32] (current)
lorenzo.soncini
Line 1: Line 1:
 ====== ASP.NET Example ====== ====== ASP.NET Example ======
-In this page I wrote a step by step quide for use jqGrid ​with ASP.NET +In this page I wrote a step by step guide for using jqGrid ​and ASP.NET ​webservice for server side.\\ ​have used Visual Studio 2010 Professional and ASP.NET project ​is based on 3.5 version of the framework.  
-I'm using Visual Studio 2010 Professional and ASP.NET project based on versione ​3.5+ 
 +The project is very simple. Just an index.html file for the frontend and a webservice called wsJqTest.asmx that provides data.  
 + 
 +I would use JSON for comunication between client and server  
 + 
 +The result is a simple table with three column FirstName,​LastName,​BirthDate. ​
  
-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: The solution in visual studio are:
-{{:wiki:user:​user:​jqgridsamplesolution.png|}}+{{:​wiki:​user:​jqgridsamplesolution.png|}}\\ 
 +In the js and css folder there are only standard file installed by JQuery and jqGrid. We don't make any modify to that file. 
  
 ===== Prepare the webservice ===== ===== Prepare the webservice =====
Line 48: Line 52:
 </​note>​ </​note>​
  
-In the webservice source code we need to add some attribute.  +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 first is on the class: **[System.Web.Script.Services.ScriptService]**, ​declares that 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+The second is on the method: **[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]**, ​declares that the result ​should be a standard format ​JSON\\
  
 This is the webservice source: This is the webservice source:
Line 128: Line 132:
 <note important>​Is mandatory to load a localization script. If not you receive an error on parsing data function.</​note>​ <note important>​Is mandatory to load a localization script. If not you receive an error on parsing data function.</​note>​
  
 +==== Write the minimal Javascript client function ====
 Now we need to write the Javascript code on the html page for retriving and display data. 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. This is the part where I have found same problem...and not solution but workaraound.
Line 157: Line 162:
 </​code>​ </​code>​
  
-the parameter are standard and document here+The parameter are standard and document here 
 + 
 +The difference between standard example is the use of a **function in javascript as my "​datasource"​** and need to be specified in the **datatype:​** paremeter. 
 + 
 +The function who make the data request are: 
 +<code javascript>​ 
 + function resAjaxRequestGetPeopleList() { 
 +     if (req.readyState == 4) { 
 + var res = JSON.parse(req.responseText);​ 
 + var thegrid = $("#​tabPeopleList"​)[0];​ 
 + thegrid.addJSONData(JSON.parse(res.d));​ 
 +
 +
 + 
 + function AjaxRequestGetPeopleList() { 
 +     req.open("​POST",​ "/​jqGridSample/​ws/​wsJqTest.asmx/​getTextPeopleList",​ true); 
 + req.setRequestHeader("​Content-Type",​ "​application/​json;​ charset=utf-8"​);​ 
 + req.onreadystatechange = resAjaxRequestGetPeopleList;​ 
 + req.send(null);​ 
 +
 +</​code>​ 
 + 
 +The AjaxRequestGetPeopleList() fucntion make a POST request to our webservice and specify who 
 +the response will be returned as a JSON data setting the "​content-type"​ ** req.setRequestHeader("​Content-Type",​ "​application/​json;​ charset=utf-8"​);​ ** 
 + 
 +The resAjaxRequestGetPeopleList() process the data using the built in JSON parser (works only in IE 8 or Firefox 3.1).
  
-thethe difference is who I use a function in javascript as my "​datasourceA and need to specify that in the dataoption parameter+The response off the web server are the following:​\\ 
 +{{:​wiki:​user:​jqgridsamplejsonresponse.png|}}\\ 
 +we need to make two JSON parse because the data needed by the grid is inside ​the {d} root element.\\
  
  
 +==== Conclusion ====
 +I reported on this page some problems I encountered in my first approach to the use of jqGrid with ASP.NET.\\ The goal is that other unstinting in a while.\\
 +You can leave any comment below or write directly to lorenzo point soncini at gmail dot com.\\
  
 +This is the result\\
 +{{:​wiki:​user:​jqgridsampleresult.png|jqgridsampleresult.png}}\\
 +and the source code
 +{{:​wiki:​user:​jqgridsample.zip|jqGridSample Source code}}

QR Code
QR Code wiki:user:lorenzo.soncini (generated for current page)