You are on page 1of 35

Ajax

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
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 by processing 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 web pages. 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 to update 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 GET or 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 a new 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. The user will stay on the same page, and he will not notice that scripts request pages, or send data 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. The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.

How Ajax Work?

History Of Ajax
 During browser innovation, Netscape added a feature known as LiveScript (LiveScript became JavaScript and grew more powerful,), allowed people to put small scripts in web pages so that they could continue to do things after you’d downloaded them. Ajax came when the Internet Explorer introduced the concept of IFrame element. Microsoft introduced another technique, called as Microsoft’s Remote Scripting that technique involved the pulling of data through means of Java Applet which communicated with the client side using scripting language like JavaScript. As soon Microsoft introduced new XMLHttpRequest object that acts as an ActiveX control 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 a relatively new technique for creating faster, better and dynamic web applications. If you have the basic understanding of HTML, XHTML, XML and JavaScript languages then you can have a go with AJAX AJAX is basically based on the following web standard, XML HTML JavaScript CSS.

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 serverside script . Microsoft Ajax Library, There are different library and applications:

1. 2. 3. 4. 5.

Base Class Library Script Code Library Asynchronous Communications, transfer data asynchronously. Browser Capability Browsers (IE, Firefox etc.)

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

1. Ajax Server Control 2. Application 3. Asynchronous Communication
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 to Triggers 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 the UpdatePannel ,named WithoutAjax and a added another Label.

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

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.

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 browser 2. Web-service calls. 2. ScriptManagerProxy Control
When a ScriptManager control is already defined in a parent element (or master page or host 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 3. 4. 5.

interval. If you want to post the whole page, used Timer Control. The Timer control requires specific settings in a web.config file in order to function correctly. If your application does not contain the required web.config file, errors appear in the Design 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 web page.

5. UpdateProgress Control
UpdateProgress control provides status information about partial-page updates in UpdatePanel 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 is 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.

<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </form> </body> </html>

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

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 enabled when 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 that time AsyncPostBackError Event occur. The AllowCustomErrorsRedirect Property, Custom errors section of the Web.config file is used 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 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 function
correctly.

5. If your application does not contain the required web.config file, errors appear in the
Design 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.

Click OK

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

using using using using using using using using using using using

System; System.Configuration; System.Data; System.Linq; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; 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, EventArgs e) { Label1.Text = System.DateTime.Now.ToString(); } }

5. The design view of your Website

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers>

</asp:UpdatePanel> <asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick1" Interval="60"> </asp:Timer> </form> </body> </html>

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 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 web page. The <asp:UpdatePanel> 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 the panel 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. Add controls, which you want to make a part of web page for partial rendering.

Click Ok

<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"> </asp:AsyncPostBackTrigger> <asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="Load">

</asp:AsyncPostBackTrigger> <asp:AsyncPostBackTrigger ControlID="TextBox2"> </asp:AsyncPostBackTrigger> </Triggers> </asp:UpdatePanel> </div> <p> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server" style="top: 84px; left: 255px; position: absolute; height: 22px; width: 128px"> </asp:TextBox> </p> <p> <asp:Button ID="Button1" runat="server" style="top: 160px; left: 170px; position: absolute; height: 26px; width: 56px" Text="Button" /> </p> </form> </body> </html>

UpdateProgress Control
UpdateProgress control provides status information about partial-page updates in UpdatePanel 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 is displayed. Example 1.Open a new Website. Add ScriptManager, updatePanel and UpdateProgress in order. Drag a button (named Update) control on your webpage.

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

3. Design Code (Default.aspx)

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>UpdateProgress Control</title> </head> <body> <form id="UpdateProgress" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="update_bt" EventName="Click"> </asp:AsyncPostBackTrigger> </Triggers> </asp:UpdatePanel> <asp:Button ID="update_bt" runat="server" Text="Update" /> </div> <p>&nbsp;</p> <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate><img src="face.jpg" width="300" height="300" /></ProgressTemplate> </asp:UpdateProgress> </form> </body> </html>

