Franc Stratton's .NET (TM) Web Application, OOP, and SOA Architecture & Programming Site

Another feature of jQuery that .NET programmers will find valuable is the AJAX calls that can be made to JSON Web or WCF Services. Normally I would maintain the Model View Controller architecture with an AJAX client call to a server-side method in the C# code-behind partial class for the ASP.NET form. The server-side method (from the code-behind controller) would then make the call to the Web or WCF service (containing a BLL and a DAL). For the sake of simplicity, however, this example will make a direct Web Service call to show the very easy jQuery implementation of AJAX client consuming a JSON Service.

While most browsers can send and parse XML, JavaScript Object Notation (JSON) provides a small footprint and standardized data exchange format that is well-suited for AJAX ASP.NET web applications. The web service method (GetRoleFeatures) in this example requires User ID and an Application ID as parameters, and it returns a JSON integer array with a role with it's features for applying page access and viewing of elements on the form. For example, if a user has an administrator's role, then the security features specific to that role are applied to the page controls. The service and it's methods can be viewed and tested from a browser (in this case on a Vista server):

When you click on the "GetRoleFeatures" service method, the get the following request page for input parameters:

When you enter the User ID and the Application ID, the web service returns a JSON array similar to:

<?xml version="1.0" encoding="utf-8" ?>

-  <ArrayOfInt xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="RoleFeaturesService">

   <int>1</int>

   <int>1</int>

   <int>2</int>

   <int>3</int>

   <int>4</int>

... ................

< <int>96</int>

< < int>184</int>

   </ArrayOfInt>

 

T The method in the service that returns the serialized JSON array:

  

   [WebMethod(Description = "Returns JSON array of roles features from user and app id.")]

   [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

   {

      public int[] GetRoleFeatures(string userID, string appID)

      int uID = Convert.ToInt32(userID.Trim());

      int aID = Convert.ToInt32(appID.Trim());

      var rolesFeaturesList = new List<RoleFeatures>();

      jQueryBLL bll = new jQueryBLL();

      int[] RolesFeatures = new int[0];

      RolesFeatures = bll.GetRoleFeatures(uID, aID);

      return RolesFeatures;

   }

}  

   On the client side, the jQuery AJAX call is made with the following code:

 

   $(document).ready(function() {

   $('#submit').click(function() {

   $.ajax({

   type: "POST",

   //Create list of parameters in the form:

//{"paramName1":"paramValue1","paramName2":"paramValue2"}

   data: '{userID: "' + $('#txtUserID').val() + '", '+ 'appID: "' + $('#txtAppID').val() + '"}',

   url: "http://localhost:7881/RoleFeaturesService.asmx/GetRoleFeatures",

   contentType: "application/json; charset=utf-8",

   dataType: "json",

   success: function(response) {

   var dataArray = (typeof response.d) == 'int' ? eval('(' + response.d + ')') : response.d;

   $('#result').empty().append('<table border=1><thead><tr></tr></thead><tbody></tbody></table>');

   $('<th/>').text($('#txtAppID').val()).appendTo('#result thead tr');

   for (var i = 0; i < dataArray.length; i ++) {

   $('<tr/>').append($('<td/>').text(dataArray[i])).appendTo('#result tbody');

   }

   $('#store').data('object', dataArray);

   },

   failure: function(msg) {

   $('#result').empty().append(msg);

   }

   });

});

});The data include the user ID and the application ID sent to the web service url and method. The Web method returns

   the JSON array that is formatted and displayed in a table on the ASP.NET form. The array is also stored in the "#store" div object. Storing the role and feature array is required so that it can be reapplied during a postback. The displayed array looks like:

   

---

  

  

---

   The "Get and display array "object" button code-behind in the click event displays the array stored in the div. The code for this button was shown in the jQuery Dirty Flag topic.