I'm adding alot of twitter bootstrap, jquery and jqueryui components to a new project I'm working on, and frankly I'm pretty excited about how the UI is coming along. At one point, I had the idea to use a jqGrid with my ASP.NET Web Forms application. After some frustration, I eventually started to read various comments on stackoverflow and on other blogs, reading similar to:
- Why cant I use jqGrid and ASP.NET?
- jqGrid and ASP.NET... this is becoming mind numbingly painful
- ASP.NET web service with jqGrid won't load, but no errors, whats the deal
My emotions were the same as being on the turnpike and being told "no rest stop for 50 miles" and then realizing your low on gas. For anyone who has tried to use jqGrid with an ASP.NET web service, I'm sure you know what I'm talking about here, using jqGrid just seems to be very, very finicky. Fortunately, many have prevailed, including me. I wanted to give an honest to goodness example of using jqGrid and an ASP.NET web service (not using an HTTP Handler), since this was so painful for some reason.
High Level, how this works...
This works like you'd hope it would, set up some service to accept a request for data, and return that data request with JSON to the calling object. Just 2 components to show here, a web service and a jqGrid calling the service. Strap in..
ASP.NET JSON Web Service
Below is my example of the webservice object you need. jqGrid is expecting something to come back with "total", "records", "page" and "rows", where rows has your items of data. Here we create a response with these appropriate properties:
jqGrid
First off, before you even try to do anything else with your jqGrid, you need 3 things to make this thing work properly. You may think you read their documentation and followed it to the letter of the law... but you're wrong. Make sure you link to..
- A locale file (example: grid.locale-en.js)
- A jquery.jqGrid.js file
- A ui.jqgrid.css file
- (Bonus!) - Make sure you also link to jquery... just incase youre new to this stuff... and if so, place the jquery script reference first!
What's going on with that script? It has all of the subtle nuances figured out for you, to prevent you from getting the same headaches many others have griped about. Here's some of the main talking points:
- Datatype is "json", since that's what we're expecting
- In our example, no data is required for our service, so just send "{}" for the data parameter
- ajaxGridOptions and contentType specifies application/json as the data transfer type, ensuring all data is sent as JSON and not XML
- the serializeGridData function takes any data being posted to the web service and sends it as JSON, not XML. I know what you're thinking, "I'm not sending any data I'll just delete this".. DONT. Some basic data is always posted to the service when loading the grid, without this code, XML is sent instead of JSON, causing the jqGrid to freak out.
- jsonReader - this option contains all the little details in loading your grid with your data, setting your paging, etc. Notice the "d." in the values, that's not a type-o, Microsoft and other services add this for security reasons (http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx). Otherwise, these values just match to the properties we created in our webservice class
No comments:
Post a Comment