Microsoft AJAX, Business Objects at Client Side–Part 1

When I started working on the ASP.NET, its all about the server side coding and database connectivity. JavaScript is more like a validation tool, this is the mind-set that i had. But recent days in my new company changed my mind-set. Now I am exploring the JavaScript into very much details. I am very much delighted to have such a type of colleagues who helped me to change this mind-set. During this time I experimented with many thing and one of them is effective use of Microsoft AJAX.

Most of the “ASP.NET” programmers has this habit of using UpdatePanels, and ScriptManagers to work with Microsoft AJAX and stops there. But few people go beyond that. That is where actual beauty begins. Now i just wanted to share them with you.

My goal here is to access or use the server side business objects in the java script with the same signature. The advantage is here is, i don’t need to worry about the data types and JSON string. For me it is just like another server side function. To achieve this many programmer use many methods offered by the Microsoft AJAX framework.

In my case I used WCF services to expose my business logic. One can use normal web service for this. So what are the tools I require to build this?

  1. AJAX Enabled WCF Service.
  2. Script Manager (Microsoft AJAX)

Let us see these points in detail,

1. AJAX Enabled WCF Service:

In my project, I have my business logic in one business layer. Since it is already there, I don’t want to change them. So i created one WCF service in which I written the proxy classes to exactly match with my business class.

Here I am using the default SQL Database, “AdventureWorks” in that three tables Employee, Departments, EmployeeDepartmentHistory and EmployeeAddress. My dbml is as follows,


Now I need to create a WCF service to access these tables.


In my case, service name is Employee.svc. the following is the default code that visual studio generates,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;

namespace ClientSideBusinessObjects.WCFService
	[ServiceContract(Namespace = "")]
	[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
	public class Employee
		// To use HTTP GET, add [WebGet] attribute. (Default ResponseFormat is WebMessageFormat.Json)
		// To create an operation that returns XML,
		// add [WebGet(ResponseFormat=WebMessageFormat.Xml)],
		// and include the following line in the operation body:
		// WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
		public void DoWork()
			// Add your operation implementation here

		// Add more operations here and mark them with [OperationContract]

Here “Namespace” in the ServiceContract or DataContract will tell us, under which name these classes should group together. In my case it is “BusinessObjects”. Right after that, we will observe AspNetCompatiblityRequirements, this is required and makes service available in the client side. All our methods, if need to available in client side then must be attributed by [OperationContract].

2. ScriptManager (Microsoft AJAX):

Script manager is the one who brings our web service to the JavaScript. Once we place the script manager onto the page, it is time to tell the script manage about our web service. To cater this, script manger comes with a property called “Services”. Under this we can assign our web service using ServiceReference. The following is the typical code to achieve the above,

<asp:ScriptManager ID="ScriptManager1" runat="server">
		<asp:ServiceReference Path="~/WCFService/Employee.svc" />

Now this setup brings the web service into the client side. Before going further, let us test what we have done. To test, I written one method in my service which is as follows,

public string WriteData()
	return DateTime.Now.ToString();

Now let us test the setup. To test I have taken a simple ASPx page named, Test.aspx and placed my script manager into that. Now placed one label (ASP.NET) and a Button (this is too). Considering my application is referenced to jQuery, I written the following code in my script block,

$(document).ready(function () {
	BusinessObjects.Employee.WriteData(function (result, e) {
		$get("<%=lblDate.ClientID %>").innerHTML = result;
	}, function (result, e) { alert(result.get_message()); });

In this code, we can observe how we are calling server side methods. The common syntax will be as follows;

<<NameSpace>>.<<ClassName>>.<MethodName>>(<<Parameters>>, OnSuccess(result, e), OnFailure(result, e));

Here the result in OnSuccess will hold the returned data from web service method in JSON format. If there is any exception while executing the method, then the exception will be captured in the “result” of the OnFailure. To get actual exception details use the member method “get_message()”.

Now this script is going to execute, once the document completed loading and ready for user input. After this for the button, I added the following javascript for the OnClientClick event,

function Update() {
	BusinessObjects.Employee.WriteData(function (result, e) {
	$get(&quot;&lt;%=lblDate.ClientID %&gt;&quot;).innerHTML = result;
	}, function (result, e) { alert(result.get_message()); });
return false;

Since it is returning “false” at the end of execution, the click event will not fire for post back. Now run the code and test, the following is the result.


Click on the button update to see the updated time. My complete aspx page looks like;

 &lt;%@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeBehind=&quot;Test.aspx.cs&quot; Inherits=&quot;ClientSideBusinessObjects.Test&quot; %&gt;

 &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;;&gt;

 &lt;html xmlns=&quot;;&gt;
 &lt;head runat=&quot;server&quot;&gt;
     &lt;script src=&quot;Scripts/jquery-1.4.1.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
     &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
     &lt;asp:ScriptManager ID=&quot;ScriptManager1&quot; runat=&quot;server&quot;&gt;
         &lt;asp:ServiceReference Path=&quot;~/WCFService/Employee.svc&quot; /&gt;
         &lt;asp:Label ID=&quot;lblDate&quot; runat=&quot;server&quot; Text=&quot;&quot;&gt;&lt;/asp:Label&gt;&lt;br /&gt;
         &lt;asp:Button ID=&quot;Button1&quot; runat=&quot;server&quot; Text=&quot;Update&quot; OnClientClick=&quot;javaScript:return Update()&quot; /&gt;
     &lt;script type=&quot;text/javascript&quot;&gt;
         $(document).ready(function () {
             BusinessObjects.Employee.WriteData(function (result, e) {
                 $get(&quot;&lt;%=lblDate.ClientID %&gt;&quot;).innerHTML = result;
            }, function (result, e) { alert(result.get_message()); });

         function Update() {
             BusinessObjects.Employee.WriteData(function (result, e) {
                 $get(&quot;&lt;%=lblDate.ClientID %&gt;&quot;).innerHTML = result;
             }, function (result, e) { alert(result.get_message()); });
             return false;

In part 2, we will discuss on business objects and accessing them in client side.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s