<ProgressTemplate> property used to gets or sets the template, which defined the 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)).

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 in below Image.

Step 2. Written the name of Your Ajax control tab.

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

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

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

AJAX Interview Questions And Answers

Page 1
Ques: 1 What is AJAX ? Ans: AJAX(Asynchronous JavaScript And XML) is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and update parts of a web page without reloading the whole page. The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh. Ans: AJAX(Asynchronous JavaScript And XML(AJAX)

)is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and update parts of a web page without reloading the whole page. The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh. Ques: 2 How to create an AJAX website using Visual Studio? Ans: Steps: Start Visual Studio, Click on File -> New Website -> Under Visual Studio Installed templates -> Select ASP.NET Ajax-Enabled Site. Enter a location & select OK. If using Visual Studio 2008 Web Developer Express Ajax comes along with it (so no need of a separate installation).Using Visual Studio Web Developer Express 2005 & versions above it, Ajax based applications may easily be created. Note that the Ajax Framework & Ajax Extensions should be installed (In case of VS 2005). Ques: 3 What is the ASP.NET Ajax Framework? Ans: ASP.NET AJAX is a free framework to implement Ajax in asp.net web applications, for quickly creating efficient and interactive Web applications that work across all popular browsers. The Ajax Framework is powered with 1 - Reusable Ajax Controls 2 - Support for all modern browsers 3 - Access remote services and data from the browser without tons of complicated script. Ques: 4 What role does the ScriptManager play? Ans: The ScriptManager manages all ASP.NET AJAX resources on a page and renders the links for the ASP.NET AJAX client libraries, which lets you use AJAX functionality like PageMethods, UpdatePanels etc. It creates the PageRequestManager and Application objects, which are prominent in raising events during the client life cycle of an ASP.NET AJAX Web page. It also helps you create proxies to call web services asynchronously. The ScriptManager control (that we may drag on a web form) is actually an instance of the ScriptManager class that we put on a web page. The ScriptManager manages all the ASP.NET Ajax controls on a web page. Using ScriptManager class: 1 - All resources managing on a web page. 2 - Partial page updates 3 - Interact with UpdatePanel Control. 4 - Information Release whether. 5 - Provied Facility to access Web Services Method 6 - Providing access to ASP.NET authentication role. Ques: 5 What are limitations of Ajax? Ans: 1.If the network bandwidth is slow,end user confused because no page postback full running. 2.Distributed applications running Ajax will need a central mechanism for communicating with each other Ques: 6 What is the role of a ScriptManagerProxy? Ans: In case of Master page scenario in your application and the MasterPage contains a ScriptManager control, then you can use the ScriptManagerProxy

control to add scripts to content pages.A page can contain only one ScriptManager control. Also, if you come across a scenario where only a few pages in your application need to register to a script or a web service, then its best to remove them from the ScriptManager control and add them to individual pages, by using the ScriptManagerProxy control. That is because if you added the scripts using the ScriptManager on the Master Page, then these items will be downloaded on each page that derives from the MasterPage, even if they are not needed, which would lead to a waste of resources. Ques: 7 What is an UpdatePanel Control? Ans: All controls residing inside the UpdatePanel will be partial postbacked.An UpdatePanel control is a holder for server side controls that need to be partial postbacked in an ajax cycle.The UpdatePanel enables you to add AJAX functionality to existing ASP.NET applications. It can be used to update content in a page by using Partial-page rendering. By using Partial-page rendering, you can refresh only a selected part of the page instead of refreshing the whole page with a postback. Ques: 8 What is the name of AJAX controls ? Ans: There are 5 AJAX controls. 1. ScriptManager 2. UpdatePanel 3. UpdateProgress 4. Timer 5. ScriptManageProxy Ques: 9 What is ASP.NET AJAX? Ans: ASP.NET AJAX is a terminology by Microsoft for implementation of AJAX, which is a set of extensions to ASP.NET. These components allow you to build rich AJAX enabled web applications, which consists of both server side and client side libraries. Ques: 10 Define Internet Standards for AJAX? Ans: AJAX is based on internet standards, and uses a combination of: 1. XMLHttpRequest object (to exchange data asynchronously with a server) 2. JavaScript/DOM (to display/interact with the information) 3. CSS (to style the data) 4. XML (often used as the format for transferring data) Ques: 11 What is XMLHttpRequest object in AJAX? Ans: The XMLHttpRequest object is used to exchange data with a server. With the XMLHttpRequest object Browser can retrieve and submit XML data directly to a Web server without reloading the page. To convert XML data into renderable HTML content, use the client-side Extensible Stylesheet Language Transformations (XSLT) to compose HTML elements for presentation. Property: 1. Onreadystatechange 2. readyState 3. responseBody 4. responseTextresponseXML 5. StatusstatusText Method 1. abort

