1

CS 3870/CS 5870: Note 16

Web User Controls

Prog 7

• Copy Prog6 to Prog7• Modify all files for Prog7• Remove Web.config from sub-folders• Make sure Prog7 is working

• Create Prog7 from scratch

2

Prog7/Default.aspx

• Not inside any sub-folders• Based on Prog7MasterPage• One message (centered on the page)

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

3

4

Creating ShoppingItem.ascx

• For page Checkout

• Add New Items• Web User Control• File name ShoppingItem.ascx• Place code in separate file

• Different file extension

5

Adding Controls to ShoppingItem.ascx

• Same as adding to Web Forms• Using default setting, not absolute position• Textboxes and label on same line

6

Setting Properties of Controls

• Read Only• Width• Alignment

7

Class Prog7_ShoppingItem

Partial Class Prog7_ShoppingItem Inherits System.Web.UI.UserControl

‘ Private data Private _theID, _theName As String Private _thePrice, _theCost As Double Private _theQuantity As Int32

End Class

8

Public PropertiesPartial Class Prog7_ShoppingItem Inherits System.Web.UI.UserControl

Public Property theID As String Set(value As String) _theID = value End Set Get Return _theID End Get End Property . . .End Class

9

Public PropertiesPartial Class Prog7_ShoppingItem Inherits System.Web.UI.UserControl

Public Property theQuantity As Integer Set(value As String) _theQuantity = value End Set Get Return _theQuantity End Get End Property . . .End Class

10

Page Load Event

Partial Class Prog7_ShoppingItem Inherits System.Web.UI.UserControl . . . Protected Sub Page_Load(. . .) Handles Me.Load lblMsg.Text = “”

txtID.Text = _theID txtName.Text = _theName txtPrice.Text = FormatCurrency(_thePrice) txtQuantity.Text = _theQuantity txtCost.Text = FormatCurrency(_theCost) End SubEnd Class

Adding Web User Controlat Design Time

• Prog7/Default.aspx• Source view (or design view)• Drag and Drop ShoppingItem.ascx to Prog7/Default.aspx

• If error, close and re-open Default.aspx or re-open VS

11

Page Directive Register• Prog7/Default.aspx• Source view

<%@ Register Src="~/Prog7/ShoppingItem.ascx" TagPrefix="uc1" TagName="ShoppingItem" %>

<asp:Content ID="Content1" . . .Runat="Server">

<h2>Use the TreeView to . . . </h2>

<uc1:ShoppingItem runat="server" ID="ShoppingItem" />

</asp:Content>12

Page Default.aspx

Protected Sub Page_Load(. . .) Handles Me.Load

ShoppingItem.theID = "101" ShoppingItem.theQuantity = 20End Sub

13

Adding Web User Controlat Run Time

• Must register the control– Drag and Drop or– Copy and Paste

<%@ Register Src="~/Prog7/ShoppingItem.ascx" TagPrefix="uc1" TagName="ShoppingItem" %>

14

Shopping Bag

• Could still use DataTable

• Try SortedList of ShoppingItem

15

Global.asax

Session("Prog7_Bag") = New SortedList

16

Page Shopping.aspxProtected Sub btnBag_Click(. . .)

Handles btnBag.Click Dim c1 As Prog7_ShoppingItem Dim bag As SortedList = Session("Prog7_Bag")

‘ Specify file path to load the control ‘ c1 = CType(LoadControl("../ShoppingItem.ascx"), ‘ Prog7_ShoppingItem)

c1 = New Prog7_ShoppingItem End Sub

17

Page Shopping.aspx

Protected Sub btnBag_Click(. . .) Handles . . . . . c1 = New Prog7_ShoppingItem

c1.theID = txtID.Text c1.theQuantity = txtQuanity.Text . . .

bag.Remove(c1.theID) bag.Add(c1.theID, c1) . . .End Sub

18

Page Checkout.aspxProtected Sub Page_Load(. . .) Handles Me.Load Dim c1, c2 As Prog7_ShoppingItem Dim bag As SortedList = Session("Prog7_Bag")

‘ Need to find the form to add the control Dim theForm As Control = Master.Master.FindControl("form1")

. . .

theForm.Controls.Add(c1)End Sub

19

Page Checkout.aspxProtected Sub Page_Load(. . .) Handles Me.Load Dim c1, c2 As Prog7_ShoppingItem . . . ‘ New does not work c1 = CType(LoadControl("../ShoppingItem.ascx"), Prog7_ShoppingItem) c2 = bag.GetByIndex(0) c1.theID = c2.theID c1.theQuantity = c2.theQuantity

theForm.Controls.Add(c1)End Sub

20

Page Checkout.aspxProtected Sub Page_Load(. . .) Handles Me.Load Dim c1, c2 As Prog7_ShoppingItem . . . ‘ Must use a loop to add all items in bag For . . . c1 = CType(LoadControl("../ShoppingItem.ascx"), Prog7_ShoppingItem) c2 = bag.GetByIndex(index) c1.theID = c2.theID c1.theQuantity = c2.theQuantity

theForm.Controls.Add(c1) NextEnd Sub

21

Public Event

• Define event

• Raise event

• Handle event

22

23

Partial Class Prog7_ShoppingItem . . .

Public Event ItemChanged(ByVal x As Lab7_ShoppingItem, ByVal valid As Boolean)

. . .

End Class

Define Event

24

Partial Class Prog7_ShoppingItem . . . Protected Sub txtQuantity_TextChanged(…) Handles … If not an integer . . . RaiseEvent ItemChanged(Me, False) ElseIf negative integer . . . RaiseEvent ItemChanged(Me, False) Else . . . RaiseEvent ItemChanged(Me, True) End If End SubEnd Class

Raise Event

Add Event Handler‘ Page CheckoutProtected Sub Page_Load(. . .) Handles Me.Load Dim c1, c2 As Prog7_ShoppingItem . . .

c1 = CType(LoadControl("../ShoppingItem.ascx"), Prog7_ShoppingItem) AddHandler c1.ItemChanged,

AddressOf HandleChangeEvent

theForm.Controls.Add(c1)

End Sub

25

Event HandlerPrivate Sub HandleChangeEvent(ByVal Item . . . ) . . . ‘ Must update Shopping Bag For i = 0 To bag.Count - 1 c2 = bag.GetByIndex(i) If c2.theID = item.theID Then c2.theQuantity = item.theQuantity End If total += c2.theCost Next txtTotal.Text = total . . .End Sub

26

Using Form to Add ItemsProtected Sub Page_Load(. . .) Handles Me.Load Dim c1, c2 As Prog7_ShoppingItem Dim bag As SortedList = Session("Prog7_Bag")

‘ Need to find the form to add the control Dim theForm As Control = Master.Master.FindControl("form1")

. . .

theForm.Controls.Add(c1)End Sub

27

Using Panel to Add ItemsAdd Panel1 to Checkout.aspx

Protected Sub Page_Load(. . .) Handles Me.Load Dim c1, c2 As Prog7_ShoppingItem . . .

c1 = CType(LoadControl("../ShoppingItem.ascx"), Prog7_ShoppingItem) . . . Panel1.Controls.Add(c1) . . .End Sub

28

Page Shopping.aspx

• Focus must be correct at all times

29

Fix all errors from earlier Progs!

30

31

Test 2

ThursdayNov 5