Building a Web Form in ASP.NET - How to work in Source view
(Page 5 of 5 )
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 figure 2-10, you can see some of the tags for the Future Value form after the Designer has been switched to Source view.
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. 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 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. If you want to change the width of a cell, you can edit that entry. 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
Figure 2-10. How to use Source view to modify the design of a form
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
- Design view presents a visual representation of the code that you see in Source view.
- 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.
- The properties you set for a control appear as attributes in the asp tag for the control.
- We refer to the source code as aspx code, because the source files have aspx extensions.
The aspx code for the Future Value form
Figure 2-11 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, 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. And you can see that I had to set the height of the cells in the fifth row of the table to give that row an adequate height. 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 create an HTML image control by dragging the image from the Solution Explorer, it’s generated with just a Src property that identifies the name and location of the image. However, the version of HTML that Visual Studio 2005 uses also requires the Alt attribute, which specifies the text that’s displayed if for some reason the image can’t be displayed. Because of that, I had to add this property to the HTML code for the control.
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>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="Images/MurachLogo.jpg" alt="Murach"/><br /><br />
<strong><span style="font-size: 20pt; color: blue">401K
Future Value Calculator<br /></span></strong><br
/>
<table>
<tr>
<td style="width: 149px">Monthly investment</td>
<td style="width: 71px">
<asp:DropDownList ID="ddlMonthlyInvestment"
runat="server" Width="106px">
</asp: DropDownList></td>
</tr>
<tr>
<td style="width: 149px">Annual interest rate</td>
<td style="width: 71px">
<asp:TextBox ID="txtInterestRate" runat="server"
Width="100px"> 6.0</asp:TextBox></td>
</tr>
<tr>
<td style="width: 149px">Number of years</td>
<td style="width: 71px">
<asp:TextBox ID="txtYears" runat="server"
Width="100px"> 10</asp:TextBox></td>
</tr>
<tr>
<td style="width: 149px">Future value</td>
<td style="width: 71px">
<asp:Label ID="lblFutureValue" runat="server"
Font-Bold="True"></asp:Label></td>
</tr>
<tr>
<td style="width: 149px; height: 25px"></td>
<td style="width: 71px; height: 25px"></td>
</tr>
<tr>
<td style="width: 149px">
<asp:Button ID="btnCalculate" runat="server"
BackColor= "LightGray" Text="Calculate"
Width="100px"
/></td>
<td style="width: 71px">
<asp:Button ID="btnClear" runat="server"
BackColor= "LightGray" Text="Clear"
Width="100px"
/></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Figure 2-11. The aspx code for the Future Value form
Please check back next week for the conclusion of this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from the book Murach's ASP.NET 2.0 Web Programming with VB2005, written by Doug Lowe (Murach, 2006; ISBN: 1890774324). Check it out today at your favorite bookstore. Buy this book now.
|
|
/ 35 
