(Microsoft PowerPoint - Ajax [\310\243\310\257 \270\360\265\345])

Transcription

1 - 1 - ASP.NET AJAX 소개 ASP.NET AJAX 소개 ASP.NET AJAX Extension ASP.NET AJAX Control Toolkit

2 AJAX 란? AJAX( 에이잭스 ) 란? AJAX = Asynchronous JavaScript and XML Term coined by Jesse James Garrett in Feb "Ajax: A New Approach to Web Applications" 웹상에서의비동기호출기법 내부적으로 XMLHTTP 이용 Microsoft.XMLHTTP (IE 6.0 이하 ) Window.XMLHttpRequest (IE 7 이상및다른브라우저 ) 기존비동기호출기술의재정리 기대효과 네트워크의사용량감소 서버의 CPU 사용량감소 응용프로그램자원의효과적인사용

3 XMLHTTP Introduced in 1999 with Internet Explorer 5 ActiveX object supporting callbacks to Web server Created for benefit of Outlook Web Access (OWA) Later adopted by Firefox, Safari, and others Implemented as native object rather than ActiveX Currently being standardized by W3C Supported by approx. 99% of browsers used today Approx. 85%-95% have JavaScript enabled Chief enabling technology behind AJAX

4 기존웹통신방식의문제점 반복적인 Roundtrip 서버중심적설계 클라이언트와서버가함께통합되어있지않다

5 Ajax 를적용한다면? 요청을처리하기위한 Postback 은이제필요치않다 요청 응답 Ajax (, Asynchronous)

6 내부처리프로세스비교 - 6 -

7 ASP.NET AJAX ASP.NET AJAX provides: Partial-page updates Data integration by using Web services Support for the most commonly used browsers UI elements that are familiar to users Integration with ASP.NET security features Increased efficiency because a large amount of the processing can be carried out in the browser A framework that simplifies ASP.NET AJAX operations

8 Architecture of ASP.NET AJAX - 8 -

9 Using the ASP.NET AJAX Extensions What Are the ASP.NET AJAX Extensions? Contain the core server-side components Extend ASP.NET server-side control framework Integrate with Visual Studio 2008 Add controls to the Visual Studio Toolbox

10 ASP.NET AJAX Server Controls ScriptManager Manages script resources for client components UpdatePanel Script Management Partial- Page Rendering Futures CTP Enables a refresh of part of a Web page UpdateProgress ScriptManagerr UpdatePanel DragOverlay- Extender Provides the status of a partial-page update ScriptManager-r- Proxy Update- Progress ProfileService Timer Performs postbacks at defined intervals Timer

11 ScriptManager Starting point for ASP.NET AJAX pages What does ScriptManager do? Downloads JavaScript files to client Enables partial-page rendering using UpdatePanel Provides access to Web services via client-side proxies Manages callback timeouts and provides error handling options and infrastructure Provides registration methods for scripts Enables ASP.NET AJAX localization support Every page requires one ScriptManager instance!

12 ScriptManager Schema <asp:scriptmanager ID="ScriptManager1" Runat="server" EnablePartialRendering="true false" EnablePageMethods="true false" AsyncPostBackTimeout="seconds" AsyncPostBackErrorMessage="message" AllowCustomErrorsRedirect="true false" OnAsyncPostBackError="handler" EnableScriptGlobalization="true false" EnableScriptLocalization="true false" ScriptMode="Auto Inherit Debug Release" ScriptPath="path"> <Scripts> <!-- Declare script references here --> </Scripts> <Services> <!-- Declare Web service references here --> </Services> </asp:scriptmanager>

13 UpdatePanel Partial-page rendering in a box Clean round trips to server and flicker-free updates Requires no knowledge of JavaScript or AJAX Leverages client-side PageRequestManager class EnablePartialRendering="true" in ScriptManager Supports explicitly defined triggers By default, postbacks from all controls in an UpdatePanel are converted into async callbacks Triggers expand (or shrink) postback->callback scope Works in virtually all scenarios

14 UpdatePanel Schema <asp:scriptmanager ID="ScriptManager1" Runat="server" EnablePartialRendering="true" />... <asp:updatepanel ID="UpdatePanel1" Runat="server" UpdateMode="Always Conditional" ChildrenAsTriggers="true false"> <Triggers> <!-- Define triggers (if any) here --> </Triggers> <ContentTemplate> <!-- Define content here --> </ContentTemplate> </asp:updatepanel>

