Intrinsic Controls
| Intrinsic controls create HTML-style elements on the client. They are intelligent controls that can automatically maintain state and provide extra features, or just output plain HTML elements. The Intrinsic controls are shown in Table 6.1. When you look at the list of Intrinsic controls, you'll probably notice that most have an equivalent HTML tag. For example, the asp:CheckBox control outputs an INPUT tag of type CheckBox . The following ASP.NET server control code is followed by the HTML code that it outputs: ASP.NET Server Control Code: <asp:CheckBox runat="server" /> Resulting HTML Code: <input type="CheckBox"> The next question that comes to mind is, "Why not just use the HTML code?" The answer has several facets. For starters, the asp:CheckBox control allows the persistence of state without any additional code. (Among other examples, an example later in this section on Intrinsic controls, named "Using the CheckBox Control," shows how this works with an asp:CheckBox control.) Another good reason to use a server control is that a non-programmer can set the attributes of the asp:CheckBox control in the Property window in Visual Studio. For your convenience, I've created a reference section on www.UsingASP.net that lists the Intrinsic controls and shows their properties. I've also included examples for most of them that you can see when you go to the Web site. Note For online examples, go to www.UsingASP.net. Follow the links to Chapter Examples, Chapter 6, and select Intrinsics. Table 6.1. The Intrinsic ASP.NET Server Controls
As you can see, the Intrinsic server controls output HTML code that you'd expect. All these controls are sensibly named so that there's an expected correlation between server control and HTML output. Using the asp:TextEdit ControlThe asp:TextEdit control gives you full and complete control of editable text fields. That means you'll use it any time you need to ask users for some sort of text input, such as a name and address or a username and password. So far, I've spoken in abstract terms about executing at the server and persisting user data. Now it's time to get down to earth and use this control to illustrate how this works. The place to start is with some simple and plain HTML code (plus a small amount of traditional ASP VB code) as follows : <html> <body> <% If len(Request.Form("YourName")) > 0 Then Response.Write("Your name is " & _ Request.Form("YourName") & ".<br>") End If %> <form action="ThisPage.asp" method="post"> <p>Your Name: <input type="text" name="YourName"></p> <input type="submit" value=" OK "> </form> </body> </html> Imagine that this code is named ThisPage.asp. If a user types in his name and clicks OK, the form is submitted to the ThisPage.asp page (yes, submitted back to itself ”also known as a postback ). The Request.Form() method finds content in the YourName form field and outputs something similar to the following line in the HTML code: Your name is Joe Smith. This example can be found on the Web site, and is shown in Figure 6.2. Figure 6.2. The name entered appears, but does not persist in the text box. That's well and good, but the form field itself is now blank ”the data that the user entered is gone. You can, however, repopulate the field with the following code that uses a Response.Write() to put the form data into the field: <p>Your Name: <input type="text" value="<%Response.Write(Request.Form("YourName"))%>" name="YourName"></p> This is a lot of code, though, and with enough of these scattered throughout your page, things get pretty hard to follow. Fortunately, there's a better way. If you use the asp:TextBox control, data that users type persists. The following code shows how to use the control and achieve the same results: <p>Your Name: <asp:TextBox id="MyName" runat="server" /></p> Note The www.UsingASP.net Web site offers several examples that illustrate the use of the asp:TextBox control. Follow the links to Chapter Examples, Chapter 6, select Intrinsics, and go to TextBox. The first example contains two editable fields: one using simple HTML and the other using asp:TextBox . When you enter text and click on the Submit button you'll see the different behaviors. Figure 6.3 shows this example. Figure 6.3. This example shows the behavior of traditional HTML and asp:TextBox . The server controls raise a variety of events. And you don't necessarily have to use the Request.Form() method to get the text data from an asp:TextBox control. The following two lines output the exact same text from an asp:TextBox control named UserInput : Response.Write(Request.Form("UserInput")) Response.Write(UserInput.Text) You can easily add an event handler to ASP.NET controls. Each control has a default event ”the event that probably will be used the most. For example, buttons have the Click event as their default event. To create an event handler for the default event, just double-click the control in Design mode. The event handler will be created, and it'll be opened up in the source code editor where the event handler has just been added. You can easily add an event handler. The first step is to add the code to handle the event. The second thing you must do is set the control's event property to the correct method name so that it knows what to fire. You also must be sure that the AutoPostBack property is set to true ; otherwise , the OnTextChanged method isn't called until the page is refreshed. The following code raises an event in response to changing text in an asp:TextBox control: The VB Code Sub ShowTheText(Sender As Object, Args As EventArgs) DivText.innerText = UserText.Text End Sub The .ASPX code Persitent Text: <div id="DivText" runat="server"></div><br> <p><asp:Textbox id="UserText" runat="server" /></p> Note The www.UsingASP.net Web site provides an example of this on the TextBox page. You can see this online example in Figure 6.4. Figure 6.4. This asp:TextBox control raises an event when text is changed. You can try your hand at using ASP.NET server controls right now, whether you have a Web server to work with or not. Find the TextBox sample page on the Web site and scroll down to the bottom. You'll see a large field into which you can create your own aspx code and test it out. Figure 6.5 shows the code I typed in next to the resulting test page that was created and displayed. Figure 6.5. You can try it out even if you don't have a server. Using the asp:CheckBox ControlThe CheckBox control outputs HTML code of the CheckBox input variety. These elements are important for giving users yes/no choices. In its simplest form, all you need is the following syntax: <asp:CheckBox runat="server" /> Note You might notice that the example just given has no ID. If you omit an ID from your control declaration, one will be added into the HTML at runtime. Two properties to note for CheckBox control are Checked and TextAlign . It is important to understand these as you use the CheckBox control. The Checked property indicates whether the control is checked. The TextAlign property determines how the text is aligned. The examples in Table 6.2 show how these properties affect the appearance of the control. Note that the default for Checked is false , and the default for TextAlign is right . Table 6.2. The Effect of the Checked and TextAlign Properties
The CheckBox control can raise one event, the OnCheckChanged event. To hook this method, you must create a handler (by double-clicking on the control). The following code shows a CheckBox control that raises an event in response to users clicking on a check box: VB Code Sub ShowTheCheck(Sender As Object, Args As EventArgs) If MyCheckBox.Checked = false Then DivText.innerText = "CheckBox:false" Else DivText.innerText = "CheckBox:true" End If End Sub .ASPX Code <div id="DivText" runat="server">Checkbox:false</div> <asp:CheckBox id="MyCheckBox" Text="Test Me" runat="server" /> Note The www.UsingASP.net Web site provides an example of this on the CheckBox page. You can see this online example in Figure 6.6. Figure 6.6. This asp:CheckBox control raises an OnCheckedChanged event. Note Just as with the TextBox control, there's a place on the www.UsingASP.net Web site where you can type some ASP.NET code and see whether it works. In fact, all the control pages that are part of the Chapter 6 examples have this capability at the bottom. You'll learn a lot more if you go out and try the controls after you read about them in this chapter. Using the asp:RadioButton ControlRadio buttons give you a great way to offer a choice to users when only one selection of several is allowed, and a small number of choices are available. The ASP.NET RadioButton server control gives you the capability to maintain state with no additional code, and to raise an event in response to an event on the client. The following two examples show you traditional HTML code for a radio button, followed by the ASP.NET server control code that does the same thing: HTML Code: <input type="radio"> ASP.NET Server Control Code: <asp:RadioButton runat="server" /> As you'd expect, the RadioButton control persists the data just as the TextBox and CheckBox controls do. As with the CheckBox control, a Checked property indicates whether the given radio button is currently selected. A very important property is the GroupName property. This tells the browser how to associate or group radio buttons on a page. For example, if you have two selection categories, one for ice cream flavors and one for soft drinks, you'd name the radio buttons in each group accordingly ”maybe Flavor for the ice cream selection and Drink for the drink selection. When a user makes a selection in the Flavor group, the browser enforces the need for a single and unique button selection within that group. You wouldn't want the other unrelated group to be affected by a selection in this group. The following code illustrates this. It has two groups, each having a different name for the GroupName property. What is your favorite ice cream flavor?<br> <asp:RadioButton GroupName="Flavor" Text="Vanilla" Checked="true" runat="server" /><br> <asp:RadioButton GroupName="Flavor" Text="Chocolate" runat="server" /><br> <asp:RadioButton GroupName="Flavor" Text="Strawberry" runat="server" /> What is your favorite soft drink?<br> <asp:RadioButton GroupName="Drink" Text="Iced Tea" Checked="true" TextAlign="left" runat="server" /><br> <asp:RadioButton GroupName="Drink" Text="Coke" TextAlign="left" runat="server" /><br> <asp:RadioButton GroupName="Drink" Text="Fruit Punch" TextAlign="left" runat="server" /> Note You're probably wondering how ASP.NET works its magic to achieve a persistent state for the controls. You might have even looked at the HTML source when your browser opens an .aspx page and noticed some strange -looking tags. The trick is a hidden field that stores the state of the controls. The code for saving the state in a simple TextBox example is as follows: <INPUT type="hidden" name="__VIEWSTATE" value="a0z1480251294__x"> The information within the __VIEWSTATE field is not really encrypted, although the values definitely are cryptic ( mainly because server controls try to store information in as compact a format as possible, and because my serializer performs some limited compression). You can see how much view state each control is saving by enabling tracing for the page. For example, you can add a trace attribute to the page directive as follows: <%@ Page Language="VB" Trace="true" %> This causes a table to be output at the bottom of the page. This doesn't show the exact values stored in the view state, but does give you a rough estimate of the size of each server control value. (More on tracing in Chapter 22.) Note that you can disable the view state feature, either for the entire page or on specific server controls. This is done at the page level by setting the following page directive: <%@ Page Language="VB" MaintainState="False" %> or on an individual server control by setting a MaintainState attribute: <asp:datagrid id="MyGrid1" maintainstate="false" runat=server/> Note The www.UsingASP.net Web site includes an example on the RadioButton page that uses RadioButton controls. You can see this online example in Figure 6.7. Figure 6.7. This asp:RadioButton example asks for a favorite flavor. RadioButton controls can raise an event in response to a selection change within a group. To make this happen, you must set the OnCheckedChanged property to your handler method. You also can set the AutoPostBack property to true if you want to respond immediately to changes. |
Example 1 
Example 2 
EAN: 2147483647
Pages: 233