2. getAllResponseHeaders: 3. getResponseHeader 4. open 5. send Ques: 12 Why Use ASP.NET AJAX Features? Ans: Features: 1. Improved efficiency. 2. As user requirement significant parts of a Web page's processing are performed in the browser. 3. UI elements- progress indicators, tool tips, and pop-up windows. 4. Partial-page updates that refresh only the parts of the Web page that have changed. 5. Client integration with ASP.NET application services for forms authentication, roles, and user profiles. 6. Auto-generated proxy classes. 7. Provide a framework that lets you customize of server controls to include client capabilities. Ques: 13 Define ASP.NET AJAX Client Life-Cycle Events? Ans: The two main Microsoft AJAX Library classes that raise events during the client life cycle of a page: 1. Application and 2. PageRequestManager classes. When partial-page rendering with UpdatePanel controls is enabled, the key client events are the events of the PageRequestManager class. These events enable you to handle many common scenarios. These include the ability to cancel postbacks, to give precedence to one postback over another, and to animate UpdatePanel controls when their content is refreshed. 1. Sys.WebForms.PageRequestManager Events: initializeRequest: Raised during initialization of an asynchronous postback. beginRequest: Raised before processing of an asynchronous postback starts, pageLoading: Raised after a response to an asynchronous postback is received from the server, but before any content on the page is updated. pageLoaded: Raised after all content on the page is refreshed as the result of either a synchronous or an asynchronous postback. endRequest: Use this event to provide customized error notification to users or to log errors. 2. Sys.Application Events: init: Raised only once when the page is first rendered after all scripts have been loaded, but before objects are created. load: Raised after all scripts have been loaded and objects in the application have been created and initialized. unload: Raised before all objects in the client application are disposed. Ques: 14 How to Check Whether AJAX Functionality is Enabled for a Page? Ans: Use the following code to determine whether AJAX functionality is enabled for a page in C# Code: ScriptManager sm = ScriptManager.GetCurrent(Page) if (sm == null) {

