User Controls

1
User Controls

• Server controls, authored like pages
• Enables full encapsulation
• Supports nested controls
• Separate code language
• Easy way to reuse work across multiple pages and
  applications (page navigation)
• Replace include files with user controls

2
User Control Steps

• Use Register directive at top of page to
  reference name and location of user control
• lt_at_ Register
• TagPrefix"uc1"
• TagName"nav_ctrl"
• Src"nav_ctrl.ascx" gt
• Add tag within page for location of User Control
• ltuc1nav_ctrl
• id"Nav_ctrl1"
• runat"server"gt

3
Create a Simple User Control
4
Using a User Control
ltPgt ltbgtHello World!ltbgt lt/Pgt
lt_at_ Register TagPrefix"MyTag"
TagName"Hello"
Src"Hello.ascx" gt ltHTMLgtltHEADgtlt/HEADgt
ltbody MS_POSITIONING"GridLayout"gt ltform
id"Form1" method"post" runat"server"gt ltPgt ltMy
TagHello id"Hello1" Runat"Server"gt
lt/MyTagHellogt lt/Pgt lt/formgt
lt/bodygt lt/HTMLgt
Rendered as
5
GetName.ascx

• lt_at_ Control Language"vb" AutoEventWireup"false"
  Codebehind"GetName.ascx.vb" Inherits"usercontrol
  .GetName" TargetSchema"http//schemas.microsoft.c
  om/intellisense/ie5" gt
• Enter your name
• ltaspTextBox id"TextBoxName" runat"server"gtlt/asp
  TextBoxgt

6
GetName.ascx.vb

• Public MustInherit Class GetName
• Inherits System.Web.UI.UserControl
• Protected WithEvents TextBoxName As
  System.Web.UI.WebControls.TextBox
• Private mName As String
• Public Property Name() As String
• Get
• Return mName
• End Get
• Set(ByVal Value As String)
• mName Value
• End Set
• End Property
• Private Sub Page_Load(ByVal sender As
  System.Object, ByVal e As System.EventArgs)
  Handles MyBase.Load
• Dim x As Integer ' For testing purpose
• x 1
• End Sub
• Private Sub TextBoxName_Load (ByVal sender As
  Object, ByVal e As System.EventArgs) Handles
  TextBoxName.Load
• If IsPostBack Then

7
GetNameText.asp

• lt_at_ Page Language"vb" AutoEventWireup"false"
• Codebehind"GetNameTest.aspx.vb"
• Inherits"usercontrol.GetNameTest"gt
• lt_at_ Register TagPrefix"uc1" TagName"GetName"
  Src"GetName.ascx" gt
• ltHTMLgtltHEADgtlttitlegtGetNameTestlt/titlegtlt/HEADgt
• ltbodygtltform id"Form1" method"post"
  runat"server"gt
• ltPgt ltuc1GetName id"GetName1"
• runat"server"gtlt/uc1GetNamegt lt/Pgt
• ltPgtltaspButton id"Button1" runat"server"
  Text"Submit "gtlt/aspButtongtlt/Pgt
• ltPgtltaspLabel id"Label1" runat"server"gtlt/aspLa
  belgtlt/Pgt
• lt/formgt
• lt/bodygtlt/HTMLgt

8
GetName.asp.vb

• Public Class GetNameTest
• Inherits System.Web.UI.Page
• Protected WithEvents Button1 As
  System.Web.UI.WebControls.Button
• Protected WithEvents Label1 As
  System.Web.UI.WebControls.Label
• Protected WithEvents GetName1 As GetName
• Private Sub Page_Load(ByVal sender As
  System.Object, _
• ByVal e As System.EventArgs) Handles
  MyBase.Load
• Dim x As Integer
• x 1
• End Sub
• Private Sub Button1_Click(ByVal sender As
  System.Object, _
• ByVal e As System.EventArgs) Handles
  Button1.Click
• Label1.Text GetName1.Name
• End Sub
• End Class

You have to declare this by yourself!
9
Event Sequence
GetNameTest.aspx
GetName.ascx
Page_Load()
First Time
Page_Load()
TextBoxName_Load()
Timeline
Page_Load()
Page_Load()
PostBack
TextBoxName_Load()
Button1_Click()
10
Dynamic Properties

• Property values can be changed after the
  application is built and deployed
