Basic Server Controls

1
Lesson 9

• Basic Server Controls

2
Basic Server Controls

• Lesson 9
• Basic Server Controls
• Label Server Control
• Textbox Server Control
• Button Server Control

3
Basic Server Controls

• Label Server Control
• The Label control is used to display text on a
  page.
• The text is programmable

4
Basic Server Controls
5
Basic Server Controls
6
Basic Server Controls
7
Basic Server Controls

• Examples
• lt_at_Page Explicit"True" Language"VB"
  Debug"True" gt
• lthtmlgt
• ltbodygt
• ltform runat"server"gt
• ltasplabel id"FlashyLabel" runat"server"
  forecolor"Red"
• backcolor"Yellow" text"I'm FLASHY!"/gtltbrgt
• lt/formgt
• lt/bodygt
• lt/html

8
Basic Server Controls
9
Basic Server Controls

• lt_at_Page Explicit"True" Language"VB"
  Debug"True" gt
• lthtmlgt
• ltscript runat"server"gt
• Sub ChangeButton_Click(Sender As Object, E As
  EventArgs)
• FlashyLabel.ForeColor Drawing.Color.Blue
• FlashyLabel.BackColor Drawing.Color.Green
• End Sub
• lt/scriptgt
• ltbodygt
• ltform runat"server"gt
• ltasplabel id"FlashyLabel" runat"server"
  ForeColor"Red"
• BackColor"Yellow" BorderColor"Blue"
• Text"I'm FLASHY!"/gtltbrgt
• ltaspbutton text"Change!" onclick"ChangeButton_C
  lick"
• runat"server"/gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

10
Basic Server Controls

• Try this
• lt_at_Page Explicit"True" Language"VB"
  Debug"True" gt
• lthtmlgt
• ltscript runat"server"gt
• Sub ChangeButton_Click(Sender As Object, E As
  EventArgs)
• Dim Fonts(5) As String
• Dim RndFont, RndSize, RndBold, RndItalic As
  Integer
• Randomize
• Fonts(1) "Arial"
• Fonts(2) "Times New Roman"
• Fonts(3) "Courier New"
• Fonts(4) "Broadway"
• Fonts(5) "Calligrapher"
• RndFont Int(Rnd 5) 1
• RndSize Int(Rnd 70) 1
• RndBold Int(Rnd 2) 1
• CrazyLabel.Font.Name Fonts(RndFont)
• CrazyLabel.Font.Size FontUnit.Point(RndSize)
• If RndBold 1 Then

11
Basic Server Controls

• End Sub
• lt/scriptgt
• ltbodygt
• ltform runat"server"gt
• ltasplabel id"CrazyLabel" runat"server"
• text"Crazy Label"/gtltbrgt
• ltaspbutton onclick"ChangeButton_Click"
  text"Change!"
• runat"server" /gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

12
Basic Server Controls

• Textbox Control
• The TextBox control is used to create a text box
  where the user can input text.

13
Basic Server Controls
14
Basic Server Controls
15
Basic Server Controls
16
Basic Server Controls
17
Basic Server Controls
18
Basic Server Controls
19
Basic Server Controls
20
Basic Server Controls

• Examples
• lt_at_Page Explicit"True" Language"VB"
  Debug"True" gt
• lthtmlgt
• ltscript runat"server"gt
• Sub submit(sender As Object, e As EventArgs)
• lbl1.Text"Your name is " txt1.Text
• End Sub
• lt/scriptgt
• lthtmlgt
• ltbodygt
• ltform runat"server"gt
• Enter your name
• ltaspTextBox id"txt1" columns"10"
  maxlength"20" runat"server" /gt
• ltaspButton OnClick"submit" Text"Submit"
  runat"server" /gt
• ltpgtltaspLabel id"lbl1" runat"server" /gtlt/pgt
• lt/formgt
• lt/bodygt
• lt/htmlgt

21
Basic Server Controls
22
Basic Server Controls

• Tabindex attribute is a way to determine the
  order of fields when the user hits tab. The
  order is from low to high. It is a good idea to
  set the tab order in multiple of five, just to
  leave room for new fields.

