web forms and server controls
DESCRIPTION
Web Forms and Server Controls. ASP.NET. Using 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: - PowerPoint PPT PresentationTRANSCRIPT
Web Forms and Server Controls
ASP.NET
Using HTML Server ControlsUsing 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.<input type="text" runat="server">
HTML Server ControlsHTML Server Controls
• Similar to HTML Controls but run on the server• Divided into separate classes:– HTMLInputControl
– HTMLContainerControl
HTML Server ControlsHTML Server Controls
HTML Control Client-Side vs. Server-Side Event HandlersHTML 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
The Line Continuation CharacterThe Line Continuation Character
Line continuation charactersLine continuation characters
• When writing code, never press <Enter> 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)
ConcatenationConcatenation
• 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 strStringlblArithmetic.InnerHtml = "11 + 7 = " _
& 11 + 7
– Stores "11 + 7 = 18" into lblArithmetic.InnerHtml
HTML Server Control Event HandlersHTML 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
Starting a New Web FormStarting a New Web Form
1. Select Project from the menu bar
2. 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
3. Type the Name: for the new file – The extension ".aspx" will be added automatically
when the file is created
4. Click the <Open> button
HTMLButton.aspxHTMLButton.aspx
• 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
PropertiesProperties
"Font" Properties in Style Builder"Font" Properties in Style Builder
"Position" Properties in Style Builder"Position" Properties in Style Builder
HTMLButton.aspx (Page 1)HTMLButton.aspx (Page 1)
• Add the image header.jpg– Style property—Position tab
• Top=0; Left=0
• Add the image menu.gif– Style property—Position tab
• Top = 85; Left = 17
• Add the image waterfordgifts.jpg– Style property—Position tab
• Top = 38; Left = 134
The ID and Name PropertiesThe 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
HTMLButton.aspx (Page 2)HTMLButton.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)
– ID—lblTitle
– Name—(we will not be setting this property)
– Style• Font (Family=Trebuchet MS; Size=15)
• Position (Top=243; Left=139; Height=26; Width=365)
– Modify text by typing—"Select the gender of the gift recipient"
HTMLButton.aspx (Page 3)HTMLButton.aspx (Page 3)
• Add a Button from the "HTML" tab in the Toolbox– Set attribute "runat=server"
– ID—btnMale
– Style (Top=278; Left=138; Height=27; Width=89)
– Value—"Male"
• Add a Button from the "HTML" tab in the Toolbox– Set attribute "runat=server"
– ID—btnFemale
– Style (Top=310; Left=138; Height=27; Width=89)
– Value—"Female"
HTMLButton.aspx (Page 4)HTMLButton.aspx (Page 4)
• Add a Label from the "HTML" tab in the Toolbox– Set attribute "runat = server"
– ID—lblGiftIdeasWomen
– Style• Font (Family=Trebuchet MS; Size=12)
• Position (Top=275; Left=235; Height=210; Width=250)
HTMLButton.aspx (Page 5)HTMLButton.aspx (Page 5)
• Label—lblGiftIdeasWomen – Create a bulleted list—
• Make-Up Brush
• Tyrone Bell
• Butterfly
• Balmoral Vase
• Abbey Clock
• Heart-Shaped Ring Holder
• Wellsley Picture
HTMLButton.aspx (Page 6)HTMLButton.aspx (Page 6)
• Add a Label from the "HTML" tab in the Toolbox– Set attribute "runat = server"
– ID—lblGiftIdeasMen
– Style• Font (Family=Trebuchet MS; Size=12)
• Position (Top=275; Left=235; Height=210; Width=250)(Wait to set the Left position until all text is entered)
HTMLButton.aspx (Page 6)HTMLButton.aspx (Page 6)
• Label—lblGiftIdeasMen – Create a bulleted list—
• Golf Ball
• Golf Club
• Male Golfer
• Letter Opener
• Business Card Holder
• Shamrock Paperweight
ProceduresProcedures
• 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
The ServerClick EventThe ServerClick Event
• Occurs when an HTML Server Button (HTML Button with runat=server 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
The InnerHtml PropertyThe 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 <div> tag with inserted
text in the rendering of an HTML document• Example:
lblTitle.InnerHtml = "<b>We have lots of gift ideas for men.</b>"
• The InnerText property (similar to InnerHtml) may only contain text elements, not formatting tags
HTMLButton.aspx—Page_LoadHTMLButton.aspx—Page_Load
Private Sub Page_Load( … ) Handles MyBase.Load
lblGiftIdeasMen.Visible = FalselblGiftIdeasWomen.Visible = False
End Sub
HTMLButton.aspx—btnMale_ServerClickHTMLButton.aspx—btnMale_ServerClick
Private Sub btnMale_ServerClick( … ) Handles btnMale.ServerClick
lblTitle.InnerHtml = "<b>We have lots of gift ideas for men.</b>"
lblGiftIdeasMen.Visible = TruelblGiftIdeasWomen.Visible = False
End Sub
HTMLButton.aspx—btnFemale_ServerClickHTMLButton.aspx—btnFemale_ServerClick
Private Sub btnFemale_ServerClick( … ) Handles btnFemale.ServerClick
lblTitle.InnerHtml = "<b>We have lots of gift ideas for women.</b>"
lblGiftIdeasWomen.Visible = TruelblGiftIdeasMen.Visible = False
End Sub
• 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.<input type="image">
HTML Image Button (Page 1)HTML Image Button (Page 1)
• The src attribute names the path and filename of the image file displayed on the Button, i.e.<input type="image" src="male.gif">
• No value attribute is required since image replaces the text on the button
• All other functioning is the same as the HTML Button control
HTML Image Button (Page 2)HTML Image Button (Page 2)
HTMLImageButton.aspxHTMLImageButton.aspx
HTMLImageButton.aspxHTMLImageButton.aspx
• btnMale<input type="image" src="images/male.gif">
• btnFemale<input type="image" src="images/female.gif">
The Value Property for a Text FieldThe 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
HTML Button ControlsHTML Button Controls
• Buttons usually call procedures when clicked
• Available are Submit, Reset, and the general Button
• Member of the HTMLInputControl Class, i.e.– <input type = "Submit">
– <input type = "Reset"> • Resets Form to default so runat="server" not applicable
– <input type = "Button">
• Default procedure for HTML Buttons is ServerClick event, i.e Private Sub btnSubmit_ServerClick( … ) Handles btnSubmit.ServerClick
HTMLInputButton.aspxHTMLInputButton.aspx
HTMLInputButton.aspx (Page 1)HTMLInputButton.aspx (Page 1)
• Add Text Field from "HTML" tab in Toolbox– Set attribute "runat = server"
– ID—txtUsername
– Style (Top=280; Left=145)
• Add Password Field from "HTML" tab in Toolbox– Set attribute "runat = server"
– ID—txtPassword
– Style (Top=310; Left=145)
HTMLInputButton.aspx (Page 2)HTMLInputButton.aspx (Page 2)
• Add Submit Button from "HTML" tab in Toolbox– Set attribute "runat = server"
– ID—btnSubmit
– Style (Top=345; Left=150)
– Value—"Sign In"
• Add Reset Button from "HTML" tab in Toolbox– ID—btnReset
– Style (Top=345; Left=230)
HTMLInputButton.aspx (Page 3)HTMLInputButton.aspx (Page 3)
• Add a Button from "HTML" tab in Toolbox– Set attribute "runat = server"
– ID—btnHelp
– Style (Top=345; Left=450)
– Value—"Help"
HTMLInputButton.aspx—Page_LoadHTMLInputButton.aspx—Page_Load
Private Sub Page_Load( … ) Handles MyBase.Load
lblTitle.InnerText = "Please log into our Customer Support Area"
lblHelp.Visible = FalsebtnHelp.Visible = True
End Sub
HTMLInputButton.aspx—Page_Load (Page 1)
HTMLInputButton.aspx—Page_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"
HTMLInputButton.aspx—Page_Load (Page 2)
HTMLInputButton.aspx—Page_Load (Page 2)
ElselblTitle.InnerText = "Please click on the Help button for help!"txtUsername.Text = ""txtPassword.Text = ""btnHelp.Visible = True
End If
End Sub
HTMLInputButton.aspx—btnHelp_ServerClickHTMLInputButton.aspx—btnHelp_ServerClick
Private Sub btnHelp_Server_Click( … ) Handles btnHelp.ServerClick
lblTitle.InnerText = "Please log into our Customer Support Area"
lblHelp.Visible = TruebtnHelp.Visible = False
End Sub
HTML Radio Button, Dropdown List, and Hyperlink Server ControlsHTML 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
The Checked Property of RadioButtonsThe 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
The RadioButton HTML Server ControlThe RadioButton HTML Server Control
Dropdown HTML Server ControlDropdown HTML Server Control
• Created with the HTML <select> tag– <option> 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
The IsPostback Page PropertyThe 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
The IsPostback Page Property and the Add Method of the Select ControlThe 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
Dropdown HTML Server ControlDropdown HTML Server Control
Anchors (Hyperlinks)Anchors (Hyperlinks)
• Creates a hyperlink to another Web document• Example:
<a href="http://www.tarastore.com" id="AMale" name="AMale" runat="server">Men</a>
• The HRef property can change the URL for an <a> tag in the code behind the page, i.e.AMale.HRef = "GiftsForMen.aspx"
AFemale.HRef = "GiftsForWomen.aspx"
AHome.HRef = "http://www.tarastore.com"
The Hyperlink ControlThe Hyperlink Control
Using ASP.NET Web Form ControlsUsing 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
Syntax Differences for Assigning Text to a Label in Web Form ControlsSyntax 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
Syntax Differences for Assigning Color Values in Web Form ControlsSyntax 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
The Color.FromName() MethodThe 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("SystemDefinedColor")
• Examples:MyControl.BackColor = Color.FromName("Red")
MyControl.BackColor = Color.FromName("MenuText")
Syntax Differences for Assigning Image Properties in Web Form ControlsSyntax Differences for Assigning Image Properties in Web Form Controls
• Image control class produces an <img> tag• Properties of the Image control are different from
HTML server controls as follows:– ImageURL—path to the image and filename; creates
the src property
– AlternateText—displays text when the image is not available; creates the alt property
– ImageAlign—provides the image alignment; creates the align property
The Add Method for the DropDownList Web Form ControlThe Add Method for the DropDownList Web Form Control• Adds options (<option> 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
The SelectedIndex Property of the DropDownList Web Form ControlThe 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"
…
ASPSelect.aspxASPSelect.aspx
ASPSelect.aspxASPSelect.aspx
• In Design view, drag DropDownList control from "Web Forms" tab of Toolbox onto Form
• Set properties:– ID dlCategory
– Height 25
– Width 155
ASPSelect.aspx—Page_LoadASPSelect.aspx—Page_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
ASPSelect.aspx—Page_ClickASPSelect.aspx—Page_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"
Panel Web Form ControlsPanel Web Form Controls
• The Panel control contains other controls and in the browser HTML creates a <div> block
• Another method for setting properties, i.e.wrapping, absolute positioning, font type, and scrollbars
• A Label control inserted into the Panel, creates a <span> 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
ASPPanel.aspxASPPanel.aspx
The PanelThe Panel
Literal Web Form ControlsLiteral 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
Placeholder Web Form ControlPlaceholder 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)
The "Target" Property of a Hyperlink ControlThe "Target" Property of a Hyperlink Control
• Target—window or frame in which the Web page will load (open)– The reserved name windows are:
• _blank—renders in a new window without frames (_new will also render in a new window)
• _parent—renders in the immediate frameset or window parent one level above
• _self—renders in frame with the current focus
• _top—renders in a full window without frames
– Target also may be a named frame or window
ASPPlaceHolder.aspxASPPlaceHolder.aspx
ASPPlaceHolder.aspxASPPlaceHolder.aspx
• In Design view, the Placeholder control already is inserted onto Form
• Set properties:– ID placeholder
ASPPlaceHolder.aspx—Page_LoadASPPlaceHolder.aspx—Page_Load
• After comment "Create a hyperlink", insert:Dim MyLink As New Hyperlinkplaceholder.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
CheckBox Web Form ControlCheckBox 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 = "<b>You selected:</b><br />"
If CB1.Checked Then
MyMessage &= CB1.Text & "<br />"
End If
ASPCheckBox.aspxASPCheckBox.aspx
ASPCheckBox.aspxASPCheckBox.aspx
• In Design view, drag CheckBox control from "Web Forms" tab of Toolbox below last CheckBox on Form
• Set properties:– ID CB8
– Font—Name Trebuchet MS
– Font—Size X-Small
– ForeColor #004040
– Style—Position Top=??; Left=??
– Text Sports in Ireland
ASPCheckBox.aspx—btnSubmit_ClickASPCheckBox.aspx—btnSubmit_Click
• Enter the following code after the procedure header:Dim MyMessage As String
MyMessage = "<b>You selected:</b><br /> <br />"
If CB1.Checked Then
MyMessage &= CB1.Text & "<br />"
End If
Using Validation Controls (Page 1)Using 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.
Using Validation Controls (Page 2)Using Validation Controls (Page 2)
• The five validation controls are:– RequiredFieldValidator—Makes sure a form field is not
left blank
– RangeValidator—Makes sure a field’s value falls between a given range
– CompareValidator—Compares field with other values or values of other controls using relational operators
– RegularExpressionValidator—Evaluates the data against a regular expression
– CustomValidator—Evaluates data against custom criteria as defined in a programmer-define Function
Using Validation Controls (Page 3)Using 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
Using Validation Controls (Page 4)Using Validation Controls (Page 4)
• Common properties– Display property—shows the message
• Dynamic—space for the validation message is dynamically added to the page only if validation fails
• Static—space for the validation message is allocated in the page layout whether there is an error, or not
• None—validation message is never displayed in the browser
– ErrorMessage—displayed 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)
Using Validation Controls (Page 5)Using 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
Using Validation Controls (Page 6)Using 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
Using Validation Controls (Page 7)Using Validation Controls (Page 7)
• The ValidationExpression property– Built-in regular expressions – Regular Expression Editor – Library of sample codes
Internet E-Mail Address \w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*Internet URL http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?US Phone Number \d{3}-\d{3}-\d{4}US Zip Code \d{5}(-\d{4})?
ASPValidateForm.aspxASPValidateForm.aspx
Using Validation Controls (Page 8)Using Validation Controls (Page 8)
• The ValidationSummary control– Summarizes in one location the error messages from
all validators on a Web page
– Properties:• DisplayMode—error messages displays as a list
(List), a bulleted list (BulletList), or a single paragraph (SingleParagraph)
• ShowSummary—shows the entire list
• ShowMessageBox—displays errors in an alert box
• HeaderText—a heading message displayed prior to the error listing
ASPValidationSummary.aspxASPValidationSummary.aspx
Binding Web Form Controls to Simple DataBinding Web Form Controls to Simple Data
• Bind data to controls
– Assign a DataSource
– Call the DataBind method
• Group together controls
– RadioButtonList controls—group RadioButtons
– CheckboxList controls—group CheckBox controls
• Set group properties
– RepeatDirection property—displayed horizontally or vertically
– RepeatLayout property—use table or paragraph tags
Binding RadioButtonLists to ArrayLists (Page 1)
Binding 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– Capacity—the number of items the list can hold
• zero-based - counting of items starts at 0 and not 1; default capacity of 16
– Count—determines the number of items in the list– Add method—used to add items to the list– SelectedItem—determines which element is selected
Binding RadioButtonLists to ArrayLists (Page 2)
Binding 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 propertyDim strResult As String
strResult = "<b>You selected: </b><br/><br/>"
If RBL.SelectedIndex > -1 Then
strResult += RBL.SelectedItem.Text
End If
lblTopics.Text = strResult
Binding CheckBoxLists to HashTables (Page 1)
Binding 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
Binding CheckBoxLists to HashTables (Page 2)
Binding 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 = HS1CBL.DataTextField = "Value"CBL.DataValueField = "Key"CBL.DataBind()
End If
Binding CheckBoxLists to HashTables (Page 3)
Binding CheckBoxLists to HashTables (Page 3)
• Loop through each control in the list and read values using the Boolean Selected property: If CBL.SelectedIndex > -1 Then strResult = _ "You selected the following categories:<br />" Dim i As Integer For i = 0 To CBL.Items.Count - 1 If CBL.Items(i).Selected Then strResult += CBL.Items(i).Text + "<br />" End If NextElse strResult = "You did not select a category."End IflblTopics.Text = strResult
ASPRadioButtonList.aspxASPRadioButtonList.aspx
ASPDBCheckboxList.aspxASPDBCheckboxList.aspx