JSON

Page 1 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

Document Control

Title Version Authors Reviewers Create Date

JSON 1.0 Mihir Jeevan 23 Oct. 2009

Change Record

Date Oct. 23, 2009

Author Mihir M.

Version 1.0

Change Reference Document Created.

Page 2 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

JSON
What is JSON? What does it stand for? JavaScript Object Notation. JSON is a syntax for passing around objects that contain name/value pairs, arrays and other objects. JSON is a lightweight, text-based data exchange format based on a subset of the literal notation from the JavaScript programming language. It provides a succinct encoding for application data structures and is typically used in scenarios where a JavaScript implementation is available to one or both of the applications exchanging data, such as in Ajax-style web applications. The allure of JSON lies in its simplicity to understand, adopt, and implement. JSON has virtually no learning curve for developers already familiar with JavaScript or other programming languages with similar support for a rich literal notation (like Python and Ruby). Parsing JSON text in JavaScript code can be accomplished by simply calling the eval function, and creating JSON text is a breeze with the json.js script provided at http://www.json.org/json.js. Ex. {"skillz": { "web":[ {"name": "html", "years": "5" }, {"name": "css", "years": "3" }] "database":[ {"name": "sql", "years": "7" }] }}

Page 3 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

JSON & XML JSON is like XML because: They are both 'self-describing' meaning that values are named, and thus 'human readable' Both are hierarchical. (i.e. You can have values within values.) Both can be parsed and used by lots of programming languages Both can be passed around using AJAX (i.e. httpWebRequest)

JSON is Unlike XML because: XML uses angle brackets, with a tag name at the start and end of an element: JSON uses squiggly brackets with the name only at the beginning of the element. JSON is less verbose so it's definitely quicker for humans to write, and probably quicker for us to read. JSON can be parsed trivially using the eval() procedure in JavaScript JSON includes arrays {where each element doesn't have a name of its own} In XML you can use any name you want for an element, in JSON you can't use reserved words from javascript

But Why? What's good about it? When you're writing ajax stuff, if you use JSON, then you avoid hand-writing xml. This is quicker.

Page 4 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

The XML approach: bring back an XML document loop through it, extracting values from it do something with those values, etc, versus The JSON approach: bring back a JSON string. 'eval' the JSON

Update Panels & JSON No doubt, using an UpdatePanel is still easier than JSON. But JSON is easy enough that you may decide to use it over the UpdatePanel under certain circumstances. The main problem with the UpdatePanel, as most know by now, is that all of the form data gets posted to the server and all of the server code runs during every update. While there are ways of detecting that the UpdatePanel is causing the postback and thereby limiting the amount of code that runs on the server, you are still left with a full submit of the client form elements to contend with. On a large form, and a form with a lot of view state information, this could be a huge consideration. JSON, on the other hand, only sends the data that is needed for the WebService function it is calling and only returns the data that the WebService function returns. So you end up sending less data, executing less code on the server, and returning less code from the server. This can significantly increase the performance of your application as well as increase the scalability of your application.

Page 5 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

JSON & ASP.NET JSON Web service example The first thing that we need to do is to define our web service. I am using ASP.NET Web Services (ASMX) here, but you could also use WCF if you are using .NET Framework 3.5. The RandomProducts web service will define one method called getRandomProducts that will return number of random products specified by input parameter, we can easily create a method that will take any number of parameters.

