1. 1 CS 3870/CS 5870: Note 16 Web User Controls

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

3. 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. 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. 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. 6 Setting Properties of Controls Read Only Width Alignment

7. 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. 8 Public Properties Partial 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. 9 Public Properties Partial 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. 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 Sub End Class

11. Adding Web User Control at 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

12. Page Directive Register Prog7/Default.aspx Source view <%@ Register Src="~/Prog7/ShoppingItem.ascx" TagPrefix="uc1" TagName="ShoppingItem" %> Use the TreeView to... 12

13. Page Default.aspx Protected Sub Page_Load(...) Handles Me.Load ShoppingItem.theID = "101" ShoppingItem.theQuantity = 20 End Sub 13

14. Adding Web User Control at Run Time Must register the control –Drag and Drop or –Copy and Paste <%@ Register Src="~/Prog7/ShoppingItem.ascx" TagPrefix="uc1" TagName="ShoppingItem" %> 14

15. Shopping Bag Could still use DataTable Try SortedList of ShoppingItem 15

16. Global.asax Session("Prog7_Bag") = New SortedList 16

17. Page Shopping.aspx Protected 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

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

19. Page Checkout.aspx Protected 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

20. Page Checkout.aspx Protected 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

21. Page Checkout.aspx Protected 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) Next End Sub 21

22. Public Event Define event Raise event Handle event 22

23. 23 Partial Class Prog7_ShoppingItem... Public Event ItemChanged(ByVal x As Lab7_ShoppingItem, ByVal valid As Boolean)... End Class Define Event

24. 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 Sub End Class Raise Event

25. Add Event Handler ‘ Page Checkout Protected 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

26. Event Handler Private 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

27. Using Form to Add Items Protected 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

28. Using Panel to Add Items Add 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

29. Page Shopping.aspx Focus must be correct at all times 29

30. Fix all errors from earlier Progs! 30

31. Test 2 Thursday Nov 5 31