Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Server Technologies - ASP.NET 2.0 and ASP.NET Ajax

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |


In this section, we introduce how you can use ASP.NET Ajax to quickly and easily add Ajax functionality to existing ASP.NET web applications.



In this section, we introduce how you can use ASP.NET Ajax to quickly and easily add Ajax functionality to existing ASP.NET web applications. You can download the latest version of ASP.NET Ajax from Run the.msi installer you downloaded and follow the on-screen instructions to install the Ajax Extensions package. The Ajax Extensions package implements basic Ajax functionality. Microsoft also provides the ASP.NET Ajax Control Toolkit, which contains rich, Ajax-enabled GUI controls. There is also a link to the download the latest version of the Ajax Control Toolkit from the ASP.NET Ajax download page listed above. The toolkit does not come with an installer, so you must extract the contents of the toolkit’s ZIP file to your hard drive.


To make using the ASP.NET Ajax Control Toolkit more convenient, you’ll want to add its controls to the Toolbox in Visual Web Developer (or in Visual Studio) so you can drag and drop controls onto your Web Forms. To do so, right click the Toolbox and choose Add Tab. Type Ajax Toolkit in the new tab. Then right click the tab and select Choose Items. Navigate to the folder in which you extracted the Ajax Control Toolkit and select AjaxControlToolkit.dll from the SampleWebSite\Bin folder. A list of available Ajax controls will appear under the Ajax Toolkit tab when you are in Design mode.


To demonstrate ASP.NET Ajax capabilities we’ll enhance the Validation application from Fig. 25.17. The only modifications to this application will appear in its .aspx file. This application was not initially set up to support Ajax functionality, so we must first modify the web.config file. First, in Visual Web Developer select File > New Website… to display the New Website dialog. Then, create an empty ASP.NET Ajax-Enabled Website. Open the web.config file in this new application and copy its contents. Next, open the Validation application and replace the contents of its web.config file with the contents of the web.config file you just copied. The new web.config file adds the system.web.extensions, httpHandlers and httpModules sections, which specify the settings for running scripts that enable Ajax functionality. If you’d like to learn more about the details of these web.config modifications, please visit the site



We’ll now use Ajax-enabled controls to add Ajax features to this application. Figure 25.67 is a modified validation.aspx file that enhances the application by using the ToolkitScriptManager, UpdatePanel and ValidatorCalloutExtender controls.



1    <%-- Fig. 25.67: Validation.aspx --%>


2    <%-- Validation application enhanced by ASP.NET Ajax. --%>


3    <%@ Page Language="VB" AutoEventWireup="false"


4          CodeFile="Validation.aspx.vb" Inherits="Validation" %>


5    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"


6          TagPrefix="ajax" %>


7    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


8          "">


13   <html xmlns="" >


14   <head runat="server">


15           <title>Demonstrating Validation Controls</title>


16   </head>


17   <body>


18         <form id="form1" runat="server">


19         <div>


20                <ajax:ToolkitScriptManager ID="ToolkitScriptManager1"


21                      runat="server">


22                </ajax:ToolkitScriptManager>


23                &nbsp;Please fill out the following form.<br /><em>All fields are


24                required and must contain valid information.</em><br /><br />


25                <table>


25        <td style="width: 100px" valign="top">

26        Name:</td>

27        <td style="width: 450px" valign="top">

28        <asp:TextBox ID="nameTextBox" runat="server">

29        </asp:TextBox>

30        <br />

31        <asp:RequiredFieldValidator

32                    ID="nameInputValidator" runat="server"

33                    ControlToValidate="nameTextBox"          Display="None"                  

34                    ErrorMessage="Please enter your name.">

35        </asp:RequiredFieldValidator>

36                    <ajax:ValidatorCalloutExtender ID="nameInputCallout"         

37                    runat="server" TargetControlID="nameInputValidator"/>

38        </td>


39        </tr>

40        <tr>



41        <td style="width: 100px" valign="top">E-mail address:</td>

42        <td style="width: 450px" valign="top">

43        <asp:TextBox ID="emailTextBox" runat="server">

44        </asp:TextBox>

45        &nbsp;e.g.,<br />

46        <asp:RequiredFieldValidator

47        ID="emailInputValidator" runat="server"

                        ControlToValidate="emailTextBox"          Display="None"                                          

49                    ErrorMessage="Please enter your e-mail address.">   

50        </asp:RequiredFieldValidator>    

51                    <ajax:ValidatorCalloutExtender ID="emailInputCallout"                     

52                    runat="server" TargetControlID="emailInputValidator"/>                    

53        <asp:RegularExpressionValidator           

54                    ID="emailFormatValidator" runat="server"         

55                    ControlToValidate="emailTextBox"          Display="None"                              

56                    ErrorMessage=        

57                    "Please enter an e-mail address in a valid format."      

58                    ValidationExpression=      