[WebMethod(Description = "Get random products")] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string getRandomProducts(int numProducts) { string strSql = string.Empty; string strJSon = string.Empty; string[][] productArry = new string[numProducts][]; SqlDataReader drProducts = null; JavaScriptSerializer jSerializer = null; // I have specified some specific product ids in where clause // becz I have images for those products only . strSql = String.Format("SELECT TOP({0}) strName, strDescriptionDetail, ImageUrl_Thumb FROM tblProducts WHERE intProductId IN (154,433,527,602,636,673,675,676,677) AND blnShowItem = 1 AND dblToPrice > 0 ORDER BY NEWID()", numProducts); try { drProducts = Utils.SqlHelper.ExecuteReader(Utils.Utilities.getConnection(), CommandType.Text, strSql); int i = 0; if (drProducts != null) { while (drProducts.Read()) { productArry[i] = new string[] { Convert.ToString(drProducts["strName"]), "http://localhost/Rewriter" + Server.HtmlEncode(Convert.ToString(drProducts["ImageUrl_Thumb"])) }; i++; } drProducts.Close(); }

Page 6 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

catch (Exception ex) { productArry[0] = new string[] { "Error", ex.Message}; } finally { if (drProducts != null) { if (!drProducts.IsClosed) drProducts.Close(); } } jSerializer = new JavaScriptSerializer(); strJSon = jSerializer.Serialize(productArry); return strJSon;

What you should notice in the code is that various method attributes are used on the web service class and methods. These method attributes require the System.Web.Script reference. If you get an error concerning missing assemblies then make sure your web.config file has everything it needs for an AJAX enabled ASP.NET site. As you can see, there is a ScriptMethod method attribute that specifies JSON as the response format. The tricky part is converting a dataset into a JSON string. I used a jagged array (productArry) to accomplish that because it will serialize properly. That is probably the most valuable tip in this entire article. At this point you have a web service that queries a SQL database and returns records as JSON data. This is extremely useful if you want to use that data on your home page without making it an ASP.NET page. You can get the data using AJAX and avoid having your home page show an error should your ASP.NET web application develop a problem. Next I will show you the JavaScript code for calling the web service. Ill use the jQuery library because it is extremely popular with web developers right now. It makes it easy to write JavaScript that works in both browsers but you may not know how to call an ASP.NET web service using jQuery, especially since we need to pass a parameter to the web service methods. This is also tricky because the content type must be JSON. <script language="javascript" type="text/javascript" src="Scripts/jquery1.3.2.min.js"></script> <script language="javascript" type="text/javascript" src="Scripts/encoder.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { $("#query_results").empty(); $("#query_results").append('<table id="ResultsTable" style="width:450px;border:solid 1px #000000"><tr><th colspan="3" style="background-color:#eeeeee;text-align:left">Featured products</th></tr><tr><td>&nbsp;</td></tr>'); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "RandomProducts.asmx/getRandomProducts",

Page 7 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

data: '{ numProducts : "3"}', dataType: "json", success: function(msg) { var c = eval(msg.d); var strTable="<tr>"; for (var i in c) { strTable += "<td><table cellpadding='0' cellspacing='0' style='width:150px;height:auto;border:none'><tr>"; strTable += "<td align='center'><a href='#dialog' name='modal"+i+"' id='modal"+i+"' title='" + Encoder.htmlDecode(c[i][1]) + "'><img border='0' alt='" + Encoder.htmlDecode(c[i][1]) + "' ID='img" + i + "' /></a></td></tr><tr><td align='center'>" + Encoder.htmlDecode(c[i][0]) + "</td></tr><tr><td>&nbsp;</td></tr></table></td>"; } strTable += "</tr>"; $("#ResultsTable tr:last").after(strTable); loadImages(i); } }); function loadImages(imgCount) { var i = 0; for(i=0;i<=imgCount;i++) { var objImg = document.getElementById("img" + i); if(objImg) { objImg.src = objImg.alt; objImg.alt = ''; } } } </script> The most reliable way to call web serivce using JQuery is to use jQuery.ajax() as follows: $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "WebService.asmx/WebMethodName", data: "{<input parameters>}", dataType: "json" }); As you can see, the first parameters set the request type and content-type as required by the ASP.NET AJAX framework. If youd like to see a closer examination of why this particular syntax is used, youll be interested in 3 mistakes to avoid when using jQuery with ASP.NET AJAX

Page 8 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

I have used encoder.js library to perform html decoding. Above script will call Random product webservice on document load and will display 3 products inside 'query_results' div.