15 Triggers Example <asp:updatepanel ID="UpdatePanel1" Runat="server" UpdateMode="Conditional"> <Triggers> <asp:asyncpostbacktrigger ControlID="Button1" /> <asp:asyncpostbacktrigger ControlID="TreeView1" EventName="TreeNodeExpanded" /> <asp:asyncpostbacktrigger ControlID="TreeView1" EventName="TreeNodeCollapsed" /> <asp:postbacktrigger ControlID="Button2" /> </Triggers> <ContentTemplate>... </ContentTemplate> </asp:updatepanel>

16 Demo1: Implementing the UpdatePanel Control Create a new ASP.NET Web site. 2. Open the default.aspx page in Design view. 3. Add a ScriptManager and UpdatePanel to the page. 4. In the UpdatePanel, add a TextBox, Button, Label control to the form. 5. Set the Text property of the button to the value Inside Panel and create a Click event handler. Label1.Text = Hello," + TextBox1.Text; 6. On the form, outside the UpdatePanel, add a second Button control. 7. Set the Text property of the second button to the value Outside Panel. 8. Save the default.aspx page, and then view the page in the browser. 9. Click each button in turn and verify that the button inside the UpdatePanel does not cause a page postback but the button outside of the pan el does cause a postback. 10.Close the browser window. 11.In the default.aspx page, delete the Inside Panel button. 12.On the form, inside the UpdatePanel, add a Label control. 13.Double-click Outside Panel to create a Click event handler. 14.Add code to the Click event handler to set the Text of the Label to the string Current Time: followed by the current date and time. Label2.Text = Current Time: " + DateTime.Now.ToString(); 15.Switch to Design view of the default.aspx page. 16.View the properties of the UpdatePanel control. On the Triggers property click the ellipsis. 17.In the UpdatePanelTrigger Collection Editor dialog box, click Add. 18.Set the ControlID property of the new trigger to Button2, and then click OK. 19.Save the Web site, and then view the default.aspx page in the browser. 20.Click Outside Panel several times and verify that the content in the label changes but a page refresh does not occur.

17 Triggers AsyncPostBackTrigger Converts postbacks into asynchronous callbacks Typically used to trigger updates when controls outside an UpdatePanel post back and fire events If ChildrenAsTriggers="false", can be used to specify which controls inside UpdatePanel should call back rather than post back PostBackTrigger Allows controls inside an UpdatePanel to post back Typically used to allow certain controls to post back when ChildrenAsTriggers="true"

18 Periodic Updates Combine UpdatePanel with Timer control to implement pages that perform periodic updates Use Timer control Tick events as triggers <asp:timer ID="Timer1" Runat="server" Interval="5000" OnTick="OnTimerTick" />... <asp:updatepanel UpdateMode="Conditional"...> <Triggers> <asp:asyncpostbacktrigger ControlID="Timer1" /> </Triggers>... </asp:updatepanel>

19 UpdateProgress Companion to UpdatePanel controls Displays custom template-driven UI for: Indicating that an async update is in progress Canceling an async update that is in progress Automatically displayed when update begins or "DisplayAfter" interval elapses

20 UpdateProgress Schema <asp:updateprogress ID="UpdateProgress1" Runat="server" DisplayAfter="milliseconds" DynamicLayout="true false" AssociatedUpdatePanelID="UpdatePanelID"> <ProgressTemplate> <!-- Declare UpdateProgress UI here --> </ProgressTemplate> </asp:updateprogress>

21 UpdateProgress Example Display after ½ second <asp:updateprogress DisplayAfter="500"...> <ProgressTemplate> <asp:image ID="ProgressImage" Runat="server" ImageUrl="~/Images/SpinningClock.gif" /> </ProgressTemplate> </asp:updateprogress> Animated GIF

22 Canceling an Update <asp:updateprogress DisplayAfter="500"...> <ProgressTemplate> <b>working...</b> <asp:button ID="CancelButton" Runat="server" Text="Cancel" OnClientClick="cancelUpdate(); return false" /> </ProgressTemplate> </asp:updateprogress> <script type="text/javascript"> function cancelupdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isinasyncpostback()) obj.abortpostback(); } </script>

23 Demo2 : Scott s ToDo List

24 Using the ASP.NET AJAX Control Toolkit Shared source project between the ASP.NET AJAX community and Microsoft Built upon the ASP.NET 2.0 AJAX Extensions Contains a collection of web-client components Provides an infrastructure to write reusable and extensible ASP.NET AJAX extenders and controls

25 Accessing the ASP.NET AJAX Control Toolkit Download the latest release of the Control Toolkit Unpack the Control Toolkit into a folder Open or create a Web application 4 Add the Control Toolkit items to the Toolbox 5 Install the AJAX Control Toolkit templates