// ASP.NET AJAX functionality is not enabled for the page. } else { // AJAX functionality is enabled for the page. } To determine whether partial page rendering is supported for a page, you can modify this code to use the EnablePartialRendering and the SupportsPartialRendering property of the ScriptManager control. Ques: 15 How to Add an AJAX Extender Control? Ans: The ASP.NET AJAX Control Toolkit includes several extender controls that can be used to enhance the client functionality of Web server controls. Before you add an extender control to a server control in the following procedure, you must install the ASP.NET AJAX Toolkit. You can download the Control Toolkit from the “ASP.NET AJAX Control Toolkit” Web site. 1.Switch to Design view. 2.If the page does not already contain a ScriptManager control, from the AJAX Extensions tab of the Toolbox, drag one onto the page. 3.From the Standard tab of the Toolbox, drag a Button control onto the page. 4.If the Common Button Tasks shortcut menu does not appear, right-click the Button control and then click Show Smart Tag. 5.On the Common Button Tasks menu, click Add Extender. 6.In the Extender Wizard, in the Choose the functionality to add to Button1 list, click ConfirmButtonExtender, and then click OK. 7.In the Properties window, expand the Extenders tab, and then expand Button1_ConfirmButtonExtender. 8.Set the ConfirmText property to Continue? Ques: 16 How to Remove an AJAX Extender Control in ASP.NET? Ans: If the functionality of an extender control is no longer needed, you can remove the extender control. 1.Switch to Design view. 2.Select the Button control, and then on the Common Button Tasks menu, click Remove Extender. 3.In the Extenders attached to Button1 list, select ConfirmButtonExtender. 4.Click Remove, and then click OK. Ques: 17 What is the ASP.NET AJAX Extender Controls? Ans: If you want to adds client functionality to a Button control when users confirm to submit a form to the server then extender controls can use. ASP.NET AJAX extender controls enhance the client capabilities of standard ASP.NET Web server controls such as TextBox controls, Button controls, and Panel controls by using one or more extender controls to provide a richer user experience in the browser, and you also add ASP.NET AJAX extender controls to Visual Studio and work with them as you do with other controls. You can create your own extender controls and source for extender controls is the ASP.NET AJAX Control Toolkit. Ques: 18 What are the features of ASP.NET AJAX Extender Controls Ans: Visual Studio supports the following extender control features: 1.Adding extender controls. 2.Removing extender controls. 3.Setting extender control properties. 4.Managing extender controls

Ques: 19 List of all Extender Controls in the AJAX Control Toolktit? Ans: Extender Controls in the AJAX Control Toolktit: 1.CascadingDropDown 2.CollapsiblePanelExtender 3.ConfirmButtonExtender 4.FilteredTextBoxExtender 5.ModalPopupExtender 6.PasswordStrength 7.RoundedCornersExtender 8.TextBoxWatermarkExtender Ques: 20 Define Classes in ASP.NET AJAX Extender Controls? Ans: Two classes: 1.ExtenderControl: The ExtenderControl class enabled to programmatically add AJAX functionality to an ASP.NET server control and inherits from the Control class and implements the IExtenderControl interface. The Control class defines the properties, methods, and events that are shared by all ASP.NET server controls. Inheritance Hierarchy: System.Object System.Web.UI..::.Control System.Web.UI.ExtenderControl 2.IExtenderControl: The ExtenderControl base class performs an explicit test to make sure that a ScriptManager control exists on the page. However, if you want to create extender controls and the page does not contain an ScriptManager control, you can create a class that implements the IExtenderControl interface directly. Inheritance Hierarchy: System.Object System.Web.UI.Control System.Web.UI.IExtenderControl

Ajax Interview Questions And Answers

Page 1
Ques: 1 How to Globalize and Localize client script files in AJAX ASP.NET? Ans: The ScriptManager control enables you to globalize and localize client script files. Globalization lets you use the Date and Number JavaScript type extensions in your script and have those objects display values that are based on the current culture. Localization lets you provide client script files for different cultures. Ques: 2 How to raise a PropertyChanged Event in AJAX ASP.NET? Ans: Invoking to the Sys.Component raisePropertyChanged method in a property set accessor to raise a propertyChanged event. Your component inherits the raisePropertyChanged method from the Sys.Component, Sys.UI.Behavior, or Sys.UI.Control base class.

