Working in Source and Split Views to Build a One-Page Web Application

Common properties for web server controls

The first table in figure 2-9 presents the properties for web server controls that you’re most likely to use as you develop web forms. If you’ve worked with Windows controls, you’ll notice that many of the properties of the web server controls provide similar functionality. For example, you use the ID property to name a control that you need to refer to in code, and you can use the Text property to determine what’s displayed in or on the control. However, the AutoPostBack, CausesValidation, EnableViewState, and Runat properties are unique to web server controls. Since you already know the purpose of the Runat property, I’ll focus on the other three properties here.

The AutoPostBack property determines whether the page is posted back to the server when the user changes the value of the control. Note that this property is only available with certain controls, such as check boxes, drop-down lists, and radio buttons. Also note that this property isn’t available with button controls. That’s because button controls always either post a page back to the server or display another page.

The CausesValidation property is available for button controls and determines whether the validation controls are activated when the user clicks the button. This lets you check for valid data before the page is posted back to the server. You’ll learn more about validation controls a few figures from now.

The EnableViewState property determines whether a server control retains its property settings from one posting to the next. For that to happen, the EnableViewState property for both the form and the control must be set to True. Since that’s normally the way you want this property set, True is the default.

The second table in this figure lists four more properties that are commonly used with drop-down lists and list boxes. However, you don’t need to set these at design time. Instead, you use them when you write the Visual Basic code for the code-behind file. For instance, you use the Items collection to add, insert, and remove ListItem objects. And you use the SelectedValue property to retrieve the value of the currently selected item. You’ll learn more about these properties when you review the code-behind file for the Future Value form.

Common web server control properties  

Common properties of drop-down list and list box controls   

Note

• When buttons are clicked, they always post back to the server. That’s why they don’t have AutoPostBack properties.

--------------------------------------------Figure 2-9  Common properties for web server controls

How to work in Source and Split views

As you design a form in Design view, HTML and asp tags are being generated in Source view. This is the code that’s used to render the web page that’s sent to the user’s browser. What you see in Design view is just a visual representation of that code. In many cases, you’ll need to work in Source view to get a page to look just the way you want it to. You may also want to work in Split view so you can see both Design view and Source view at the same time.

How to use Source view to modify the design

As you saw in the last chapter, HTML consists of tags. For instance, the <form> and </form> tags mark the start and end of the HTML code for a web form. And the <table> and </table> tags mark the start and end of the HTML code for a table.

In addition to the HTML tags, ASP.NET adds asp tags for the web server controls that are added to the form. In figure 2-10, you can see some of the asp tags for the Future Value form. For instance, the <asp:DropDownList> and </asp:DropDownList> tags mark the start and end of the code for a drop-down list. Within these tags, you’ll find the code for the property settings of the controls. Note, however, that all of this asp code is converted to HTML before the page can be sent to a browser, because a browser can only interpret HTML.

Because the file that contains the source code for a web form has an aspx extension, we refer to the source code for a form as aspx code. This also indicates that the code contains both HTML and asp tags.

In case you need it, chapter 5 presents a crash course in HTML. In the meantime, though, you may be surprised to discover how easy it is to modify the design of a form by adjusting the aspx code using the HTML Editor.

To start, you can modify the title of the form that you’ll find between the Head tags near the top of the source code. This is the title that’s displayed in the title bar of the browser when the form is run (see figure 2-5). In this example, the title has been changed from “Untitled Page” to “Chapter 02: Future Value.” As you will see, all of the applications in this book have titles that indicate both the chapter number and the type of application.

You can also use this technique to change the text that has been entered into a form or to change some of the settings for HTML elements. If, for example, you want to change the text in the first row of the table from “Monthly investment” to “Investment amount,” you can just edit the text in Source view. And if you want to modify the color for the heading, you can do that too. As you edit, just follow the syntax of the other entries, which will be easier to do after you read chapter 5.

To change the properties of a server control, you can click in the starting asp tag to select the control. Then, you can use the Properties window just as if you were in Design view. When you change a property, the attribute that represents the property in the asp tag for the control is changed. You can also change the attributes directly in the source code whenever the syntax is obvious. That’s often the fastest way to make an adjustment.

The design of the Future Value form in Source view

How to change the title of the form

• Change the text between the <title> and </title> tags.

How to change the HTML and text for the form

• Change the source code itself.

How to change the property settings for a control

• To select a control, move the insertion point into the asp tag for the control. Then, use the Properties window to change the property settings for the control. Or, you can modify the property settings in the source code itself.

Description

1. Design view presents a visual representation of the code that you see in Source view.
   
2. The source code includes HTML tags and asp tags. Before the form is sent to a browser, the asp tags are converted to HTML because browsers can only run HTML. 
    
3. The properties you set for a control appear as attributes in the asp tag for the control. 
    
4. We refer to the source code as aspx code, because the source files have aspx extensions.

