ASP.NET Ajax Application Architecture (jQuery, jSon, .NET ScriptService)

This post shows you how to provide your users with a richer and more responsive user experience by building an Ajax Application.

Avoid the server side programming, more bandwidth utilization and free up your server memory from unnecessary objects persistence to handle more client requests and minimize the server processing in order to minimize the response time. Make your web application rich and more responsive with a feel like a desktop application.

Why Use Ajax in Web Application

Only update the related section without reloading the entire page to prevent the invocation of unnecessary page life cycle events.

• Reduce network latency to cut the response time
• Asynchronous interaction
• Make web application feel like desktop application
• Update data behind the scenes
• Low bandwidth utilization

You can create an ASP.NET Ajax Web application with two different control mechanisms, either a client side control mechanism or server side control mechanism and you may use both in a single solution. A client side control mechanism uses jQuery (JavaScript) to interact with user and controls but does not use any ASP.NET server controls. For instance, an HTML can include script elements that reference the jQuery.jsfiles. The ASP.NET Ajax application allows to perform all processing on the client.

Ajax Application Architecture

Components

Client components enable rich behaviors in the browser without postbacks. Components fall into three categories:

• Components, which are non-visual objects that encapsulate code
• Behaviors, which extend the behavior of existing DOM elements
• Controls, which represent a new DOM element that has custom behavior

Web Services (Script Services)

With Ajax functionality in an ASP.NET Web page, you can use client script to invokeWeb methods in ASP.NET Web services with enabling the service attribute [System.Web.Script.Services.ScriptService] to entertain the Script calls.

Begin with ASP.NET Ajax Application Architecture

In this post, I will show you how to invoke the web methods from client side without using the server resources. I will use the JavaScript Object Notations (jSon) as data format with Ajax calls to post and get the data from server.

Lets Start with ScriptEnabled Web Service

• In the above code snippet, I am using the .asmx web service to cater to the client script calls by enabling the ScriptService attribute to service level.
• In a ScriptMethod attribute, I am declaring the message format as jSon.
• Just above the ScriptMethod attribute, I declared one more attribute to this method named WebMethod with enabling the session information. By doing this thing, I can use the session information in my script services.
• The service using the WCF based web service to authenticate user by returning the information related to user if user authentication is successful.

Client Side Code Snippet to Invoke the .asmx WebMethod

In the above code snippet, I am using the jQuery based client code to fill the dropdown list values from database with the Ajax call by declaring the:

• Ajax type attribute: it could be GET OR POST difference between post and get methods of Ajax
• Ajax URL attribute: this attribute contains information of web method's fully qualified path.
• Ajax data attribute: this attribute contains the information of web method's parameters. You can send the comma separated parameters information with their names respectively.
• Ajax datatype attribute: this attribute enables the Ajax call to identify the message format.
• Ajax async attribute: You can enable or disable the asynchronous calls with this attribute.
• In above code snippet, I simply get a dataTable from database having two columns named "DFLT_BRAN" and "BRAN_NAME" first columns represent the branch code and the other one represents the branch name
• I simply bind this dataTable to my dropdown list by adding the dropdown list options with creating the iterations on Rows count.
• If no rows count, then the alert message will be shown on page "No Branch Found."

Client Side Grid with jQuery Template plug in

Now I am showing how to avoid the server side grids by using the jQuery Template plug in to free up the server's memory from heavy data grids.

• First, you need to add the reference of jQuery.tmpl.js to your web page.

  

• Now create a template for jSon data you will receive with an Ajax call to fill the grid.

  

• Now invoke the web method to get data from server for your grid.

  

In the above code snippet, I added a reference to jquery.tmpl.js file to my web page. Then, I created a template for a row of grid and called a web method to finally get data from server for my grid. In the last code snippet for getting the data in a client side grid, I am using the DB level paging technique to further improve the response time and get only the relevant data from server.

Hope this post is useful to begin with ASP.NET Ajax Application Architecture.