Using the Literal Web Control
| The Literal Web control is one of the simplest Web controls. The HTML markup rendered by the Literal Web control is precisely the value of the Web control's Text property. To illustrate the Literal's behavior, let's create an ASP.NET page that has a Literal control. Start by creating a new ASP.NET web page named LiteralControl.aspx; as always, make sure that the Language selected is Visual Basic and that the Place Code in a Separate File check box is checked. Next, drag the Literal control from the Toolbox onto the page. Figure 8.1 shows the Design view after the Literal control has been added. Figure 8.1. A Literal Web control has been added to the designer. Make sure that the Literal Web control you just added is selected, and then examine the Properties window in the lower-right corner. Note that the Literal Web control has only six properties. These six properties, as displayed in the Properties window, are
The only two properties that we will be working with in this hour are the ID and Text properties. As with the financial calculator example we examined in Hour 4, the ID property uniquely names the Web control so that its properties can be referenced in the source code portion of the ASP.NET web page. The Text property of the Literal Web control is the value that is displayed in the ASP.NET web page when the Literal Web control is rendered. When the Literal Web control's Text property is not set, the Literal Web control is shown in the designer as [Literal "ID"] where ID is the value of the Literal Web control's ID property. In Figure 8.1 the Literal control is displayed as [Literal "Literal1"] because the ID property value is Literal1, and the Text property is not set. If the Text property is set to some value, though, the designer displays the Literal Web control as this property value. For example, take a moment to change the Literal Web control's Text property to Hello, World!. Figure 8.2 shows the designer after this change has been made. Note that the Literal Web control is displayed in the designer as the text "Hello, World!". Figure 8.2. The Literal Web control is displayed as "Hello, World!" in the designer. Now that we've added this Literal Web control and set its Text property, let's view this ASP.NET web page through a browser. Go to the Debug menu and choose Start Without Debugging. Figure 8.3 shows the LiteralControl.aspx web page when viewed through a browser. Note that the output is simply the value "Hello, World!". Figure 8.3. LiteralControl.aspx, when viewed through a web browser. After you have loaded the web page in your web browser, view the HTML source code received by your browser. Listing 8.1 contains the HTML received by my browser when testing this page. Listing 8.1. The HTML Markup Produced by the LiteralControl.aspx Web Page
In Listing 8.1, line 14 contains the HTML markup produced by the Literal Web control. It is precisely the value of the Literal Web control's Text property. The remainder of the HTML markup is a byproduct of the HTML content added when creating a new ASP.NET web page with the Web Matrix Project.
Setting the Literal Control's Text Property ProgrammaticallyAs we just saw, the Text property of the Literal Web control can be set through the Properties window. If you know what the Text property's value should be, there is nothing wrong with using this approach. However, if you want the value of the Text property to be dynamic, you will have to set the property value through the source code portion of your ASP.NET page. For example, imagine that you wanted to use a Literal control to display the current date and time. Programmatically, the current date and time can be retrieved by the DateTime.Now property. To set the Literal control's Text property programmatically, we can use the following syntax in our source code portion: LiteralControlID.Text = value LiteralControlID is the value of the Literal Web control's ID property, and value is a string value that we want to assign to the Label Web control's Text property. Let's create an ASP.NET web page that uses a Label Web control to display the current date and time. Start by creating a new ASP.NET web page named LiteralTime.aspx, and then drag and drop a Literal Web control onto the designer. We don't need to set the Text property through the Properties window because we will be setting this property programmatically. We should, however, rename the Literal Web control's ID property from the ambiguous Label1 to something more descriptive, such as currentTime. After you have added the Label Web control and changed its ID property to currentTime, take a moment to compare what your screen looks like with Figure 8.4. Figure 8.4. The designer after the Literal Web control has been added and its ID property set. After we've added the Literal Web control and set its ID property to currentTime, we're ready to add the needed source code. Start by creating an event handler for the page's Load event by double-clicking in the Design view region or going to the source code portion and selecting (Page Events) from the left drop-down list and Load from the right. For this ASP.NET web page, we want to have the Literal Web control's Text property set to the current date and time whenever the page is visited. Therefore, we will do so in the Page_Load event handler. Enter the following code into your Page_Load event handler: currentTime.Text = DateTime.Now After you have entered this source code content, save the ASP.NET web page and view it through a web browser. Figure 8.5 shows the LiteralTime.aspx web page when viewed through a browser. Figure 8.5. The current date and time are displayed.
Let's take a moment to examine the HTML markup received by the web browser. Listing 8.2 contains this HTML content. Listing 8.2. The HTML Markup Produced by the LiteralTime.aspx Web Page
The important line to pay attention to is line 14, which is the HTML markup produced by the Literal Web control. When the browser requests the LiteralTime.aspx web page, the ASP.NET engine executes the page. The Page_Load event handler is fired, and the source code within that event handler is executed. This single line of code sets the currentTime Literal Web control's Text property to the current date and time. After executing the Page_Load event handler, the ASP.NET engine renders the Web controls in the HTML portion. By this point, the Literal Web control has had its Text property set to the current date and time. The Literal Web control renders as this current date and time, and it is this HTML, along with the additional static HTML markup that was included by Visual Web Developer, that is sent to the web browser. When refreshing your web browser, the entire process is repeated, and the HTML sent back to your browser has the updated date and time.
The Literal Web control does not contain any properties to specify the format of the output. If you need to format the Literal control's output, you will have to insert the appropriate HTML markup in the control's Text property. For example, to display the current time in a bold font, you would need to explicitly include the HTML bold element (<b>): currentTime.Text = "<b>" & DateTime.Now & "</b>" Clearly, the Literal Web control is not well suited for displaying formatted text. The Label Web control, which we'll examine in the next section, has a host of properties that make formatting the Label control's output a breeze. The Literal Web control is most useful in scenarios in which you need to precisely output specific markup. The Label control's emitted markup depends on both its Text property and its formatting property values. The Literal control, however, offers finer control over the output because it emits just the value of its Text property. |
/xhtml1/DTD/xhtml1-transitional.dtd"> 2: 3: <html xmlns="http://www.w3.org/1999/xhtml" > 4: <head><title> 5: Untitled Page 6: </title></head> 7: <body> 8: <form name="form1" method="post" action="LiteralControl.aspx" > 9: <div> 10: <input type="hidden" name="__VIEWSTATE" value=" 
EAN: 2147483647
Pages: 233