• Great for database connection strings, Web
  Service URLs, machine names
• RAD designer support to bind to these
  configurable settings

11
Web.config File
lt?xml version"1.0" encoding"utf-8"
?gt ltconfigurationgt ltappSettingsgt
ltadd key"connectionString" value'ProviderMicros
oft.Jet.OLEDB.4.0Password""User IDAdminData
SourceC\Minder\dotnet\ADO\database\Northwind.mdb
ModeShare Deny None' /gt lt/appSettingsgt
ltsystem.webgt . ltconfigurationgt
12
CategoryDDLB.ascx.vb

• Imports System.Data.OleDb
• Namespace CustomTag
• Public MustInherit Class CategoryDDLB
• Inherits System.Web.UI.UserControl
• Protected WithEvents DropDownListCategor
  y As System.Web.UI.WebControls.DropDownList
• Private m_catId As Integer 0
• Public Property CatID()
• Get
• Return m_catId
• End Get
• Set(ByVal Value)
• m_catId Value
• End Set
• End Property
• Region " Web Form Designer Generated Code "
• '
• End Region

Your cannot use ViewState to pass data between a
page and its user controls
13

• Private Sub Page_Load(ByVal sender As
  System.Object, _
• ByVal e As
  System.EventArgs) Handles MyBase.Load
• If Not IsPostBack Then
• Dim connString As String
• Dim daCat As OleDbDataAdapter
• Dim dsCat As New DataSet()
• Dim catCmd As OleDbCommand
• Dim conn As OleDb.OleDbConnection
• connString ConfigurationSettings.AppSe
  ttings("connectionString")
• conn New OleDb.OleDbConnection(c
  onnString)
• conn.Open()
• catCmd New OleDbCommand()
• catCmd.CommandText "select
  categoryID, categoryName from Categories"
• catCmd.CommandType
  CommandType.Text
• catCmd.Connection conn
• daCat New OleDbDataAdapter(catCm
  d)
• daCat.Fill(dsCat, "Categories")
• DropDownListCategory.DataSource
  dsCat
• DropDownListCategory.DataMember
  "Categories"

Continued
14
WebForm1.aspx
15
WebForm1.aspx

• lt_at_ Register TagPrefix"Category"
• TagName"CategoryDDLB"
• Src"CategoryDDLB.ascx" gt
• lt_at_ Page Language"vb" AutoEventWireup"false"
  Codebehind"WebForm1.aspx.vb"
• Inherits"usercontrol.WebForm1"gt
• ltHTMLgtltHEADgtlttitlegtWebForm1lt/titlegt lt/HEADgtltbodygt
• ltform id"Form1" method"post"
  runat"server"gt
• ltPgt
• ltCategoryCategoryDDLB
  ID"DDLBCat"
• Runat"Server"gt
• lt/CategoryCategoryDDLBgtlt/Pgt
• ltPgt
• ltaspButton id"Button1"
  runat"server"
• Text"Select a Category"gtlt/aspButtongtlt/Pgt
  
• ltPgt
• ltaspLabel id"Label1"
  runat"server"gtlt/aspLabelgtlt/Pgt
• lt/formgtlt/bodygtlt/HTMLgt

16
WebForm1.aspx.vb

• Public Class WebForm1
• Inherits System.Web.UI.Page
• Protected WithEvents Button1 As
  System.Web.UI.WebControls.Button
• Protected WithEvents Label1 As
  System.Web.UI.WebControls.Label
• Protected WithEvents DDLBCat As
  CustomTag.CategoryDDLB
• Region " Web Form Designer Generated Code "
• ' .
• End Region
• Private Sub Button1_Click(ByVal sender As
  System.Object, _
• ByVal e As System.EventArgs) Handles
  Button1.Click
• Label1.Text "You have selected category
  ID " DDLBCat.CatID
• End Sub
• End Class

17
Using User Defined Classes in ASP.NET
18
Salary Class Salary.vb

• Namespace HR
• Public Class Salary
• Protected m_Hours As Double
• Protected m_empName As String ""
• Protected m_Rate As Double
• Public Sub New()
• End Sub
• Public Property EmpName() As String
• Get
• Return m_empName
• End Get
• Set(ByVal Value As String)
• m_empName Value
• End Set
• End Property
• Public Property Rate() As Double
• Get
• Return m_Rate

19
Continued

