2.3　HTML输入控件

上面简要地讲解了HTML输入控件的概念，接下来将结合开发中的实际应用来逐一详细讲解它们的使用方法。

2.3.1　HtmlInputButton控件

HtmlInputButton控件用来控制＜input type="button"runat="server"＞、＜input type="submit"runat="server"＞和＜input type="reset"runat="server"＞元素，并允许你建立命令按钮(（btton)、提交(（sbmit)按钮和重置(（rset)按钮。

在这个控件中有两个非常重要的事件，即onclick和onserverclick事件。在实际开发中，可以通过为它们提供自定义事件处理程序，在单击控件时执行特定的指令集。其中，onclick事件属于客户端事件，用于在客户端使用脚本代码（如JavaScript)进行处理；而onserverclick事件属于服务器端事件，它需要在后台代码里（即.cs文件）进行处理。来看下面的例子，如代码清单2-1所示。

代码清单2-1 TestHtmlInputButton.aspx

＜form id="form1"runat="server"＞

＜div＞

＜table＞

＜tr align="center"＞

＜td＞

＜input id="txt_a"type="Text"size="2"maxlength="5"value="1"

runat="server"/＞

＜/td＞

＜td＞

+

＜/td＞

＜td＞

＜input id="txt_b"type="Text"size="2"maxlength="5"value="2"

runat="server"/＞

＜/td＞

＜td＞

=

＜/td＞

＜td＞

＜span id="Sum"runat="server"/＞

＜/td＞

＜/tr＞

＜tr align="center"＞

＜td colspan="4"＞

＜input id="bt_Add_Button"type="Button"name="AddButton_Button"

value="添加(（Btton)"onserverclick="AddButton_Button_Click"

runat="server"/＞

＜input id="bt_Add_Submit"type="Submit"name="AddButton_Submit"

value="添加(（Sbmit)"onserverclick="AddButton_Submit_Click"

runat="server"/＞

＜input id="bt_Reset"type="Reset"

value="重置(（Rset)"runat="server"/＞

＜/td＞

＜/tr＞

＜/table＞

＜/div＞

＜/form＞

代码清单2-1分别定义了两种类型的输入按钮(（Btton与Submit)，并为它们添加了相应的onserverclick事件(（AdButton_Button_Click和AddButton_Submit_Click)。事件的功能都很简单，都是实现两个文本框数据的相加，代码如下所示：