The following example shows how to raise a propertyChanged event for an interval property whenever the property is set. get_interval: function() { return this._interval; }, set_interval: function(value) { if (this._interval !== value) { this._interval = value; this.raisePropertyChanged('interval'); } } Ques: 3 Defining Public Properties in a Custom Client Component in AJAX ASP.NET? Ans: In ASP.NET AJAXclient components, property accessors are defined as methods of the class prototype. The accessor methods are named with get_ and set_ prefixes followed by the property name. The following example shows how to define a read-write property named interval in the class prototype. get_interval: function() { return this._interval; }, set_interval: function(value) { this._interval = value; } Ques: 4 What is Custom Component Properties in AJAX ASP.NET? Ans: When creating a client component class, define the properties that expected page developers to access. Also raise Sys.Component.propertyChanged notification events in the set accessors for properties of your component. Page developers who use the component can bind the property notification event to their own handler to run code when the property value changes. Ques: 5 How to use a Timer Control outside an UpdatePanel Control in AJAX ASP.NET? Ans: : If the Timer controls are outside an UpdatePanel control, the JavaScript timing component continues to run as the postback is being processed. For example, if the Interval property is set to 60,000 milliseconds (60 seconds) and the postback takes 3 seconds to complete, the next postback will occur 60 seconds after the previous postback. The user will see the refreshed content in the UpdatePanel control for only 57 seconds. The following example shows how to use the Timer control outside an UpdatePanel control: <asp:ScriptManager runat="server" id="ScriptManager1" /> <asp:Timer ID="Timer1" runat="server" Interval="120000" OnTick="Timer1_Tick"> </asp:Timer> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers>

<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> <ContentTemplate> <asp:Label ID="Label1" runat="server" ></asp:Label> </ContentTemplate> </asp:UpdatePanel> Ques: 6 How to use a Timer Control inside an UpdatePanel Control in AJAX ASP.NET? Ans: For Timer controls inside an UpdatePanel control, the JavaScript timing component is re-created only when each postback finishes. Therefore, the timed interval does not start until the page returns from the postback. For instance, if the Interval property is set to 60,000 milliseconds (60 seconds) but the postback takes 3 seconds to complete, the next postback will occur 63 seconds after the previous postback. When the Timer control is included inside an UpdatePanel control, the Timer control automatically works as a trigger for the UpdatePanel control. The following example shows how to include a Timer control inside an UpdatePanel control: <asp:ScriptManager runat="server" id="ScriptManager1" /> <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional"> <contenttemplate> <asp:Timer id="Timer1" runat="server" Interval="120000" OnTick="Timer1_Tick"> </asp:Timer> </contenttemplate> </asp:UpdatePanel> Ans: For Timer controls inside an UpdatePanel control, the JavaScript timing component is re-created only when each postback finishes. Therefore, the timed interval does not start until the page returns from the postback. For instance, if the Interval property is set to 60,000 milliseconds (60 seconds) but the postback takes 3 seconds to complete, the next postback will occur 63 seconds after the previous postback. When the Timer control is included inside an UpdatePanel control, the Timer control automatically works as a trigger for the UpdatePanel control. The following example shows how to include a Timer control inside an UpdatePanel control: <asp:ScriptManager runat="server" id="ScriptManager1" /> <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional"> <contenttemplate> <asp:Timer id="Timer1" runat="server" Interval="120000" OnTick="Timer1_Tick"> </asp:Timer> </contenttemplate> </asp:UpdatePanel> Ques: 7 What is Timer control in AJAX ASP.NET? Ans: The ASP.NET AJAX Timer control performs postbacks at defined intervals. If Timer control used with an UpdatePanel control, you can enable partial-page

