📄 aspnet02-04.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><!-- saved from url=(0076)http://msconline.maconstate.edu/tutorials/aspnet20/ASPNET02/aspnet02-04.aspx --><title>ASP.NET Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="aspnet02-04_data/stylesheet.css" type="text/css" rel="stylesheet">
<style>TABLE#BookGrid TD {
FONT-SIZE: 11pt; FONT-FAMILY: times new roman
}
TH {
FONT-SIZE: 11pt; FONT-FAMILY: times new roman
}
</style>
<meta content="MSHTML 6.00.2900.2180" name="GENERATOR"></head><body onscroll="document.all.PageScroll.value=document.body.scrollTop" onload="document.body.scrollTop=document.all.PageScroll.value">
<form id="ctl00" name="ctl00" action="aspnet02-04.aspx" method="post">
<div><input id="__VIEWSTATE" value="/wEPDwUKMTk0NTI3NDEwNg9kFgICAQ9kFgoCCw88KwANAGQCDQ8PFgIeBFRleHQFGFNhdHVyZGF5LCBNYXJjaCAyOSwgMjAwOGRkAg8PDxYCHwAFCjg6MzQ6MTAgQU1kZAITDw8WAh8ABRhTYXR1cmRheSwgTWFyY2ggMjksIDIwMDhkZAIVDw8WAh8ABQo4OjM0OjEwIEFNZGQYAQUIQm9va0dyaWQPZ2R7U3b+kNAMv/H3eVgQcYIv/GYhhQ==" name="__VIEWSTATE" type="hidden"> </div><input id="PageScroll" style="visibility: hidden; position: absolute;" name="PageScroll">
<div class="body">
<div class="divhead">Basic Page Design</div>
<p>ASP.NET pages normally are not static Web pages that display identical
content each time they are opened. Certainly, portions of these pages may
display fixed content hard-coded as text and XHTML much like standard Web pages.
The usual situation, though, is one requiring dynamic content, displaying
information that changes in response to changing user needs or to the changing
status of the information itself.</p>
<p>Consider the page shown in Figure 2-25. When this page opens, a fixed heading
and text paragraph appear, unchanging from one page display to the next. A
textbox and button are displayed for user input. When the button is clicked, the
page content changes. The name entered into the textbox becomes part of a
dynamically created welcome message that includes the current date and time.
Also, selected information is drawn from a database for display in a dynamically
created table. This page setup is fairly typical for ASP.NET pages. It includes
fixed and dynamic content, the latter generated by on-page scripts. It follows
an input, processing, and output design model.</p>
<div class="page" style="height: 400px;">
<h2>Welcome to My Store</h2>
<p>Enter your name in the box below and click the button for our special
offers.</p>Name: <input id="NameIn" name="NameIn"> <input value="See Specials" name="ctl01" type="submit">
<p><span id="GreetingOut"></span></p></div>
<div class="figure"><b>Figure 2-25.</b> Producing dynamic content for a Web
page.</div>
<p class="head2">ASP.NET Page Coding</p>
<p>When creating an ASP.NET page, it is best to consider <i>first</i> the XHTML
code and server controls needed to produce the final page display. In the above
example, the results page is composed of hard-coded text and XHTML for the
unchanging text portions of the page, along with five server controls to capture
user input, to trigger script processing, to serve as display targets for script
output, and to link to a database to retrieve information for display. These
page components are coded as shown below.</p><pre class="divcode"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome Page</title>
</head>
<body>
<b><form Runat="Server"></b>
<h2>Welcome to My Store</h2>
<p>Enter your name in the box below and click the button for our special
offers.</p>
Name: <<b>asp:TextBox</b> id="NameIn" Runat="Server"/>
<<b>asp:Button</b> Text="See Specials" OnClick="Display_Output" Runat="Server"/>
<p><<b>asp:Label</b> id="GreetingOut" Runat="Server"/></p>
<<b>asp:AccessDataSource</b> id="BookSource" Runat="Server"
DataFile="c:\eCommerce\Databases\BooksDB.mdb"
SelectCommand="SELECT BookID, BookName, BookPrice FROM Books
WHERE BookSale = True
ORDER BY BookID"/>
<<b>asp:GridView</b> id="BookGrid" DataSourceID="BookSource" Runat="Server"
Visible="False"/>
<b></form></b>
</body>
</html>
</pre>
<div class="listing"><b>Listing 2-29.</b> Code to produce dynamic content for a
Web page.</div>
<p>The server controls used on this page are typical of the kinds of input,
output, and script activation controls that appear on many ASP.NET pages.
Although these particular controls are covered in more detail later, their
general formats are summarized below so you can begin coding your own ASP.NET
pages.</p>
<p class="head3">The <form> Tag</p>
<p>As mentioned previously, the <span class="code"><body></span> of an
ASP.NET page includes a <span class="code"><<b>form</b>
Runat="Server"></span> tag encompassing all page content. Its general format
is repeated below.</p>
<table class="format" cellpadding="10">
<tbody>
<tr>
<td class="code"><pre><<b>form</b> Runat="Server">
...<i>server controls and XHTML code</i>
<<b>/form</b>>
</pre></td></tr></tbody></table>
<div class="figure"><b>Figure 2-26.</b> General format for <span class="code"><form></span> tag.</div>
<p>Pages are required to include this <span class="code"><form></span> tag
any time there is a call to a subprogram from a server control. Some pages may
not require it; however, it is a good idea to include this tag on <i>all</i>
ASP.NET pages, whether required or not, just to maintain the coding habit and to
ensure that any type of control can be included on the page.</p>
<p class="head3">The <asp:TextBox> Control</p>
<p>Soliciting user input to a page often makes use of a textbox for entering
information. Under ASP.NET, a textbox is displayed with the <span class="code"><b><asp:TextBox></b></span> control whose basic format is shown
below.</p>
<table class="format" cellpadding="10" width="100%">
<tbody>
<tr>
<td class="code"><pre><<b>asp:TextBox</b> <b>Runat</b>="Server"
<b>id=</b>"<i>id</i>"
<b>Text=</b>"<i>string</i>"
<b>/></b>
</pre></td></tr></tbody></table>
<div class="figure"><b>Figure 2-27.</b> General format for <span class="code"><asp:TextBox></span> control.</div>
<p>As is the case with all server controls, the <span class="code">Runat="Server"</span> attribute must be coded to make the TextBox
accessible by server scripts. Also, an <span class="code"><b>id
</b></span>property is required for script references to the control in order to
get or set its contents and properties. The <span class="code">id</span> can be
any programmer-supplied identification composed of alphabetic and numeric
characters along with the underscore ( <span class="code">_</span> ) character.
Blank spaces cannot appear in the <span class="code">id</span> value. In general,
the <span class="code">id</span> should be a recognizable name suggestive of the
contents of the TextBox.</p>
<p>A TextBox normally is displayed as an empty box for user input. However, it
can optionally display a text string by coding its <span class="code"><b>Text</b></span> property. This might be used, for instance, to
initially display an example response or to display a prompt for user input.
More importantly, since the <span class="code">Text</span> property is a reference
to the <i>contents</i> of the TextBox, it is the property that is referenced in
scripts to process input from users who have entered data into the TextBox.</p>
<p>In the above example, an <span class="code"><asp:TextBox></span> control
is coded in its minimal configuration to produce an empty textbox for user
input. An <span class="code">id</span> is supplied since a script needs to refer
to this control to access the name entered into the box.</p><pre class="divcode"><asp:TextBox id="NameIn" Runat="Server"/>
</pre>
<div class="listing"><b>Listing 2-30.</b> Code for a minimally configured TextBox
control.</div>
<p class="head3">The <asp:Label> Control</p>
<p>An <span class="code"><b><asp:Label></b></span> control defines an output
area on the page. It is a target area where scripts place output for display. It
has no visible presence except when text is assigned to the control. Its basic
format is shown below.</p>
<table class="format" cellpadding="10">
<tbody>
<tr>
<td class="code"><pre><<b>asp:Label</b> <b>Runat</b>="Server"
<b>id=</b>"<i>id</i>"
<b>Text=</b>"<i>string</i>"
<b>/></b>
</pre></td></tr></tbody></table>
<div class="figure"><b>Figure 2-28.</b> General format for <span class="code"><asp:Label></span> control.</div>
<p>The control must include a <span class="code">Runat="Server"</span> attribute
for accessibility from scripts; it also must be assigned an <span class="code"><b>id</b></span> identification for script reference. Its <span class="code"><b>Text</b></span> property refers to the text characters displayed
through this control. These characters can include XHTML tags in order to format
or style the enclosed text.</p>
<p>The Label control used in the previous example contains minimal coding to
identify it to a script. Since no <span class="code">Text</span> property is set
for the control, it has no initial value and no visible presence on the page. It
serves as an output target, a "placeholder" on the page where text appears when
a script assigns output to the <span class="code">Text</span> property of the
control.</p><pre class="divcode"><asp:Label id="GreetingOut" Runat="Server"/>
</pre>
<div class="listing"><b>Listing 2-31.</b> Code for a minimally configured Label
control.</div>
<p>Although used here as an empty output area to await script assignment, a
Label can display static text by coding its <span class="code">Text</span>
property. This might be done, for instance, to display an initial message on the
page that is later replaced by a script-generated message.</p>
<p class="head3">The <asp:Button> Control</p>
<p>A way is needed for the user to trigger a script to write an output paragraph
to the previous Label control. A typical method is to create an <span class="code"><b><asp:Button></b></span> control to call a subprogram to
produce this output.</p>
<table class="format" cellpadding="10">
<tbody>
<tr>
<td class="code"><pre><<b>asp:Button</b> <b>Runat</b>="Server"
<b>id=</b>"<i>id</i>"
<b>Text=</b>"<i>string</i>"
<b>OnClick=</b>"<i>subprogram</i>"
<b>/></b><br>
</pre></td></tr></tbody></table>
<div class="figure"><b>Figure 2-29.</b> General format for <span class="code"><asp:Button></span> control.</div>
<p>An <span class="code"><asp:Button></span> control may or may not need an
<span class="code"><b>id</b></span>. An <span class="code">id</span> is not required
when the button is used only to call a subprogram. If, on the other hand, the
script needs to refer to the button, say to change its styling or its text label
as visual confirmation that the button was clicked, then an <span class="code">id</span> is required to identify this control to the script. In the
present example, the script has no need to reference the button, therefore there
is no need for an <span class="code">id</span>.</p><pre class="divcode"><asp:Button Text="See Specials" OnClick="Display_Output" Runat="Server"/>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -