Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

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

, 28 Jan 2014
Rate this:
Please Sign up or sign in to vote.
CodeProjectTo 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 se
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.

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 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kashif Akhter
Team Leader
Pakistan Pakistan
A computer software development professional with a proven track record of extensive experience of enterprise software development and building the manageable, scalable, and robust enterprise software architectures.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 28 Jan 2014
Article Copyright 2014 by Kashif Akhter
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid