I know I have been writing a lot about MVC and JQuery lately. What can I say? JQuery makes writing JavaScript fun! Admittedly, when I first start using it, it was a little overwhelming. I was confused by the dollar sign notation and I really did not understand why it was better than plain old JavaScript. However, now that I am getting better acquainted with JQuery I can not imagine life without it.

Recently I have been busy converting a Windows Form app into a MVC application. Unfortunately, when people get used to the rich user experience of a windows application they tend to have trouble adjusting to the stateless and often less extravagant experience of a web application. Most web apps function by making round trips to the server, which results in a full page refresh to display the data. This is annoying when you are scrolled halfway down a page looking at a record and the page refreshes and shoots you back to the top again.

In order to avoid unnecessary post backs we can use AJAX (asynchronous JavaScript and XML). To simplify the process of writing the JavaScript we can leverage the power of JQuery's post function. Here is an example:

The method in the controller: Notice that it takes a single parameter and returns a string. The details of the implementation aren't important.

public string JulianToDate(int julian) {

    return DBA.Core.DateTimeUtilities.JulianToDateTime(julian).ToString("MM/dd/yyyy");

}

The Javascript: We use the post method from the jquery library to call the method in our controller. The first parameter is the URL of the method, the second parameter are the values we pass to the method and the final parameter is the callback method.

function RunJulianToDate() {

   var input = $("input#julian1").val();

   $.post( "/Utils/JulianToDate", 

           { julian : input },

           function ( data ) {

               $("input#date1").val(data);

   });         

}

Notice in the callback function that a variable is returned. In this simple example it is just a plain old string that we use to populate a textbox with. However, we can do other things like return a JSON (JavaScript object notation) string, deserialize it using JQuery and dynamically update a table or HTML element. For example, If you wanted to return a JSON from your method, you would instantiate an object and serialize by using the Serialize<T>() method of the System.Web.Script.Serialization.JavaScriptSerializer class. Here is an example:

public String GetPurchaseOrderJson(string id) {

   PurchaseOrderModel po = repository.FindPurchaseOrder(id);

   return new JavaScriptSerializer().Serialize(po);

}

In your JavaScript code you can deserialize the JSON string into an object by using the eval method:

function GetPurchaseOrder() {

   $.post( "/Utils/GetPurchaseOrderJson", 

           { id : 1 },

           function ( data ) {

               eval( "var po = " + data );

}