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

1

CS 3870/CS 5870: Note 19

SiteMap and AJAX

Lab 8

Lab8MasterPage

• TreeView– DataSourceID– Data Source Type

• Site Map

• XML File

• Use Site Map

2

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

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

Initial Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="" title="" description="">

<siteMapNode url="" title="" description="" />

<siteMapNode url="" title="" description="" />

</siteMapNode>

</siteMap>

5

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

Page Default.aspx

• Based on Lab8MasterPage

• One message

Use the TreeView to navigate to the pages you want to see.

7

Page Score.aspx

• Select assignment

• Enter score for the assignment

8

Table Assignment

AssignmentID : varchar(5), primary key,

update not allowed

MaximumPoints: tinyint

DueTime : smalldatetime

Description : varchar(50), allow nulls

BonusPoints : tinyint

9

DropDownList

• Properties– DataSourceID– DataTextField : AssignmentID– DataValueField: AssignmentID

• Display one field of all records– AssignmentID– No other navigation controls

10

All Record Fields

• DetailsView

• Any other controls

• Must use the DropDownList to navigate

• DetailsView– PageIndex

11

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

Web User Controls ScoreToGrade.ascx

• Similar to ShoppingItem

• Test3 will be on Web User Control (and others)

Web User Controls

• Private data

• Public properties

• Public methods

• Public Events

• Register

• LoadControl

14

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

Class ScoreAndGrade

• Declare constants

• No Magic numbers!

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

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

AJAX Extensions

• VS.NET ToolBox

• ScriptManager

• UpdatePanel

• ScriptManagerProxy

• Timer

• UpdateProgress

19

ScriptManager

• One on each page– the master page– the content pages

20

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

Computing Square Root

Protected Sub Button1_Click(…) Handles . . .

txtSqrt.Text =

FormatNumber(Math.Sqrt(txtInput.Text), 2)

End Sub

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

Adding AJAX Controls<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:TextBox ID="txtSqrt" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Button" />

<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>

</ContentTemplate>

</asp:UpdatePanel>

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

Button1 is Out Side of UpdatePanel<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:TextBox ID="txtSqrt" runat="server"></asp:TextBox>

<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>

</ContentTemplate>

</asp:UpdatePanel>

<asp:Button ID="Button1" runat="server" Text="Button" />

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

Adding Trigger<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:TextBox ID="txtSqrt" runat="server"></asp:TextBox>

<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Button1"

EventName="Click" />

</Triggers>

</asp:UpdatePanel>

<asp:Button ID="Button1" runat="server" Text="Button" />

Adding Trigger

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Button1"

EventName="Click" />

</Triggers>

• Partial page update

29

30

txtInput is Outside of UpdatePanel<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:TextBox ID="txtSqrt" runat="server"></asp:TextBox>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Button1"

EventName="Click" />

</Triggers>

</asp:UpdatePanel>

<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Button" />

Textbox txtInput is out side of UpdatePanel

• Partial page update

31

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

Multiple UpdatePanels

• UpdatePanel1– txtSqrt– Trigger: Button1

• UpdatePanel2– txtDouble– Trigger: Button2

33

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

UpdateMode

• Always (Default)

• Conditional

• Apply Conditional to both UpdatePanels

35

Multiple Trggers

• Select UpdatePanel2

• Properties Windows

• Triggers (Collection)

• Add– ControlID: Button1– EventName: click

36

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