protected void AddButton_Button_Click(Object sender, EventArgs e）

{

Sum.InnerHtml=(（Cnvert.ToInt32(（tt_a.Value)

+Convert.ToInt32(（tt_b.Value)）.ToString（）；

}

protected void AddButton_Submit_Click(Object sender, EventArgs e）

{

Sum.InnerHtml=(（Cnvert.ToInt32(（tt_a.Value)

+Convert.ToInt32(（tt_b.Value)）.ToString（）；

}

为onserverclick事件添加好处理程序之后，编译运行程序，结果如图2-3所示。

在图2-3中，只要文本框的值不变，不论你是单击添加(（Btton)按钮还是单击添加(（Sbmit)按钮，所得到的结果都不变。而这里的重置(（Rset)按钮的作用是将文本框的数据重置到初始状态。

figure_0089_0066

图　2-3　代码清单2-1的运行结果

注意Reset类型的按钮不支持onserverclick事件。单击Reset按钮时，不一定必须清除页上的所有输入控件。相反，在加载页时，它们返回到它们的原始状态。例如，如果文本框最初包含值“1”，则单击Reset按钮会使文本框返回到该值。

2.3.2　HtmlInputSubmit和HtmlInputReset控件

HtmlInputSubmit和HtmlInputReset控件都是从HtmlInputButton控件中派生出来的。其中，HtmlInputSubmit控件用于在网页上创建一个提交窗体的按钮控件，如＜input id="bt_Add_Submit"type="Submit"name="AddButton_Submit"value="添加(（Sbmit)"onserverclick="AddButton_Submit_Click"runat="server"/＞；而HtmlInputSubmit控件用于在网页上创建一个按钮控件，该控件将窗体控件重置为其初始值，如＜input id="bt_Reset"type="Reset"value="重置(（Rset)"runat="server"/＞。通常，这两个控件放在一起使用，具体使用方法请参考代码清单2-1。

2.3.3　HtmlInputImage控件

HtmlInputImage控件用来控制＜input type="image"runat="server"＞元素，它的功能与一般的按钮控件差不多。唯一不同的是它可以使用图片来替代常规样式的按钮，可以通过它的src属性来为按钮设置相关的图标。如：

＜input id="bt_Image"type="image"src="Images/1.jpg"onserverclick="bt_Image_Click"/＞

还可以通过onmouseover和onmouseout事件来动态地改变按钮的图标显示。如：

＜input id="bt_Image1"type="image"src="Images/1.jpg"

onmouseover="this.src='Images/1.jpg'；"

onmouseout="this.src='Images/2.jpg'；"

onserverclick="bt_Image1_Click"/＞

在上面的代码中，默认页面启动时和鼠标放在按钮上面时，按钮显示Images/1.jpg图标，当鼠标离开按钮时，则显示Images/2.jpg图标。

2.3.4　HtmlInputRadioButton控件

HtmlInputRadioButton控件用来控制＜input type="radio"runat="server"＞元素，可以使用它在网页上建立一个单选按钮。通过将它的Name属性设置为组内所有＜input type="radio"runat="server"＞元素所共有的值，可以将多个HtmlInputRadioButton控件组成一组。同组中的单选按钮互相排斥，一次只能选择该组中的一个单选按钮，如代码清单2-2所示。

代码清单2-2 TestHtmlInputRadioButton.aspx

＜form id="form1"runat="server"＞

＜div＞

＜input type="radio"id="Radio1"name="Mode"

onserverchange="Server_Change"runat="server"/＞

选项1＜br/＞

＜input type="radio"id="Radio2"name="Mode"

onserverchange="Server_Change"runat="server"/＞

选项2＜br/＞

＜input type="radio"id="Radio3"name="Mode"

onserverchange="Server_Change"runat="server"/＞

选项3

＜br/＞

＜span id="Span1"runat="server"/＞

＜br/＞

＜input type="submit"id="Button1"value="保存"runat="server"/＞

＜/div＞

＜/form＞

为了能够更好地演示HtmlInputRadioButton控件，在代码清单2-2中，分别定义了3个HtmlInputRadioButton控件(（Rdio1、Radio2和Radio3），并把它们的name属性统一设置成Mode（即它们是一组单选控件）。在这里需要注意的是，HtmlInputRadioButton控件不会自动向服务器回送，所以必须在页面添加一个按钮＜input type="submit"id="Button1"value="保存"runat="server"/＞来触发它的onserverchange事件。事件的代码如下所示：

protected void Server_Change(object Source, EventArgs e）

{

if(Radio1.Checked==true)

Span1.InnerHtml="选项1选中"；

else if(Radio2.Checked==true)

Span1.InnerHtml="选项2选中"；

else if(Radio3.Checked==true)

Span1.InnerHtml="选项3选中"；

}

为onserverchange事件添加好处理程序之后，编译运行程序，结果如图2-4所示。

figure_0091_0067

图　2-4　代码清单2-2的运行结果

在图2-4中，你只能够在这组单选框选择其中一个，并且只有单击“保存”按钮后，才能够触发后台代码的Server_Change事件将结果显示出来。

注意　由代码清单2-2可以看出，HtmlRadioButton控件不会自动向服务器回送，它必须依赖于使用某个按钮控件（如HtmlInputButton、HtmlInputImage或HtmlButton)来回送到服务器。可以通过为onserverchange事件编写处理程序来对HtmlRadioButton控件进行编程。

上面的例子演示HtmlRadioButton控件的使用和不会自动向服务器回送特性。其实，在实际开发中，一般都把radio的处理程序写在按钮的事件里，如下面的代码所示，其运行结果与上面一样。

＜form id="form1"runat="server"＞

＜div＞

＜input type="radio"id="Radio1"name="Mode"runat="server"/＞

选项1＜br/＞

＜input type="radio"id="Radio2"name="Mode"runat="server"/＞

选项2＜br/＞

＜input type="radio"id="Radio3"name="Mode"runat="server"/＞

选项3

＜br/＞

＜span id="Span1"runat="server"/＞

＜br/＞

＜input type="submit"id="Button1"value="保存"

runat="server"onserverclick="Server_Change"/＞

＜/div＞

＜/form＞

2.3.5　HtmlInputCheckBox控件

HtmlInputCheckBox控件用来控制＜input type="checkbox"runat="server"＞元素，可以使用它在网页上建立一个选择按钮，单选或者多选都可以。同HtmlRadioButton控件一样，它同样不会自动向服务器回送。当使用回送服务器的控件（如HtmlInputButton控件）时，复选框的状态被发送到服务器进行处理，这时可以在后台代码里使用控件的Checked属性来获取选择框是否被选中(（tue选中，false未选中）。当然，也可以直接在页面里给控件默认为选中状态（即在控件里设置checked="checked"），如代码清单2-3所示。

代码清单2-3 TestHtmlInputCheckBox.aspx

＜form id="form1"runat="server"＞

＜div＞

＜input id="Checkbox1"type="checkbox"runat="server"checked="checked"/＞

选项1＆nbsp；＆nbsp；

＜input id="Checkbox2"type="checkbox"runat="server"/＞

选项2＆nbsp；＆nbsp；

＜input id="Checkbox3"type="checkbox"runat="server"/＞

选项3＆nbsp；＆nbsp；

＜br/＞

＜span id="Span1"runat="server"/＞

＜br/＞

＜input type="button"id="Save"value="保存"onserverclick="Save_Click"runat="server"/＞

＜/div＞

＜/form＞

与HtmlInputRadioButton一样，可以使用同样的方法来获取HtmlInputCheckBox控件的选择情况，代码如下所示：

protected void Save_Click(object Source, EventArgs e）

{

string str=string.Empty；

if(Checkbox1.Checked==true)

{

str+="选项1选中"；

}

if(Checkbox2.Checked==true)

{

str+="选项2选中"；

}

if(Checkbox3.Checked==true)

{

str+="选项3选中"；

}

Span1.InnerHtml=str；

}

2.3.6　HtmlInputText和HtmlInputPassword控件

对于HtmlInputText控件，相信大家并不陌生，因为前面的章节已经多次用到过该控件，它用来在网页上建立一个数据输入的单行文本框和用户进行交互。因此，它可以控制＜input type="text"runat="server"＞和＜input type="password"runat="server"＞元素。

而HtmlInputPassword控件是从HtmlInputText类派生出来的，用于创建一个允许用户输入密码的单行文本框。因此，它只能够控制＜input type="password"runat="server"＞元素。当Type属性设置为password时，将屏蔽文本框中的输入内容，从而也对输入的密码起到保护作用。不论是HtmlInputText控件还是HtmlInputPassword控件，都可以通过使用MaxLength、Size和Value属性来分别控制可输入的字符数、控件宽度和控件内容。

关于它们的使用方法，请参考代码清单2-1，这里就不再另外举例说明。

2.3.7　HtmlInputFile控件

HtmlInputFile控件用来控制＜input type="file"runat="server"＞元素，该控件可以使用户能够将二进制文件或文本文件从浏览器上传到在Web服务器上指定的目录中。目前，所有HTML 3.2和更高版本的Web浏览器都允许进行文件上传。使用例子如代码清单2-4所示。

代码清单2-4 TestHtmlInputFile.aspx

＜form id="form1"method="post"enctype="multipart/form-data"runat="server"＞

＜div＞

＜input id="myFile"type="file"runat="server"/＞

＜br/＞

＜input id="Submit1"type="submit"value="上传文件"

onserverclick="UploadBtn_Click"runat="server"/＞

＜br/＞

＜div id="fileDetails"visible="false"runat="server"＞

文件名称：＜span id="fileName"runat="server"/＞

＜br/＞

文件类型：＜span id="fileType"runat="server"/＞

＜br/＞

文件大小：＜span id="fileLength"runat="server"/＞bytes

＜br/＞

＜/div＞

＜/div＞

＜/form＞

如代码清单2-4所示，页面窗体的代码实现了一个HtmlForm控件、一个HtmlInputFile控件（用于打开要上传的本地文件）、一个HtmlInputButton控件（用于执行文件上传事件）和四个HtmlGenericControls控件（一个＜div＞元素和三个＜span＞元素，每个元素的开始标记中都包含runat="server"属性/值对，它们用来显示上传文件的具体信息）。

其中，HtmlForm控件需要特别注意，如果要在该控件里实现文件上传功能，它的enctype属性必须设置为"multipart/form-data"，即＜form id="form1"method="post"enctype="multipart/form-data"runat="server"＞。设计好页面之后，下面来看UploadBtn_Click事件的后台实现代码，如下所示：

protected void UploadBtn_Click(Object sender, EventArgs e）

{

//获取文件相关信息

fileName.InnerHtml=myFile.PostedFile.FileName；

fileType.InnerHtml=myFile.PostedFile.ContentType；

fileLength.InnerHtml=myFile.PostedFile.ContentLength.ToString（）；

//显示DIV控件

fileDetails.Visible=true；

//上传文件保存到服务器相关的目录

myFile.PostedFile.SaveAs（"c：\uploadfile.txt"）；

}

在上面的代码中，先获取文件的文件名、文件类型和文件大小（以字节为单位）显示在DIV控件中，同时将DIV设置为可用状态。再使用语句myFile.PostedFile.SaveAs（"c：\uploadfile.txt"）将文件本身上传到服务器上的C盘根目录下。运行结果如图2-5所示。

figure_0094_0068

图　2-5　代码清单2-4的运行结果

2.3.8　HtmlInputHidden控件

HtmlInputHidden控件在实际开发中应用非常广泛，它用来控制＜input type="hidden"runat="server"＞元素，该控件用来建立一个隐含的Input域。尽管此控件是窗体的一部分，但它永远不在窗体上显示。由于在HTML中不保持状态，所以此控件通常与HtmlInputButton和HtmlInputText控件一起使用，用于存储在服务器之间发送的信息。

下面的示例演示了如何使用HtmlInputHidden控件跨请求保存视图状态信息，如代码清单2-5所示。

代码清单2-5 TestHtmlInputHidden.aspx

＜form id="form1"runat="server"＞

＜div＞

＜input id="txt_hiddenDoc"type="hidden"value="初始的隐藏值"runat="server"/＞

输入值：＜input id="txt_Doc"type="text"size="40"runat="server"/＞

＜br/＞

＜input id="bt_save"type="submit"value="保存"

onserverclick="Bt_Save_Click"runat="server"/＞

＜br/＞

＜span id="Span1"runat="server"＞＜/span＞

＜/div＞

＜/form＞

在代码清单2-5中，隐藏控件txt_hidden用来保存Doctxt_Doc文本框的值，而＜span＞控件用于显示存储在与当前请求紧邻的前一个Web请求的隐藏字段中的文本。后台实现代码如下所示：

protected void Page_Load(object sender, EventArgs e）

{

if(Page.IsPostBack)

{

Span1.InnerHtml="隐藏值：＜b＞"+txt_hiddenDoc.Value+"＜/b＞"；

}

}

protected void Bt_Save_Click(object Source, EventArgs e）

{

txt_hiddenDoc.Value=txt_Doc.Value；

}

编译运行程序，会看到如图2-6所示的运行结果。

在图2-6中，隐藏控件txt_hiddenDoc已经保存了它的初始值“初始的隐藏值”。这时，在“输入值”文本框里面添加文本“我爱ASP.NET”，单击“保存”按钮，会发现Span1控件显示的不是“我爱ASP.NET”，而是“初始的隐藏值”，如图2-7所示。

figure_0095_0069

图　2-6　代码清单2-5的运行结果

再次单击“保存”按钮，这时候的隐藏控件txt_hiddenDoc里已经保存了txt_Doc文本框的值，所以能够看到如图2-8所示的结果。

figure_0095_0070

图　2-7　第一次单击“保存”按钮运行结果

figure_0095_0071

图　2-8　第二次单击“保存”按钮运行结果

其实，根据上面的运行结果我们不难发现，这个程序有两个事件处理程序。第一个事件在页被回送到服务器时发生，事件处理程序获取存储在前一个发送请求的隐藏字段中的文本，并将它显示在＜span＞控件中，即显示“隐藏值：初始的隐藏值”。第二个事件在单击submit按钮时发生，该事件处理程序获取文本框的内容，并将它存储在网页上的隐藏字段中。