ajax introduction with how to download ajax toolkit

8/3/2019 AJAX Introduction With How to Download AJAX Toolkit

1/21

ASP.net ajax basics, Ajax Formworks basics ,ASP.net with Ajax Frameworks

1. Introduction

2. History

3. Architecture

4.First Application with Ajax

5. Ajax Controls

6. ScriptManager Control

7. ScriptManagerProxy Control

8. Timer control

9. UpdatePanel control

10. UpdateProgress Control

11. Ajax Control Toolkit Download and Install

12. AjaxToolkitExtender Controls

ASP.net ajax basics, Ajax Formworks basics ,ASP.net with Ajax Frameworks

What is AJAX?

Ajax (Asynchronous JavaScript and XML) is a new paradigm introduced in 2005. To

use Ajax, able to trade data, with a web server, without having to load a new page. The

purpose of Ajax is that of giving the illusion that websites are responsive. It achieves this byprocessing requests which involve the sending and receiving of small packets of data

without refreshing the web browser. Ajax is a technique for creating fast and dynamic webpages. In other words, 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 toupdate parts of a web page, without reloading the whole page.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

Why Use AJAX?

In traditional JavaScript coding to get any information from a database or a file on the

server, or send user information to a server, its important to make an HTML form and GETor POST data to the server. Wait for the server to respond, then a new page will load with

the results when clicking Ok button to send the information. Because the server returns anew page each time . With AJAX, your JavaScript communicates directly with the server,

through the JavaScript XMLHttpRequest object With an HTTP request, a web page can

make a request to, and get a response from a web server - without reloading the page. Theuser will stay on the same page, and he will not notice that scripts request pages, or senddata to a server in the background. By using the XMLHttpRequest object, a web developer

can update a page with data from the server after the page has loaded.TheXMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 /

Firefox, Opera 8+, and Netscape 7.

How Ajax Work?
http://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/what_is_ajax.jx.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/History_ajax.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ajax_architecture.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/first_program.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ajax_controls.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ScriptManager.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/scriptmanagerproxy_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/timer_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/updatepanel_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/updateprogress_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ajax_control_toolkit_download_an.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ajax-toolkit-extender-control/index.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/what_is_ajax.jx.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/History_ajax.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ajax_architecture.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/first_program.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ajax_controls.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ScriptManager.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/scriptmanagerproxy_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/timer_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/updatepanel_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/updateprogress_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ajax_control_toolkit_download_an.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ajax-toolkit-extender-control/index.shtml


2/21

History Of Ajax

During browser innovation, Netscape added a feature known

as LiveScript (LiveScript became JavaScript and grew more powerful,), allowedpeople to put small scripts in web pages so that they could continue to do things

after youd downloaded them.

Ajax came when the Internet Explorer introduced the concept of IFrame element.Microsoft introduced another technique, called as Microsofts Remote Scripting that

technique involved the pulling of data through means of Java Applet whichcommunicated with the client side using scripting language like JavaScript.

As soon Microsoft introduced new XMLHttpRequest object that acts as an ActiveXcontrol in the Internet Explorer. Finally, in the year 2006, the W3C (World Wide Web

Consortium) announced the release of the first draft that included the specification

for the object (XMLHttpRequest) and made it an official web standard.

AJAX (first coined in the year 2005) is not a new programming language but arelatively new technique for creating faster, better and dynamic web applications. If

you have the basic understanding of HTML, XHTML, XML and JavaScript languagesthen you can have a go with AJAX

AJAX is basically based on the following web standard, XML HTML JavaScript CSS.


3/21

Ajax Architecture in ASP. Net

Server Script, A script is a program or set of instructions that is interpreted or carried out

by another program rather than by the processor. A CGI script is an example of a server-side script .

Microsoft Ajax Library, There are different library and applications:

1. Base Class Library

2. Script Code Library3. Asynchronous Communications, transfer data asynchronously.

4. Browser Capability5. Browsers (IE, Firefox etc.)