Script call back and JSON If you're involved in Web development you may have faced a problem that you couldn't find a good solution formaking client-to-server calls outside the current page. For example, you might want to validate the content of a textbox against data stored on the server asynchronously, without interrupting the continuity of the work or without forcing a full page refresh, which is particularly heavy for UI-rich pages. How would you code such an out-of-band call from the client to the server and back? There are a few issues to address to solve this problem. First and foremost, you need to set up a parallel HTTP channel for sending the request and getting the response. The new request should be invisible to the user to avoid any interference with the displayed page. Finally, the response you get from this invisible request must be merged with the current page through dynamic changes to the document object model (DOM) of the page. The great news about the scripting object model in ASP.NET 2.0 is that it allows calls to server events from client code without causing the page to post back and refresh. This is implemented through a callback mechanism. Using Script Callbacks Developing an ASP.NET 2.0 page that makes use of script callbacks is a two-step procedure. First, you write the server-side code that will be invoked from the client. In doing so, you basically define the data model for the call. You decide what information must be exchanged and in which format. The actual type being exchanged must be a string, but the contents of the string can be quite differentJavaScript, XML, a comma-separated string of values, and so on. The second step requires you to define the client-side code to trigger the out-of-band call. The remote invocation begins when a call is made to a built-in JavaScript function named WebForm_DoCallback. You don't necessarily need to know the name and signature of this function, as you can get it from a new member of the Page classthe GetCallbackEventReference method: string js = GetCallbackEventReference(this, arg, func, "null", "null");

Page 9 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

A call to this JavaScript function is bound to a clickable element in the pagefor example, a <button> tag. It is essential that the clickable element not be a Submit button. For this reason, you can't render this button using the <asp:button> control because such a server control outputs the submit button markup: <input type="submit" id="button" ...> The onclick handler points to a built-in piece of JavaScript code that initiates and controls the out-ofband call. The GetCallbackEventReference method on the Page class returns the script string that starts the callback. I am binding call to javascript function to grid row in RowDataBound Event handler if (e.Row.RowType == DataControlRowType.DataRow) { ClientScriptManager scriptMgr = Page.ClientScript; string callbackRef = scriptMgr.GetCallbackEventReference(this, Convert.ToString(gvProductList.DataKeys[e.Row.RowIndex].Value), "UpdateProductViewHandler", null, true); e.Row.Attributes.Add("onclick", String.Format("javascript:{0}", callbackRef)); } In this code snippet, I'm making the call to the current page and passing the value of the current item of Grid view. UpdateProductViewHandler is the name of the JavaScript function that will merge callback results with the current page. Context is any DHTML reference or extra information you want to pass to the callback is useful to the merge process. Finally, the error callback is a JavaScript function that is automatically invoked if an error occurs during the callback. As you can see, you click on product from gridview to raise a callback event on the server. The handler for the button is shown in the following code snippet: <tr class="GViewRow" onclick="javascript:WebForm_DoCallback('__Page',154,UpdateProductViewHand ler,null,null,true)"> In addition, the markup of the page contains the related instructions shown in the following code:

<script src = "/Rewriter/WebResource.axd? d=EZ0Z0S2C1XQ2sopHwEEHdw2&amp;t=633786854060156250" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ WebForm_InitCallback();//]]></script>

Page 10 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

ICallbackEventHandler interface The ICallbackEventHandler interface features just two method with the following signature: void RaiseCallbackEvent(string eventArgument) string GetCallbackResult() The actual parameter for the RaiseCallbackEvent method is retrieved from the Request collection of posted values. The string representation of the input data is contained in an entry named __CALLBACKPARAM. Once again, this string can actually contain everything you want and need, including XML data or Base64 data, comma-separated values, dates, numbers, and so forth. GetCallbackResult() method calls itself automatically once the processing of RaiseCallbackEvent is done. Let's consider an example private string _StrJSon = string.Empty; public void RaiseCallbackEvent(string eventArguments) { int productId = Convert.ToInt32(eventArguments); string strSql = string.Empty; SqlDataReader drProducts = null; JavaScriptSerializer jSerializer = null; Product objProduct = null; strSql = String.Format("SELECT * FROM tblProducts WHERE intProductId = {0}", productId); try { drProducts = Utils.SqlHelper.ExecuteReader(Utils.Utilities.getConnection(), CommandType.Text, strSql); if (drProducts != null) { if(drProducts.HasRows) { drProducts.Read(); objProduct = new Product(); objProduct.productId = Convert.ToInt32(drProducts["intProductID"]); objProduct.tilte = (drProducts["strTitle"].Equals(System.DBNull.Value) == true) ? "" : Convert.ToString(drProducts["strTitle"]); objProduct.summary = (drProducts["strSummaryDescription"].Equals(System.DBNull.Value) == true) ? "" : Server.HtmlEncode(Convert.ToString(drProducts["strSummaryDescription"]));

