ASP NET AJAX 1 ASP NET AJAX Features

  • Slides: 16
Download presentation
ASP. NET AJAX 1

ASP. NET AJAX 1

ASP. NET AJAX Features �A declarative model that works like ASP. NET server controls.

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 2

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

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

Update Panel � It work by specifying regions of a page that can be

Update Panel � It work by specifying regions of a page that can be updated without refreshing the whole page. � It needs Script. Manager 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 Update. Panel controls and that are marked to be updated. � Important property - Update. Mode 4

How Update. Panel Controls Are Refreshed � If the Update. Mode property is set

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

Controls Not Compatible with Update. Panel Controls � Tree. View and Menu controls. �

Controls Not Compatible with Update. Panel Controls � Tree. View and Menu controls. � Web Parts controls. � File. Upload controls when they are used to upload files as part of an asynchronous postback. � Grid. View and Details. View controls when their Enable. Sorting. And. Paging. Callbacks property is set to true. The default is false. � Login, Password. Recovery, Change. Password, and Create. User. Wizard controls whose contents have not been converted to editable templates. � The Substitution control. � Validation controls, which includes the Base. Compare. Validator, Base. Validator, Compare. Validator, Custom. Validator, Range. Validator, Regular. Expression. Validator, Required. Field. Validator, and Validation. Summary control. 6

Update Progress �The Update. Progress control renders a <div> element that is displayed or

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

ASP. NET Page. Request. Manager Class Overview The Page. Request. Manager class exposes properties,

ASP. NET Page. Request. Manager Class Overview The Page. Request. Manager class exposes properties, methods, and events that enable you to customize partial-page updates with client script. � Events ◦ begin. Request Event Raised before the processing of an asynchronous postback starts and the postback request is sent to the server. ◦ end. Request Event Raised after an asynchronous postback is finished and control has been returned to the browser. ◦ initialize. Request Event Raised during the initialization of the asynchronous postback. ◦ page. Loaded Event Raised after all content on the page is refreshed as a result of either a synchronous or an asynchronous postback. ◦ page. Loading 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/Client. Reference/Sys. Web. Forms/Pa ge. Request. Manager. Class/default. aspx � 8

Script. Manager � The Script. Manager control manages client script for Microsoft ASP. NET

Script. Manager � The Script. Manager control manages client script for Microsoft ASP. NET AJAX pages. Why Use the Script. Manager 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. � Java. Script proxy classes for Web services, which enable you to use client script to access Web services by exposing Web services as strongly typed objects. � Java. Script classes to access ASP. NET authentication and profile application services. The Script. Manager. Proxy Class 9

Handling Errors During partial-page rendering, you can handle errors by doing the following: �Set

Handling Errors During partial-page rendering, you can handle errors by doing the following: �Set the Allow. Custom. Errors. Redirect property. �Handle the Script. Manager control's Async. Post. Back. Error event. �Set the Async. Post. Back. Error. Message property. 10

Timer Control �The Timer control performs postbacks at defined intervals. You use the Timer

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 Update. Panel 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. 11

Calling Web Services from Client Script in ASP. NET AJAX �Calling a Web service

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 Script. Service. Attribute attribute. Ø Individual methods to be called from script must be qualified with the Web. Method. Attribute attribute. 12

The following example shows these attributes in Web service code. namespace Samples. Asp. Net

The following example shows these attributes in Web service code. namespace Samples. Asp. Net { [Script. Service] public class Simple. Web. Service : System. Web. Services. Web. Service { [Web. Method] public string Echo. Input(String input) { string input. String = Server. Html. Encode(input); if (!String. Is. Null. Or. Empty(input. String)) { return String. Format("You entered {0}. The " + "current time is {1}. ", input. String, Date. Time. Now); } else { return "The input string was null or empty. "; } } 13

Step -2 Exposing Web Services to Client Script in an ASP. NET Web Page

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 Script. Manager control to the page. ØAdd a reference to Web service by adding an asp: Service. Reference child element to the Script. Manager control and setting its path attribute to point to the Web service. ØCode snippet <asp: Script. Manager runat="server" ID="script. Manager"> <Services> <asp: Service. Reference path="~/Web. Services/Simple. Web. Service. asmx" /> </Services> </asp: Script. Manager> Note: The Service. Reference 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. 14

Java. Script function syntax to call Web Service: <script type="text/javascript“> // This function calls

Java. Script function syntax to call Web Service: <script type="text/javascript“> // This function calls the Web Service method. function Echo. User. Input() { var echo. Elem = document. get. Element. By. Id("Entered. Value"); Service Web Method Input Param 1 Namespace Name Samples. Asp. Net. Simple. Web. Service. Echo. Input(echo. Elem. value, Succeeded. Callback, Failure. Callback); Success Fn. Failure Fn. Name // This is the callback function that } // processes the Web Service return value. function Succeeded. Callback(result) { var Rslt. Elem = document. get. Element. By. Id("Results"); Rslt. Elem. inner. HTML = result; } function Failure. Callback(result) { alert(“Error Occured”); } </script> 15

Question & Answers 16

Question & Answers 16