ASP.Net Ajax Extensions, Ajax Extensions provide controls in build with .Net framework.

1. Ajax Server Control

2. Application3. Asynchronous Communication


4/21

First Program

1. Open new ASP.NET Web Site then click OK.

2. Open Tool Box and drag ScriptManager and UpdatePanel from AJAX Extensions. Then

drag label and Button, named UsingAjax. Open properties window of UpdatePanel. Go toTriggers property and click on collection then add the controlID (Button name, which you

want to make a AJAX part) and select Event (Click). Added one another button outside theUpdatePannel ,named WithoutAjax and a added another Label.


5/21

3. Paste the code in .cs file of the application

protected void with_ajax_Click1(object sender, EventArgs e)

{Label1.Text = DateTime.Now.ToString();

} protected void without_ajax_Click(object sender, EventArgs e)

{

Label2.Text = DateTime.Now.ToString();

}

4. Debug the application


6/21

Clicking on "Using Ajax Button" ,only first time (label) will be updated without reloading

whole page.

Clicking on "Without Ajax Button", whole page Reloaded.

Ajax Controls

You drop the controls to your page (Default.aspx) from the Tab Ajax Extensions.


7/21

1. ScriptManager Control

Client script for AJAX-enable ASP.NET Web pages managed by ScriptManager control .ScriptManager control registered the client script for the Microsoft Ajax Library with the

page. Script manager support features such as

1. Partial-page rendering to the browser2. Web-service calls.

2. ScriptManagerProxy Control

When a ScriptManager control is already defined in a parent element (or master page orhost page already contains a ScriptManager control) then used ScriptManagerProxy control

to enables nested components and user control to add service and script.

3. Timer control

The ASP. NET AJAX Timer control

1. Performed Postbacks of pages at defined intervals.2. Timer control with an UpdatePanel control, enable partial-page updates at a defined

interval.3. If you want to post the whole page, used Timer Control.

4. The Timer control requires specific settings in a web.config file in order to functioncorrectly.

5. If your application does not contain the required web.config file, errors appear in theDesign view of the page where the control would have appeared.

4. UpdatePanel control

Which area on web page you want to partial update, used under the UpdatePanel control.Don't wrap your entire page within an UpdatePanel. You may use several panels on your

page. UpdatePanel control is the most important control in the ASP.NET AJAX package. It

will AJAX controls contained within it, allowed to partial rendering of the area on the webpage.

5. UpdateProgress Control
http://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ScriptManager.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/scriptmanagerproxy_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/timer_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/updatepanel_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/updateprogress_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/ScriptManager.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/scriptmanagerproxy_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/timer_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/updatepanel_control.shtmlhttp://r4r.co.in/asp.net/01/tutorial/asp.net_ajax/updateprogress_control.shtml


8/21

UpdateProgress control provides status information about partial-page updates inUpdatePanel controls. UpdateProgress control provides, to customize the content. When a

partial-page update is very fast, you can specify a delay before the UpdateProgress controlis displayed.

ScriptManager Control

Client script for AJAX-enable ASP.NET Web pages managed by ScriptManager control .ScriptManager control registered the client script for the Microsoft Ajax Library with the

page. Script manager support features such as

1. Partial-page rendering to the browser

2. Web-service calls.

Dragging ScriptManager from Ajax extension.

Untitled Page

The ASP. NET controls UpdatePanel, UpdateProgress, and Timer needed a ScriptManagercontrol in order to support partial-page rendering. To view the property window, right clickto the ScriptManager control and select Properties. Several property opened.


9/21

Some Important Properties of SCripManager Controls are:

The EnablePartialRendering property is enabled the partial-page rendering.

EnablePartialRendering property is true by default. Hence partial-page rendering is enabledwhen you add a ScriptManager control to the page.

The AsyncPostBackErrorMessage, When an unhandled server exception occurs during

postback, gets or sets the error message that is sent to the client. At thattime AsyncPostBackError Event occur.

