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:30] 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 183: | Line 188: | ||
| The resAjaxRequestGetPeopleList() process the data using the built in JSON parser (works only in IE 8 or Firefox 3.1). | 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 beacose the data need by the grid is inside the {d} root element. | ||
| + | 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}} | ||