Page 11 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

objProduct.venue = (drProducts["strVenueCounty"].Equals(System.DBNull.Value) == true) ? "" : Convert.ToString(drProducts["strVenueCounty"]); objProduct.suitableAges = (drProducts["SuitableAges"].Equals(System.DBNull.Value) == true) ? "" : Convert.ToString(drProducts["SuitableAges"]); objProduct.price = (drProducts["dblToPrice"].Equals(System.DBNull.Value) == true) ? 0 : Convert.ToDecimal(drProducts["dblToPrice"]); objProduct.customerReview = (drProducts["CustomerReviews"].Equals(System.DBNull.Value) == true) ? "" : Server.HtmlEncode(Convert.ToString(drProducts["CustomerReviews"])); objProduct.ImageUrl = (drProducts["ImageUrl_Main"].Equals(System.DBNull.Value) == true) ? "-" : Convert.ToString(drProducts["ImageUrl_Main"]); } } } catch (Exception ex) { lblMsg.Text = "Error : " + ex.Message; } finally { if (drProducts != null) { if (!drProducts.IsClosed) drProducts.Close(); } } jSerializer = new JavaScriptSerializer(); _StrJSon = jSerializer.Serialize(objProduct); } public string GetCallbackResult() { return _StrJSon; } Product class public class { public public public public public public public public } Product int productId; string tilte; string summary; string venue; string suitableAges; decimal price; string customerReview; string ImageUrl;

Page 12 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

UpdateProductViewHandler : <script language="javascript" type="text/javascript"> function UpdateProductViewHandler(result, context) { $("div#dvForm").css("display","block"); var product = eval('(' + result +')'); $("div#dvTitle").html(product.tilte).show(); $ ("div#dvSummary").html( Encoder.htmlDecode(product.summary)).show(); $("div#dvVenue").html(product.venue).show(); $("div#dvAge").html(product.suitableAges).show(); $("div#dvPrice").html(product.price).show(); $ ("div#dvCustomerReview").text( Encoder.htmlDecode(product.customerReview) ).show(); $("img#imgProduct").attr("src", "/Rewriter"+ product.ImageUrl); } </script> As stated earlier, we just need eval method to parse JSON response : var product = eval('(' + result +')'); To merge the JSON response with the existing page, you typically use the page's DHTML object model. You give each updateable HTML tag a unique ID and modify its contents scriptwise using the innerHTML property or any other property and method the DOM supplies. I have used div elements to show out on page and JQuery to update contents of those div elements. Script callbacks allow you to execute out-of-band calls back to the server. These calls are special postbacks, so a round-trip always occurs; however, unlike classic postbacks, script callbacks don't redraw the whole page and they give users the illusion that everything is taking place on the client. ASP.NET 2.0 provides a built-in mechanism for client callbacks based on the services of a COM object that ships with Internet Explorer 5.0 and later. By using the same object, you can implement a script callback mechanism in ASP.NET 1.x as well.

Page 13 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0

Ref. http://msdn.microsoft.com/en-us/magazine/cc163941.aspx http://www.williamsportwebdeveloper.com/cgi/wp/?p=494 http://www.keithrousseau.com/blog/2008/05/using-jquery-json-with-aspnet/

Page 14 of 14

Clarion Technologies Pvt. Ltd, Pune

Version 1.0