23
Basic Server Controls

• Using a password Textbox to create a login page
• In this example the userid textbox works as you
  would expect a textbox to work.
• The password textbox works differently, instead
  of seeing what you type are displayed.
  However, what you typed is saved in the password
  variable.
• lt_at_Page Explicit"True" Language"VB"
  Debug"True" gt
• lthtmlgt
• ltscript runat"server"gt
• Sub OKButton_Click(Sender As Object, E As
  EventArgs)
• If UserID.Text "king" And Password.Text"kong"
  Then
• Message.Text "Welcome, your majesty."
• Else
• Message.Text "Sorry, you're not allowed!"
• End If
• End Sub
• lt/scriptgt
• ltbodygt
• ltform runat"server"gt
• lth1gtPlease Log Inlt/h1gt
• User IDltbrgt
• ltasptextbox id"UserID" runat"server" /gtltbrgt

24
Basic Server Controls
25
Basic Server Controls

• MultiLine Textbox
• A multiline textbox is like a memo field. The
  user can enter more than one line of information.
• lt_at_Page Explicit"True" Language"VB"
  Debug"True" gt
• lthtmlgt
• ltbodygt
• ltform runat"server"gt
• ltasptextbox id"Memo" runat"server"
• textmode"multiline" /gtltbrgt
• lt/formgt
• lt/bodygt
• lt/htmlgt

26
Basic Server Controls

• TextChanged Event
• The Textchanged event happens when the user
  changes the text in the textbox and then either
  presses Tab or uses the mouse to click elsewhere.
• In the example below the TextChanged event will
  either enable or disable other textboxes.

27
Basic Server Controls

• lt_at_Page Explicit"True" Language"VB"
  Debug"True" gt
• lthtmlgt
• ltscript runat"server"gt
• 'This subroutine is called when the HaveCell
  textbox is modified.
• 'It is executed when the user presses tab or
  mouse the mouse.
• Sub HaveCell_TextChanged(Sender As Object, E As
  EventArgs)
• 'Check to see if the user typed yes in the
  HaveCell Textbox
• 'If yes disable the LabelCellPhone and CellPhone
  controls
• If HaveCell.Text ltgt "yes" Then
• LabelCellPhone.Enabled False
• CellPhone.Enabled False
• CellPhone.ToolTip "No Cell Phone"
• Else
• LabelCellPhone.Enabled True
• CellPhone.Enabled True
• CellPhone.ToolTip "Please enter your cell
  phone number"
• End If
• End Sub

28
Basic Server Controls

• lt/scriptgt
• ltbodygt
• lth1gtAdd Phonebook Entrylt/h1gt
• ltform runat"server"gt
• ltasplabel id"LabelName" text"Name"
• runat"server"/gtltbrgt
• ltasptextbox id"Name" runat"server"
• tooltip"Please enter your name"
• tabindex10/gtltbrgt
• ltasplabel id"LabelHomePhone" text"Home Phone"
• runat"server"/gtltbrgt
• ltasptextbox id"HomePhone" runat"server"
• tooltip"Please enter your home phone number"
• tabindex20/gtltbrgt
• ltasplabel id"LabelHaveCell"
• text"Do you have a cell phone?"
• runat"server"/gtltbrgt
• ltasptextbox id"HaveCell" runat"server"
• tooltip"Do you have a cell phone? Answer yes or
  no."

29
Basic Server Controls

• Notice that before you type anything in the
  HaveCell textbox, if you move the mouse over the
  textbox the tool tip is displayed.
• If you type no in the HaveCell Textbox the next
  two controls are disabled. If you type yes in
  the HaveCell Textbox the next two controls are
  enabled.
• The enabling and disabling happens in the
  HaveCell_TextChanged subroutine, which is
  specified with the attribute ontextchanged.
• The autopostback attribute must be set to true
  inorder for the subroutine to be called when the
  focus of the page moves away from the HaveCell
• ltasptextbox id"HaveCell" runat"server"
• tooltip"Do you have a cell phone? Answer yes or
  no."
• ontextchanged"HaveCell_TextChanged"
• autopostback"true" tabindex30/gt