updates at a defined interval. You can also use the Timer control to post the whole page. You use the Timer control when you want to do the following: 1. Periodically update the contents of one or more UpdatePanel controls without refreshing the whole Web page. 2. Run code on the server every time that a Timer control causes a postback. 3. Synchronously post the whole Web page to the Web server at defined intervals Ques: 8 What is AJAX Server Controls in ASP.NET? Ans: ASP.NET Web server controls that enable you to add AJAX functionality to an ASP.NET Web page. AJAX functionality includes refreshing parts of a page with a partial-page update and therefore avoiding a full-page postback. 1. ScriptManager Control Overview: Manages client script for AJAX-enabled ASP.NET pages 2. Timer Control Overview: Performs postbacks at defined intervals. 3. UpdatePanel Control Overview: Enables you to refresh selected parts of the page instead of refreshing the whole page with a postback. 4. UpdateProgress Control Overview: Enables you to provide status information about partial-page updates in UpdatePanel controls. Ques: 9 What is the Debug Helper Classes in AJAX ASP.NET? Ans: ASP.NET provides the Sys.Debug class for debugging client applications. By calling methods of the Sys.Debug class, you can display objects in readable form at the end of the page, show trace messages, use assertions, and break into the debugger. The following table lists the methods of the Sys.Debug class. Sys.Debug.assert(condition, message, displayCaller): Checks for a condition, and if the condition is false, displays a message and prompts the user to break into the debugger. Sys.Debug.clearTrace(): Clears all trace messages from the TraceConsoletextarea element. Sys.Debug.traceDump(object, name): Dumps an object to the debugger console and to the TraceConsoletextarea element, if available. Sys.Debug.fail(message): Displays a message in the debugger's output window and breaks into the debugger. Sys.Debug.trace(text): Appends a text line to the debugger console and to the TraceConsoletextarea element, if available. Ques: 10 Define Classes in ASP.NET AJAX Extender Controls? Ans: Two classes: 1.ExtenderControl:

The ExtenderControl class enabled to programmatically add AJAX functionality to an ASP.NET server control and inherits from the Control class and implements the IExtenderControl interface. The Control class defines the properties, methods, and events that are shared by all ASP.NET server controls. Inheritance Hierarchy: System.Object System.Web.UI..::.Control System.Web.UI.ExtenderControl 2.IExtenderControl: The ExtenderControl base class performs an explicit test to make sure that a ScriptManager control exists on the page. However, if you want to create extender controls and the page does not contain an ScriptManager control, you can create a class that implements the IExtenderControl interface directly. Inheritance Hierarchy: System.Object System.Web.UI.Control System.Web.UI.IExtenderControl Ques: 11 List of all Extender Controls in the AJAX Control Toolktit? Ans: Extender Controls in the AJAX Control Toolktit: 1.CascadingDropDown 2.CollapsiblePanelExtender 3.ConfirmButtonExtender 4.FilteredTextBoxExtender 5.ModalPopupExtender 6.PasswordStrength 7.RoundedCornersExtender 8.TextBoxWatermarkExtender Ques: 12 What are the features of ASP.NET AJAX Extender Controls Ans: Visual Studio supports the following extender control features: 1.Adding extender controls. 2.Removing extender controls. 3.Setting extender control properties. 4.Managing extender controls Ques: 13 What is the ASP.NET AJAX Extender Controls? Ans: If you want to adds client functionality to a Button control when users confirm to submit a form to the server then extender controls can use. ASP.NET AJAX extender controls enhance the client capabilities of standard ASP.NET Web server controls such as TextBox controls, Button controls, and Panel controls by using one or more extender controls to provide a richer user experience in the browser, and you also add ASP.NET AJAX extender controls to Visual Studio and work with them as you do with other controls. You can create your own extender controls and source for extender controls is the ASP.NET AJAX Control Toolkit. Ques: 14 How to Remove an AJAX Extender Control in ASP.NET? Ans: If the functionality of an extender control is no longer needed, you can remove the extender control. 1.Switch to Design view.