--------------------------------------------Figure 2-10   How to use Source view to modify the design of a form

How to use Split view to work with the design

In addition to Design view and Source view, Visual Studio 2008 introduces Split view. Figure 2-11 shows how the Future Value form appears in Split view. When you use this view, you can see the aspx code for the form and the visual representation of that code at the same time. This is particularly helpful when you need to make minor adjustments to the appearance of a form. Then, you can check that the changes you make in Source view look the way you want them to without having to switch to Design view.

Note that when you make a change in Source view, the change isn’t automatically reflected in Design view. Instead, a bar is displayed at the top of the Design view window that indicates that the two views are out of sync. In this figure, this bar was displayed when I changed the text in the first cell of the table. To synchronize the two views, you can click on this bar or anywhere in the Design view window. In contrast, if you make a change in Design view, it’s reflected immediately in Source view.

The design of the Future Value form in Split view

Description

1. With Visual Studio 2008, you can also use Split view to work with the design of a form.
   
2. When you work in Split view, the top half of the designer window displays the form in Source view, and the bottom half of the window displays the form in Design view. This can make it easier to work with these two views. 
    
3. If you make a change in Design view, it’s reflected immediately in Source view. If you make a change in Source view, however, a bar is displayed at the top of the Design view window that indicates that Design view is out of sync with Source view. Then, you can click this bar or anywhere in the Design view window to synchronize the views.

--------------------------------------------Figure 2-11   How to use Split view to work with the design of a form

The aspx code for the Future Value form

Figure 2-12 presents the aspx code for the Future Value form that has been developed thus far (except for the Page and Doctype directives, which you’ll learn more about in chapter 5). For now, though, please note that the code for the title that’s displayed in the web browser is between the <head> tags, along with the code for the style classes that are used by the form, and the code for the form design is between the <div> tags.

Within the <div> tags, I’ve highlighted the code for the HTML image control and the code for the six web server controls. If you study this code, you can see how the properties are set for each of these controls. For instance, you can see that I set the Width properties of the button controls to 100 pixels so they are both the same width. You can also see that I set the width of the drop-down list to 106 pixels, even though it appears to be the same width as the text boxes, which are 100 pixels wide. My point is that the sizing properties in the aspx code aren’t always consistent, so you often have to fiddle with these properties to get the design the way you want it.

Before I go on, I want to point out that when you drag an image from the Solution Explorer, an Accessibility Properties dialog box is displayed. This is a new feature of Visual Studio 2008 that lets you set two properties for the HTML image control. First, it lets you set the Alternate Text property (Alt), which specifies the text that’s displayed if for some reason the image can’t be displayed. Because the version of HTML that Visual Studio 2008 uses requires this property, you’ll want to be sure to enter a value for it.

Second, it lets you specify the Long Description property (LongDesc), which provides a Uniform Resource Indicator (URI) to a more extensive description of the image. A URI can be the address of a web page (a URL) or a name that identifies a resource or a unit of information (a URN, or Uniform Resource Name). The Long Description property isn’t required, and in most cases you’ll leave it blank.

The aspx code for the Future Value form

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Chapter 02: Future Value</title>
    <style type="text/css">
        .style1
        {
            color: #0000FF;
            font-size: x-large;
            font-weight: bold;
        }
        .style2
        {
            width: 140px;
            height: 23px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img alt="Murach" src="Images/MurachLogo.jpg"
            style="width: 150px; height: 65px" /><br /><br />
        <span class="style1">401K Future Value Calculator</span><br /><br />
        <table>
            <tr>
                <td class="style2">Monthly investment</td>
                <td><asp:DropDownList ID="ddlMonthlyInvestment"
                        runat="server" Width="106px"></asp:DropDownList></td>
            </tr>
            <tr>
                <td class="style2">Annual interest rate</td>
                <td><asp:TextBox ID="txtInterestRate" runat="server"
         Width="100px">6.0</asp:TextBox></td>
            </tr>
            <tr>
                <td class="style2">Number of years</td>
                <td><asp:TextBox ID="txtYears" runat="server"
         Width="100px">10</asp:TextBox></td>
            </tr>
            <tr>
                <td class="style2">Future value</td>
                <td><asp:Label ID="lblFutureValue" runat="server"
                        style="font-weight: 700"></asp:Label></td>
            </tr>
            <tr>
                <td class="style2"></td>
                <td></td>
            </tr>
            <tr>
                <td class="style2"><asp:Button ID="btnCalculate" runat="server"
                   Text="Calculate" Width="100px" /></td>
                <td><asp:Button ID="btnClear" runat="server"
                        Text="Clear" Width="100px" /></td>
            </tr>
        </table>
        </div>
    </form>
</body>
</html>

--------------------------------------------Figure 2-12  The aspx code for the Future Value form

Please check back tomorrow for the continuation of this article.