MIS 426

1
MIS 426

• Class 2
• Building Forms with Web Server Controls

2
Objectives

• Learn the common properties, methods and events
  used with the following Web Controls
• DropDownList Controls
• ListBox Controls
• Controlling Page Navigation
• Submitting forms to different pages
• The Redirect Method
• The HyperLink Control
• Apply Formatting to Controls

3
DropDownList Control

• A DropDownList Control is similar in behavior to
  a radio button, but takes less screen real
  estate
• DropDownList Controls represent mutually
  exclusive choices
• They are displayed in a single line pick list
• The Properties SelectedIndex and SelectedItem
  allow you to determine which Item the user
  selected
• View a DropDownList

4
DropDownList Continued

• There are 3 ways to add items to a DropDownLists
  ListItemCollection, which holds all the options
• List the options when you declare the
  DropDownList
• Add the items to the ListItemCollection
• Bind a DropDownList to a data collection
• To determine which option has been selected by
  the user you use the SelectedIndex Property

5
DropDownList Continued

• DropDownLists have a Text and a Value Property
• The DataTextField Property is what displays in
  the DropDownList
• The DataValueField Property is the value
  submitted by the DropDownList
• View an example (with AutoPostBack)
• When working with a data source you can specify
  which data will be the DataTextField data and
  which data will be the DataValueField data
• View an example
• The complete listing of Properties, Methods and
  Events is listed on page 109, Tabl2 2.10

6
ListBox Control

• The ListBox Control can be set to allow users to
  select only one option (be mutually exclusive) or
  select many options
• The Properties SelectedIndex and SelectedItem are
  used to determine which Item the user selected
• View a single select ListBox
• View a multi-select ListBox

7
ListBox Continued

• ListBoxs are similar to DropDownLists in the way
  you set up their collections
• There are three ways to add items to a ListBox
  ListItemCollection
• List the options when you declare the ListBox
• Add the items to the ListItemCollection
• Bind a ListBox to a data collection
• To determine which item(s) the user has selected
  you use the SelectedIndex Property
• For a multi-select box you must use a for loop to
  get each item

8
ListBox Continued

• ListBoxs have a Text and a Value Property
• The DataTextField Property is what displays in
  the ListBox
• The DataValueField Property is the value
  submitted by the ListBox
• View the code
• When working with a data source you can specify
  which data will be the DataTextField data and
  which data will be the DataValueField data
• View the code
• You can also use the Items.Add Method to add
  build a ListBox with a text and value field
• See the code (with autotpostback)
• The complete listing of Properties, Methods and
  Events is listed on page 120, Table 2.11

9
Controlling Page Navigation

• Submitting a form to a different page
• You cannot use a server-side form for this
• It does not have an Action Property so it cannot
  submit to a different page
• You must us a standard HTML form
• The ViewState will not allow the users input to
  persist when it is submitted
• To retrieve the information on the new page you
  can use the HTTPRequest class to retrieve the
  parameters (Params Collection)
• View the Code

10
Controlling Page Navigation

• Instead of the Params Collection you can use Form
  Collection
• The Params Collection allows you to grab
  QueryStrings, ServerVariables, and Cookies
• The Form Collection only allows you to retrieve
  data from a Form only
• View the Code

11
Controlling Page Navigation

• Alternately you can submit the information to the
  originating page (PostBack)
• Once the information has been processed you can
  use the Redirect Method to send the user to a
  different page
• This allows you to utilize the advantages of the
  ViewState and retrieve the users input through
  the ASP.Net Controls
• View the Code

12
Controlling Page Navigation

• The HyperLink Control is another way to control
  page navigation.
• All the Properties, Methods and Events are on
  Page 136, Table 2.12
• The advantages of the HyperLink Control is that
  you can manipulate the Control in your code
• View the Code

13
Formatting Controls

• All Web Controls inherit from the WebControl
  Class, the Properties of which can be used to
  modify their appearance
• For a complete listing of these Properties refer
  to Page 137, Table 2.13
• Not all of these Properties are compatible with
  all browsers
• Some rely on Cascading Style Sheets (CSS) and
  others are specific to Internet Explorer
• View the Code

14
Formatting Controls

• You can use Cascading Style Sheets with Web
  Controls in the same you do with normal HTML
• You can use the CssClass property to assign a CSS
  class to a Web Control
• This will improve the consistency of the look of
  your website
• You can also modify the CSS within the code
• View the code

15
Formatting Controls

• The formatting properties can be set in the vb
  code as well as the HTML code
• View the Code
• The Cascading Style Sheets can also be set in the
  VB Code
• View the Code

16
Putting it together

• This ASP.Net page combines many of the WebForm
  Controls from Chapter 2 with some Navigation and
  Styling.
• View the Example