1. 1 CS 3870/CS 5870: Note 19 AJAX Prog8

2. Test 2 50 Points Thursday, Nov 12 2:00 PM – 4:00 PM Lab 206 2

3. ASP.NET and AJAX Processing of dynamic pages –Generate entire page on each request –Extra processing –Extra network load AJAX makes dynamic pages the same as Windows forms –Update only the controls that changed 3

4. ASP.NET AJAX Asynchronous JavaScript And XML Partial Page Updates with ASP.NET AJAX A Java library sent to client Calls made by the library sent back to the server The page is updated partially by the library The browser does not know it at all! 4

5. AJAX Extensions VS.NET ToolBox ScriptManager UpdatePanel ScriptManagerProxy Timer UpdateProgress 5

6. ScriptManager One on each page –the master page –the content pages 6

7. UpdatePanel One or more UpdatePanel on each page Properties –ContentTemplate Containing all the controls to be updated partially –Triggers Containing all controls with the events that will trigger partial update –UpdateMode Always (default) Conditional 7

8. Prog8 Create a folder Prog8 Add a page Default.aspx Add two textboxes and one button –txtInput –txtSqrt –Button1 No AJAX controls yet 8

9. 9 Computing Square Root Protected Sub Button1_Click(…) Handles... txtSqrt.Text = FormatNumber(Math.Sqrt(txtInput.Text), 2) End Sub

10. Full Page Update Compute three times with input –5 –50 –500 Click Back and Forward on the browser –Each computation re-displayed –Full page update 10

11. 11 Adding AJAX Controls

12. Partial Page Update Compute three times with input –5 –50 –500 Click Back and Forward on the browser –Go back to the other page –Partial page update 12

13. 13 Button1 is Out Side of UpdatePanel

14. Button1 is Out Side of UpdatePanel Come back Compute three times with input –5 –50 –500 Click Back and Forward on the browser –Full page update 14

15. 15 Adding Trigger <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

16. Adding Trigger <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> Partial page update 16

17. 17 txtInput is Outside of UpdatePanel <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

18. Textbox txtInput is out side of UpdatePanel Partial page update 18

19. 19 Clear the Input Protected Sub Button1_Click(…) Handles... txtSqrt.Text = FormatNumber(Math.Sqrt(txtInput.Text), 2) txtInpt.Text = “” End Sub Not cleared Partial page update and txtInput is excluded

20. Multiple UpdatePanels UpdatePanel1 –txtSqrt –Trigger: Button1 UpdatePanel2 –txtDouble –Trigger: Button2 20

21. 21 Button Click Events Protected Sub Button1_Click(…) Handles... txtSqrt.Text = FormatNumber(Math.Sqrt(txtInput.Text), 2) txtDouble.Text = “” End Sub Protected Sub Button2_Click(…) Handles... txtDouble.Text = 2 * txtInput.Text txtSqrt.Text = “” End Sub

22. UpdateMode Always (Default) Conditional Apply Conditional to both UpdatePanels 22

23. Multiple Trggers Select UpdatePanel2 Properties Windows Triggers (Collection) Add –ControlID: Button1 –EventName: click 23

24. Bonus Points Five Bonus Points –Page Score.aspx –Browser back/Forward buttons work with AJAX Five Bonus Points –Page Grade.aspx –the selected assignments with the scores using the Web user control are always displayed in the center of page Grade.aspx 24