• Public Property Hours() As Double
• Get
• Return m_Hours
• End Get
• Set(ByVal Value As Double)
• m_Hours Value
• End Set
• End Property
• Public ReadOnly Property Pay() As Double
• Get
• Dim total As Double
• If (m_Hours lt 40) Then
• total m_Hours m_Rate
• Else
• total 40 m_Rate 1.5
  (m_Hours - 40) m_Rate
• End If
• Return total
• End Get

20
HRSalary.aspx.vb

• Public Class HRSalary
• Inherits System.Web.UI.Page
• Protected WithEvents TextBoxName As
  System.Web.UI.WebControls.TextBox
• Protected WithEvents TextBoxRate As
  System.Web.UI.WebControls.TextBox
• Protected WithEvents Label1 As
  System.Web.UI.WebControls.Label
• Protected WithEvents ButtonCalculate As
  System.Web.UI.WebControls.Button
• Protected WithEvents TextBoxHours As
  System.Web.UI.WebControls.TextBox
• Private salary1 As HR.Salary
• Private Sub ButtonCalculate_Click(ByVal sender As
  System.Object, _
• ByVal e As System.EventArgs) Handles
  ButtonCalculate.Click
• Try
• salary1 New HR.Salary()
• salary1.Hours Val(TextBoxHours.Text)
  
• salary1.Rate Val(TextBoxRate.Text)
• Label1.Text TextBoxName.Text _
• ", your weekly wage is " _
• Format(salary1.Pay, ",.")
• Catch ex As Exception
• Label1.Text _

21
HRSalary.aspx
lt_at_ Page Language"vb" AutoEventWireup"false"
Codebehind"HRSalary.aspx.vb" Inherits"exwage.HR
Salary"gt lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0 Transitional//EN"gt ltHTMLgtltHEADgtlttitlegtHRSalary
lt/titlegtlt/HEADgt ltbodygt ltform
id"Form1" method"post" runat"server"gt
ltPgt ltbrgt
ltTABLE id"Table1" style"WIDTH 339px HEIGHT
128px" cellSpacing"1"
cellPadding"1" width"339" border"1"gt
ltTRgt ltTD
style"WIDTH 154px"gt
ltP align"right"gtltSTRONGgtEmployee
Namelt/STRONGgtlt/Pgt lt/TDgt
ltTDgt
ltaspTextBox id"TextBoxName"
runat"server"gtlt/aspTextBoxgtlt/TDgt
lt/TRgt ltTRgt
ltTD style"WIDTH 154px"gt
ltP align"right"gtltSTRONGgtHourly
Ratelt/STRONGgtlt/Pgt lt/TDgt
ltTDgt
ltaspTextBox id"TextBoxRate"
runat"server"gtlt/aspTextBoxgtlt/TDgt
lt/TRgt
22
Continued

• ltTRgt
• ltTD style"WIDTH 154px
  HEIGHT 29px"gt
• ltP align"right"gtltSTRO
  NGgtNumber of Hoursnbsp lt/STRONGgt
• lt/Pgt
• lt/TDgt
• ltTD style"HEIGHT 29px"gt
• ltaspTextBox
  id"TextBoxHours" runat"server"gtlt/aspTextBoxgtlt/T
  Dgt
• lt/TRgt
• ltTRgt
• ltTD style"WIDTH
  154px"gtltSTRONGgt
• ltP
  align"right"gtnbsplt/Pgt
• lt/STRONGgt
• lt/TDgt
• ltTDgt
• ltP align"right"gt
• ltaspButton
  id"ButtonCalculate" runat"server"
• Text"Calculate Salary" Font-Bold"True"gtlt/asp
  Buttongtlt/Pgt
• lt/TDgt
• lt/TRgt

23
Separation of Presentation and Business Logic
Zero degree of separation
.ASPX HTML Code Event Procedure Script
1st degree of separation
.ASPX (presentation tier) Code Behind (Event
Procedures)
1.5 degree of separation
.ASPX (presentation tier) Code Behind (Event
Procedures Functions)
24
Continued
2nd degree of separation
.ASPX (presentation tier) Code Behind (Event
Procedures Functions) Business Objects
3rd degree of separation
.ASPX (presentation tier) Code Behind (Event
Procedures Functions) Business Objects
Web Services (Remote Procedures)
Achieving Zero degrees of separation from your
business client.