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
Ajax Application Architecture
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
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
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
- 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.