The AllowCustomErrorsRedirect Property, Custom errors section of the Web.config file isused during an error in an asynchronous postback, gets or sets a value.s

Timer control

The ASP. NET AJAX Timer control

1. Performed Postbacks of pages at defined intervals.

2. Timer control with an UpdatePanel control, enable partial-page updates at a definedinterval.

3. If you want to post the whole page, used Timer Control.


10/21

4. The Timer control requires specific settings in a web.config file in order to functioncorrectly.

5. If your application does not contain the required web.config file, errors appear in theDesign view of the page where the control would have appeared.

How to use Timer Control

1. Drag ScriptManager Control, UpdatePanel and label from toolbox. After this add

a timer control.

2. Open the properties of Update panel. Click on collection.

3.Select controlID and give the name of your Timer control and choose the event.


11/21

Click OK

4.Paste the code in the Default.aspx.cs file on your Website


12/21

using System;

using System.Configuration;

using System.Data;using System.Linq;

using System.Web;

using System.Web.Security;using System.Web.UI;

using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;

public partial class_Default : System.Web.UI.Page

{ protected void Page_Load(object sender, EventArgs

e){

}

protected void Timer1_Tick1(object sender, EventArgse)

{Label1.Text = System.DateTime.Now.ToString();

}}

5. The design view of your Website

Untitled Page


13/21

6. Debug the Application

UpdatePanel control

Which area on web page you want to partial update, used under the UpdatePanel control.

Don't wrap your entire page within an UpdatePanel. You may use several panels on yourpage. UpdatePanel control is the most important control in the ASP.NET AJAX package. It

will AJAX controls contained within it, allowed to partial rendering of the area on the webpage.

The tag has two childtags:1. ContentTemplate, The ContentTemplate tag holds the content of the panel. The content

are anything that you would normally put on your page, from web controls

2. Triggers tags, The Triggers tag allows you to define certain triggers which will make thepanel update there contents. The following example will show the use of both childtags.

Go to properties of UpdatePanel control, click on Triggers a new window open. Addcontrols, which you want to make a part of web page for partial rendering.

UpdateProgress Control

UpdateProgress control provides status information about partial-page updates inUpdatePanel controls. UpdateProgress control provides, to customize the content. When a

partial-page update is very fast, you can specify a delay before the UpdateProgress control


14/21

is displayed.

Example

1.Open a new Website. Add ScriptManager, updatePanel and UpdateProgress inorder. Drag a button (named Update) control on your webpage.

2. Go to UpdatePanel Control Properties and add the Update Button toUpdatePanelTrigger Collection.


15/21

3. Design Code (Default.aspx)

UpdateProgress Control


16/21

property used to gets or sets the template, which definedthe content of the UpdateProgress control.

On Update Button Click (.cs Code)

protected void update_bt_Click(object sender,

EventArgs e){

System.Threading.Thread.Sleep(5000);

}

4. Debug the Application

Note: When Click on Update Button, the image will be appear for 5 sec. You can increase

the time to increment the value in sleep method (System.Threading.Thread.Sleep(5000)).


17/21

Ajax Control Toolkit Download and Install

1. Download Ajax Control Toolkit Click Here

2. How to Install Ajax Controls in .Net Framework

Step 1. Open new Website and right click on Tool Box, choose Add tab option as shown inbelow Image.

Step 2. Written the name of Your Ajax control tab.
http://ajaxcontroltoolkit.codeplex.com/releases/view/43475http://ajaxcontroltoolkit.codeplex.com/releases/view/43475


18/21

Step 3. Right click on Ajax control tab Click on the Choose Items option, a new windowofChoose Toolbox Items be open.


19/21

Step 4. Click on Browse.. button , and find Ajax Control Toolkit Folder (Which youdownloaded) and select AjaxControlToolkit.dll file. Click on Open button then click OK.


20/21

Step 5. Controls are Downloaded. You can see in your Ajax control Tab.


21/21

ajax introduction with how to download ajax toolkit

Documents