Evjen c03.tex V2 - 01/28/2008 12:33pm Page 154 Chapter 3: ASP.NET Web Server Controls The advantage of using the Panel control to encapsulate a set of other elements is that you can manipulate these elements as a single unit using one attribute set in the Panel control itself. For example, setting the Font-Bold attribute to True causes each item within the Panel control to adopt this attribute. The new addition to the Panel control is the capability to scroll with scrollbars that appear automati- cally depending on the amount of information that Panel control holds. You can even specify how the scrollbars should appear. For an example of using scrollbars, look at a long version of the Lorem Ipsum text (found at www.lipsum. com ) and place that text within the Panel control, as shown in Listing 3-27. Listing 3-27: Using the new scrollbar feature with the Panel server control < %@ Page Language="VB" % > < html > < head runat="server" > < title > Panel Server Control Page < /title > < /head > < body > < form id="form1" runat="server" > < asp:Panel ID="Panel1" runat="server" Height="300" Width="300" ScrollBars="auto" > < p > Lorem ipsum dolor sit amet < /p > < /asp:Panel > < /form > < /body > < /html > By assigning values to the Height and Width attributes of the Panel server control and using the Scroll- Bars attribute (in this case, set to Auto ), you can display the information it contains within the defined area using scrollbars (see Figure 3-29). As you can see, a single vertical scrollbar has b een added to the set area of 300 × 300 pixels. The Panel control wraps the text by default as required. To change this behavior, use the new Wrap attribute, which takes a Boolean value: < asp:Panel ID="Panel1" runat="server" Height="300" Width="300" ScrollBars="Auto" Wrap="False" / > Turning off wrapping may cause the horizontal scrollbar to turn on (depending on what is contained in the panel section). If you do not want to let the ASP.NET engine choose which scrollbars to activate, you can actually make that decision by using the ScrollBars attribute. In addition to Auto , its values include None , Horizontal , Vertical ,and Both . Another interesting attribute that enables you to change the behavior of the Panel control is Horizontal- Align . It enables you to set how the content in the Panel control is horizontally aligned. The possible values of this attribute include NotSet , Center , Justify , Left ,and Right . Figure 3-30 shows a collection of Panel controls with different horizontal alignments. 154 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 155 Chapter 3: ASP.NET Web Server Controls Figure 3-29 Center aligned Justified Left align Right align Figure 3-30 It is also possible to move the vertical scrollbar to the left side of the Panel control by using the Direction attribute. Direction can be set to NotSet , LeftToRight ,and RightToLeft . A setting of RightToLeft is ideal when you are dealing with languages that are written from right to left (some Asian languages, for example). However, that setting also moves the scrollbar to the left side of the Panel control. If the scroll- bar is moved to the left side and the HorizontalAlign attribute is set to Left , your content resembles Figure 3-31. 155 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 156 Chapter 3: ASP.NET Web Server Controls Figure 3-31 The PlaceHolder Server Control The PlaceHolder server control works just as its name implies — it is a placeholder for you to interject objects dynamically into your page. Think of it as a marker with which you can add other controls. The capability to add controls to a page at a specific point also works with the Panel control. To see how it works, insert a PlaceHolder control into your page and then add controls to it from your server-side code in the manner shown in Listing 3-28. Listing 3-28: Using PlaceHolder to add controls to a page dynamically VB Dim NewLabelControl As New Label() NewLabelControl.Text = "Hello there" PlaceHolder1.Controls.Add(NewLabelControl) C# Label NewLabelControl = new Label(); NewLabelControl.Text = "Hello there"; PlaceHolder1.Controls.Add(NewLabelControl); This example creates a new instance of a Label control and populates it with a value before it is added to the PlaceHolder control. You can add more than one control to a single instance of a PlaceHolder control. 156 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 157 Chapter 3: ASP.NET Web Server Controls BulletedList Server Control One common HTML Web page element is a collection of items in a bulleted list. The BulletedList server control is meant to display a bulleted list of items easily in an ordered (using the HTML < ol > element) or unordered (using the HTML < ul > element) fashion. In addition, the control can determine the style used for displaying the list. The BulletedList control can be constructed of any number of < asp:ListItem > controls or can be data-bound to a data source of some kind and populated based upon the contents retrieved. Listing 3-29 shows a bulleted list in its simplest form. Listing 3-29: A simple BulletedList control < %@ Page Language="VB" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > BulletedList Server Control < /title > < /head > < body > < form id="form1" runat="server" > < asp:BulletedList ID="Bulletedlist1" runat="server" > < asp:ListItem > United States < /asp:ListItem > < asp:ListItem > United Kingdom < /asp:ListItem > < asp:ListItem > Finland < /asp:ListItem > < asp:ListItem > Russia < /asp:ListItem > < asp:ListItem > Sweden < /asp:ListItem > < asp:ListItem > Estonia < /asp:ListItem > < /asp:BulletedList > < /form > < /body > < /html > The use of the < asp:BulletedList > element, along with < asp:ListItem > elements, produces a simple bulleted list output like the one shown in Figure 3-32. Figure 3-32 157 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 158 Chapter 3: ASP.NET Web Server Controls The BulletedList control also enables you to easily change the style of the list with just one or two attributes. The BulletStyle attribute changes the style of the bullet that precedes each line of the list. It has possible values of Numbered , LowerAlpha , UpperAlpha , LowerRoman , UpperRoman , Disc , Circle , Square , NotSet ,and CustomImage . Figure 3-33 shows examples of these styles (minus the CustomImage setting that enables you to use any image of your choice). Figure 3-33 You can change the starting value of the first item in any of the numbered styles ( Numbered , LowerAl- pha , UpperAlpha , LowerRoman , UpperRoman )byusingthe FirstBulletNumber attribute. If you set the attribute’s value to 5 when you use the UpperRoman setting, for example, you get the format illustrated in Figure 3-34. 158 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 159 Chapter 3: ASP.NET Web Server Controls Figure 3-34 To employ images as bullets, use the CustomImage setting in the BulletedList control. You must also use the BulletImageUrl attribute in the following manner: < asp:BulletedList ID="Bulletedlist1" runat="server" BulletStyle="CustomImage" BulletImageUrl="~/myImage.gif" > Figure 3-35 shows an example of image b ullets. Figure 3-35 The BulletedList control has an attribute called DisplayMode , which has three possible values: Text , HyperLink ,and LinkButton . Text is the default and has been used so far in the examples. Using Text means that the items in the bulleted list are laid out only as text. HyperLink means that each of the items is turned into a hyperlink — any user clicking the link is redirected to another page, which is specified by the < asp:ListItem > control’s Value attribute. A value of LinkButton turns each b ulleted list item into a hyperlink that posts back to the same page. It enables you to retrieve the selection that the end user makes, as illustrated in Listing 3-30. 159 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 160 Chapter 3: ASP.NET Web Server Controls Listing 3-30: Using the LinkButton value for the DisplayMode attribute VB < %@ Page Language="VB"% > < script runat="server" > Protected Sub BulletedList1_Click(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.BulletedListEventArgs) Label1.Text = "The index of item you selected: " & e.Index & _ " < br > The value of the item selected: " & _ BulletedList1.Items(e.Index).Text End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > BulletedList Server Control < /title > < /head > < body > < form id="form1" runat="server" > < asp:BulletedList ID="BulletedList1" runat="server" OnClick="BulletedList1_Click" DisplayMode="LinkButton" > < asp:ListItem > United States < /asp:ListItem > < asp:ListItem > United Kingdom < /asp:ListItem > < asp:ListItem > Finland < /asp:ListItem > < asp:ListItem > Russia < /asp:ListItem > < asp:ListItem > Sweden < /asp:ListItem > < asp:ListItem > Estonia < /asp:ListItem > < /asp:BulletedList > < asp:Label ID="Label1" runat="server" > < /asp:Label > < /form > < /body > < /html > C# < %@ Page Language="C#"% > < script runat="server" > protected void BulletedList1_Click(object sender, System.Web.UI.WebControls.BulletedListEventArgs e) { Label1.Text = "The index of item you selected: " + e.Index + " < br > The value of the item selected: " + BulletedList1.Items[e.Index].Text; } < /script > In this example, the DisplayMode attribute is set to LinkButton ,andthe OnClick attribute is used to point to the BulletedList1_Click event. BulletedList1_Click uses the BulletedListEventArgs object, which only exposes the Index property. Using that, you can determine the index number of the item selected. 160 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 161 Chapter 3: ASP.NET Web Server Controls You can directly access the Text value of a selected item by using the Items property, or you can use the same property to populate an instance of the ListItem object, as shown here: VB Dim blSelectedValue As ListItem = BulletedList1.Items(e.Index) C# ListItem blSelectedValue = BulletedList1.Items[e.Index]; Now that you have seen how to create bulleted lists with items that you declaratively place in the code, look at how to create dynamic bulleted lists from items that are stored in a data store. The following example shows how to use the BulletedList control to data-bind to results coming from a data store; in it, all information is retrieved from an XML file. The first step is to create the XML in Listing 3-31. Listing 3-31: FilmChoices.xml < ?xml version="1.0" encoding="utf-8"? > < FilmChoices > < Film Title="Close Encounters of the Third Kind" Year="1977" Director="Steven Spielberg" / > < Film Title="Grease" Year="1978" Director="Randal Kleiser" / > < Film Title="Lawrence of Arabia" Year="1962" Director="David Lean" / > < /FilmChoices > To populate the BulletedList server control with the Title attribute from the FilmChoices.xml file, use an XmlDataSource control to access the file, as illustrated in Listing 3-32. Listing 3-32: Dynamically populating a BulletedList server control < %@ Page Language="VB" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > BulletedList Server Control < /title > < /head > < body > < form id="form1" runat="server" > < asp:BulletedList ID="BulletedList1" runat="server" DataSourceID="XmlDataSource1" DataTextField="Title" > < /asp:BulletedList > < asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/FilmChoices.xml" XPath="FilmChoices/Film" > 161 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 162 Chapter 3: ASP.NET Web Server Controls < /asp:XmlDataSource > < /form > < /body > < /html > In this example, you use the DataSourceID attribute to point to the XmlDataSource control (as you would with any control that can be bound to one of the data source controls). After you are connected to the data source control, you specifically point to the Title attribute using the DataTextField attribute. After the two server controls are connected and the page is run, you get a bulleted list that is completely generated from the contents of the XML file. Figure 3-36 shows the result. Figure 3-36 The XmlDataSource server control has some limitations in that the binding to the BulletedList server control worked i n the previous example only because the Title value was an XML attribute and not a subelement. The XmlDataSource control exposes XML attributes as properties only when databinding. If you are going to want to work with subelements, then you are going to have to perform an XSLT transform using the XmlDataSource control’s TransformFile attribute to turn elements into attributes. HiddenField Server Control For many years now, developers have been using hidden fields in their Web pages to work with state management. The < input type="hidden" > element is ideal for storing items that have no security con- text to them. These items are simply placeholders for data points that you want to store in the page itself instead of using the Session object or intermingling the data with the view state of the page. View state is another great way to store information in a page, but many developers turn off this feature to avoid corruption of the view state or possible degradation of page performance. Any time a hidden field is placed within a Web page, it is not interpreted in the browser in any fashion, although it is completely viewable by end users if they look at the source of the HTML page. Listing 3-33 is an example of using the HiddenField server control to hold a GUID that can be used from page to page simply by carrying over its value as the end user navigates through your application. 162 Evjen c03.tex V2 - 01/28/2008 12:33pm Page 163 Chapter 3: ASP.NET Web Server Controls Listing 3-33: Working with the HiddenField server control VB < %@ Page Language="VB" % > < script runat="server" language="vb" > Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) HiddenField1.Value = System.Guid.NewGuid().ToString() End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > HiddenField Server Control < /title > < /head > < body > < form id="form1" runat="server" > < asp:HiddenField ID="HiddenField1" runat="Server" / > < /form > < /body > < /html > C# < %@ Page Language="C#"% > < script runat="server" > protected void Page_Load(object sender, EventArgs e) { HiddenField1.Value = System.Guid.NewGuid().ToString(); } < /script > In this example, the Page_Load event populates the HiddenField1 control with a GUID. You can see the hidden field and its value by looking at the source of the blank HTML page that is created. You should see a result similar to the following (the GUID will have a different value, of course): < input type="hidden" name="HiddenField1" id="HiddenField1" value="a031e77c-379b-4b4a-887c-244ee69584d5" / > On the page postback, ASP.NET can detect whether the HiddenField server control has changed its value since the last post. This enables you to change the HiddenField value with client-side script and then work with the changes in a page event. The HiddenField server control has an event called ValueChanged that you can use when the value is changed: VB Protected Sub HiddenField1_ValueChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) ’ Handle event here End Sub 163 . end user makes, as illustrated in Listing 3- 30. 159 Evjen c 03. tex V2 - 01/28/2008 12 :33 pm Page 160 Chapter 3: ASP. NET Web Server Controls Listing 3- 30: Using the LinkButton value for the DisplayMode. a simple bulleted list output like the one shown in Figure 3- 32. Figure 3- 32 157 Evjen c 03. tex V2 - 01/28/2008 12 :33 pm Page 158 Chapter 3: ASP. NET Web Server Controls The BulletedList control. set to Left , your content resembles Figure 3- 31. 155 Evjen c 03. tex V2 - 01/28/2008 12 :33 pm Page 156 Chapter 3: ASP. NET Web Server Controls Figure 3- 31 The PlaceHolder Server Control The PlaceHolder