This took me many tries to get this right so I am logging this so I dont have to go through this again.
JSON (Javascript Object Notation) allows us to send data to our Javascript (JQuery) and let it read that data in very useful ways. With JSON, we can send basic keys and values to Javascript (as I will show here) up to complete objects with parameters and functions ( just google JSON tutorials to see some amazing ways to use the data).
HERE I will show the following scenario: using an aspx page (but it could just as easily be a simple html page) I declare the JQuery library and using JQuery on that page I make a call to another aspx page (so we can get to the server and do ‘thinking’ stuff) using one of JQuerys Ajax functions (“$.post”) - In that CALLED page I will be grabbing any sent in data (because our JQuery can send data to that page) , doing WHATEVER you want to do with the data (tap into a database, apply business rules, etc.) and then formatting whatever data you want to return in JSON format so that our JQuery can use it in a somewhat intelligent fashion.
I probably lost many of you, so let me just SHOW you and it will be much clearer.
STEP 1: Markup – add the JQuery Library to your page, then call the $.post function (that function can take several types of configurations but the one I am using is the NAME of the page I am calling, the data I am sending to it, what to do with the Results I get back, and finally telling it that the results WILL BE IN JSON format.
<head runat="server">
<title>JSON Test Page</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#jsonButt").click( function() {
$('#jsonReturnDiv').html( '<img src="images/loading.gif" />' );
$.post('ajax/jsonTestPage.aspx',
{'ThisIsWhereIWouldSendDataIn' : 'Data1', 'Data2Etc' : 'Data2'},
//The data we return will come back as JSON
function(data) {
$('#firstReturnDiv').html(data.first);
$('#secondReturnDiv').html(data.second);
$('#thirdReturnDiv').html(data.third);
$('#jsonReturnDiv').html( '' );
}, "json");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="firstReturnDiv"> This is the first return div... check it</div>
<hr />
<div id="secondReturnDiv"> This is the second return div... check it</div>
<hr />
<div id="thirdReturnDiv"> This is the third return div... check it</div>
<hr />
<input id="jsonButt" type="button" value="button" /> <div id="jsonReturnDiv"></div>
</form>
</body>
</html>If you dont understand the Document ready, butt click, and the rest then you should probably just read a couple QUICK JQuery tutorials — its very simple to pick up and very worthwhile. Basically the .click function is what Kicks the whole thing off so that when a user clicks a button on my page that I have set the ID to ‘jsonButt’. (I also kick off a lovely little whirly gig [ i love whirly gigs ] that I eventually hide after the data comes back) ….
STEP 2: Code Behind – So inside of my aspx page (the one I point to in the $.post function ( ‘ajax/jsonTestPage.aspx’, ) I remove ALL markup and only leave my top line “<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jsonTestPage.aspx.cs" Inherits="ajax.jsonTestPage" %>” . Then in code behind I can grab the data that was sent in to the page via the Query string (I dont do this here) … the format the JSON data to return BACK to the page. *** TWO THINGS MUST BE PRESENT TO MAKE THIS WORK : THE CONTENT TYPE MUST BE SET AS I HAVE HERE AND THE JSON DATA HAS TO BE SURROUNDED BY DOUBLE QUOTES
protected void Page_Load(object sender, EventArgs e)
{
// Response.ClearHeaders();
Response.Cache.SetCacheability(HttpCacheability.NoCache);
//JSON MUST BE SENT BACK WITH THIS CONTENT TYPE!
Response.ContentType = "application/json";
//JSON MUST HAVE DOUBLE QOUTES!!!
string jsonReturn = "{\"first\":\"This is the first\", \"second\":\"This is SECOND!\", \"third\" : \"This is third!\"}";
Response.Write(jsonReturn);
}Now look at the jsonReturn string. We have a piece of data called ‘first’ and it’s value ‘This is the first’, etc… here is where we could make more complicated objects but we will keep it simple for now.
STEP 3 – This isnt really a step but just some explanation… The Response.Write now sends the data back to the page in JSON format. If you look again at our $.post function you will see that the return data (which we have appropriately named ‘data’) will be used here:
function(data) {
$(‘#firstReturnDiv’).html(data.first);
$(‘#secondReturnDiv’).html(data.second);
$(‘#thirdReturnDiv’).html(data.third);
$(‘#jsonReturnDiv’).html( ” );
},
Take note of how we were able to use the data simply now by calling data.first, data.second, etc… again, this is a simple (although elegant) use. This allows us to do many advanced things with our return data. We could even return an array of multiple objects and be able to use and manipulate and display them straight from Javascript.
Using this technique, one could write an elegant front end using ONLY JQuery and HTML while still being able to harness the power of IIS on the back end. Hope this helps someone! T.
