最近评论
正在载入评论列表...
2.2 接收用户输入
ASP.NET Framework包含一些用来收集用户输入的控件。本节学习如何使用TextBox、CheckBox和RadioButton控件。这些控件对应HTML <input>标签的标准类型。
2.2.1 使用TextBox控件
TextBox控件依赖TextMode属性的值来显示三种不同类型的输入框。TextMode属性接受下面三个值：
q SingleLine——显示单行输入框。
q MultiLine——显示多行输入框。
q Password——显示文本被屏蔽的单行输入框。
代码清单2-6中的页面包含三个TextBox控件，展示了TextMode的三个值（见图2-5）。
代码清单2-6 ShowTextBox.aspx
<%@ Page Language="C#" %>
<!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" >
<head id="Head1" runat="server">
<title>Show TextBox</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox
id="txtUserName"
TextMode="SingleLine"
Runat="server" />
<br /><br />
<asp:TextBox
id="txtPassword"
TextMode="Password"
Runat="server" />
<br /><br />
<asp:TextBox
id="txtComments"
TextMode="MultiLine"
Runat="server" />
</div>
</form>
</body>
</html>
图2-5 显示不同TextMode值的TextBox控件
可以使用下列属性来控制TextBox控件的呈现特征（这是一个不完全列表）：
q AccessKey——用于指定一个导向TextBox控件的键。
q AutoCompleteType——用于关联TextBox控件和AutoComplete类。
q AutoPostBack——用于在TextBox控件的内容发生变化时，自动把包含这个TextBox的表单传回服务器端。
q Columns——用于指定显示的列数。
q Enabled——用于禁用TextBox控件。
q MaxLength——用于指定用户输入到TextBox的数据长度的最大值（当TextMode设为Multiline时无效）。
q ReadOnly——防止用户更改TextBox中的文本。
q Rows——用于指定显示的行数。
q TabIndex——用于指定TextBox控件的Tab顺序。
q Wrap——用于当TextMode设置为Multiline时文本是否自动换行（word-wrap）。
TextBox还支持下面的方法：
q Focus——把初始的表单焦点定位到TextBox控件。
TextBox支持下面的事件：
q TextChanged——当TextBox控件的内容变化时在服务器端引发。
当AutoPostBack属性的值为True时，只要TextBox的内容发生改变，包含该TextBox控件的表单就会自动地回传到服务器端。例如，代码清单2-7中的页面包含了一个简单的搜索表单。如果更改了TextBox的内容且焦点移出TextBox控件，表单就会自动回传服务器端，然后显示TextBox的内容（见图2-6）。
图2-6 表单字段内容变化时自动重新加载表单
代码清单2-7 TextBoxAutoPostBack.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void txtSearch_TextChanged(object sender, EventArgs e)
{
lblSearchResults.Text = "Search for: " + txtSearch.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>TextBox AutoPostBack</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label
id="lblSearch"
Text="Search:"
Runat="server" />
<asp:TextBox
id="txtSearch"
AutoPostBack="true"
OnTextChanged="txtSearch_TextChanged"
Runat="server" />
<hr />
<asp:Label
id="lblSearchResults"
Runat="server" />
</div>
</form>
</body>
</html>
代码清单2-7处理了TextBox控件的TextChanged事件。当TextBox控件的内容更改时，这个事件在服务器端引发。即使不使用AutoPostBack属性也可以处理这个事件。
|
注意，TextBox控件还包含一个用于关联具体的AutoComplete类的属性。当启用AutoComplete后，用户就无需在表单字段中重复输入像名、姓或电话号码之类的常用信息。如果用户没有禁用浏览器的AutoComplete，那么浏览器会提示用户在表单字段中输入与上次输入相同的值（即使用户是在不同的网站中输入的表单字段）。
例如，代码清单2-8中的页面询问你的名、姓和电话号码。其中每一个TextBox控件都关联一个具体的AutoComplete类。AutoComplete类指定表单字段关联的信息的类型。完成这个表单一次后，以后回到同样的表单，浏览器会提示你输入同样的回答（见图2-7）。
代码清单2-8 ShowAutoComplete.aspx
<%@ Page Language="C#" %>
<!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" >
<head id="Head1" runat="server">
<title>Show AutoComplete</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label
id="lblFirstName"
Text="First Name:"
AssociatedControlID="txtFirstName"
Runat="server" />
<br />
<asp:TextBox
id="txtFirstName"
AutoCompleteType="FirstName"
Runat="server" />
<br /><br />
<asp:Label
id="lblLastname"
Text="Last Name:"
AssociatedControlID="txtLastName"
Runat="server" />
<br />
<asp:TextBox
id="txtLastName"
AutoCompleteType="LastName"
Runat="server" />
<br /><br />
<asp:Button
id="btnSubmit"
Text="Submit"
Runat="server" />
</div>
</form>
</body>
</html>
图2-7 使用TextBox控件的AutoComplete类
注解 使用IE，可以选择Tools（工具）→Internet Option（Internet选项）→Content（内容）→AutoComplete（自动完成）按钮来配置AutoComplete。ASP.NET Framework不支持其他浏览器（如FireFox、Opera）的AutoComplete。
最后，TextBox控件支持Focus()方法。Focus()方法用于将初始表单焦点转移到具体的某个TextBox控件上。默认情况下，当第一次打开页面时，没有表单字段获得焦点。如果想要用户更方便地完成表单，可以设置表单中的某个字段自动获得焦点。
例如，代码清单2-9中的页面把焦点设在两个表单字段的第一个上面。
代码清单2-9 TextBoxFocus.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
void Page_Load()
{
txtFirstName.Focus();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>TextBox Focus</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label
id="lblFirstName"
Text="First Name:"
AssociatedControlID="txtFirstName"
Runat="server" />
<br />
<asp:TextBox
id="txtFirstName"
AutoCompleteType="FirstName"
Runat="server" />
<br /><br />
<asp:Label
id="lblLastname"
Text="Last Name:"
AssociatedControlID="txtLastName"
Runat="server" />
<br />
<asp:TextBox
id="txtLastName"
AutoCompleteType="LastName"
Runat="server" />
<br /><br />
<asp:Button
id="btnSubmit"
Text="Submit"
Runat="server" />
</div>
</form>
</body>
</html>
代码清单2-9中Page_Load()事件处理程序把表单焦点设给TextBox控件（txtFirstName）。
注解 也可以通过Page.Focus()方法或服务器端HtmlForm控件的DefaultFocus属性来设置表单焦点。
2.2.2 使用CheckBox控件
CheckBox控件用于显示一个复选框。代码清单2-10中的页面展示了如何在简讯登录表单中使用CheckBox控件（见图2-8）。
在代码清单2-10中，Checked属性用于检测用户是否选中了该复选框。
注意，CheckBox有一个Text属性，用于标注CheckBox。如果使用此属性，就会为该CheckBox生成合适的HTML <label>标签（兼容辅助功能标准）。
代码清单2-10 ShowCheckBox.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblResult.Text = chkNewsletter.Checked.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Show CheckBox</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox
id="chkNewsletter"
Text="Receive Newsletter?"
Runat="server" />
<br />
<asp:Button
id="btnSubmit"
Text="Submit"
OnClick="btnSubmit_Click"
Runat="server" />
<hr />
<asp:Label
id="lblResult"
Runat="server" />
</div>
</form>
</body>
</html>
图2-8 显示CheckBox控件
CheckBox控件包含下列属性（不完整列表）：
q AccessKey——指定一个导向ChecckBox控件的键。
q AutoPostBack——用于设定当CheckBox控件选中或取消选中时，自动向服务器回传包含该CheckBox控件的表单。
q Checked——获取或设置CheckBox是否选中。
q Enable——用于禁用该CheckBox。
q TabIndex——设置CheckBox控件的Tab顺序。
q Text——用于为CheckBox提供一个标签。
q TextAlign——用于对齐CheckBox标签，值可以是Left或Right。
CheckBox还支持下面的方法：
q Focus()——用于把初始表单焦点设为该CheckBox。
CheckBox支持下面的事件：
q CheckedChanged——当CheckBox选中或取消选中时在服务器端引发。
注意，CheckBox控件像TextBox控件一样，支持AutoPostBack属性。代码清单2-11中的页面展示了如何使用AutoPostBack属性在选中或取消选中复选框时，自动把包含该复选框的表单回传服务器端。
代码清单2-11 CheckBoxAutoPostBack.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void chkNewsletter_CheckedChanged(object sender, EventArgs e)
{
lblResult.Text = chkNewsletter.Checked.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>CheckBox AutoPostBack</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox
id="chkNewsletter"
Text="Receive Newsletter?"
AutoPostBack="true"
OnCheckedChanged="chkNewsletter_CheckedChanged"
Runat="server" />
<hr />
<asp:Label
id="lblResult"
Runat="server" />
</div>
</form>
</body>
</html>
注解 ASP.NET Framework还包含CheckBoxList控件，用于自动显示一个复选框列表。第10章详细讨论该控件。
2.2.3 使用RadioButton控件
RadioButton控件总是成组出现的。并且一次只能选择一个。
例如，代码清单2-12中的页面包含三个RadioButton控件（见图2-9）。
代码清单2-12 ShowRadioButton.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (rdlMagazine.Checked)
lblResult.Text = rdlMagazine.Text;
if (rdlTelevision.Checked)
lblResult.Text = rdlTelevision.Text;
if (rdlOther.Checked)
lblResult.Text = rdlOther.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Show RadioButton</title>
</head>
<body>
<form id="form1" runat="server">
<div>
How did you hear about our Website?
<ul>
<li>
<asp:RadioButton
id="rdlMagazine"
Text="Magazine Article"
GroupName="Source"
Runat="server" />
</li>
<li>
<asp:RadioButton
id="rdlTelevision"
Text="Television Program"
GroupName="Source"
Runat="server" />
</li>
<li>
<asp:RadioButton
id="rdlOther"
Text="Other Source"
GroupName="Source"
Runat="server" />
</li>
</ul>
<asp:Button
id="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />
<hr />
<asp:Label
id="lblResult"
Runat="server" />
</div>
</form>
</body>
</html>
图2-9 显示RadioButton
代码清单2-12中的RadioButton控件通过RadioButton的GroupName属性组成单选按钮组。三个RadioButton控件中一次只能选中一个。
RadioButton控件支持下列属性（不完全列表）：
q AccessKey——指定一个导向RadioButton控件的键。
q AutoPostBack——用于在单选按钮被选中或取消选中时，自动向服务器端回传包含该RadioButton控件的表单。
q Checked——获取或设置RadioButton是否选中。
q Enable——用于禁用该RadioButton。
q TabIndex——指定RadioButton控件的Tab顺序。
q Text——用于为RadioButton控件提供一个标签。
q TextAlign——用于对齐RadioButton标签，值可以是Left或Right。
RadioButton支持下面的方法：
q Focus()——用于把初始表单焦点设为该RadioButton。
最后，RadioButton支持下面的事件：
q CheckedChanged——当RadioButton选中或取消选中时在服务器端引发。
代码清单2-13中的页面演示如何使用RadioButton控件组的AutoPostBack属性并检测哪个RadioButton控件被选中。
代码清单2-13 RadioButtonAutoPostBack.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void RadioButton_CheckedChanged(object sender, EventArgs e)
{
RadioButton selectedRadioButton = (RadioButton)sender;
lblResult.Text = selectedRadioButton.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>RadioButton AutoPostBack</title>
</head>
<body>
<form id="form1" runat="server">
<div>
How did you hear about our Website?
<ul>
<li>
<asp:RadioButton
id="rdlMagazine"
Text="Magazine Article"
GroupName="Source"
AutoPostBack="true"
OnCheckedChanged="RadioButton_CheckedChanged"
Runat="server" />
</li>
<li>
<asp:RadioButton
id="rdlTelevision"
Text="Television Program"
GroupName="Source"
AutoPostBack="true"
OnCheckedChanged="RadioButton_CheckedChanged"
Runat="server" />
</li>
<li>
<asp:RadioButton
id="rdlOther"
Text="Other Source"
GroupName="Source"
AutoPostBack="true"
OnCheckedChanged="RadioButton_CheckedChanged"
Runat="server" />
</li>
</ul>
<hr />
<asp:Label
id="lblResult"
Runat="server" />
</div>
</form>
</body>
</html>
在代码清单2-13中，当选中一个RadioButton控件时，页面会自动回传给服务器端，并且显示被选中RadioButton控件的Text属性的值。注意，三个RadioButton控件都关联CheckedChanged事件处理程序。传给处理程序的第一个参数表示发生改变的那个RadioButton控件。
图书导读
