Chapter 5 Handling User Input and Events In This Chapter ᮣ Gathering data and pushing buttons ᮣ Using drop-down lists and list boxes ᮣ Presenting multiple choices ᮣ Sending data with forms E ven in science fiction, you can’t escape manual data input. During an attack, spaceship navigators converse comfortably with computers, use console controls, and type quadrant coordinates. This chapter looks at some key ASP.NET controls, forms, and events. Some concepts are easier to understand if you know a programming language; however, there’s no reason you can’t pick this stuff up while you go along. Accepting Data in a TextBox Control The ASP.NET TextBox control accepts keyboard input. As shown in Figure 5-1, the control appears as (depending on the TextMode property) a normal text box, a password variation, or a multiline version. See Chapter 15 for enhancements to the TextBox control such as a prompting effect and masked input. 09_195925 ch05.qxp 1/11/08 9:48 PM Page 61 Creating a regular text box You add an ASP.NET TextBox to your page by dragging it from the Standard group of the Toolbox and dropping it on the page in Design view or Source view. By default, a text box accepts one line of text. You can limit the number of characters the user can enter by opening the properties page (F4) and setting the MaxLength value. Accepting passwords (somewhat) securely When you set the TextMode property to Password, the text box hides the password from onlookers by substituting asterisks or bullets. In Figure 5-1, the second text box from the top shows the effect in the browser. Capturing text with MultiLine mode When you set the TextMode property to MultiLine, ASP.NET generates an HTML Textarea control. As shown in the bottom text box (refer to Figure 5-1), you set the number of visible lines with the value of the Rows property. You can’t restrict the number of characters the user types into the TextBox control in MultiLine mode. See Chapter 19 for how to handle this. Figure 5-1: The TextBox control in single line, password, and multiline versions. 62 Part I: Getting to Know ASP.NET and Visual Web Developer 09_195925 ch05.qxp 1/11/08 9:48 PM Page 62 Allowing creativity with rich text An ASP.NET TextBox actively discourages rich text such as italic and bold. If you enter the following markup, ASP.NET complains about a “potentially dangerous” value. I’m <i>entering</i> markup the <b>hard</b> way. For details on dealing with the built-in protection, see Chapter 19. Text editor add-ons give you word processor-like capabilities in a text box. You can download the free Rich Text Editor (RTE) from www.codeplex. com/rte. Another popular control is FCKeditor.Net. (The name’s not rude! It’s composed of the initials of the developer, Frederico Caldeira Knabben.) Look for FCKeditor.Net at http://www.fckeditor.net/. Pushing for Choices with the RadioButton Control ASP.NET RadioButton controls work as a team; however, only one player can be “on” at a time. Figure 5-2 shows three RadioButton controls acting as a group. All three share the same GroupName value. When a user clicks the Submit button, an event handler subroutine (refer to the “Bingo! And events” sidebar) executes and reports which radio button is checked. Follow these steps to create a group of RadioButton controls and display which one a user has pushed: 1. From the Toolbox, add to the ASP.NET page three RadioButton controls, a Button control (Button1) and a Label control (lblText). Figure 5-2: You can select only one radio button in a group at a time. 63 Chapter 5: Handling User Input and Events 09_195925 ch05.qxp 1/11/08 9:48 PM Page 63 2. Set the RadioButton control’s ID values to radTo, radMtl, and radVcr; the Text properties to Toronto, Montreal, and Vancouver; and the GroupName properties to cities. 3. Double-click the button to create a handler for the Button control’s Click event and use the following code inside the Click event handler subroutine: If radTo.Checked Then lblText.Text = “Choice: “ & radTo.Text ElseIf radMtl.Checked Then lblText.Text = “Choice: “ & radMtl.Text ElseIf radVcr.Checked Then lblText.Text = “Choice: “ & radVcr.Text Else lblText.Text = “No choice made.” End If The code tests whether the Toronto radio button’s Checked property is True (that is, whether the button is pushed). If so, it assigns a text value to the Label and the work is done. If the first button’s Checked property is False, the logic continues to the ElseIf keyword (it drops through in geekspeak) and tests the Montreal button, and so on. If the code reaches the Else part with- out finding a button that’s pushed, it reports the failure to make a choice. Collecting RadioButtonList Controls The ASP.NET RadioButtonList control allows you to create many radio buttons with one control. In this section, you build a survey form, work with the Collection editor, and hook up an event handler. Creating the basic page interface The survey interface consists of a prompt, a set of radio buttons as choices, a button, and an area for a response. Follow these steps to create the basic interface. 1. In the ASP.NET page Design view, add a Label control with the ID lblPrompt and set the Text value to Rate Your Fear of the Borg. 2. From the Toolbox, drop a RadioButtonList control on the design surface and set its ID to rblBorg. 3. Add another Label with the ID lblResponse and a Button control. 64 Part I: Getting to Know ASP.NET and Visual Web Developer 09_195925 ch05.qxp 1/11/08 9:48 PM Page 64 You add questions to the survey’s user interface in the next section. Adding list items with a Collection editor You can add items to a RadioButtonList control at design-time by using a designer called Collection editor. Collection editors mostly work alike, regardless of the collection type. Follow these steps to design options for a questionnaire: 1. Click the RadioButtonList control’s Smart Tag arrow, and from the menu, choose Edit Items. The ListItem Collection editor opens. 2. Click the Add button (on the lower-left side). As shown in Figure 5-3, ListItem appears in the Members area on the left. Notice the 0 preceding the ListItem. The first item in a .NET collection is numbered zero. See the “The Borg and .NET collections” sidebar for more. 3. In the properties area on the right, set the Text value to Plenty and the Value property to 3. 65 Chapter 5: Handling User Input and Events Bingo! And events Think of a game of Bingo where players are filling their cards with markers. Suddenly, a hand shoots into the air and a player shouts, “Bingo!” That’s an event . Consider the player with the filled card as an ASP.NET control that raises an event called Bingo. The game’s assistants are event handlers who intervene when someone claims to have a full card. The following pseudo-code (unusable code that represents a programming idea) shows how you might handle a Bingo event. Protected Sub BingoPlayer1_Bingo _ (ByVal player As Object, _ ByVal e As _ System.BingoEventArgs) Dim blnIsValidBingo as _ boolean Dim walker as New _ Assistant() blnIsValidBingo = _ walker.Verify(e.Card) End Sub In ASP.NET, when someone clicks a button, the button doesn’t shout, “Bingo!” It raises a Click event. If no code is on the page to handle the event, nothing much happens. However, if a des- ignated event handler for the mouse click is on the page, the handler subroutine goes into action. That action could be changing a label’s color from blue to red or sending the accumulated data to a database. 09_195925 ch05.qxp 1/11/08 9:48 PM Page 65 4. Add three more items to the collection and set their Text and Value properties as follows: Text Value Somewhat 2 Whatever 1 Zilch 0 5. Click OK to close the ListItem Collection editor. As shown in Figure 5-4, the user interface elements are in place. In the next section, you add some logic and interactivity. Capturing the survey choice So far, the survey form is just a (Vulcan-like) interface with no logic. Follow these steps to capture the user’s choice and show that choice in the browser: Figure 5-4: The opinion survey at design-time. Figure 5-3: A collection editor allows you to add, remove, and change individual items within a collection. 66 Part I: Getting to Know ASP.NET and Visual Web Developer 09_195925 ch05.qxp 1/11/08 9:48 PM Page 66 1. In Design view, double-click an empty part of the page to create an event handler for the Page object’s Load event. The IDE automatically inserts the following event handler code (formatted differently here) into the page: Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) End Sub 2. In the line above the End Sub keywords, insert the following code: lblResponse.Text = rblBorg.SelectedValue When you run the page and click the button, the click causes the page to submit its data (a postback). A Page Load event occurs (fires in geekspeak) just before ASP.NET completes construction of the page. The Load event handler code looks at the RadioButtonList (rblBorg) and extracts whatever is in its SelectedValue property. The code assigns the SelectedValue value as the Text property of the Label so the user can see the results. Checking CheckBox and CheckBoxList Controls The CheckBox and CheckBoxList controls permit multiple choices. Unlike radio buttons, you can switch a check box on or off without affecting any of the other check boxes on the page. 67 Chapter 5: Handling User Input and Events The Borg and .NET collections Fans of the science fiction series Star Trek know all about the Borg, those gray technoinvaders who wander around muttering, “Resistance is futile.” A .NET collection resembles The Borg Collective in that items within a collection are similar but have distinguishing characteristics (such as different machine parts). You deal with members of a collection as a set or group. Your code can examine each member one by one from first to last. In geekspeak, the action of flipping through the set is iterating through a col- lection. The For Each loop is frequently used to give collections an efficient once-over. Like you can with cyborgs, you can refer to members of a .NET collection by an index number that reflects their position within the collective, er collection. One notable thing about collections in .NET is that their numbering is zero-based . That means the index number of the first item is 0. The index number of the second item is 1. Imagine the chaos within the Borg Collective when you infuse it with the knowledge that Seven of Nine is actually a Six of Nine in .NET’s zero-based counting. 09_195925 ch05.qxp 1/11/08 9:48 PM Page 67 Creating an arbitrary number of check boxes The CheckBoxList control (like the RadioButtonList) is well suited to database applications where the number of items varies. In this section, you hook up (bind in geekspeak) a CheckBoxList to data. To create a data-driven CheckBoxList, follow these steps: 1. From the Toolbox, drop a CheckBoxList control, Button control, and Label control on a Web form. 2. In the Properties window for the CheckBoxList control, set the RepeatColumns value to 2 and set the RepeatDirection value to Horizontal. These settings display the data in a two-column table. 3. Double-click a blank area of the page to create a handler for the Page object’s Load event and insert the following code: If Not IsPostBack Then Dim arrlGames As New ArrayList arrlGames.Add(“Scrabble”) arrlGames.Add(“Crosswords”) arrlGames.Add(“WonderWord”) arrlGames.Add(“Sudoku”) arrlGames.Sort() CheckBoxList1.DataSource = arrlGames CheckBoxList1.DataBind() End If The preceding adds items to a list, sorts the list, and tells the CheckBox to use the list for its data. Notice that the whole routine is wrapped in an If End If sequence that tests the IsPostBack property. You want to fill the data only when the page first loads, not on each postback. Otherwise, you get duplicate games. For a discussion of the logic used in the keyword Not, see Chapter 14. 4. Switch to Design view, and double-click the Button to create a handler for its Click event and add the following code in the line above the End Sub: Dim strSel As String = “” For Each chbx As ListItem In CheckBoxList1.Items If chbx.Selected Then strSel = strSel & chbx.Text & “<br />” End If Next Label1.Text = strSel 68 Part I: Getting to Know ASP.NET and Visual Web Developer 09_195925 ch05.qxp 1/11/08 9:48 PM Page 68 The preceding uses a For Each loop to look through the collection of TextBox items and create a string of text. Run the page, check some games, and click the button to see what’s selected. For Each and the collection The sidebar, “The Borg and .NET collections,” refers to the For Each loop that you see in action inside the Button1_Click routine. Here’s the line of code from Step 4 that begins the sequence: For Each chbx As ListItem In CheckBoxList1.Items It helps to parse the line starting at the far right to put the code into English. It says, “Here’s a collection of items. You know that each of these items is a ListItem type. Let the variable chbx (at least for now) represent the first ListItem in this collection. Now move to the next line of code.” With chbx representing the first item within the collection, you can examine the item’s Selected property. If the CheckBox has been checked, the Selected property’s value is True and you therefore proceed inside the If statement to find the following line: strSel = strSel & chbx.Text & “<br />” Again, it helps to look to the right side of the code to describe what’s happen- ing. Here, you peer into the value of the Text property for the CheckBox (for example, “Crosswords”). You take that text, attach an HTML carriage return, and add this onto whatever is in the strSel variable. (On the first loop, nothing is in strSel.) After exiting the End If statement, you run into the keyword Next. Next says, “Okay folks, we’re done with that member of the collection, let’s do the same thing with the next one.” The sequence repeats until the For Each Next combination announces, “It’s quittin’ time ‘cause we’re fresh outta check boxes.” Using the DropDownList Control The ASP.NET DropDownList control displays a large number of items in a very little space because it drops down to display its list when the user clicks the arrow. (Sometimes, it rises upward to display the items.) 69 Chapter 5: Handling User Input and Events 09_195925 ch05.qxp 1/11/08 9:48 PM Page 69 At design-time, you can add static items to the DropDownList control by using the ListItem collection editor. At runtime, you can fill a DropDownList control with almost any data as long as you can get it into a simple list. To put color names in a DropDownList control, follow these steps: 1. From the Toolbox, add a DropDownList, Label, and Panel control to an ASP.NET page. 2. Select the DropDownList control and set its AutoPostBack property to True. AutoPostBack causes a page to submit its data to the Web server (and cause a postback) when the user merely selects a different item. No Submit button is required. 3. Double-click the DropDownList control to create its default event handler and use the following code inside the SelectedIndexChanged subroutine: Dim strClr As String strClr = DropDownList1.SelectedValue Dim objColor As System.Drawing.Color objColor = _ System.Drawing.ColorTranslator.FromHtml(strClr) Panel1.BackColor = objColor Label1.Text = strClr 4. Return to Design view and double-click a blank area of the surface to create an event handler for the Page object’s Load event and then add the following code above the final line of the Page_Load routine: If Not IsPostBack Then Dim enClr As System.Drawing.KnownColor Dim clrs As New _ System.Collections.Generic.List _ (Of System.Drawing.KnownColor) clrs.AddRange(System.Enum.GetValues _ (enClr.GetType())) DropDownList1.DataSource = clrs DropDownList1.DataBind() Panel1.Height = Unit.Pixel(200) Panel1.Width = Unit.Pixel(300) End If When you browse to the page, the drop-down list fills with dozens of color names. Make a selection. The name and its color swatch appear on the screen. Walk through the code to see how it works. 70 Part I: Getting to Know ASP.NET and Visual Web Developer 09_195925 ch05.qxp 1/11/08 9:48 PM Page 70 [...]... “http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”> 3 ➝9 Untitled Page ➝6 ➝7 ➝11 ➝12 ➝14 ➝16 ➝17 ➝22 ➝1 The line is a Page directive It provides important information to ASP.NET. .. server-side form In Design view, the development environment knows this rule and inserts controls in the right place To understand forms, it helps to analyze the behind-the-scenes markup Listing 5-1 shows the code that appears in Source view when you add a single page called myform.aspx to your project Listing 5-1: The myform.aspx Source Code ➝1 . their names. 72 Part I: Getting to Know ASP. NET and Visual Web Developer 09_1 959 25 ch 05. qxp 1/11/08 9:48 PM Page 72 Understanding ASP. NET Forms In ASP. NET, server controls, such as the TextBox. works. 70 Part I: Getting to Know ASP. NET and Visual Web Developer 09_1 959 25 ch 05. qxp 1/11/08 9:48 PM Page 70 Understanding namespaces The .NET system (on which ASP. NET is based) is thousands of. myform.aspx to your project. Listing 5- 1: The myform.aspx Source Code <%@ Page Language=”VB” %> ➝ 1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ➝ 3 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd”> ➝ 6 <script