2.Select the Button control, and then on the Common Button Tasks menu, click Remove Extender. 3.In the Extenders attached to Button1 list, select ConfirmButtonExtender. 4.Click Remove, and then click OK. Ques: 15 How to Add an AJAX Extender Control? Ans: The ASP.NET AJAX Control Toolkit includes several extender controls that can be used to enhance the client functionality of Web server controls. Before you add an extender control to a server control in the following procedure, you must install the ASP.NET AJAX Toolkit. You can download the Control Toolkit from the “ASP.NET AJAX Control Toolkit” Web site. 1.Switch to Design view. 2.If the page does not already contain a ScriptManager control, from the AJAX Extensions tab of the Toolbox, drag one onto the page. 3.From the Standard tab of the Toolbox, drag a Button control onto the page. 4.If the Common Button Tasks shortcut menu does not appear, right-click the Button control and then click Show Smart Tag. 5.On the Common Button Tasks menu, click Add Extender. 6.In the Extender Wizard, in the Choose the functionality to add to Button1 list, click ConfirmButtonExtender, and then click OK. 7.In the Properties window, expand the Extenders tab, and then expand Button1_ConfirmButtonExtender. 8.Set the ConfirmText property to Continue? Ques: 16 How to Check Whether AJAX Functionality is Enabled for a Page? Ans: Use the following code to determine whether AJAX functionality is enabled for a page in C# Code: ScriptManager sm = ScriptManager.GetCurrent(Page) if (sm == null) { // ASP.NET AJAX functionality is not enabled for the page. } else { // AJAX functionality is enabled for the page. } To determine whether partial page rendering is supported for a page, you can modify this code to use the EnablePartialRendering and the SupportsPartialRendering property of the ScriptManager control. Ques: 17 Define ASP.NET AJAX Client Life-Cycle Events? Ans: The two main Microsoft AJAX Library classes that raise events during the client life cycle of a page: 1. Application and 2. PageRequestManager classes. When partial-page rendering with UpdatePanel controls is enabled, the key client events are the events of the PageRequestManager class. These events enable you to handle many common scenarios. These include the ability to cancel postbacks, to give precedence to one postback over another, and to animate UpdatePanel controls when their content is refreshed. 1. Sys.WebForms.PageRequestManager Events: initializeRequest: Raised during initialization of an asynchronous postback.

beginRequest: Raised before processing of an asynchronous postback starts, pageLoading: Raised after a response to an asynchronous postback is received from the server, but before any content on the page is updated. pageLoaded: Raised after all content on the page is refreshed as the result of either a synchronous or an asynchronous postback. endRequest: Use this event to provide customized error notification to users or to log errors. 2. Sys.Application Events: init: Raised only once when the page is first rendered after all scripts have been loaded, but before objects are created. load: Raised after all scripts have been loaded and objects in the application have been created and initialized. unload: Raised before all objects in the client application are disposed. Ques: 18 Why Use ASP.NET AJAX Features? Ans: Features: 1. Improved efficiency. 2. As user requirement significant parts of a Web page's processing are performed in the browser. 3. UI elements- progress indicators, tool tips, and pop-up windows. 4. Partial-page updates that refresh only the parts of the Web page that have changed. 5. Client integration with ASP.NET application services for forms authentication, roles, and user profiles. 6. Auto-generated proxy classes. 7. Provide a framework that lets you customize of server controls to include client capabilities. Ques: 19 What is XMLHttpRequest object in AJAX? Ans: The XMLHttpRequest object is used to exchange data with a server. With the XMLHttpRequest object Browser can retrieve and submit XML data directly to a Web server without reloading the page. To convert XML data into renderable HTML content, use the client-side Extensible Stylesheet Language Transformations (XSLT) to compose HTML elements for presentation. Property: 1. Onreadystatechange 2. readyState 3. responseBody 4. responseTextresponseXML 5. StatusstatusText Method 1. abort 2. getAllResponseHeaders: 3. getResponseHeader 4. open 5. send Ques: 20 Define Internet Standards for AJAX? Ans: AJAX is based on internet standards, and uses a combination of: 1. XMLHttpRequest object (to exchange data asynchronously with a server) 2. JavaScript/DOM (to display/interact with the information) 3. CSS (to style the data)

4. XML (often used as the format for transferring data)