Introduction to Ajax and Ajax Control Toolkit : Part 1
In this article I have explained the details of Ajax and Ajax contol toolkit from basics to Advanced with Examples
There are many technologies used in the world to develop a applications, but instead of developing applications the greatest challenge is to make an application quick, reliable, user friendly and responsive.
I am experienced with maintaining applications developed on the Microsoft Visual Studio 2003 Framework and I have noticed that there are many Scripting code, static data, server load and a huge amount of unnecessary hard code to accomplish the additional functionality and so on. Then after in 2012 the management decided to convert the old version of the application into the latest version of Visual Studio and management gave me many responsibilities for the projects to change their look, performance, to reduce the complexity of the project, make dynamic content and so on using the latest technologies.
So I have decided to use Ajax in that project to accomplish my requirements. Now my application is faster and more responsive and dynamic.
My intent is to share my experience with C# Corner readers that I experienced while converting and modifying the old version of the application into the new one. So I have begun to write a Series of Articles on Ajax and the Ajax control toolkit from Basics to Advanced with more than 200 examples and sample codes through my experience and referencing many books.
I have written these series of articles by focusing on both beginners and experienced people so at the end of this year you will see all the Ajax and Ajax Control Toolkit Examples in one roof. So let us begin the journey with the first part.
In traditional web sites there are many issues related to performance of an application due to the high traffic on the server because when the user wants just a particular part of information then at that time the entire web page or web site is reloaded but that is not necessary.
Problems in traditional web Applications
- Many round trips to the server.
- Rendering of webpage is slower.
- Increases the consumption of server resources.
- Response time of application is very slower.
- Rendering of data is static.
- Data is updated of an application only when the user clicks on the browser refresh button.
So the preceding is some of the basic problems related to the traditional web application so to overcome these problems Ajax is the best alternative. So let us start with the basics.
What is Ajax ?
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the entire page.
We can also define Ajax is a combination of client side technologies that provides asynchronous communication between the user interface and the web server so that partial page rendering occurs instead of complete page post back.
Using Ajax technologies we can observe in Google Maps, Gmail, YouTube, and Facebook tabs.
I hope you have understood the basic concepts of Ajax. Now let us see the following diagram showing how Ajax works:
AJAX is Based on Internet Standards
Let us know about the basic information each technology uses in Ajax.
1. XHTML and CSS
XHTML (or HTML) is used for providing the markup tags, as used in any typical web site. In addition, we utilize CSS for extra styling functionality in relation to presentation and layout. XHTML is a stricter and more standardized form of HTML, which follows the rules of XML such as the requirement for well-formatted and valid against a schema or DTD.
2. Document Object Model (DOM)
The Document Object Model is a platform and language independent standard object model for representing HTML or XML.
XML is typically used as the format for transferring data between the server and the client. Using XML we can represent any applicable data object structure we might wish to represent.
- In Ajax Client and Server Communication done with help of HttpRequest.
- AJAX applications are browser and platform independent.
I hope you have understood the basics concepts of Ajax. Now let us discus the relation between Ajax and ASP.Net Framework.
Ajax and ASP.Net Framework
ASP.NET AJAX integrates client script libraries with the ASP.NET 2.0 development framework. This new Web development technology extends ASP.NET, offering the interactive user interface benefits of AJAX with a programming model that is more familiar to ASP.NET developers, making it very easy to add AJAX to your applications quickly and with minimal effort.
Power of Ajax
- The power of AJAX lies in its ability to communicate with the server asynchronously, using a XMLHttpRequest object without requiring a browser refresh.
Everything happens behind the scenes with a minimum request and response cycle without the knowledge of the user.
Advantages of AJAX based application
- Improved application performance by reducing the amount of data downloaded from the server
- Rich, responsive and Slick UI with no page flickers
- Eliminates frequent page refresh which usually happens in a typical request/response model (Everything is updated on fly)
- Easy to implement as there are variety of AJAX implementations available around
- AJAX mechanism works behind the scene nothing much required from user perspective
- Works with all browsers
- Avoids the round trips to the server
- Rendering of webpage faster
- Decreases the consumption of server resources
- Response time of application is very faster
- Rendering of data is dynamic
So let us start with the basic concepts of Ajax Extension which comes with the ASP.Net Framework.
Using Ajax Extension
The following are the most commonly used Ajax controls in an ASP.Net Application which comes with the ASP.Net Framework and available under the Ajax Extension tab of ASP.Net Toolbox present at the left hand side of Microsoft Visual Studio framework.
These controls are:
- Using ScriptManager
When we use any Ajax control then there is a requirement to use the ScriptManager to handle the Scripting on the client side; without the ScriptManager Ajax controls are not run. So it's a requirement to use the ScriptManager.
- Using UpDatePanel
Update panel is one of the most commonly used Ajax controls which is responsible for updating the particular requested content of the page instead of the entire page which is not requested. The ASP.Net controls are put under the update panel to make the benefit of this control. The ASP.Net controls which are kept under the update panel will be updated when the user clicks on a particular ASP.Net Control which are used in an application.
You can use multiple update panels on a single web page.
- Using Timer
The Timer is also one of the important controls; by using it we can update the particular content of the page automatically without clicking the browser refresh button. The Timer control is used along with the Update Panel so the Contents put under the update panel are automatically updated according the timing set under the timer_click event.
- Using Update Progress
This control is used to notify the user to wait until the requests are processed on the server. Update progress control is used when the user clicks on any tab or control of an application. At that time the progress bar is shown which is the interval between the times taken by the server to process the client request.
- Using ScriptManagerProxy
When you need to reference a service from your content page and yet the ScriptManager resides on the Master Page use a ScriptManagerProxy. The ScriptManagerProxy works by detecting the main ScriptManager on your page at runtime and hooking itself to that ScriptManager, making sure that any references given to it are also given to the real ScriptManager.
- Using Pointer
This Ajax Control used to specify the style of the mouse pointer such as arrow, thumb, and progress bar and much more. The above is the basic introduction about the Ajax Extension controls which are available by default in a Microsoft Visual Studio Framework.
In this first part of article I have explained the basics of Ajax. In my next article of the series, Using Ajax Extension :Part-2, I will explain how to use Ajax Extension controls in an ASP.Net C# web application.