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 freed up your server memory from unnecessary objects persistence to handle more client requests and to 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 feels like desktop application.
- Updating data behind the scene.
- 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 above code snippet I am using the .asmx web service to cater 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 successfull.
Client Side Code Snippet to invoke the .asmx WebMethod
In 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 seperated paramters information with their names respectively.
- Ajax datatype attribute this attribute enables the ajax call to identify the message format.
- Ajax async attribute you can enbale 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 represents the branch code and 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 Plugin
Now I am showing how to avoid the server side grids by using the jQuery Template plugin to freed 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 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 more imrove the response time and getting only the relevant data from server.
Hope this post is useful to begin with ASP.NET Ajax Application Architecture.