26 Demo: Implementing an ASP.NET AJAX Extender Control Create a new ASP.NET Web site. 2. In the Toolbox, create a tab named AJAX Control Toolkit. 3. Add the items from the file E:\Democode\AjaxControlToolkit.dll to the AJAX Control Toolkit tab. 4. Show the new Toolbox items. 5. Open the default.aspx Web form in Design view. 6. On the form, add a Label and Button control to the form. 7. Create a Click event handler for the button. 8. In the event handler, add code to set the Text property of the label to the string Button click occurred. 9. View the default.aspx page in the browser, and then click the button on the page. Verify that the label text changes, and then close the browser window. 10.In the Toolbox, on the AJAX Extensions tab, drag a ScriptManager and drop it at the top of the form. 11.In the Toolbox, on the AJAX Control Toolkit tab, drag a ConfirmButtonExtender and drop it onto Button1 on the form. 12.In the Properties window, set the ConfirmText property of the ConfirmButtonExtender control to Continue?. 13.View the default.aspx page in the browser. 14.Click the button and verify that the confirmation dialog box appears.

27 ASP.NET AJAX Control Toolkit ASP.NET Extension 과는별도로다운로드 무료로제공되는 AJAX 지원컨트롤라이브러리 에서다운로드가능 다달이꾸준히업데이트중 ASP.NET Extension 의업데이트주기와는무관하게업데이트 공동제작소스모델을사용하여개발 Microsoft 개발자및비 -Microsoft 개발자참여 모든소스는자유롭게사용가능 이미상당히멋진컨트롤들이포함되어있음 목표는 개의훌륭한컨트롤들을제공하는것

28 현재제공되는컨트롤들 DEMO : Accordion, AlwaysVisibleControl, Animation, CascadingDropDown, CollapsiblePanel, ConfirmButton, DragPanel, DropShadow, FilteredTextBox DynamicPopulate, HoverMenu, ModalPopup, NoBot, NumericUpDown, PagingBulletedList, PasswordStrength, PopupControl, Rating, ReorderList, ResizableControl, RoundedCorners, Slider, TextBoxWatermark ToggleButton, UpdatePanelAnimation 보라파랑연한파랑실버색상과폰트크기는아무의미없음 13

29 Accordion 다중 Pane(AccordionPane) 으로구성되며, 사용자클릭에대해한번에하나의 Pane 을슬라이딩, 페이드효과로보여주는웹컨트롤 포스트백사이에기존선택상태를유지

30 AlwaysVisibleControlExtender 페이지가스크롤되거나, 크기조정되어도지정한위치에컨트롤이항상고정적으로나타나도록하는컨트롤확장 모든 ASP.NET 컨트롤에적용가능

31 AnimationExtender 기존페이지에서강력한애니메이션프레임워크를선언적인방식으로쉽게사용할수있도록하는 extender

32 CascadingDropDown DropDownList 에부착하여, 데이터자동채움을구현하게하는 Extender 각 DropDownList 의선택이변경될때마다, 지정된웹서비스를호출하여가져온데이터로다음 DropDownList 채움

33 CollapsiblePanel 접힘가능한영역을페이지에추가하는유연한 Extender ASP.NET Panel 컨트롤을대상으로하며, Accordion 컨트롤과유사하게동작 포스트백사이에기존접힘상태를유지

34 DragPanel 컨트롤에게드래그기능을적용해주는 Extender ASP.NET Panel 컨트롤을대상으로함

35 ModalPopup 특정컨텐츠를 modal 방식으로출력가능케하는 Extender 모달영역외에는사용자상호작용을불가능하게함

36 PagingBulletedList ASP.NET BulletedList 컨트롤에부착하여, 클라이언트측에서의정렬된페이징을제공

37 PopupControl 특정내용이나컨트롤을기존컨트롤에첨부하여팝업형태로나타나게하는 Extender 대부분팝업윈도우는 UpdatePanel 내에위치시켜 AJAX 식으로서버와통신하도록구성

38 Slider 사용자가한정된범위내에서숫자값을선택할수있도록 TextBox 서버컨트롤을슬라이더로변환하는 Extender 슬라이더는수평이나수직적으로표현가능

39 ASP.NET AJAX 기반의 3 rd Party 컴포넌트 Componentart사의 Web.UI ASP.NET AJAX 기반의최초상용컨트롤라이브러리 ASP.NET AJAX Extensions와완전하게통합 차세대웹 UI의모습을살펴볼수있다

40 참고자료