Evjen c03.tex V2 - 01/28/2008 12:33pm Page 134 Chapter 3: ASP.NET Web Server Controls Figure 3-17 When the RepeatDirection property is set to Horizontal , you get the check box items laid out in a horizontal fashion: CheckBox1 CheckBox2 CheckBox3 CheckBox4 CheckBox5 CheckBox6 CheckBox7 CheckBox8 CheckBox9 CheckBox10 CheckBox11 CheckBox12 The RadioButton Server Control The R adioButton server control is quite similar to the CheckBox server control. It places a radio button on your Web page. Unlike a check box, however, a single radio button on a form does not make much sense. Radio buttons are generally form elements that require at least two options. A typical set of RadioButton controls on a page takes the following construction: < asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="Set1" / > < asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="Set1"/ > Figure 3-18 shows the result. Figure 3-18 134 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 135 Chapter 3: ASP.NET Web Server Controls When you look at the code for the RadioButton control, note the standard Text property that places the text next to the radio button on the Web form. The more important property here is GroupName ,which can be set in one of the RadioButton controls to match what it is set to in the other. This enables the radio buttons on the Web form to work together for the end user. How do they work together? Well, when one of the radio buttons on the form is checked, the circle associated with the item selected appears filled in. Any other filled-in circle from the same group in the collection is removed, ensuring that only one of the radio buttons in the collection is selected. Listing 3-15 shows an example of using the RadioButton control. Listing 3-15: Using the RadioButton server control VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub RadioButton_CheckedChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) If RadioButton1.Checked = True Then Response.Write("You selected Visual Basic") Else Response.Write("You selected C#") End If End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > RadioButton control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:RadioButton ID="RadioButton1" runat="server" Text="Visual Basic" GroupName="LanguageChoice" OnCheckedChanged="RadioButton_CheckedChanged" AutoPostBack="True" / > < asp:RadioButton ID="RadioButton2" runat="server" Text="C#" GroupName="LanguageChoice" OnCheckedChanged="RadioButton_CheckedChanged" AutoPostBack="True" / > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < script runat="server" > protected void RadioButton_CheckedChanged(object sender, EventArgs e) { if (RadioButton1.Checked == true) { Response.Write("You selected Visual Basic"); Continued 135 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 136 Chapter 3: ASP.NET Web Server Controls } else { Response.Write("You selected C#"); } } < /script > Like the CheckBox, the RadioButton control has a CheckedChanged event that puts an OnCheckedChanged attribute in the control. The attribute’s value points to the server-side event that is fired when a selection is made using o ne of the two radio buttons on the form. Remember that the AutoPostBack property needs to be set to True for this to work correctly. Figure 3-19 shows the results. Figure 3-19 One advantage that the RadioButton control has over a RadioButtonList control (which is discussed next) is that it enables you to place other items (text, controls, or images) between the RadioButton controls themselves. RadioButtonList, however, is always a straight list of radio buttons on your Web page. The RadioButtonList Ser ver Control The RadioButtonList server control lets you display a collection of radio buttons on a Web page. The RadioButtonList control is quite similar to the CheckBoxList and other list controls in that it allows you to iterate through to see what the user selected, to make counts, or to perform other actions. A typical RadioButtonList control is written to the page in the following manner: < asp:RadioButtonList ID="RadioButtonList1" runat="server" > < asp:ListItem Selected="True" > English < /asp:ListItem > < asp:ListItem > Russian < /asp:ListItem > < asp:ListItem > Finnish < /asp:ListItem > < asp:ListItem > Swedish < /asp:ListItem > < /asp:RadioButtonList > 136 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 137 Chapter 3: ASP.NET Web Server Controls Like the other list controls, this one uses instances of the ListItem object for each of the items contained in the collection. From the example, you can see that if the Selected property is set to True ,oneofthe ListItem objects is selected by default when the page is generated for the first time. This produces the results shown in Figure 3-20. Figure 3-20 The Selected property is not required, but it is a good idea if you want the end user to make some sort of selection from this collection. Using it makes it impossible to leave the collection blank. You can use the RadioButtonList control to check for the value selected by the end user in any of your page methods. Listing 3-16 shows a Button1_Click event that pushes out the value selected in the RadioButtonList collection. Listing 3-16: Checking the value of the item selected from a RadioButtonList control VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Label1.Text = "You selected: " & _ RadioButtonList1.SelectedItem.ToString() End Sub < /script > C# < %@ Page Language="C#" % > < script runat="server" > protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "You selected: " + RadioButtonList1.SelectedItem.ToString(); } < /script > This bit of code gets at the item selected from the RadioButtonList collection of ListItem objects. It is how you work with other list controls that are provided in ASP.NET. The RadioButtonList also affords you access to the RepeatColumns and RepeatDirection properties (these were explained in the CheckBoxList section). You can bind this control to items that come from any o f the data so urce controls so that you can dynamically create radio button lists on your Web pages. 137 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 138 Chapter 3: ASP.NET Web Server Controls Image Ser ver Control The Image server control enables you to work with the images that appear on your Web page from the server-side code. It is a simple server control, but it can give you the power to determine how your images are displayed on the browser screen. A typical Image control is constructed in the following manner: < asp:Image ID="Image1" runat="server" ImageUrl="~/MyImage1.gif" / > The important property here is ImageUrl . It points to the file location of the image. In this case, the location is specified as the MyImage.gif file. Listing 3-17 shows an example of how to dynamically change the ImageUrl property. Listing 3-17: Changing the ImageUrl property dynamically VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Image1.ImageUrl = "~/MyImage2.gif" End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > Image control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:Image ID="Image1" runat="server" ImageUrl="~/MyImage1.gif" / >< br / > < br / > < asp:Button ID="Button1" runat="server" Text="Change Image" OnClick="Button1_Click" / > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < script runat="server" > protected void Button1_Click(object sender, EventArgs e) { Image1.ImageUrl = "~/MyImage2.gif"; } < /script > In this example, an image ( MyImage1.gif ) is shown in the browser when the page is loaded for the first time. When the end user clicks the button on the page, a new image ( MyImage2.gif )isloadedinthe postback process. 138 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 139 Chapter 3: ASP.NET Web Server Controls Special circumstances can prevent end users from viewing an image that is part of your Web page. They might be physically unable to see the image, or they might be using a text-only browser. In these cases, their browsers look for the < img > element’s longdesc attribute that points to a file containing a long description of the image that is displayed. For these cases, the Image server control includes a DescriptionUrl attribute. The value assigned to it is a text file that contains a thorough description of the image with which it is associated. Here is how to use it: < asp:Image ID="Image1" runat="server" DescriptionUrl="~/Image01.txt" / > This code produces the following results in the browser: < img id="Image1" src="INETA.jpg" longdesc="Image01.txt" alt="" / > Remember that the image does not support the user clicking the image. If you want to program events based on button clicks, use the ImageButton server control discussed earlier in this chapter. Table Ser ver Control Tables are one of the Web page’s more common elements because the HTML < table > element is one possible format utilized for controlling the layout of your Web page (CSS being the other). The typical construction of the Table server control is as follows: < asp:Table ID="Table1" runat="server" > < asp:TableRow Runat="server" Font-Bold="True" ForeColor="Black" BackColor="Silver" > < asp:TableHeaderCell > First Name < /asp:TableHeaderCell > < asp:TableHeaderCell > Last Name < /asp:TableHeaderCell > < /asp:TableRow > < asp:TableRow > < asp:TableCell > Bill < /asp:TableCell > < asp:TableCell > Evjen < /asp:TableCell > < /asp:TableRow > < asp:TableRow > < asp:TableCell > Devin < /asp:TableCell > < asp:TableCell > Rader < /asp:TableCell > < /asp:TableRow > < /asp:Table > This produces the simple three-rowed table shown in Figure 3-21. Figure 3-21 You can do a lot with the Table server control. For example, you can dynamically add rows to the table, as illustrated in Listing 3-18. 139 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 140 Chapter 3: ASP.NET Web Server Controls Listing 3-18: Dynamically adding rows to the table VB Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Dim tr As New TableRow() Dim fname As New TableCell() fname.Text = "Scott" tr.Cells.Add(fname) Dim lname As New TableCell() lname.Text = "Hanselman" tr.Cells.Add(lname) Table1.Rows.Add(tr) End Sub C# protected void Page_Load(object sender, EventArgs e) { TableRow tr = new TableRow(); TableCell fname = new TableCell(); fname.Text = "Scott"; tr.Cells.Add(fname); TableCell lname = new TableCell(); lname.Text = "Hanselman"; tr.Cells.Add(lname); Table1.Rows.Add(tr); } To add a single row to a Table control, you have to create new instances of the TableRow and TableCell objects. You create the TableCell objects first and then place them within a TableRow object that is added to a Table object. The Table server control is enhanced with some extra features. One of the simpler new features is the capability to add captions to the tables on Web pages. Figure 3-22 shows a table with a caption. To give your table a caption, simply use the new Caption attribute in the Table control, as illustrated in Listing 3-19. Listing 3-19: Using the new Caption attribute < %@ Page Language="VB" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > Table Server Control < /title > < /head > 140 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 141 Chapter 3: ASP.NET Web Server Controls < body > < form id="form1" runat="server" > < asp:Table ID="Table1" runat="server" Caption=" < b > Table 1: < /b > This is an example of a caption above a table." BackColor="Gainsboro" > < asp:TableRow ID="Tablerow1" Runat=server > < asp:TableCell ID="Tablecell1" Runat="server" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis vel justo. Aliquam adipiscing. In mattis volutpat urna. Donec adipiscing, nisl eget dictum egestas, felis nulla ornare ligula, ut bibendum pede augue eu augue. Sed vel risus nec urna pharetra imperdiet. Aenean semper. Sed ullamcorper auctor sapien. Suspendisse luctus. Ut ac nibh. Nam lorem. Aliquam dictum aliquam purus. < /asp:TableCell > < /asp:TableRow > < /asp:Table > < /form > < /body > < /html > Figure 3-22 By default, the caption is placed at the top center of the table, but you can control where it is placed by using another new attribute — CaptionAlign . Its possible settings include Bottom , Left , NotSet , Right , and Top . In the past, an < asp:Table > element contained any number of < asp:TableRow > elements. Now you have some additional elements that can be nested within the < asp:Table > element. These new elements include < asp:TableHeaderRow > and < asp:TableFooterRow >. They add either a header or footer to your table, enabling you to use the Table server control to page through lots of data but still retain some text in place to indicate the type of data being handled. This is quite a powerful feature when you work with mobile applications that dictate that sometimes end users can move through only a few records at a time. 141 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 142 Chapter 3: ASP.NET Web Server Controls The Calendar Server Control The Calendar server control is a rich control that enables you to place a full-featured calendar directly on your Web pages. It allows for a high degree of customization to ensure that it looks and behaves in a unique manner. The Calendar control, in its simplest form, is coded in the following manner: < asp:Calendar ID="Calendar1" runat="server" > < /asp:Calendar > This code produces a calendar on your Web page without any styles added, as shown in Figure 3-23. Figure 3-23 Making a Date Selection from the Calendar Control The calendar allows you to navigate through the months of the year and to select specific days in t he exposed month. A simple application that enables the user to select a day of the month is shown in Listing 3-20. Listing 3-20: Selecting a single day in the Calendar control VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) Response.Write("You selected: " & _ Calendar1.SelectedDate.ToShortDateString()) End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head id="Head1" runat="server" > < title > Using the Calendar Control < /title > < /head > 142 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 143 Chapter 3: ASP.NET Web Server Controls < body > < form id="form1" runat="server" > < div > < asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" > < /asp:Calendar > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < script runat="server" > protected void Calendar1_SelectionChanged(object sender, EventArgs e) { Response.Write("You selected: " + Calendar1.SelectedDate.ToShortDateString()); } < /script > Running this application pulls up the calendar in the browser. The end user can then select a single date in it. After a date is selected, the Calendar1_SelectionChanged event is triggered and makes use of the OnSelectionChange attribute. This event writes the value of the selected date to the screen. The result is shown in Figure 3-24. Figure 3-24 143 . { Response.Write("You selected Visual Basic& quot;); Continued 1 35 Evjen c 03. tex V2 - 01/28/2008 12 :33 pm Page 136 Chapter 3: ASP. NET Web Server Controls } else { Response.Write("You selected C#& quot;); } } < /script > Like. to the table, as illustrated in Listing 3- 18. 139 Evjen c 03. tex V2 - 01/28/2008 12 :33 pm Page 140 Chapter 3: ASP. NET Web Server Controls Listing 3- 18: Dynamically adding rows to the table VB Protected. ( MyImage2.gif )isloadedinthe postback process. 138 Evjen c 03. tex V2 - 01/28/2008 12 :33 pm Page 139 Chapter 3: ASP. NET Web Server Controls Special circumstances can prevent end users from viewing an image that is part