1. 1 CS 3870/CS 5870: Note 19 SiteMap and AJAX Lab 8

2. Lab8MasterPage TreeView –DataSourceID –Data Source Type Site Map XML File Use Site Map 2

3. Site Map XML File Web.sitemap Organize the pages in the site hierarchically Must be located in the application root directory Automatically picked up by the default site- map provider SiteMapDataSource 3

4. Creating File Web.sitemap Right click the application root Add Add New Site Map It could be created in a sub-folder, but won’t be recognized 4

5. Initial Web.sitemap 5

6. Web.sitemap Contains only one siteMapNode element The root node can contain any number of child siteMapNode elements The child notes can have their child notes Note Properies –URL: can be empty, but no duplicate –Title –Description 6

7. Page Default.aspx Based on Lab8MasterPage One message Use the TreeView to navigate to the pages you want to see. 7

8. Page Score.aspx Select assignment Enter score for the assignment 8

9. Table Assignment AssignmentID : varchar(5), primary key, update not allowed MaximumPoints: tinyint DueTime: smalldatetime Description: varchar(50), allow nulls BonusPoints: tinyint 9

10. DropDownList Properties –DataSourceID –DataTextField : AssignmentID –DataValueField: AssignmentID Display one field of all records –AssignmentID –No other navigation controls 10

11. All Record Fields DetailsView Any other controls Must use the DropDownList to navigate DetailsView –PageIndex 11

12. Page Grade.aspx Show all selected assignments with scores Calculate the percentage and grade for each assignment Calculate the course percentage and grade based on all selected assignments 12

13. 13 Web User Controls ScoreToGrade.ascx Similar to ShoppingItem Test3 will be on Web User Control (and others)

14. Web User Controls Private data Public properties Public methods Public Events Register LoadControl 14

15. 15 Class ScoreAndGrade CheckInput –Page Score.aspx –User Control ScoreToGrade.ascx ComputePercentageAndGrade –Page Grade.aspx –User Control ScoreToGrade.ascx Should be Shared in VB

16. 16 Class ScoreAndGrade Declare constants No Magic numbers!

17. 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 17

18. 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! 18

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

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

21. 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 21

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

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

24. 24 Adding AJAX Controls

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

26. 26 Button1 is Out Side of UpdatePanel

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

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

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

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

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

32. 32 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

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

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

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

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

37. Browser Back/Forward Buttons and AJAX Five Bonus Points –Page Score.aspx –Browser back/Forward buttons work with AJAX Five Bonus Points –Page Grade.aspx –Browser back/Forward buttons work with AJAX 37