1. ASP.NET AJAXByApex TG India Pvt Ltd

2. ASP.NET AJAXTraditional Web ApplicationsFigure below presents the typical interactions between theclient and the server in a traditional web application. 3. The user first fills in the forms fields, then submits the form(Step 1).The browser generates a request to the server, which receivesthe request and processes it (Step 2).The server generates and sends a response containing thepage that the browser renders (Step 3).The browser to loads the new page (Step 4) and temporarilymakes the browser window blank.While such a synchronous request is being processed on theserver, the user cannot interact with the web page.If the user interacts with and submits another form, the processbegins again (Steps 58).3ASP.NET AJAX 4. ASP.NET AJAXAjax Web ApplicationsAjax web applications add a layer between the client and theserver to manage communication between the two. 5. 5ASP.NET AJAXWhen the user interacts with the page, theclient requests information from the server(Step 1). The request is intercepted by the ASP.NET AJAXcontrols and sent to the server as anasynchronous request (Step 2) The user can continue interacting with theapplication in the client browser while the serverprocesses the request.Other user interactions could result inadditional requests to the server (Steps 3 and4). 6. Once the server responds to the originalrequest (Step 5), the ASP.NET AJAX controlcalls a client-side function to process the datareturned by the server.This functionknown as a callback functionuses partial-page updates (Step 6) todisplay the data without reloading the entirepage.At the same time, the server may beresponding to the second request (Step 7) andthe client browser may be starting anotherpartial-page update (Step 8).6ASP.NET AJAX 7. The callback function updates only a designated partof the page.Such partial-page updates help make webapplications more responsive, making them feel morelike desktop applications.The web application does not load a new page whilethe user interacts with it.7ASP.NET AJAX 8. Examining an ASP.NET AJAX ApplicationThe AJAX Extensions package that implements basic Ajaxfunctionality comes preinstalled in Visual Studio.There is a tab of basic AJAX Extensions controls in theToolbox.Microsoft also provides the ASP.NET AJAX Control Toolkit,which contains rich, Ajax-enabled GUI controls, which you candownload.8ASP.NET AJAX 9. ASP.NET AJAXTo add the controls to the Toolbox in VisualWeb Developer:Right click the Toolbox and choose Add Tab.Type AJAX Control Toolkit as the name of thenew tab.Right click the tab and select Choose Items.Click Browse... and selectAjaxControlToolkit.dll from the folder.Finally, click OK, and a list of available Ajaxcontrols will appear under the AJAX ControlToolkit tab when you are in Design mode. 10. ASP.NET AJAX To demonstrate ASP.NET AJAX capabilities wellenhance the Validation application we did before. The only significant modifications to this applicationappear in its ASPX file. Well use Ajax-enabled controls to add Ajaxfeatures to this application. 11. a) The user entershis or her first andOutline last name andproceeds to theContact tab.b) The user entersan e-mail address inan incorrect formatand presses Tab tomove to the nextinput field. A calloutappears informingthe user to enter ane-mail address in avalid format.Fig. 1 | Validation application enhanced byASP.NET AJAX. (Part 9 of 10.)Validation.aspx(9 of 10) 12. Outlinec) After the userfills out the formproperly and clicksthe Submitbutton, thesubmitted data isdisplayed at thebottom of the pagewith a partial-pageupdate.Fig. 1 | Validation application enhanced byASP.NET AJAX. (Part 10 of 10.)Validation.aspx(10 of 10) 13. 1 2 3 5 78 10OutlineValidation.aspx(1 of 10) To demonstrate ASP.NET AJAX capabilities well enhance theValidation application we did before. The only significant modifications to this application appear in itsASPX file. Well use Ajax-enabled controls to add Ajax features to thisapplication. Figure below is a modified Validation.aspx file thatenhances the application by using several ASP.NET AJAXcontrols.Associate theAjaxControlToolkitassembly with a tag prefix,allowing us to use AJAXControl Toolkit elements.Fig.1 | Validation application enhanced by ASP.NET AJAX. (Part 1 of 10.) 14. 11 12 13 Demonstrating Validation Controls14 15 .style116 {17 width: 100%;18 }19 .style220 {21 text-align: right;22 vertical-align: top;23 }24 25 26 27 28 29 OutlineValidation.aspx(2 of 10)Load theToolkitScriptManager onthe page.Fig.1 | Validation application enhanced by ASP.NET AJAX. (Part 2 of 10.) 15. 30

31

