Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:user:lorenzo.soncini [2010/07/05 11:16] 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.\\ I 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 153: | Line 158: | ||
| caption: "Customer list" | caption: "Customer list" | ||
| }); | }); | ||
| - | + | $("#tabPeopleList").jqGrid('navGrid', '#tabPagerBar', { edit: false, add: false, del: false }); | |
| - | $("#tabPeopleList").jqGrid('navGrid', '#tabPagerBar', { edit: false, add: false, del: false }); | + | |
| }); | }); | ||
| </code> | </code> | ||
| + | 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). | ||
| + | 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}} | ||
