ASP.NET AJAX

1. ASP.NET AJAX

2. ASP.NET AJAX Features • A declarative model that works like ASP.NET server controls. • Server controls that perform the underlying tasks required for partial-page updates. • Error-handling options for partial-page rendering, which enable you to customize how errors are displayed in the browser. • Cross-browser compatibility

3. ASP.NET AJAX CONTROLS • Update Panel • Update Progress • Script Manager • Timer

4. Update Panel • It work by specifying regions of a page that can be updated without refreshing the whole page. • It needs ScriptManager server control on the page with partial-page updates are enabled. • An asynchronous postback behaves like a regular postback in that the resulting server page executes the complete page and control life cycle. However, with an asynchronous postback, page updates are limited to regions of the page that are enclosed in UpdatePanel controls and that are marked to be updated. • Important property - UpdateMode

5. How UpdatePanel Controls Are Refreshed • If the UpdateMode property is set to Always, the UpdatePanel control’s content is updated on every postback that originates from anywhere on the page. • If the UpdateMode property is set to Conditional, the UpdatePanel control’s content is updated when one of the following is true: • When the postback is caused by a trigger for that UpdatePanel control. • When you explicitly call the UpdatePanel control's Update() method. • When the UpdatePanel control is nested inside another UpdatePanel control and the parent panel is updated. • When the ChildrenAsTriggers property is set to true and any child control of the UpdatePanel control causes a postback. Child controls of nested UpdatePanel controls do not cause an update to the outer UpdatePanel control unless they are explicitly defined as triggers for the parent panel.

6. Controls Not Compatible with UpdatePanel Controls • TreeView and Menu controls. • Web Parts controls. • FileUpload controls when they are used to upload files as part of an asynchronous postback. • GridView and DetailsView controls when their EnableSortingAndPagingCallbacks property is set to true. The default is false. • Login, PasswordRecovery, ChangePassword, and CreateUserWizard controls whose contents have not been converted to editable templates. • The Substitution control. • Validation controls, which includes the BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator, and ValidationSummary control.

7. Update Progress • The UpdateProgress control renders a <div> element that is displayed or hidden depending on whether an associated UpdatePanel control has caused an asynchronous postback. • You associate an UpdateProgress control with an UpdatePanel control by setting the AssociatedUpdatePanelID property of the UpdateProgress control.

8. ASP.NET PageRequestManager Class Overview • The PageRequestManager class exposes properties, methods, and events that enable you to customize partial-page updates with client script. • Events • beginRequest Event Raised before the processing of an asynchronous postback starts and the postback request is sent to the server. • endRequest Event Raised after an asynchronous postback is finished and control has been returned to the browser. • initializeRequest Event Raised during the initialization of the asynchronous postback. • pageLoaded Event Raised after all content on the page is refreshed as a result of either a synchronous or an asynchronous postback. • pageLoading Event Raised after the response from the server to an asynchronous postback is received but before any content on the page is updated. • http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx

9. ScriptManager • The ScriptManager control manages client script for Microsoft ASP.NET AJAX pages. Why Use the ScriptManager Control • Client-script functionality of the Microsoft AJAX Library, and any custom script that you want to send to the browser. • Partial-page rendering, which enables regions on the page to be independently refreshed without a postback. • JavaScript proxy classes for Web services, which enable you to use client script to access Web services by exposing Web services as strongly typed objects. • JavaScript classes to access ASP.NET authentication and profile application services. The ScriptManagerProxy Class

10. Handling Errors During partial-page rendering, you can handle errors by doing the following: • Set the AllowCustomErrorsRedirect property. • Handle the ScriptManager control's AsyncPostBackError event. • Set the AsyncPostBackErrorMessage property.

11. Timer Control • The Timer control performs postbacks at defined intervals. You use the Timer control when you want to do the following: • Periodically update the contents of one or more UpdatePanel controls without refreshing the whole Web page. • Run code on the server every time that a Timer control causes a postback. • Synchronously post the whole Web page to the Web server at defined intervals.

12. Calling Web Services from Client Script in ASP.NET AJAX • Calling a Web service method from script is asynchronous. Step -1 In order for a Web service to be accessed from script • It must be an .asmx • Web service class should be qualified with the ScriptServiceAttribute attribute. • Individual methods to be called from script must be qualified with the WebMethodAttribute attribute.

13. The following example shows these attributes in Web service code. • namespace Samples.AspNet • { • [ScriptService] • public class SimpleWebService : System.Web.Services.WebService • {  • [WebMethod] • public string EchoInput(String input) • { • string inputString = Server.HtmlEncode(input); • if (!String.IsNullOrEmpty(inputString)) • { • return String.Format("You entered {0}. The " • + "current time is {1}.", inputString, DateTime.Now); • } • else • { • return "The input string was null or empty."; • } • } • } • }

14. Step -2 • Exposing Web Services to Client Script in an ASP.NET Web Page • To enable an .asmx Web service to be called from client script in an ASP.NET Web page. • Add a ScriptManager control to the page. • Add a reference to Web service by adding an asp:ServiceReference child element to the ScriptManager control and setting its path attribute to point to the Web service. • Code snippet • <asp:ScriptManagerrunat="server" ID="scriptManager"> • <Services> • <asp:ServiceReference path="~/WebServices/SimpleWebService.asmx" /> • </Services> • </asp:ScriptManager> • Note: The ServiceReference object can reference a Web service only in the same domain. • The Web service path can be relative, application relative, domain relative, or absolute. • For absolute paths, you must make sure that the path is in the same domain.

15. JavaScript JavaScript function syntax to call Web Service: <script type="text/javascript“> // This function calls the Web Service method. function EchoUserInput() { varechoElem = document.getElementById("EnteredValue"); Samples.AspNet.SimpleWebService.EchoInput(echoElem.value, SucceededCallback, FailureCallback); } // This is the callback function that // processes the Web Service return value. function SucceededCallback(result) { varRsltElem = document.getElementById("Results"); RsltElem.innerHTML = result; } function FailureCallback(result) { alert(“Error Occured”); } </script> Serv. Namespace ServiceName WebMethod Input Param1 Success Fn. Name Failure Fn. Name

16. Question & Answers