59                    "\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">       

60        </asp:RegularExpressionValidator>       

61                    <ajax:ValidatorCalloutExtender ID="emailFormatCallout"                  

62                    runat="server"                     

63                    TargetControlID="emailFormatValidator"/>        

64        </td>


65        </tr>

66        <tr>



67        <td style="width: 100px; height: 21px" valign="top">

68        Phone number:</td>

69        <td style="width: 450px; height: 21px" valign="top">

70        <asp:TextBox ID="phoneTextBox" runat="server">

71        </asp:TextBox>

72                    &nbsp;e.g., (555) 555-1234<br />

73        <asp:RequiredFieldValidator

74                    ID="phoneInputValidator" runat="server"

75                    ControlToValidate="phoneTextBox"        Display="None"                              

76                    ErrorMessage="Please enter your phone number.">

77        </asp:RequiredFieldValidator>

78                    <ajax:ValidatorCalloutExtender ID="phoneInputCallout"       

79                    runat="server" TargetControlID="phoneInputValidator"/>      

80        <asp:RegularExpressionValidator

81                    ID="phoneFormatValidator" runat="server"

82                    ControlToValidate="phoneTextBox"        Display="None"                  

83                    ErrorMessage=

84                    "Please enter a phone number in a valid format."

85                    ValidationExpression=

86                    "((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}">

87        </asp:RegularExpressionValidator>

88                    <ajax:ValidatorCalloutExtender ID="PhoneFormatCallout"   

89                    runat="server"         

90                    TargetControlID="phoneFormatValidator"/>

91        </td>


92        </tr>


93        </table>


94        <asp:UpdatePanel ID="UpdatePanel1" runat="server">


95        <ContentTemplate>


<asp:Button ID="submitButton" runat="server" Text="Submit" />                  


97        <br /><br /><br />&nbsp;                            

98        <asp:Label ID="outputLabel"         runat="server"                     

99        Text="Thank you for your   submission." Visible="False">                 

100     </asp:Label>                        

33 </ContentTemplate>


34                </asp:UpdatePanel>

35          </div>


36          </form>


37   </body>



ScriptManager Control

The key control in every ASP.NET Ajax-enabled application is the ScriptManager, which manages the client-side scripts that enable asynchronous Ajax functionality. There can be only one ScriptManager per page. To incorporate controls from the Ajax Control Toolkit you should use the ToolkitScriptManager that comes with the toolkit contorls, rather than the ScriptManager from the ASP.NET Ajax Extensions. The ToolkitScriptManager bundles all the scripts associated with ASP. NET Ajax Toolkit controls to optimize the ap-plication’s performance. Drag the ToolkitScriptManager from the Ajax Toolkit tab in the toolbox to the top of the page—a script manager must appear before any controls that use the scripts it manages. This generates lines 5–6 and lines 18–20. Lines 5–6 associate the AjaxControlToolkit assembly with the tag prefix ajax, allowing us to put Ajax Control Toolkit elements on the page. Lines 18–20 load the ToolkitScriptManager on the page.

Partial Page Updates Using the UpdatePanel Control


The UpdatePanel control eliminates full-page refreshes by isolating a section of a page for a partial-page update. To implement a partial-page update, drag the UpdatePanel control from the Ajax Extensions tab in the Toolbox to your form. Then, drag into the UpdatePan-el the control to update and the control that triggers the update. For this example, drag the outputLabel and submitButton elements into the  UpdatePanel. The components that are managed by the UpdatePanel are placed in the ContentTemplate element (lines 95–101) of the UpdatePanel (lines 94–102). When the user clicks the Submit button, the UpdatePanel intercepts the request and makes an asynchronous request to the server in-stead. Then the response is inserted in the outputLabel element, and the UpdatePanel re-loads the label to display the new text without refreshing the entire page.


Adding Ajax Functionality to ASP.NET Validation Controls Using Ajax Extenders


Several controls in the Ajax Control Toolkit are extenders—components that enhance regular ASP.NET controls. Lines 36–37, 51–52, 61–63, 78–79 and 88–90 define Vali-datorCalloutExtender controls that display error messages in small yellow callouts next to the input fields. Line 37 sets the targetControlID property, which indicates the vali-dator control from which the ValidatorCalloutExtender should obtain the error mes-sage to display. The ValidatorCalloutExtenders display error messages with a nicer look and feel, so we no longer need the validator controls to display these messages on their own. For this reason, line 33 sets the Display property of the first validator to None. The remaining control extenders and validator controls are configured similarly.


Additional ASP.NET Information

The Ajax Control Toolkit contains many other extenders and independent controls. You can check them out using the sample website included with the toolkit. The live version of the sample website can be found at For more information on ASP.NET Ajax, check out our ASP.NET Ajax Resource Center at


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020; All Rights Reserved. Developed by Therithal info, Chennai.