Web Form Server Controls
Let's dig in again by investigating the base class from which all the objects in the System.Web.UI.WebControls namespace are created. This is a big part of the excitement in these controls as well as the others in the two following chapters. The primary properties are uniform because they are inherited from the base WebControl object.
WebControl
This is the name of the base object for all…ah? Yeah, Web server controls. As you look at its properties in Table 7.1, you can see that Microsoft has done a good job on this object and supplied all the meaty things necessary for programming with WebControl in a nice, neat way.
| Property | Description |
|---|---|
| Attribute | Returns the attributes collection of the object. |
| BackColor | Gets or sets the background color of the Web server control. |
| BorderColor | Gets or sets the border color of the Web server control. |
| BorderStyle | Gets or sets the border style of the Web server control, for instance Dotted, Dashed, Solid, and so on. |
| BorderWidth | Gets or sets the border width of the Web server control. |
| CssClass | Gets or sets the Cascading Style Sheet (CSS) class rendered by the Web server control on the client. |
| EnableViewState | A Boolean (true or false) value that you can get or set that indicates whether a control should maintain its viewstate. |
| Enabled | A Boolean (true or false) value that you can get or set that indicates whether a control is enabled. |
| Font | Gets the font properties associated with the Web server control. |
| ForeColor | Gets or sets the foreground color (typically the color of the text) of the Web server control. |
| Height | Gets or sets the height of the Web server control. |
| ID | A string that you can get or set that defines the identifier for the control. |
| Style | Returns the CSSStyleCollection for a control. |
| TabIndex | Gets or sets the tab index of the Web server control |
| ToolTip | Gets or sets the text displayed when the mouse pointer hovers over the Web server control. |
| Visible | Gets or sets a value that indicates whether a Web server control is rendered as UI on the page. |
| Width | Gets or sets the width of the Web server control. |
Remember that just like the HTML server controls, the attribute and style properties are instances of collections, and you can get and set particular attributes and styles the same way that I described in Chapter 6, either through setting the value of a particular named attribute or style or through using the Add() method of the collection. I've included the following example as a refresher.
Visual Basic .NET
Getting Attributes and Styles var1 = OurDiv.Attributes("align") var2 = OurDiv.Style("width") Setting Attributes and Styles OurDiv.Attributes("align")= "center" OurDiv.Style.Add("font-size","14px")
C#
Getting Attributes and Styles var1 = OurDiv.Attributes["align"]; var2 = OurDiv.Style["width"]; Setting Attributes and Styles OurDiv.Attributes["align"]= "center"; OurDiv.Style.Add("font-size","14px");
This is a pretty rich bunch of properties and creates a very solid base class from which the other Web server controls are built. Let's move forward and investigate the Web server controls themselves. The remainder of this chapter looks at Web server controls that generate some basic familiar HTML function such as check boxes, images, and text boxes, as well as some more exotic and mysterious Web server controls such as the panel and placeholder. Let's check it out.
Button
The Button Web server control renders an <input type="submit"> to the browser. It has some pretty interesting properties (see Table 7.2) and two useful methods called OnClick and onCommand, which you'll learn more about in a bit.
| Property | Description |
|---|---|
| CausesValidation | A Boolean (true or false) that gets or sets whether validation is performed when the Button control is clicked. Default is true. |
| CommandArgument | Gets or sets an optional parameter passed to the Command event along with the associated CommandName. |
| CommandName | Gets or sets the command name associated with the Button control that is passed to the Command event. |
| Text | Gets or sets the text on the button. |
The two properties that I'd like to touch on are CommandArgument and CommandName. The two properties are associated and available with an event that the asp:button fires called onCommand. This button also fires the onClick event as well, but you've seen this event a bunch of times already, so I'll focus on the onCommand instead.
The onCommand event works in pretty much the same way as the onClick event, except you can include the two required properties of the button, CommandName and CommandArgument. You can use these as a way of identifying which button was clicked and use that information programmatically to figure out what branch of code to process.
Notably, if you don't include the CommandName and CommandArgument, the button is of the Submit type and will submit the form and cause the page to post back. An onCommand event doesn't cause postback and allows you to manipulate your ASP.NET page without executing a postback as far as .NET is concerned. Look at this example:
Visual Basic .NET web_button_vb.aspx
<%@ page language="vb" runat="server"%> <script runat="server"> sub Page_Load(sender as Object, e as CommandEventArgs) if IsPostBack then ourLabel1.Text = "This text will never appear on the page" end if end sub sub CommandButton_Click(sender as Object, e as CommandEventArgs) select case e.CommandArgument case "OurCommandArgument1" ourLabel2.Text = "You clicked Our First Button" case "OurCommandArgument2" ourLabel3.Text = "You clicked Our Second Button" case else end select end sub </script> <html> <head> <title>Web Controls - Button</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:Button runat="server" text="Our First Button" CommandName="ourButtonCommand" CommandArgument="OurCommandArgument1" onCommand="CommandButton_Click" /> <asp:Button runat="server" text="Our Second Button" CommandName="ourButtomCommand" CommandArgument="OurCommandArgument2" onCommand="CommandButton_Click" /> <br> <asp:label runat="server" /><br> <asp:label runat="server" /><br> <asp:label runat="server" /><br><br> Note that neither of those fired the "if IsPostBack" block of code. </form> </body> </html>
C# control_button_cs.aspx
<%@ page language="cs" runat="server"%> <script runat="server"> void Page_Load(Object sender, CommandEventArgs e) { if (IsPostBack) { ourLabel1.Text = "This text will never appear on the page"; } } void CommandButton_Click(Object sender, CommandEventArgs e) { switch (Int32.Parse(e.CommandArgument.ToString())) { case 1: ourLabel2.Text = "You clicked Our First Button"; break; case 2: ourLabel3.Text = "You clicked Our Second Button"; break; default: break; } } </script> <html> <head> <title></title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:Button runat="server" text="Our First Button" CommandName="ourButtonCommand" CommandArgument="1" onCommand="CommandButton_Click" /> <asp:Button runat="server" text="Our Second Button" CommandName="ourButtomCommand" CommandArgument="2" onCommand="CommandButton_Click" /> <br> <asp:label runat="server" /><br> <asp:label runat="server" /><br> <asp:label runat="server" /><br><br> Note that neither of those fired the "if IsPostBack" block of code. </form> </body> </html> As you can see in Figure 7.1, the two different buttons cause different branches of the CommandButton_Click to fire, but the IsPostBack portion of the code never executes.
Figure 7.1. Using the command event prevents the IsPostBack event from firing while enabling you to programmatically manipulate the ASP.NET page.
CheckBox
The CheckBox Web server control will render an <input type="checkbox"> to the browser. It has additional properties worth mentioning and a great method called OnCheckChanged that we can use to fire functions and subs.
| Property | Description |
|---|---|
| AutoPostBack | Gets or sets the value that determines whether the check box causes a form to post back to the server. |
| Checked | Gets or sets the value indicating whether a check box is checked or not. |
| Text | Gets or sets the text that is displayed as a label for the check box |
| TextAlign | Gets or sets whether the text label is displayed on the right or left of the check box. |
The interesting property here is the AutoPostBack property. If this property is set to true, it causes the form in which the check box is contained to post back to the server.
There is also an event similar to the onServerChanged event of the HTMLInputCheckBox control that you saw in Chapter 6. It is called onCheckedChanged, and it performs in the same manner. What basically happens is the server keeps track of the asp:checkbox's checked property. If it is different from the last time it dealt with the object, it fires the onCheckedChanged events. Take a look.
Visual Basic .NET web_checkbox_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> Sub OurCheckBoxClick(sender as Object, e as EventArgs) if OurCheckBox1.Checked Then OurLabel1.Text = "OurCheckBox1 is checked." else OurLabel1.Text = "OurCheckBox1 is not checked." end if if OurCheckBox2.Checked Then OurLabel2.Text = "OurCheckBox2 is checked." else OurLabel2.Text = "OurCheckBox2 is not checked." end if end sub </script> <html> <head> <title></title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:CheckBox Text="No AutoPostBack" TextAlign="right" OnCheckedChanged="OurCheckBoxClick" runat="server" /> <br> <asp:CheckBox Text="With AutoPostBack" TextAlign="right" OnCheckedChanged="OurCheckBoxClick" AutoPostBack="True" runat="server"/> <br> <asp:Button runat="server" text="Submit" /><br><br> <asp:Label runat="server" /><br> <asp:Label runat="server" /> </form> </body> </html>
C# web_checkbox_cs.aspx
<%@ page language="c#" runat="server"%> <script runat=server> void OurCheckBoxClick(Object sender, EventArgs e) { if (OurCheckBox1.Checked) { OurLabel1.Text = "OurCheckBox1 is checked."; } else { OurLabel1.Text = "OurCheckBox1 is not checked."; } if (OurCheckBox2.Checked) { OurLabel2.Text = "OurCheckBox2 is checked."; } else { OurLabel2.Text = "OurCheckBox2 is not checked."; } } </script> <html> <head> <title></title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:CheckBox Text="No AutoPostBack" TextAlign="right" OnCheckedChanged="OurCheckBoxClick" runat="server" /> <br> <asp:CheckBox Text="With AutoPostBack" TextAlign="right" OnCheckedChanged="OurCheckBoxClick" AutoPostBack="True" runat="server"/> <br> <asp:Button runat="server" text="Submit" /><br><br> <asp:Label runat="server" /><br> <asp:Label runat="server" /> </form> </body> </html>
In Figure 7.2 you can see two different CheckBox Web server controls. The first doesn't have an AutoPostBack set to true, but the second does. They both have an OnCheckedChanged event that fires whenever the Checked property of the control changes between posts.
Figure 7.2. The AutoPostBack property allows you to post a form by checking a check box. The OnCheckedChanged event fires whenever a check box's checked property is changed between posts.
Hyperlink
The Hyperlink Web server control renders an <a></a> tag to the web browser and has 4 additional properties that you can see in Table 7.4 and are used in the code example.
| Property | Description |
|---|---|
| ImageURL | Gets or sets the path location if you want an image to be placed inside the <a> tag. |
| NavigateURL | Gets or sets the URL that the hyperlink goes to if it is clicked. |
| Target | Gets or sets the target where the NavigateURL property will be loaded, such as _blank, _parent, _self, _top, or the name of a frame in a frameset. |
| Text | Gets or sets the text that appears as the hyperlink if the ImageURL property isn't set, or sets the Alt property of the image if there is an ImageURL. |
The Hyperlink Web server control has no special events associated with it, but because you can programmatically control it, you can do many interesting things with it, as demonstrated in the following example.
Visual Basic .NET web_hyperlink_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> sub Page_Load(sender as Object, e as EventArgs) if IsPostBack then OurHyperLink.ImageUrl = "images/nr_logo.gif" OurHyperLink.Target = "_blank" OurHyperLink.NavigateURL = "http://www.newriders.com" OurHyperLink.Text = "Exciting Link" OurLabel.Text = "There, that's much better." OurButton.Visible = false end if end sub </script> <html> <head> <title>Web Controls - Hyperlink</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:HyperLink NavigateURL="http://www.bored.com" text="Boring Link" runat="server" /> <br><br> <asp:label runat="server" text="That link is pretty useless. Click the button to fix it." /><br> <asp:button runat="server" text="Submit" /> </form> </body> </html>
C# web_hyperlink_cs.aspx
<%@ page language="cs" runat="server"%> <script runat=server> void Page_Load(Object sender, EventArgs e) { if (IsPostBack) { OurHyperLink.ImageUrl = "something.gif"; OurHyperLink.Target = "_blank"; OurHyperLink.NavigateUrl = "http://www.newriders.com"; OurHyperLink.Text = "Exciting Link"; OurLabel.Text = "There, that's much better."; OurButton.Visible = false; } } </script> <html> <head> <title>Web Controls - Hyperlink</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:HyperLink NavigateURL="http://www.bored.com" text="Boring Link" runat="server" /> <br><br> <asp:label runat="server" text="That link is pretty useless. Click the button to fix it." /> <br> <asp:button runat="server" text="Submit" /> </form> </body> </html> Figure 7.3 shows that the hyperlink has been changed programmatically to contain an image rather than text. This isn't the only way to use this, but being able to set a hyperlink's property programmatically has endless possibilities.
Figure 7.3. The AutoPostBack property allows you to post a form by checking a check box, and the OnCheckedChanged event fires whenever a check box's checked property is changed between posts.
Image
The Image Web server control renders the <img> tag to the browser and has a few properties all its own, listed in Table 7.5.
| Property | Description |
|---|---|
| AlternateText | Gets or sets the alternate text displayed in the Image control when the image is unavailable. Browsers that support the ToolTips feature display this text as a ToolTip. |
| ImageAlign | Gets or sets the alignment property of the image in relation to its surrounding content. The options are Left, Right, Baseline, Top, Middle, Bottom, AbsBottom, AbsMiddle, and TextTop. |
| ImageURL | Gets or sets the path location of the image you want to display. |
There is nothing particularly exciting about this Web server control, but the following is a copy of the object for both languages so you can see how it appears.
<asp:Image ImageUrl="image.gif" AlternateText="This is Alt Text" ImageAlign="Left" runat="server" />
ImageButton
The ImageButton Web control renders the <input type="image"> tag to the browser. Three of its properties are identical to the Image Web server control, and for good reason. The ImageButton Web server control inherits these properties from the Image Web server control. The three remaining properties and two methods are identical to the Button Web server control and perform in exactly the same way as they do for the Button control. Look at Table 7.6 for a description of the properties.
| Property | Description |
|---|---|
| AlternateText | Gets or sets the alternate text displayed in the Image control when the image is unavailable. Browsers that support the ToolTips feature display this text as a ToolTip. |
| CausesValidation | A Boolean (true or false) that gets or sets whether validation is performed when the Button control is clicked. Default is true. |
| CommandArgument | Gets or sets an optional parameter passed to the Command event along with the associated CommandName. |
| CommandName | Gets or sets the command name associated with the Button control that is passed to the Command event. |
| ImageAlign | Gets or sets the alignment property of the image in relation to its surrounding content. The options are Left, Right, Baseline, Top, Middle, Bottom, AbsBottom, AbsMiddle, and TextTop. |
| ImageURL | Gets or sets the path location of the image you want to display. |
The two events I mentioned are OnClick and OnCommand. They operate just as they do with the Button Web server control.
As with the Image Web server control, there isn't anything here that you haven't seen before, and in an effort to not be redundant, not be redundant, not be redundant, I will just show the object in raw form and leave tinkering with this control to your imagination at this point.
<asp:ImageButton ImageUrl="image.gif" AlternateText="This is Alt Text" ImageAlign="Left" CommandName="ourCommand" CommandArgument="OurArgument" onCommand="Command_Click" />
Label
Man, we have used and abused this Web server control since somewhere around page 2 of this book. It has a single property of text, but in case you missed it, it looks like this:
<asp:Label text="This is the text that will display" runat="server" />
Not too difficult. It renders a <span> tag to the browser, and you can manipulate its contents visibly by changing the inherited properties of the WebControl object discussed in the beginning of this chapter, such as CssClass, the style collection, or the attribute collection of the <span> tag. Remember: This isn't exclusive to this Web server control you can manipulate these things on all the Web server controls.
LinkButton
The LinkButton Web server control renders an <a> tag to the browser and basically gives a hyperlink the same function as the Button Web server control, which can either trigger a command event or submit a form. It has the same four properties as the Button Web server control (see Table 7.7) and the same two events, which are OnClick and OnCommand.
| Property | Description |
|---|---|
| CausesValidation | A Boolean (true or false) that gets or sets whether validation is performed when the LinkButton control is clicked. Default is true. |
| CommandArgument | Gets or sets an optional parameter passed to the Command event along with the associated CommandName. |
| CommandName | Gets or sets the command name associated with the Button control that is passed to the Command event. |
| Text | Gets or set the text that is displayed for the LinkButton. |
Visual Basic .NET web_linkbutton_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> sub Page_Load(sender as Object, e as EventArgs) if IsPostBack then OurLabel.Text = "Form Submitted Successfully" end if end sub </script> <html> <head> <title>Web Controls - LinkButton</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:LinkButton text="Click the link to submit this form" runat="server" /> <br> <asp:label runat="server" /> </form> </body> </html>
C# web_linkbutton_cs.aspx
<%@ page language="c#" runat="server"%> <script runat=server> void Page_Load(Object sender, EventArgs e) { if (IsPostBack) { OurLabel.Text = "Form Submitted Successfully"; } } </script> <html> <head> <title>Web Controls - LinkButton</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:LinkButton text="Click the link to submit this form" runat="server" /> <br> <asp:label runat="server" /><br> </form> </body> </html> As you can see in Figure 7.4, when you click the hyperlink on the page, the IsPostBack of the page returns true, which means that you have successfully submitted the form. The LinkButton gives you another option for creating Submit button functionality, as well as another avenue for firing the OnClick and OnCommand events. This can be very useful when an image or a traditional Submit button doesn't lend itself to the design of the user interface. In this situation, you can use the LinkButton to submit the form or fire these events.
Figure 7.4. The LinkButton web server control gives a simple hyperlink all the power of a fully functioning Submit button, including the Onclick and OnCommand events.
Literal
Okay, I lied. I just lied to you and I feel horrible. I just got through rambling about how you could manipulate all these different things on all the Web server controls, and it's just a big fat lie.
It's a lie because unlike the other Web server controls, the Literal control doesn't inherit the WebControl class and is an exception to the rule that all objects in the System.Web.UI.WebControl namespace inherit the WebControl class. I'm sorry, and I'd like to make amends and set the record straight.
The Literal Web server control is literally what you'd think it literally is in the most literal sense. It is a control that literally writes its text property directly to the HTML stream. (The Literal Web server controls only property outside of what every control gets from the Control object.) For instance:
Visual Basic .NET web_literal_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> Sub Page_Load(sender as Object, e as EventArgs) OurTitle.Text="<title>Web Controls - Literal</title>" end Sub </script> <html> <head> <asp:Literal runat="server" /> </head> <body bgcolor="#FFFFFF" text="#000000"> <asp:Literal Text="Literally just this text will appear." runat="server" /> </body> </html>
C# web_literal_cs.aspx
<%@ page language="cs" runat="server"%> <script runat=server> void Page_Load(){ OurTitle.Text="<title>Web Controls - Literal</title>"; } </script> <html> <head> <asp:Literal runat="server" /> </head> <body bgcolor="#FFFFFF" text="#000000"> <asp:Literal Text="Literally just this text will appear." runat="server" /> </body> </html> The Resulting HTML
<html> <head> <title>Web Controls - Literal</title> </head> <body bgcolor="#FFFFFF" text="#000000"> Literally just this text will appear. </body> </html>
As you can see, the Literal Web server control simply writes the exact contents of its text property to the page without mucking with it one bit. This comes in handy in a lot of situations when you need to dynamically set things, such as the page's <title> tag, but there isn't an exact matching control for the code or tags you want to produce.
Panel
The Panel Web server control renders a <div> container tag to the web browser, and you can basically do anything you want with it. You can set styles and attributes to set absolute positioning, or play with the visibility properties. It can contain any type of HTML, HTMLControl, or WebControl. It presents a whole host of possibilities.
The Panel Web server control has three properties all its own and no methods or events (see Table 7.8).
| Property | Description |
|---|---|
| BackImageURL | Gets or sets the URL of the background image that the panel will have. |
| HorizontalAlign | Gets or sets the horizontal alignment of the contents of the panel. |
| Wrap | A Boolean value (true or false) that gets or sets whether the contents within the panel will wrap or not. |
Next we play around with the Panel Web server control's visible property to determine whether Panel and its contents will be visible in the browser.
The visible property doesn't control the <div> tag's visibility through the visibility property that you might be familiar with in cascading style sheets that you might have manipulated via JavaScript in the past. The Web server controls visible property actually prevents the <div> from being inserted in the HTML if it is set to false.
Visual Basic .NET web_panel_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> Sub OurCheckBoxClick(sender as Object, e as EventArgs) if OurCheckBox1.Checked Then OurPanel.Visible = "True" else OurPanel.Visible = "False" end if End Sub Sub Move_Panel(sender as Object, e as EventArgs) OurPanel.Style("position")="absolute" OurPanel.Style("left")="250" OurPanel.Style("top")="150" OurLabel.Text="The panel is a Left = 250, Top = 150" End Sub </script> <html> <head> <title>Web Controls - Panel</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:CheckBox runat="server" OnCheckedChanged="OurCheckBoxClick"Checked="true" AutoPostBack="true" /> Display Panel<br> <asp:Button Text="Move Panel" OnClick="Move_Panel" runat="server" /> Move the panel to the middle of the screen.<br> <asp:Panel BorderStyle="Double" BorderColor="#000000" BackColor="#CCCCCC" HorizontalAlign="Center" Height="100" Width="250" runat="server" > <asp:Label runat="server" /><br> <b>This is some text that I've written into the panel.</b> </asp:Panel> </form> </body> </html>
C# web_panel_cs.aspx
<%@ page language="cs" runat="server"%> <script runat=server> void OurCheckBoxClick(Object sender,EventArgs e){ if (OurCheckBox1.Checked){ OurPanel.Visible = true; }else{ OurPanel.Visible = false; } } void Move_Panel(Object sender,EventArgs e){ OurPanel.Style["position"]="absolute"; OurPanel.Style["left"]="250"; OurPanel.Style["top"]="150"; OurLabel.Text="The panel is a Left = 250, Top = 150"; } </script> <html> <head> <title>Web Controls - Panel</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:CheckBox runat="server" OnCheckedChanged="OurCheckBoxClick" Checked="true" AutoPostBack="true" /> Display Panel<br> <asp:Button Text="Move Panel" OnClick="Move_Panel" runat="server" /> Move the panel to the middle of the screen.<br> <asp:Panel BorderStyle="Double" BorderColor="#000000" BackColor="#CCCCCC" HorizontalAlign="Center" Height="100" Width="250" runat="server" > <asp:Label runat="server" /><br> <b>This is some text that I've written into the panel.</b> </asp:Panel> </form> </body> </html> As you can see in Figure 7.5, we programmatically set the Panel's visible property and also added some style attributes to it when the button was clicked that allowed absolute positioning of the <div>.
Figure 7.5. The Panel web server control creates a <div> tag that can be manipulated with style sheets for positioning.
PlaceHolder
The PlaceHolder Web server control holds a spot for you to programmatically add or remove controls in its place. For instance, say you want to provide a drop-down list if a certain condition is true. You can add or remove as many controls to the PlaceHolder as you would like. This way you can dynamically build forms, or as we noted in an earlier chapter, dynamically load User controls to customize the user's interface.
In the following example, the Control property of the PlaceHolder is really an instance of the ControlCollection object located in the System.Web.UI.Control namespace. You use the ControlCollection's Add() method to add Controls to the PlaceHolder. A bunch of other methods are available to manipulate what the PlaceHolder contains, and I suggest you check out this object in the Class Browser located at http://www.gotdotnet.com or in the .NET Framework SDK.
Visual Basic .NET web_placeholder_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> sub OurCheckBoxClick(sender as Object, e as EventArgs) if OurCheckBox.Checked then dim OurArrayList as new ArrayList() dim OurDropDown as new DropDownList() OurArrayList.Add("Cake") OurArrayList.Add("Cookies") OurArrayList.Add("Ice Cream") OurArrayList.Add("Pie") OurDropDown.DataSource = OurArrayList OurDropDown.DataBind() OurPlaceholder.Controls.Add(OurDropDown) end if end sub </script> <html> <title>Web Controls - PlaceHolder</title> <body> <form runat="server"> <asp:CheckBox OnCheckedChanged="OurCheckBoxClick" Checked="false" AutoPostBack="true" runat="server" /> Populate Placeholder with Dropdown<br> <asp:PlaceHolder runat="server" /> <br> </form> </body> </html> C# web_placeholder_cs.aspx
<%@ page language="c#" runat="server"%> <script runat=server> void OurCheckBoxClick(Object sender, EventArgs e) { if (OurCheckBox.Checked) { ArrayList OurArrayList = new ArrayList(); DropDownList OurDropDown = new DropDownList(); OurArrayList.Add("Cake"); OurArrayList.Add("Cookies"); OurArrayList.Add("Ice Cream"); OurArrayList.Add("Pie"); OurDropDown.DataSource = OurArrayList; OurDropDown.DataBind(); OurPlaceHolder.Controls.Add(OurDropDown); } } </script> <html> <title>Web Controls - PlaceHolder</title> <body> <form runat="server"> <asp:CheckBox OnCheckedChanged="OurCheckBoxClick" Checked="false" AutoPostBack="true" runat="server" /> Populate Placeholder with Dropdown<br> <asp:PlaceHolder runat="server" /> <br> </form> </body> </html> As Figure 7.6 shows, after you click the check box, the PlaceHolder tag is replaced with the drop-down list. You might also programmatically decide between two different dropdowns or multiple text boxes or whatever controls you'd like to add or remove from the PlaceHolder. The only limitation is your imagination! (Sci-Fi music fades up and camera zooms in and disappears in Mad Scientist's pupil).
Figure 7.6. The PlaceHolder enables you to dynamically add or remove controls and render them where the Placeholder tag appears in your code.
RadioButton
The RadioButton Web server control renders the <input type="radio"> to the web browser. It inherits all the properties and methods of the CheckBox Web server control and has a single additional property (see Table 7.9).
| Property | Description |
|---|---|
| AutoPostBack | Gets or sets the value that determines whether the check box causes a form to post back to the server. |
| Checked | Gets or sets the value indicating whether a check box is checked or not. |
| GroupName | Gets or sets the name of the group of radio buttons to which the control belongs. |
| Text | Gets or sets the text that is displayed as the label for the check box. |
| TextAlign | Gets or sets whether the Text label is displayed to the right or left of the check box. |
Visual Basic .NET web_radiobutton_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> sub Radio_Click(sender as Object, e as EventArgs) OurLabel.Text = "You Selected: " & Request.Params("OurRadioButtonGroup") end sub </script> <html> <head> <title>Web Control - RadioButton</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:RadioButton AutoPostBack="true" Text="Radio Button 1" GroupName="OurRadioButtonGroup" OnCheckedChanged="Radio_Click" value="Radio Button Number 1" runat="server" Checked = "true" /> <br> <asp:RadioButton AutoPostBack="true" Text="Radio Button 2" GroupName="OurRadioButtonGroup" value="Radio Button Number 2" OnCheckedChanged="Radio_Click" runat="server" /> <br> <asp:label Text="Button 1 is preselected" runat="server" /> </form> </body> </html> C# web_radiobutton_cs.aspx
<%@ page language="cs" runat="server"%> <script runat=server> void Radio_Click(Object sender, EventArgs e) { OurLabel.Text = "You Selected: " + Request.Params["OurRadioButtonGroup"]; } </script> <html> <head> <title>Web Control - RadioButton</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> <asp:RadioButton AutoPostBack="true" Text="Radio Button 1" GroupName="OurRadioButtonGroup" OnCheckedChanged="Radio_Click" value="Radio Button Number 1" runat="server" Checked = "true" /> <br> <asp:RadioButton AutoPostBack="true" Text="Radio Button 2" GroupName="OurRadioButtonGroup" value="Radio Button Number 2" OnCheckedChanged="Radio_Click" runat="server" /> <br> <asp:label Text="Button 1 is preselected" runat="server" /> </form> </body> </html> In Figure 7.7 you can see that the OnCheckChanged event of the radio button was fired and the Text property of OurLabel was set. Also notice how the value of the radio button was retrieved through the Page object's Request.Params collection, which is a combined collection of all Querystring, Form, ServerVariables, and Cookies items for the Page.
Figure 7.7. The RadioButton web server control allows you to programmatically manipulate and retrieve information from a radio button or group of radio buttons.
Table, TableRow, TableCell
The table Web server controls render their corresponding table elements to the web browser: <table></table>, <tr></tr>, and <td></td>. These have many properties, listed in Tables 7.10, 7.11, and 7.12.
| Property | Description |
|---|---|
| BackImageURL | Gets or sets the URL of the background image that panel will have. |
| CellPadding | Gets or sets the value of the table's cellpadding attribute. |
| CellSpacing | Gets or sets the value of the table's cellspacing attribute. |
| GridLines | Gets or sets the value that determines the grid line style of the table control. Options are None, Horizontal, Vertical, or Both. |
| HorizontalAlign | Gets or sets the horizontal alignment of the table within its container, which could be the page or could be nested in a table or a div. |
| Rows | Instance of the TableRowCollection, exposing its properties and methods. |
| Property | Description |
|---|---|
| Cells | Instance of the TableCellCollection, exposing its properties and methods. |
| HorizontalAlign | Gets or sets the horizontal alignment of the contents in the row. |
| VerticalAlign | Gets or sets the vertical alignment of the contents in the row. |
| Property | Description |
|---|---|
| ColumnSpan | Gets or sets across how many columns the cell spans. |
| HorizontalAlign | Gets or sets the horizontal alignment of the contents in the cell. |
| RowSpan | Gets or sets down how many rows the cell extends. |
| Text | Gets or sets the text contents of the cell. |
| VerticalAlign | Gets or sets the vertical alignment of the contents in the cell. |
| Wrap | Gets or sets a Boolean value that defines whether the contents within a cell should wrap. True is the default. |
In the HTMLControl example of the HTMLTable, you manipulated a bunch of the properties programmatically, but here you'll do something different. The following code builds a table programmatically.
Visual Basic .NET web_buildtable_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> sub Page_Load(sender As Object, e As EventArgs) dim OurArray() as Integer = {1,2,3,4,5,6,7,8,9,10} if not IsPostBack OurCells.DataSource = OurArray OurRows.DataSource = OurArray DataBind() end if end sub Sub Build_Table(sender As Object, e As System.EventArgs) dim NumRows As Integer dim NumCells As Integer dim iCell As Integer dim iRow As Integer dim R As TableRow dim C As TableCell NumRows = CInt(OurRows.SelectedItem.Value) NumCells = CInt(OurCells.SelectedItem.Value) For iRow = 1 To NumRows r = new TableRow() For iCell = 1 To NumCells c = new TableCell() c.Controls.Add(new LiteralControl("row " & [ccc]iRow & ", cell " & iCell)) r.Cells.Add(c) Next iCell OurTable.Rows.Add(r) Next iRow End Sub </script> <html> <head> <title>Web Control Table</title> </head> <body> <form runat=server> <asp:Table GridLines="Both" CellPadding="3" CellSpacing="0" BorderWidth="1" BorderColor="#000000" runat="server" /> <br><br> <asp:DropDownList runat="server" /> Cells<br> <asp:DropDownList runat="server" /> Rows<br> <asp:Button Text="Build Table" OnClick="Build_Table" runat= "server" /> </form> </body> </html> C# web_buildtable_cs.aspx
<%@ page language="cs" runat="server"%> <script runat=server> void Page_Load(){ int[] OurArray = {1,2,3,4,5,6,7,8,9,10}; if (!IsPostBack) { OurCells.DataSource = OurArray; OurRows.DataSource = OurArray; DataBind(); } } void Build_Table(object s,System.EventArgs e){ int NumRows; int NumCells; int iCell; int iRow; TableRow R; TableCell C; NumRows = int.Parse(OurRows.SelectedItem.Value); NumCells = int.Parse(OurCells.SelectedItem.Value); for (iRow = 1;iRow <= NumRows;iRow++){ R = new TableRow(); for (iCell = 1;iCell <= NumCells;iCell++){ C = new TableCell(); C.Controls.Add(new LiteralControl("row " + iRow.ToString() + ", cell " + iCell.ToString())); R.Cells.Add(C); } OurTable.Rows.Add(R); } } </script> <html> <head> <title>Web Control Table</title> </head> <body> <form runat=server> <asp:Table GridLines="Both" CellPadding="3" CellSpacing="0" BorderWidth="1" BorderColor="#000000" runat="server" /> <br><br> <asp:DropDownList runat="server" /> Cells<br> <asp:DropDownList runat="server" /> Rows<br> <asp:Button Text="Build Table" OnClick="Build_Table" runat= "server" /> </form> </body> </html> Here some of the looping you learned in an earlier chapter is used, and it dynamically creates and adds TableCells to TableRows, and the TableRows are added dynamically to the Table, as you can see in Figure 7.8.
Figure 7.8. The Table, TableRow, and TableCell Web server controls give you the ability to programmatically build and manipulate tables.
Don't be intimidated by this code block. If I can understand it, you can understand it. Let me break it down. The piece of code that reads R = new TableRow() is creating a new instance of a TableRow object. Then there's a loop where you see C = New TableCell(), which is creating a new TableCell object. You fill its contents with a Literal control and loop through the number of cells you want, adding them to the TableRow that was created with R.Cells.Add(C). The C specifies the TableCell just created. After the Row has all the specified cells, you add that TableRow instance to the table with OurTable.Rows.Add(R) (the R specifies the TableRow just created), and then loop back and do it again until all the rows are created and added to the table. For those who would benefit from a visual of that explanation, look at this:
Outer Loop Generates Row Inner Loop Generates Cell Create Cell End Inner Loop End Outer Loop
TextBox
The TextBox Web server control can be rendered as three different things depending on the TextMode property; <input type="text">, <input type="password">, or <textarea>. It has a bunch of other properties (see Table 7.13), as well as a single method of its own called OnTextChanged.
| Property | Description |
|---|---|
| AutoPostBack | Gets or sets the value that determines whether the TextBox causes a form to post back to the server. |
| Columns | Gets or sets the display width of the text box in characters. |
| MaxLength | Gets or sets the maximum number of characters a user can enter into a TextBox. |
| ReadOnly | Gets or sets whether the contents of the TextBox can be changed. |
| Rows | Gets or sets the height of the TextBox if the TextMode property is set to Multiline. |
| Text | Gets or sets the contents of the TextBox. |
| TextMode | Gets or sets the kind of TextBox that is rendered. Available options are SingleLine (default), Multiline, and Password. |
| Wrap | Gets or sets the value indicating whether the text contents wrap inside the TextBox. |
Let's take a look at the TextBox Web server control in action. You'll use the AutoPostBack property to post the form and trigger the OnTextChanged event if you have changed the contents of the TextBox. This example also programmatically manipulates what type of TextBox it is, although you may never do this. I did it…because we can!
Visual Basic .NET web_textbox_vb.aspx
<%@ page language="vb" runat="server"%> <script runat=server> sub Radio_Click(sender as Object, e as EventArgs) if OurRadioButton1.Checked Then OurTextBox.TextMode = TextBoxMode.SingleLine elseif OurRadioButton2.Checked then OurTextBox.TextMode = TextBoxMode.MultiLine OurTextBox.Rows = 5 elseif OurRadioButton3.Checked Then OurTextBox.TextMode = TextBoxMode.Password end if end sub sub Text_Changed(s as Object,e as EventArgs) OurLabel.Text="You have changed the text in the " + OurTextBox.TextMode.ToString() +
C# web_textbox_cs.aspx
<%@ page language="cs" runat="server"%> <script runat=server> void Radio_Click(Object sender,EventArgs e){ if (OurRadioButton1.Checked){ OurTextBox.TextMode = TextBoxMode.SingleLine; }else if (OurRadioButton2.Checked){ OurTextBox.TextMode = TextBoxMode.MultiLine; OurTextBox.Rows = 5; }else if (OurRadioButton3.Checked){ OurTextBox.TextMode = TextBoxMode.Password; } } void Text_Changed(Object sender,EventArgs e){ OurLabel.Text="You have changed the text in the " + OurTextBox.TextMode.ToString() + " box"; } </script> <html> <head> <title>Web Controls - TextBox</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <form runat="server"> Pick what kind of textbox you would like this to be:<br> <asp:RadioButton AutoPostBack="true" Text="Single Line" GroupName="OurRadioButtonGroup" OnCheckedChanged="Radio_Click" runat="server" Checked="true" /> <br> <asp:RadioButton AutoPostBack="true" Text="Multi Line" GroupName="OurRadioButtonGroup" OnCheckedChanged="Radio_Click" runat="server" /> <br> <asp:RadioButton AutoPostBack="true" Text="Password" GroupName="OurRadioButtonGroup" OnCheckedChanged="Radio_Click" runat="server" /> <br> <asp:TextBox AutoPostBack="true" TextMode = "SingleLine" OnTextChanged="Text_Changed" runat="server" /> <br> <asp:Label EnableViewState="false" runat="Server" /> </form> </body> </html> As you can see in Figure 7.9, changing the contents of the TextBox has caused the OnTextChanged event. I have also set the TextBox Web server control's TextMode property to Multiline and set the Rows property to 5 to show multiple lines.
Figure 7.9. The TextBox web server control can produce three different types of Text form elements; a standard text box, a multi-line text area, and a password text box.
| Top |