32 Please fill out the following form.
All fields are33 required and must contain valid information.34

35 37 38 39 40 41 First Name:42 43 44
45 49 OutlineValidation.aspx(3 of 10)Fig.1 | Validation application enhanced by ASP.NET AJAX. (Part 3 of 10.) 16. 50 54 55 56 57 58 Last Name:59 60 61
62 66 67 71 OutlineValidation.aspx(4 of 10)ValidatorCalloutExtendercontrols display error messages insmall yellow callouts next to the inputfields.Fig.1 | Validation application enhanced by ASP.NET AJAX. (Part 4 of 10.) 17. 72 73 74 75 76 77 78 79 80 81 E-mail address:82 83 84  e.g., user@domain.com
85 89 OutlineValidation.aspx(5 of 10)Fig.1 | Validation application enhanced by ASP.NET AJAX. (Part 5 of 10.) 18. 90 94 95 101 102 105 106 107 108 109 Phone number:OutlineValidation.aspx(6 of 10)Fig.1 | Validation application enhanced by ASP.NET AJAX. (Part 6 of 10.) 19. 110 111 112  e.g., (555) 555-5555
113 117 118 121 122 128 129 132 133 OutlineValidation.aspx(7 of 10)Fig. 1 | Validation application enhanced by ASP.NET AJAX. (Part 7 of 10.) 20. 134 135 136 137 138 139

140 141

142 143 144 146 147 148 149 151 152 153

154 155 156 OutlineValidation.aspx(8 of 10)Fig. 1 | Validation application enhanced by ASP.NET AJAX. (Part 8 of 10.) 21. ASP.NET AJAXToolkitScriptManager ControlThe ToolkitScriptManager control manages the client-sidescripts that enable asynchronous Ajax functionality.There can be only one ToolkitScriptManager per page.To incorporate controls from the AJAX Control Toolkit,use the ToolkitScriptManager, which derives fromScriptManager, instead.Drag the ToolkitScriptManager from the AJAX ControlToolkit tab in the Toolbox to the top of the page.A script manager must appear before any controls that use thescripts it manages. 22. ASP.NET AJAXCommon Programming Error 22.1Putting more than one instance of the ScriptManager control on aWeb Form causes the application to throw anInvalidOperationException when the page is initialized. 23. ASP.NET AJAXGrouping Information in Tabs Using theTabContainer Control The TabContainer control enables you to groupinformation into tabs that are displayed only if they areselected. To create multiple tabs, drag the TabContainer controlfrom the AJAX Control Toolkit tab in the Toolbox to yourform. To add a tab, open the TabContainer Tasks smart-tagmenu and select Add Tab Panel. This adds a TabPanelobject to the TabContainer. 24. ASP.NET AJAXIn Design view, you can navigate between tabs byholding Ctrl and clicking the tab header, and you candrag and drop elements into the tab.The content of a TabPanel must be defined inside itsContentTemplate element. 25. ASP.NET AJAXPartial-Page Updates Using the UpdatePanelControlThe UpdatePanel control eliminates full-page refreshes byisolating a section of a page for a partial-page update.To implement a partial-page update, drag the UpdatePanelinto your form, and place controls to be updated inside it.To specify when an UpdatePanel should update, you need todefine an UpdatePanel trigger. 26. ASP.NET AJAXClick the ellipsis buttonnext to the controlsTriggers property in theProperties window.In theUpdatePanelTriggerCollection Editor dialogthat appears,click Add to add anAsyncPostBackTrigger. Set the ControlID property and the EventName property to thedesired trigger. 27. ASP.NET AJAXAdding Ajax Functionality to ASP.NETValidation Controls Using Ajax Extenders Several controls in the Ajax Control Toolkit are extenders components that enhance regular ASP.NET controls. ValidatorCalloutExtender controls display errormessages in small yellow callouts next to the input fields. To create a ValidatorCalloutExtender, you can dragand drop it, or you can select the Add Extender option in avalidators smart-tag menu. In the Extender Wizard dialog that displays,choose ValidatorCalloutExtender, specify its ID, and clickOK. 28. ASP.NET AJAXFig. Creating a control extender using the Extender Wizard. 29. ASP.NET AJAXValidatorCalloutExtendersTargetControlID property indicates thevalidator control from which the extendershould obtain the error message.This is automatically determined if you createdthe extender through the Extender Wizard.The ValidatorCalloutExtenders displayerror messages with a nicer look-and-feel.