📄 aspnet06-04.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><!-- saved from url=(0076)http://msconline.maconstate.edu/tutorials/aspnet20/ASPNET06/aspnet06-04.aspx --><title>ASP.NET Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="aspnet06-04_data/stylesheet.css" type="text/css" rel="stylesheet">
<style type="text/css">TABLE#Table1 TD {
FONT-SIZE: 12pt; VERTICAL-ALIGN: top; FONT-FAMILY: times new roman
}
TABLE#Table1 TH {
FONT-SIZE: 12pt; FONT-FAMILY: times new roman; TEXT-ALIGN: center
}
</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="aspnet06-04.aspx" method="post">
<div><input id="__VIEWSTATE" value="/wEPDwUJODEyNzY1NTE4ZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WBgUKQ2hlY2tCb3gwMQUKQ2hlY2tCb3gwMgUKQ2hlY2tCb3gwMwUDUmVkBQVHcmVlbgUEQmx1ZWKrljy/5+BsSxFXD1stQFx/V0r9" name="__VIEWSTATE" type="hidden"> </div><input id="PageScroll" style="visibility: hidden; position: absolute;" name="PageScroll">
<div class="body">
<div class="divhead"><asp:CheckBox> Control</div>
<p>The <span class="code"><b><asp:CheckBox></b></span> control creates a
single checkbox that can be used to input a user choice to a script. Multiple
CheckBoxes can be configured for additional choices. Unlike multiple RadioButton
controls, multiple CheckBoxes do not provide mutually exclusive choices. All or
none of a set of CheckBox controls can be checked. An example set of CheckBoxes
is shown below. Clicking the "Select" button reports the choices made.</p>
<div class="page"><b>Choose one or more checkboxes:</b><br><input id="CheckBox01" name="CheckBox01" type="checkbox"><label for="CheckBox01">CheckBox 1</label><br><input id="CheckBox02" name="CheckBox02" type="checkbox"><label for="CheckBox02">CheckBox
2</label><br><input id="CheckBox03" name="CheckBox03" type="checkbox"><label for="CheckBox03">CheckBox 3</label><br><br><input value="Select" name="ctl01" type="submit"><br><br><span id="TheLabel01"></span><br></div>
<div class="figure"><b>Figure 6-28.</b> Using CheckBox controls.</div>
<p class="head2">Format for CheckBox Control</p>
<p>The general format for the <span class="code"><asp:CheckBox></span>
control is shown below. As many CheckBox controls are created as are needed for
display.</p>
<table class="format" cellpadding="10">
<tbody>
<tr>
<td class="code"><pre><<b>asp:CheckBox</b> <b>id</b>="<i>id</i>" <b>Runat</b>="Server"
<b>AutoPostBack</b>="True|<u>False</u>"
<b>Checked</b>="True|<u>False</u>"
<b>Text</b>="<i>string</i>"
<b>TextAlign</b>="Left|<u>Right</u>"
<i>property</i>="<i>value</i>"...
<b>OnCheckedChanged</b>="<i>subprogram</i>"
<b>/></b>
</pre></td></tr></tbody></table>
<div class="figure"><b>Figure 6-29.</b> General format for <span class="code"><asp:CheckBox></span> control.</div>
<p>The <span class="code"><b>Text</b></span> attribute provides a label for the
CheckBox. With the <span class="code"><b>TextAlign</b></span> attribute the label
can appear to the right or left of the CheckBox. A CheckBox can be prechecked by
coding <span class="code"><b>Checked</b>="True"</span>. Since no value is
associated with a CheckBox, the script determines if it is checked by testing
its <span class="code">Checked</span> property. However, the <span class="code">Text</span> property of the control can be substituted for its
value.</p>
<p>Normally, CheckBoxes are tested by a script called by an associated button.
Alternately, the CheckBoxes themselves can trigger a script by setting their
<span class="code"><b>AutoPostBack</b>="True" </span>property and identifying a
subprogram to run in the <span class="code"><b>OnCheckedChanged</b>
</span>property.</p>
<p class="head2">Scripting CheckBoxes</p>
<p>CheckBoxes can be presented as a group of choices; however, these are not
mutually exclusive choices as in the case of radio buttons that are grouped
under a <span class="code">GroupName</span>. Each CheckBox is a separate and
distinct control that must be tested individually by a script to determine its
<span class="code">Checked</span> property. The following script and code works in
this fashion to produce the display at the top of this page.</p>
<div class="block"><pre class="divcode"><span class="script"><SCRIPT Runat="Server">
Sub Get_CheckBoxes (Src As Object, Args As EventArgs)
If CheckBox1.Checked Then
Message.Text &= "CheckBox 1 was checked<br/>"
End If
If CheckBox2.Checked Then
Message.Text &= "CheckBox 2 was checked<br/>"
End If
If CheckBox3.Checked Then
Message.Text &= "CheckBox 3 was checked<br/>"
End If
If Not CheckBox1.Checked AND Not CheckBox2.Checked _
AND Not CheckBox3.Checked Then
Message.Text = "Please select a CheckBox"
End If
End Sub
</SCRIPT>
</span>
<form Runat="Server">
<b>Choose one or more checkboxes:</b><br/>
<asp:CheckBox id="CheckBox1" Text="CheckBox 1" Runat="Server"/><br/>
<asp:CheckBox id="CheckBox2" Text="CheckBox 2" Runat="Server"/><br/>
<asp:CheckBox id="CheckBox3" Text="CheckBox 3" Runat="Server"/><br/><br/>
<asp:Button Text="Select" OnClick="Get_CheckBoxes" Runat="Server"/><br/>
<asp:Label id="Message" EnableViewState="False" Runat="Server"/>
</form>
</pre>
<div class="listing"><b>Listing 6-23.</b> Code and script to create and process
CheckBoxes.</div>
<p>Notice that the condition tests are separate <span class="code">If...End
If</span> statements in order to test each CheckBox's <span class="code">Checked</span> property individually. Label output is a list of one
or more concatenated lines. Therefore, the Label must have its View State turned
off so that repeated button clicks do not append lines to those already
displayed by a previous button click.</p>
<p>The following example modifies the previous rectangle-creation script to
permit a choice of color for the background of the <span class="code"><asp:Panel></span> control. Unlike the case of using mutually
exclusive radio buttons where the choice is one of three colors, using
checkboxes permits a combination of colors since more than one can be
chosen.</p>
<div class="page" style="height: 290px;">
<h3>Make a Rectangle</h3>
<table id="Table1" border="0" cellpadding="0">
<tbody>
<tr>
<th colspan="2">Width</th>
<th>Height</th>
<th>Color</th>
<th></th>
<th>Area</th></tr>
<tr>
<td><input id="Width" style="text-align: right;" maxlength="3" size="1" value="100" name="Width"> </td>
<td> x </td>
<td><input id="Height" style="text-align: right;" maxlength="3" size="1" value="100" name="Height"> </td>
<td><input id="Red" name="Red" type="checkbox"><label for="Red">Red</label><br><input id="Green" name="Green" type="checkbox"><label for="Green">Green</label><br><input id="Blue" name="Blue" type="checkbox"><label for="Blue">Blue</label><br></td>
<td> <input value=" = " name="ctl02" type="submit"> </td>
<td><input id="Area" style="text-align: right;" readonly="readonly" size="3" name="Area">
</td></tr></tbody></table>
<p>
</p><div id="Rectangle"></div>
<p></p></div>
<div class="figure"><b>Figure 6-30.</b> Producing a colored rectangle from
CheckBox selections.</div><pre class="divcode"><span class="script"><%@ Import Namespace="System.Drawing" %>
<SCRIPT Runat="Server">
Sub Make_Rectangle (Src As Object, Args As EventArgs)
If IsNumeric(Width.Text) AND IsNumeric(Height.Text) Then
Area.Text = FormatNumber(Width.Text * Height.Text, 0)
Rectangle.Width = Unit.Parse(Width.Text)
Rectangle.Height = Unit.Parse(Height.Text)
Rectangle.BorderStyle = BorderStyle.Solid
Rectangle.BorderWidth = Unit.Parse("1px")
<b>Dim HexRed, HexGreen, HexBlue As String
HexRed = "00"
HexGreen = "00"
HexBlue = "00"
If Red.Checked = True Then
HexRed = "FF"
End If
If Green.Checked = True Then
HexGreen = "FF"
End If
If Blue.Checked = True Then
HexBlue = "FF"
End If
Rectangle.BackColor = Color.FromName("#" & HexRed & HexGreen & HexBlue)</b>
End If
End Sub
</SCRIPT>
</span>
<form Runat="Server">
<h3>Make a Rectangle</h3>
<table border="0" cellpadding="0">
<tr>
<th>Width</th>
<th>Height</th>
<th>Color</th>
<th></th>
</tr>
<tr valign="top">
<td><asp:TextBox id="Width" Runat="Server"
Columns="1"
MaxLength="3"
Text="100"
Style="text-align:right"/>
</td>
<td><asp:TextBox id="Height" Runat="Server"
Columns="1"
MaxLength="3"
Text="50"
Style="text-align:right"/>
</td>
<td><b><asp:CheckBox id="Red" Text="Red" Runat="Server"/><br>
<asp:CheckBox id="Green" Text="Green" Runat="Server"/><br>
<asp:CheckBox id="Blue" Text="Blue" Runat="Server"/><br></b>
</td>
<td><asp:Button Runat="Server"
Text="Make"
OnClick="Make_Rectangle"/>
</td>
</tr>
</table>
<asp:Panel id="Rectangle" Runat="Server"/>
</pre>
<div class="listing"><b>Listing 6-24.</b> Code and script to produce a colored
rectangle from CheckBox selections.</div>
<p>Recall that one of the ways of specifying colors is by a hexadecimal value.
The color is a sequence of two-digit hexadecimal values for red, green, and
blue, with <span class="code">FF</span> being the highest saturation and <span class="code">00</span> the lowest saturation of the color. For example, the
hexadecimal value <span class="code">#FF0000</span> produces pure red by
specifying the highest saturation for red (<span class="code">FF</span>) and the
lowest saturation for green (<span class="code">00</span>) and blue (<span class="code">00</span>).</p>
<p>It is easy, then, to construct a hexadecimal string representing a color
value by concatenating the saturation values for red, green, and blue. In the
script, a checked box is taken to mean selection of the highest value (<span class="code">FF</span>) for a color; an unchecked box means the lowest value
(<span class="code">00</span>). Initially, these hexadecimal values are set to the
lowest value in three variables representing red, green, and blue:</p><pre class="code"> HexRed = "00"
HexGreen = "00"
HexBlue = "00"
</pre>
<p>If the color's checkbox is checked, the value is reset to <span class="code">FF</span>. Then the values are concatenated into a single string
(<span class="code">"#" & HexRed & HexGreen & HexBlue</span>) to
produce a color. Of course, the color selections are quite limited, but the idea
here is to determine the checked status of checkboxes, not to produce a rainbow
of colors.</p>
<p class="head2">Post-Back of Checked Boxes</p>
<p>It is seldom necessary to activate a script with the click of a single
checkbox in a group, so it is seldom necessary to code checkboxes with <span class="code">AutoPostBack</span> and <span class="code">OnCheckedChanged</span>
properties. The reason is that, normally, a group of checkboxes is presented
from which one <i>or more</i> choices can be made from the list. Therefore, a
subprogram should not be called until after <i>all</i> the boxes are checked. To
trigger the subprogram call when any <i>one</i> checkbox is clicked does not
provide the subprogram with complete information about choices.</p>
<p>You can, of course, trigger a script with display and post-back of a single
checkbox. In this case, though, there is no advantage to using a checkbox over a
standard button.</p><br></div>
<div><input id="__EVENTVALIDATION" value="/wEWDQLBn7yuAgLbhM+CAgKB5Ju8CQKB5I+8CQKB5JO8CQKiwImNCwL9lJSPBwLzj/DXAQLkmZmVDALC+vmdDQK/75n0DgKfwImNCwLwgu+0BAY+pHUsKUTE8j5yCLy4rID434Xd" name="__EVENTVALIDATION" type="hidden"> </div></div></form></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -