Title: Web Forms and Server Controls
1Web Forms and Server Controls
2Using HTML Server Controls
- All HTML tags can be changed into server-side
tags using the attribute and value runat"server" - Limited functionality compared to Web controls
- Provide output similar to their HTML counterparts
- To set the runat attribute
- Right-click on the HTML control and select the
command Run As Server Control or - Type the attribute and value into the tag in HTML
view, i.e. - ltinput type"text" runat"server"gt
3HTML Server Controls
- Similar to HTML Controls but run on the server
- Divided into separate classes
- HTMLInputControl
- HTMLContainerControl
4HTML Server Controls
5HTML Control Client-Side vs. Server-Side Event
Handlers
- In HTML documents, client-side controls (i.e.
scripts or procedures executing in JavaScript or
VbScript) have events such as onClick and
onChange - Associated with HTML client controls
- When an HTML Server control value has changed,
the OnServerChange or OnServerClick event occurs
6The Line Continuation Character
- When writing code, never press ltEntergt key in the
middle of a statement within code behind the page - Underscore (_) key preceded by a blank space
allows the statement to be continued on next line - Example
- lblMaturity.InnerHtml sngInvestment _
- (1 sngRate / 36000) _
- (360 intYears)
- (Single-line statement)
7Concatenation
- Joining of two or more strings into a single
string using either of the operators "" or "" - Formats
- String1 String2 -or- String3 String4
- Examples
- strString "Welcome to " "ASP.NET"
- Stores "Welcome to Visual Basic" into strString
- lblArithmetic.InnerHtml "11 7 " _
- 11 7
- Stores "11 7 18" into lblArithmetic.InnerHtml
8HTML Server Control Event Handlers
- Controls that support the OnServerChange event
- HTMLInputCheckBox
- HTMLInputRadioButton
- HTMLInputHidden
- HTMLInputText
- HTMLTextArea
- HTMLSelect
- Controls that support the OnServerClick event
- HTMLInputImage
- HTMLAnchor
- HTMLButton
- HTMLForm
9Starting a New Web Form
- Select Project from the menu bar
- Select Add Web Form from the Project menu
- The "Web Form" icon will already be selected in
the Templates frame of the "New Item" dialog
window - Type the Name for the new file
- The extension ".aspx" will be added automatically
when the file is created - Click the ltOpengt button
10HTMLButton.aspx
11Properties
- Properties of the individual controls can be
changed through "Properties" window - The Style property (attribute) is modified using
Style Builder dialog window (same as for style
sheets) - Additionally many properties can be changed by
adding statements to the code behind the page - When page loads, or when an event occurs, such as
a button click - Properties frequently are not the same for HTML
server controls and ASP.NET server controls
12"Font" Properties in Style Builder
13"Position" Properties in Style Builder
14HTMLButton.aspx (Page 1)
- Add the image header.jpg
- Style propertyPosition tab
- Top0 Left0
- Add the image menu.gif
- Style propertyPosition tab
- Top 85 Left 17
- Add the image waterfordgifts.jpg
- Style propertyPosition tab
- Top 38 Left 134
15The ID and Name Properties
- The ID property is used to identify the control
to the server for server-side processing - The Name property identifies the control to
scripts running on the client side
16HTMLButton.aspx (Page 2)
- Add a Label from the "HTML" tab in the Toolbox
- Set attribute "runat server" (right-click and
select command Run as Server Control) - IDlblTitle
- Name(we will not be setting this property)
- Style
- Font (FamilyTrebuchet MS Size15)
- Position (Top243 Left139 Height26
Width365) - Modify text by typing"Select the gender of the
gift recipient"
17HTMLButton.aspx (Page 3)
- Add a Button from the "HTML" tab in the Toolbox
- Set attribute "runatserver"
- IDbtnMale
- Style (Top278 Left138 Height27 Width89)
- Value"Male"
- Add a Button from the "HTML" tab in the Toolbox
- Set attribute "runatserver"
- IDbtnFemale
- Style (Top310 Left138 Height27 Width89)
- Value"Female"
18HTMLButton.aspx (Page 4)
- Add a Label from the "HTML" tab in the Toolbox
- Set attribute "runat server"
- IDlblGiftIdeasWomen
- Style
- Font (FamilyTrebuchet MS Size12)
- Position (Top275 Left235 Height210
Width250)
19HTMLButton.aspx (Page 5)
- LabellblGiftIdeasWomen
- Create a bulleted list
- Make-Up Brush
- Tyrone Bell
- Butterfly
- Balmoral Vase
- Abbey Clock
- Heart-Shaped Ring Holder
- Wellsley Picture
20HTMLButton.aspx (Page 6)
- Add a Label from the "HTML" tab in the Toolbox
- Set attribute "runat server"
- IDlblGiftIdeasMen
- Style
- Font (FamilyTrebuchet MS Size12)
- Position (Top275 Left235 Height210
Width250) - (Wait to set the Left position until all text is
entered)
21HTMLButton.aspx (Page 6)
- LabellblGiftIdeasMen
- Create a bulleted list
- Golf Ball
- Golf Club
- Male Golfer
- Letter Opener
- Business Card Holder
- Shamrock Paperweight
22Procedures
- A procedure (Sub or Function)is a named grouping
of one or more programming statements - Create an event Sub procedure by double-clicking
on the object in Design mode - The Page_Load event occurs when the web page
loads into the browser - Example
- Private Sub Page_Load( ) Handles MyBase.Load
- lblGiftIdeasMen.Visible False
- lblGiftIdeasWomen.Visible False
- End Sub
23The ServerClick Event
- Occurs when an HTML Server Button (HTML Button
with runatserver attibute set) is clicked - Equivalent of Click event in VB .NET, but for an
ASP.NET Web Server control - Example
- Private Sub btnMale_ServerClick( ) Handles
btnMale.ServerClick -
- End Sub
24The InnerHtml Property
- Modifies the contents of an HTML Label (or other)
control - May include HTML tags for formatting of the text
- The Label is converted to a ltdivgt tag with
inserted text in the rendering of an HTML
document - Example
- lblTitle.InnerHtml "ltbgtWe have lots of gift
ideas for men.lt/bgt" - The InnerText property (similar to InnerHtml) may
only contain text elements, not formatting tags
25HTMLButton.aspxPage_Load
- Private Sub Page_Load( ) Handles MyBase.Load
- lblGiftIdeasMen.Visible False
- lblGiftIdeasWomen.Visible False
- End Sub
26HTMLButton.aspxbtnMale_ServerClick
- Private Sub btnMale_ServerClick( ) Handles
btnMale.ServerClick - lblTitle.InnerHtml "ltbgtWe have lots of gift
ideas for men.lt/bgt" - lblGiftIdeasMen.Visible True
- lblGiftIdeasWomen.Visible False
- End Sub
27HTMLButton.aspxbtnFemale_ServerClick
- Private Sub btnFemale_ServerClick( ) Handles
btnFemale.ServerClick - lblTitle.InnerHtml "ltbgtWe have lots of gift
ideas for women.lt/bgt" - lblGiftIdeasWomen.Visible True
- lblGiftIdeasMen.Visible False
- End Sub
28HTML Image Button (Page 1)
- An image is displayed on the Button instead of
text - By default the image docks to the all sides on
the button, so it stretches if the button is
resized - There actually is no Image Button in the HTML tab
of the Toolbox - Drop and drag an HTML Button from the Toolbox
- Then key the type attribute in the input tag,
i.e. - ltinput type"image"gt
29HTML Image Button (Page 2)
- The src attribute names the path and filename of
the image file displayed on the Button, i.e. - ltinput type"image" src"male.gif"gt
- No value attribute is required since image
replaces the text on the button - All other functioning is the same as the HTML
Button control
30HTMLImageButton.aspx
31HTMLImageButton.aspx
- btnMale
- ltinput type"image" src"images/male.gif"gt
- btnFemale
- ltinput type"image" src"images/female.gif"gt
32The Value Property for a Text Field
- Retrieves or modifies the values from HTML text
field (text box) controls - The value attribute can be used to set the
default value for input controls such as a
one-line text field or password box - Used for HTML form controls rather than the Text
property of ASP.NET server controls - Examples
- txtUserName.Value
- txtPassword.Value
33HTML Button Controls
- Buttons usually call procedures when clicked
- Available are Submit, Reset, and the general
Button - Member of the HTMLInputControl Class, i.e.
- ltinput type "Submit"gt
- ltinput type "Reset"gt
- Resets Form to default so runat"server" not
applicable - ltinput type "Button"gt
- Default procedure for HTML Buttons is ServerClick
event, i.e - Private Sub btnSubmit_ServerClick( ) Handles
btnSubmit.ServerClick
34HTMLInputButton.aspx
35HTMLInputButton.aspx (Page 1)
- Add Text Field from "HTML" tab in Toolbox
- Set attribute "runat server"
- IDtxtUsername
- Style (Top280 Left145)
- Add Password Field from "HTML" tab in Toolbox
- Set attribute "runat server"
- IDtxtPassword
- Style (Top310 Left145)
36HTMLInputButton.aspx (Page 2)
- Add Submit Button from "HTML" tab in Toolbox
- Set attribute "runat server"
- IDbtnSubmit
- Style (Top345 Left150)
- Value"Sign In"
- Add Reset Button from "HTML" tab in Toolbox
- IDbtnReset
- Style (Top345 Left230)
37HTMLInputButton.aspx (Page 3)
- Add a Button from "HTML" tab in Toolbox
- Set attribute "runat server"
- IDbtnHelp
- Style (Top345 Left450)
- Value"Help"
38HTMLInputButton.aspxPage_Load
- Private Sub Page_Load( ) Handles MyBase.Load
- lblTitle.InnerText "Please log into our
Customer Support Area" - lblHelp.Visible False
- btnHelp.Visible True
- End Sub
39HTMLInputButton.aspxPage_Load (Page 1)
- Private Sub btnSubmit_ServerClick( ) Handles
btnSubmit.ServerClick - lblHelp.Visible False
- If txtUsername.Text "Course" And
txtPassword.Text "Technology" Then - lblTitle.InnerText "You are authenticated"
40HTMLInputButton.aspxPage_Load (Page 2)
- Else
- lblTitle.InnerText "Please click on the Help
button for help!" - txtUsername.Text ""
- txtPassword.Text ""
- btnHelp.Visible True
- End If
- End Sub
41HTMLInputButton.aspxbtnHelp_ServerClick
- Private Sub btnHelp_Server_Click( ) Handles
btnHelp.ServerClick - lblTitle.InnerText "Please log into our
Customer Support Area" - lblHelp.Visible True
- btnHelp.Visible False
- End Sub
42HTML Radio Button, Dropdown List, and Hyperlink
Server Controls
- CheckBoxes, RadioButtons and DropDown lists
- Form fields that allow users to select from lists
of options - Can retrieve their values using properties of the
HTML form control - Hyperlinks
- Allow you to create links to other pages or to
internal targets within the same page
43The Checked Property of RadioButtons
- Determines which RadioButton is Checked
- If rdBridal.Checked True Then
- lblTitle.InnerHtml "Celebrate your Wedding!"
- imgTop.Src "images/28.jpg"
- End If
- Or
- If rdBridal.Checked Then
- lblTitle.InnerHtml "Celebrate your Wedding!"
- imgTop.Src "images/28.jpg"
- End If
44The RadioButton HTML Server Control
45Dropdown HTML Server Control
- Created with the HTML ltselectgt tag
- ltoptiongt tags create each individual item
- A value attribute can be associated with each
item in the list - SelectedIndex property of the drop-down list box
- A zero-based index indicating which item is
selected - When nothing has been selected the SelectedIndex
property returns the value -1 - The Add method add items to the list dynamically
in code when the page loads, or when an event
occurs
46The IsPostback Page Property
- Determines if the user has visited page before
during the current session - Important to know so that statements that
initialize the page do not run again if page is
revisited - The _doPostBack function is generated
automatically by ASP.NET - Passes to the Web server information concerning
the object that called an event and parameters
passed to it - The Boolean IsPostBack property recognizes if the
page was visited previously from this information
47The IsPostback Page Property and the Add Method
of the Select Control
- Example
- If Not Me.IsPostBack Then
- lblTitle.InnerHtml() _
- "Select gender of gift recipient."
- imgProduct.Visible False
- ProductList.Visible False
- CatList.Items.Add("Gifts for Men")
- CatList.Items.Add("Gifts for Women")
- End If
48Dropdown HTML Server Control
49Anchors (Hyperlinks)
- Creates a hyperlink to another Web document
- Example
- lta href"http//www.tarastore.com" id"AMale"
name"AMale" runat"server"gtMenlt/agt - The HRef property can change the URL for an ltagt
tag in the code behind the page, i.e. - AMale.HRef "GiftsForMen.aspx"
- AFemale.HRef "GiftsForWomen.aspx"
- AHome.HRef "http//www.tarastore.com"
50The Hyperlink Control
51Using ASP.NET Web Form Controls
- Also known as Web Controls
- Located on the Web Forms tab in the Toolbox
- Inherit from the Web Control class
- ASP.NET controls can be logically grouped into
- Web Form controls
- Rich controls
- Data controls
- Validation Controls
- Mobile Controls
52Syntax Differences for Assigning Text to a Label
in Web Form Controls
- Text is assigned to a Label (and other controls)
using the Text property, not InnerHtml or
InnerText - Example
- Label1.Text "Welcome to ASP.NET"
- Web Form controls in ASP.NET follow a syntax that
closely approximates that of Visual Basic .NET
53Syntax Differences for Assigning Color Values in
Web Form Controls
- Color is a class in .NET Framework derived from
the System.Drawing.Color namespace - Assign the value using known colors referred to
by name, i.e. - MyControl.BorderColor System.Drawing.Color.Green
- MyControl.BorderColor Color.Green
54The Color.FromName() Method
- Returns a color value from the Color class
- Values may be specific system-define color name
or an RGB hexadecimal color value as a string - Format
- ControlName.ColorProperty Color.FromName("System
DefinedColor") - Examples
- MyControl.BackColor Color.FromName("Red")
- MyControl.BackColor Color.FromName("MenuText")
55Syntax Differences for Assigning Image Properties
in Web Form Controls
- Image control class produces an ltimggt tag
- Properties of the Image control are different
from HTML server controls as follows - ImageURLpath to the image and filename creates
the src property - AlternateTextdisplays text when the image is not
available creates the alt property - ImageAlignprovides the image alignment creates
the align property
56The Add Method for the DropDownList Web Form
Control
- Adds options (ltoptiongt blocks) to the
DropDownList - Member of the Items collection of the
- Example
- If Not IsPostBack Then
- dlCategory.Items.Add("Gifts")
- dlCategory.Items.Add("Jewelry")
- dlCategory.Items.Add("China and Crystal")
- dlCategory.Items.Add("Pottery")
- dlCategory.Items.Add("Clothing")
- dlCategory.Items.Add("Food")
- dlCategory.Items.Add("Books, Music, Video")
- dlCategory.Items.Add("Bridal")
- End If
57The SelectedIndex Property of the DropDownList
Web Form Control
- The SelectedIndex property is a zero-based index
indicating which item in the DropDownList is
selected - When no item has been selected from DropDownList,
the SelectedIndex property returns the value -1 - Example
- Select Case dlCategory.SelectedIndex
- Case 0
- lblTitle.Text _
- "Let us help you find best gift!"
- imgTop.ImageUrl "images/21.jpg"
-
58ASPSelect.aspx
59ASPSelect.aspx
- In Design view, drag DropDownList control from
"Web Forms" tab of Toolbox onto Form - Set properties
- ID dlCategory
- Height 25
- Width 155
60ASPSelect.aspxPage_Load
- Private Sub Page_Load( ) Handles MyBase.Load
- If Not IsPostBack Then
- dlCategory.Items.Add("Gifts")
- dlCategory.Items.Add("Jewelry")
- dlCategory.Items.Add("China and Crystal")
- dlCategory.Items.Add("Pottery")
- dlCategory.Items.Add("Clothing")
- dlCategory.Items.Add("Food")
- dlCategory.Items.Add("Books, Music, Video")
- dlCategory.Items.Add("Bridal")
- End If
- End Sub
61ASPSelect.aspxPage_Click
- Enter the following code after the procedure
header - Select Case dlCategory.SelectedIndex
- Case 0
- lblTitle.Text "Let us help you find the best
gift!" - imgTop.ImageUrl "images/21.jpg"
62Panel Web Form Controls
- The Panel control contains other controls and in
the browser HTML creates a ltdivgt block - Another method for setting properties,
i.e.wrapping, absolute positioning, font type,
and scrollbars - A Label control inserted into the Panel, creates
a ltspangt tag in the rendered HTML code - Use the Text property to display the text
- Only allows for flow layout of elements
- Use a Table or an HTML gridlayout
63ASPPanel.aspx
64Literal Web Form Controls
- Used to write content directly to the page, i.e.
- Client-side HTML or text without an ID property
- The runat "server" attribute may not be applied
65Placeholder Web Form Control
- A container to store dynamically added server
controls - Does not produce any visible output without
addition of other controls - The inserted controls are instantiated using
classes and constructors, and are added to the
Controls collection of the Placeholder, i.e. - Dim MyLink As New Hyperlink
- placeholder.Controls.Add(MyLink)
66The "Target" Property of a Hyperlink Control
- Targetwindow or frame in which the Web page will
load (open) - The reserved name windows are
- _blankrenders in a new window without frames
(_new will also render in a new window) - _parentrenders in the immediate frameset or
window parent one level above - _selfrenders in frame with the current focus
- _toprenders in a full window without frames
- Target also may be a named frame or window
67ASPPlaceHolder.aspx
68ASPPlaceHolder.aspx
- In Design view, the Placeholder control already
is inserted onto Form - Set properties
- ID placeholder
69ASPPlaceHolder.aspxPage_Load
- After comment "Create a hyperlink", insert
- Dim MyLink As New Hyperlink
- placeholder.Controls.Add(MyLink)
- With MyLink
- .Text "Click here to see larger image"
- .ForeColor Color.FromName("004040")
- .Font.Name "Trebuchet MS"
- .Font.Size MyLabel.Font.Size.Smaller
- .ID "HLHome"
- .NavigateURL "images/LgButterfly.jpg"
- .Target "_blank"
- End With
70CheckBox Web Form Control
- Unlike a RadioButton, more than one CheckBox can
be Checked - Code can look at the value of each CheckBox, i.e.
- Dim MyMessage As String
- MyMessage "ltbgtYou selectedlt/bgtltbr /gt"
- If CB1.Checked Then
- MyMessage CB1.Text "ltbr /gt"
- End If
71ASPCheckBox.aspx
72ASPCheckBox.aspx
- In Design view, drag CheckBox control from "Web
Forms" tab of Toolbox below last CheckBox on Form - Set properties
- ID CB8
- FontName Trebuchet MS
- FontSize X-Small
- ForeColor 004040
- StylePosition Top?? Left??
- Text Sports in Ireland
73ASPCheckBox.aspxbtnSubmit_Click
- Enter the following code after the procedure
header - Dim MyMessage As String
- MyMessage "ltbgtYou selectedlt/bgtltbr /gt ltbr /gt"
- If CB1.Checked Then
- MyMessage CB1.Text "ltbr /gt"
- End If
74Using Validation Controls (Page 1)
- Compare controls, or part of the controls such as
the data, to a rule - Rule may require that the control contain any
value, or require a specific form of data such as
alphabetical or numeric. - The rule may specify what the data must be
contained within a range of two values. - The rule may be very specific and require
formatting such as uppercase letters and periods.
75Using Validation Controls (Page 2)
- The five validation controls are
- RequiredFieldValidatorMakes sure a form field is
not left blank - RangeValidatorMakes sure a fields value falls
between a given range - CompareValidatorCompares field with other values
or values of other controls using relational
operators - RegularExpressionValidatorEvaluates the data
against a regular expression - CustomValidatorEvaluates data against custom
criteria as defined in a programmer-define
Function
76Using Validation Controls (Page 3)
- Inherits from the BaseValidator class which
inherits from the Label class - Therefore custom error messages are displayed
using Label controls - Validation controls that perform comparisons
inherit directly from BaseCompareValidator base
class
77Using Validation Controls (Page 4)
- Common properties
- Display propertyshows the message
- Dynamicspace for the validation message is
dynamically added to the page only if validation
fails - Staticspace for the validation message is
allocated in the page layout whether there is an
error, or not - Nonevalidation message is never displayed in the
browser - ErrorMessagedisplayed if the value of the
control is in error (extends from Text property
of a Label) - ForeColor property is the color of the error
message (default color is red)
78Using Validation Controls (Page 5)
- Validate method performs validation on associated
input control and updates the IsValid property - Page.IsValid (Boolean) indicates if the controls
on the page are valid after the Page.Validate
method executes - The following checks if the entire form is valid
- Page.Validate()
- If Page.IsValid Then
- Message.Text "Result Valid!"
- Else
- Message.Text "Result Not valid!"
- End If
79Using Validation Controls (Page 6)
- ControlToValidate property specifies the control
to validate - For the RegularExpressionValidator control,
theValidationExpression property compares control
to the regular expression - Regular Expression is a rule that describes the
value using a language that describes one or more
groups of characters
80Using Validation Controls (Page 7)
- The ValidationExpression property
- Built-in regular expressions
- Regular Expression Editor
- Library of sample codes
- Internet E-Mail Address
- \w(-.\w)_at_\w(-.\w)\.\w(-.\w)
- Internet URL
- http//(\w-\.)\w-(/\w- ./?)?
- US Phone Number
- \d3-\d3-\d4
- US Zip Code
- \d5(-\d4)?
81ASPValidateForm.aspx
82Using Validation Controls (Page 8)
- The ValidationSummary control
- Summarizes in one location the error messages
from all validators on a Web page - Properties
- DisplayModeerror messages displays as a list
(List), a bulleted list (BulletList), or a single
paragraph (SingleParagraph) - ShowSummaryshows the entire list
- ShowMessageBoxdisplays errors in an alert box
- HeaderTexta heading message displayed prior to
the error listing
83ASPValidationSummary.aspx
84Binding Web Form Controls to Simple Data
- Bind data to controls
- Assign a DataSource
- Call the DataBind method
- Group together controls
- RadioButtonList controlsgroup RadioButtons
- CheckboxList controlsgroup CheckBox controls
- Set group properties
- RepeatDirection propertydisplayed horizontally
or vertically - RepeatLayout propertyuse table or paragraph tags
85Binding RadioButtonLists to ArrayLists (Page 1)
- An ArrayList is a type of array
- Size dynamically increases as required
- Declared using Dim, the array name, and keyword
New, and ArrayList at the type - Properties and Methods
- Capacitythe number of items the list can hold
- zero-based - counting of items starts at 0 and
not 1 default capacity of 16 - Countdetermines the number of items in the list
- Add methodused to add items to the list
- SelectedItemdetermines which element is selected
86Binding RadioButtonLists to ArrayLists (Page 2)
- Add items to array list and populate
RadioButtonList -
- AR1.Add("Sports in Ireland")
- RBL.DataSource AR1
- RBL.DataBind()
- Retrieve values using SelectedItem property
- Dim strResult As String
- strResult "ltbgtYou selected lt/bgtltbr/gtltbr/gt"
- If RBL.SelectedIndex gt -1 Then
- strResult RBL.SelectedItem.Text
- End If
- lblTopics.Text strResult
87Binding CheckBoxLists to HashTables (Page 1)
- Items are added using a key and value pair
- Declare using keyword Dim, HashTable name,
keyword New, and Hash(n) as type (n is table
size) - Add method adds items to the HashTable.
- Use the key to retrieve the value for a
particular item - You must specify the key and value
- DataValueField is used to create the value
- DataTextField is used to create the text
displayed
88Binding CheckBoxLists to HashTables (Page 2)
- Add a value to a HashTable (key, value)
- Populate the CheckBoxList and bind data to
control - Notice that the key or value may be displayed in
this example, the value isdisplayed - If Not Page.IsPostBack Then
- Dim HS1 As New HashTable(5)
-
- HS1.Add(5, "Sports in Ireland")
- CBL.DataSource HS1
- CBL.DataTextField "Value"
- CBL.DataValueField "Key"
- CBL.DataBind()
- End If
89Binding CheckBoxLists to HashTables (Page 3)
- Loop through each control in the list and read
values using the Boolean Selected property - If CBL.SelectedIndex gt -1 Then
- strResult _
- "You selected the following
categoriesltbr /gt" - Dim i As Integer
- For i 0 To CBL.Items.Count - 1
- If CBL.Items(i).Selected Then
- strResult CBL.Items(i).Text "ltbr
/gt" - End If
- Next
- Else
- strResult "You did not select a category."
- End If
- lblTopics.Text strResult
90ASPRadioButtonList.aspx
91ASPDBCheckboxList.aspx
92(No Transcript)