ASP.NET网站建设HTML控件和验证控件

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

第三章：HTML控件和验证控件
3.1 HTML服务器控件简介
HTML服务器控件是HTML元素的一种演变，默认情况下，服务器无法使用Web窗体页上的HTML元素，，这些元素被视为传递到浏览器的文本，只能在客户端脚本中可以使用，但是，通过设置HTML的runat=”server”，将HTML元素转换为HTML服务器控件，这样就可以在服务器端作为控件进行使用。

HTML服务器控件属于System.Web.UI.HtmlControls 命名空间，是从HtmlControl类派生出来的。

HTML服务器控件和web控件一样在服务器端使用，页面的代码均可访问此类控件的属性。

<input type="text" size="40">
可以添加id和runat属性，将它转换为HTML服务器控件，如下所示：
<input type="text" id="BookTitle" size="40" runat="server">
注意：所有的HTML服务器控件必须在带有runat="server"属性的<form>标签之中！
ASP .NET 要求所有的HTML 元素必须被正确封闭和正确嵌套。

示例：
在VS2005 中，新建一个网站，并将其命名为HtmlServerControls。

从“Toolbox”中拖动一个HTML表格控件到设计区。

将该表格设置为2列6 行。

将一个HTML按钮拖动到页面中，并且置于表格下方。

接着设置按钮的ID和runat="server"属性。

在表格第一行的第一个单元格中，输入文本字符串Name，然后在第二个单元格中，添加一个Input（文本框）控件。

将Input控件的ID设置为txtName。

接下来的三行与之类似，三个Input控件分别命名为txtStreet、txtCity和txtState。

保留表格第5行的空白。

保留最后一行第二列的空白，并将它的ID设置为tdInnerHtml。

设计视图如图其中标识了控件名称。

图3-5：HTML控件的页面布局
确认所有被命名的控件都设置了runat="server"属性。

然而，页面上其他表格元素，既不需要ID属性，又不需要runat属性。

因为，它们都用作静态显示，而无须在服务器上处理。

在设计视图中，双击按钮以便在代码隐藏文件中添加事件处理程序。

输入以下突出显示的代码：
protected void btnDoIt_ServerClick(object sender, EventArgs e)
{
string strHtml = "";
strHtml += txtName.V alue + "<br/>";
strHtml += txtStreet.V alue + "<br/>";
strHtml += txtCity.V alue + ", " + txtState.V alue;
tdInnerHtml.InnerHtml = strHtml;
}
如果查看Default.aspx文件源视图中按钮的HTML代码，按钮包含一个onServerClick 属性，这就在告知服务器：当Click事件发生时，应调用的函数是：onServerClick="btnDoIt_ServerClick"
最后一行第二列表格单元格被转换为服务器控件，该单元格id属性值为tdInnerHtml，它具有InnerHtml属性，可以用它来编写该单元格中的超文本标记。

，每次单击“Do It！”按钮，到输入文本框的值被包含在一个HTML字符串中显示出来。

tdInnerHtml.InnerHtml = strHtml
如果使用InnerText属性替换InnerHtml属性，当在文本域中输入值，并单击按钮之后，结果页如图3-6所示。

图3-6：具有InnerHtml的HTML服务器控件
服务器端控件消耗服务器资源。

通常页面使用静态表格实现布局。

除非须要引用一个或多个表格元素，否则，无须进行服务器端处理。

上面的示例说明了这一要点。

都允许通过编程方式访问控件内部的HTML控件。

下图3-7显示了HTML服务器控件的对象层次结构。

图3-7：HTML服务器控件对象层次结构
3.2 HTML服务器控件与Web服务器控件区别
HTML服务器控件比Web 服务器控件更为灵活，但其功能较少。

Web服务器控件比HTML服务器控件具有更多功能，并且能在可视化环境中更加有效地对其进行编程。

如果用户不需要控件具有很多功能，则应使用HTML服务器控件。

如果需要将在HTML 或ASP中开发的早期应用程序倒入应用程序，尤其应使用此类控件。

通过添加runat 和ID属性可以轻松转换HTML标签，同时还可以从代码隐藏文件中使用此类控件。

如果需要为控件进行大量编程才能使用其功能并操作其中的数据时，则应使用Web控
件。

例如在Web TextBox控件中，字体、背景色和背景色可以通过设置属性来更改。

但在HTML TextBox控件中，没有可以直接用来设置颜色或字体的属性。

此外，Web服务器控件支持的控件类型也要比HTML服务器控件多得多。

例如，Web服务器控件中使用了大量验证控件来验证数据。

Web服务器控件拥有更加完善的功能来处理存储在数据库中的数据。

为此可以使用DataGrid和DataList控件。

如果Web窗体需要Adrotator或Calendar控件，则可以由Web服务器控件提供。

Web服务器控件能够自动检测浏览器的特殊性能，且可以用在使用多种浏览器的环境中。

此外，如果要在服务器上处理所有数据，也可以使用Web服务器控件。

3.3 中的HTML服务器控件
3.3.1 HtmlForm控件
HtmlForm控件是一种服务器控件，我们创建的交互页面通常使用该控件，是用用来容纳Web页面中各种元素的窗体。

HtmlForm控件由服务器端的<form>标签表示。

所有其他HTML服务器控件和Web 服务器控件均位于HtmForm控件内。

HtmlForm控件由以下标签表示：
<form id=“id 名称"
method=POST/GET
action=“目的页面的URL"
runat="server"
<!— Controls-->
</form>
文本框、按钮和复选框等所有Web窗体控件均嵌套在HtmlForm控件的起始标签和终止标签之间，否则将无法识别这些控件。

下面的示例用来显示HtmlForm控件如何创建带有两个按钮的应用程序员。

当用户单击任意一个按钮时，系统都会提示用户所单击的按钮。

（1）使用Visual C#创建一个 Web应用程序，并将其命名为Example。

（2）将WebForm.aspx文件重命名为HTMLFormEx.aspx。

（3）从HTML工具箱中选择两个Button控件和3个Lable控件，将这些控件拖放到窗体中。

（4）右击所有控件，然后选择“作为服务器控件运行”选项。

（5）将按钮的ID分别更改为btnSubmit和btnClear，并将标签的ID分别更改为lblHeading、lblSubmit和lblClear。

将lblHeading的Text属性设置为”HTMLForm”示例。

（6）在属性框架中通过lblHeading的style属性修改字体大小。

用户界面如图
HTMLFormEx.asp的HTML代码如下所示
<%@ Page language="c#" Codebehind="HTMLFormEx.aspx.cs" AutoEventWireup="false" Inherits="Chapter4.HTMLFormEx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>HTMLFormEx</title>
<meta name="GENERA TOR" Content="Microsoft V isual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="/intellisense/ie5">
</HEAD>
<body>
<form id="HTMLFormEx" method="post" runat="server">
<P>
<DIV id="lblHeading" style="DISPLAY: inline; FONT-WEIGHT: bold; FONT-SIZE: medium; WIDTH: 350px; HEIGHT: 34px"
align="left" runat="server" ms_positioning="FlowLayout">HTMLForm 示例</DIV>
</P>
<P>
<DIV id="lblSubmit" style="DISPLA Y: inline; WIDTH: 216px; HEIGHT: 23px" runat="server"
ms_positioning="FlowLayout">
<P><FONT face="宋体"></FONT> </P>
</DIV>
</P>
<DIV id="lblClear" style="DISPLAY: inline; WIDTH: 216px; HEIGHT: 21px" runat="server"
ms_positioning="FlowLayout">
<P id="P1" runat="server"><FONT face="宋体"></FONT> </P>
</DIV>
<P>
<FONT face="宋体">
<INPUT id="btnSubmit" style="WIDTH: 72px; HEIGHT: 24px" type="button" value="提交" name="btnSubmit"
runat="server">
<INPUT id="btnClear" style="WIDTH: 72px; HEIGHT: 24px" type="button" value="清除" name="btnClear"
runat="server">
</FONT>
</P>
</form>
</body>
</HTML>
在代码隐藏文件中添加的按钮Click事件的代码如下所示：
private void btnSubmit_ServerClick(object sender, System.EventArgs e)
{
lblSubmit.InnerHtml="此按钮为“提交”按钮！！";
}
private void btnClear_ServerClick(object sender, System.EventArgs e)
{
lblClear.InnerHtml="此按钮为“清除”按钮！！";
}
运行结果如图
3.3.2 HtmlImage控件
HtmlImage控件用于显示图像，并使用服务器端的<img>标签，HtmlImage控件由以下标签表示：
<img id=“任何标识名称” alt=“不能显示图片时欲显示的文本"
align=”对齐方式”left/right/top/middle/bottom
border=“边框宽度"
height=“图像高度"
src=“图像URL"
width=“图像宽度"
runat=”server”>
HtmlImage控件用于设置图像的备用文本、对齐方式、边框、高度、来源和宽度。

此控件无需使用终止标签，即无需</img>。

以下示例演示HtmlImage控件是如何运行的。

（1）选择“项目“->“添加Web窗体“，在Example项目中添加一个新的窗体，并将其命名为为HtmlImageEx.aspx。

（2）右击解决方案资源浏览器并选择“设置为起始页”选项，将该文件设置为起始页，将一个HtmlImage控件和一个HtmlButton控件共同置于窗体中。

（3）所有HTML控件均应作为服务器控件运行，右击控件并选择“作为服务器控件运行“选项，即可对这些控件进行设置。

将图像的Src属性设置为以下路径中所示的.gif文件中的图像。

用户在运行时单击按钮，便可更改此图像并显示新图像。

btnChange_ServerClick事件中的代码会将图像控件的Src属性更改为指向新的图像文件。

用户界面应如图
HTMLImageEx.aspx文件的代码如下所示：
<%@ Page language="c#" Codebehind="HTMLImageEx.aspx.cs"
AutoEventWireup="false" Inherits="Chapter4.HTMLImageEx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>HTMLImageEx</title>
</HEAD>
<body>
<form id="HTMLImageEx" method="post" runat="server">
<DIV id="DIV1" align="left" runat="server" ms_positioning="FlowLayout">
<TABLE height="33" cellSpacing="0" cellPadding="0" width="200" border="0" ms_1d_layout="TRUE">
<TR>
<TD>HTMLImage 示例
</TD>
</TR>
</TABLE>
</DIV>
<IMG id="imgShow" style="Z-INDEX: 102; LEFT: 24px; WIDTH: 173px; POSITION: absolute; TOP: 80px; HEIGHT: 144px"
height="144" alt="" src="Images/finger.gif" width="173" runat="server"> <INPUT id="btnChange" style="Z-INDEX: 103; LEFT: 56px; WIDTH: 104px; POSITION: absolute; TOP: 240px; HEIGHT: 31px"
type="button" value="更改图像" runat="server">
</form>
</body>
</HTML>窗体顶端
private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack )
{
ViewState["Count"]=0;
}
}
private void btnChange_ServerClick(object sender, System.EventArgs e)
{
if(int.Parse(ViewState["Count"].ToString())%2==1)
{
imgShow.Src="images\\flower.gif";
}
else
{
imgShow.Src="images\\finger.gif";
}
ViewState["Count"]=int.Parse(ViewState["Count"].ToString())+1;
}
在这段代码中，需要注意的是，在B/S结构中图片、文件等资源的路径采用相对路径，而不建议采用绝对路径，如图所示。

假设当前页面是TestForm.aspx，现在要用到images文件夹下的finger.gif图片，则<img>的URL可以写成URL=“../Images/finger.gif”,即用“..”来将当前的路径转到SG4- Source,然后再转到Images/finger.gif,另外，在B/S结构编程中，不再严格区分路径的写法到底是“/”还是“\“。

当用户单击“更改图像”按钮奇数次时，图像将变为flower.gif，如图所示。

3.3.3 InputFile控件
HtmlIuput控件用于将文件从客户端上传到服务器中。

此控件创建了服务器端的<input type=file>标签，并显示一个文本框和一个浏览器按钮，以便查找文件。

用户必须通过单击浏览按钮以打开浏览对话框来选择文件。

选中的文件将显示在文本框中。

HtmlInputFile控件由以下标签表示：
<input type=file id=”ID 名”postedfile=”将要上传的文件”runat=”server”>
用户可以使用HtmlInput控件，将二进制或文本从浏览器中上传到指定Web服务器上的任何目录中。

下面介绍HtmlImage控件是如何运行的。

（1）在解决方案中新建一个Web应用程序项目，并将其命名为Example2.
（2）将默认Web窗体重命名为HTMLInputFileEx.aspx.
（3）从HTML服务器控件工具箱中选择File Field控件，该控件属于HtmlInputFile控件。

窗体中将自动置入一个文本框和一个浏览按纽，此控件的ID为了Filel。

（4）在窗体中置入一个按纽并将ID设置为btnUpload，以便将选中的文件上传服务器中。

（5）然后在窗体中置入一个Label控件以显示所上传文件夹的信息，并将其ID设置为lblFileInfo.
（6）所有HTML服务器控件均应作为服务器控件运行，右击控件并选择“作为服务器控件运行”选项，即可对这些控件进行设置。

窗体的enctype属性必须设置为multipart/form-data,以用户界面应如图所示：
HTMLInputFile.aspx的代码如下所示：
<%@ Page language="c#" Codebehind="HTMLInputFileEx.aspx.cs" AutoEventWireup="false" Inherits="Chapter4.HTMLInputFileEx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>HTMLInputFileEx</title>
<meta content="Microsoft V isual Studio 7.0" name="GENERA TOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="HTMLInputFileEx" method="post" encType="multipart/form-data" runat="server">
<DIV id="lblHeading" style="DISPLAY: inline; FONT-SIZE: medium; Z-INDEX: 101; LEFT: 72px; WIDTH: 272px; POSITION: absolute; TOP: 16px; HEIGHT: 36px"
align="left" runat="server" ms_positioning="FlowLayout">HTMLInputFile 示例</DIV>
<INPUT id="File1" style="Z-INDEX: 102; LEFT: 216px; WIDTH: 243px; POSITION: absolute; TOP: 104px; HEIGHT: 22px"
type="file" size="21" name="File1" runat="server"> <INPUT id="btnUpload" style="Z-INDEX: 103; LEFT: 216px; WIDTH: 104px; POSITION: absolute; TOP: 144px; HEIGHT: 37px"
type="button" value="上传" name="Button1" runat="server">
<DIV id="DIV1" style="DISPLAY: inline; Z-INDEX: 105; LEFT: 24px; WIDTH: 176px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
runat="server" ms_positioning="FlowLayout">选择要上传的文件
</DIV>
</form>
</body>
</HTML>
单击“上传”按钮时，标签中将显示所选将要上传的文件名称，且文件将被保存在服务器中。

private void btnUpload_ServerClick(object sender, System.EventArgs e)
{
string strFileName=this.File1.PostedFile.FileName;
int nLength=stIndexOf("\\")-1;
strFileName=strFileName.Substring(stIndexOf("\\")+1,nLength);
string strPath=Server.MapPath("\\")+ "Upload\\";
File1.PostedFile.SaveAs(strPath+strFileName);
}
在这段代码段里需要注意的是传到服务器端后保存时需要获取在服务器端的绝对路径，这时候采用Server.MapPath（“\\“）找到站点的绝对路径。

此窗体在浏览器中的输出结果如图所示，单击“上传“按钮后，即将当前客户端的文件上传到服务器端的Upload文件夹下。

3.3.4 HtmlGenericControl 控件
HtmlGenericControl 控件用来控制没有被特定HTML 服务器控件规定的其他HTML 元素，如<body>、<div>、<span>、<font>、<p>等，与Web Form Html 控件没有具体的对应关系，但它们仍然存在于Html 控件模型中。

其语法格式如下。

<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<script language="C#" runat=server>
void Page_Load(Object Src, EventArgs E)
{
Message.InnerHtml = "欢迎光临本网站！" + DateTime.Now;
}
</script>
<body>
<span id="Message" runat=server></span>
</body>
</html>
3.4 2.0新增控件
3.4.1 ImageMap控件
ImageMap控件是一个让你可以在图片上定义热点（HotSpot）区域的服务器控件。

用户可以通过点击这些热点区域进行回发（PostBack）操作或者定向（Navigate）到某个URL位址。

该控件一般用在需要对某张图片的局部范围进行互动操作时，其主要属性有HotSpotMode、HotSpots和主要操作Click。

HotSpotMode：顾名思义为热点模式，对应枚举类型System.Web.UI.WebControls.HotSpotMode。

其选项及说明如下：
1) NotSet：未设置项。

虽然名为未设置，但其实默认情况下会执行定向操作，定向到你指定的URL位址去。

如果你未指定URL位址，那默认将定向到自己的Web应用程序根目录。

2) Navigate：定向操作项。

定向到指定的URL位址去。

如果你未指定URL位址，那默认将定向到自己的Web应用程序根目录。

3) PostBack：回发操作项。

点击热点区域后，将执行后部的Click事件。

4) Inactive：无任何操作，即此时形同一张没有热点区域的普通图片。

HotSpots：该属性对应着System.Web.UI.WebControls.HotSpot对象集合。

HotSpot类是一个抽象类，它之下有CircleHotSpot（圆形热区）、RectangleHotSpot（方形热区）和PolygonHotSpot（多边形热区）三个子类。

实际应用中，都可以使用上面三种类型来定制图片的热点区域。

如果需要使用到自定义的热点区域类型时，该类型必须继承HotSpot抽象类。

下面即有个自定义的菱形热区DiamondHotSpot范例可以参考。

Click：对热点区域的点击操作。

通常在HotSpotMode为PostBack时用到。

对ImageMap控件有了以上一个基本了解后，接着看 QuickStart提供个两个应用示例和最后一个自定义菱形热区示例就会有所体会了。

示例一：ImageMap 多种HotSpotMode 示例
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3><font face="V erdana">ImageMap 多种HotSpotMode 示例</font></h3> <asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"
runat="Server">
<asp:RectangleHotSpot
hotspotmode="Navigate"
NavigateUrl="navigate1.htm"
alternatetext="Button 1"
top="30"
left="175"
bottom="110"
right="355">
</asp:RectangleHotSpot>
<asp:RectangleHotSpot
hotspotmode="Navigate"
NavigateUrl="navigate2.htm"
alternatetext="Button 2"
top="155"
left="175"
bottom="240"
right="355">
</asp:RectangleHotSpot>
<asp:RectangleHotSpot
hotspotmode="Navigate"
NavigateUrl="navigate3.htm"
alternatetext="Button 3"
top="285"
left="175"
bottom="365"
right="355">
</asp:RectangleHotSpot>
</asp:imagemap>
</div>
</form>
</body>
</html>
示例二：ImageMap PostBack 模型示例
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
void Buttons_Clicked(object sender, ImageMapEventArgs e)
{
label1.Text = e.PostBackV alue + " clicked!";
}
</script>
<html xmlns="/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>
<font face="V erdana">ImageMap PostBack 模型示例</font></h3>
<asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"
hotspotmode="Postback" onclick="Buttons_Clicked" runat="Server">
<asp:RectangleHotSpot
hotspotmode="Postback"
postbackvalue="Button1"
alternatetext="Button 1"
top="30"
left="175"
bottom="110"
right="355">
</asp:RectangleHotSpot>
<asp:RectangleHotSpot
hotspotmode="Postback"
postbackvalue="Button2"
alternatetext="Button 2"
top="155"
left="175"
bottom="240"
right="355">
</asp:RectangleHotSpot>
<asp:RectangleHotSpot
hotspotmode="Postback"
postbackvalue="Button3"
alternatetext="Button 3"
top="285"
left="175"
bottom="365"
right="355">
</asp:RectangleHotSpot>
<asp:RectangleHotSpot
hotspotmode="Postback"
postbackvalue="Background"
alternatetext="Background"
top="0"
left="0"
bottom="390"
right="540">
</asp:RectangleHotSpot>
</asp:imagemap>
<p>
<h3>
<font face="verdana">
<asp:Label ID="label1" runat="server"></asp:Label>
</font>
</h3>
</p>
</div>
</form>
</body>
</html>
3.4.2 FileUpload控件
应用程序中经常需要允许用户把文件上传到web服务器。

尽管在 1.X也可以完成该功能，但在 2.0中使用FileUpload控件会更简单。

该控件让用户更容易地浏览和选择用于上传的文件，它包含一个浏览按钮和用于输入文件名的文本框。

只要用户在文本框中输入了完全限定的文件名，无论是直接输入或通过浏览按钮选择，都可以调用FileUpload的SaveAs方法保存到磁盘上。

除了从WebControl类继承的标准成员，FileUpload控件还公开了几个只读的属性，在表5-8和表5-9列出。

表
表
为了查看FileUpload控件在实际中的运用，创建一个FileUploadDemo网站。

在页面上添加一个FileUpload控件，然后，添加两个按钮，Text属性分别设置为Save和Display，ID分别设置为btnSave和btnDisplay。

增加两个Label控件，并分别将ID设置为lblMesage和lblDisplay。

用<br/>HTML元素分隔这些控件。

切换到设计视图，通过双击每个按钮，为它们在代码隐藏文件中创建具有默认名称的Click事件处理程序。

完成后的内容文件类似于示例。

示例5-11：FileUploadDemo网站的default.aspx
<%@ Page Language=”C#” AutoEventWireup=”true”CodeFile=”Default.aspx.cs”
Inherits=”_Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”/1999/xhtml” >
<head runat=”server”>
<title>FileUpload Control</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<h1>FileUpload Control</h1>
<asp:FileUpload ID=”FileUpload1” runat=”server” />
<br />
<asp:Button ID=”btnSave” runat=”server”
Text=”Save”
OnClick=”btnSave_Click” />
<asp:Button ID=”btnDisplay” runat=”server”
Text=”Display”
OnClick=”btnDisplay_Click” />
<br />
<br />
<asp:Label ID=”lblMessage” runat=”server” />
<asp:Label ID=”lblDisplay” runat=”server” />
</div>
</form>
</body>
</html>
在代码隐藏文件中，添加示例5-12中高亮显示的代码，非高亮显示的代码由VS2005自动创建。

示例5-12：FileUploadDemo网站的Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO; // 使用Stream必需
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSave_Click(object sender, EventArgs e)
{
string str = “”;
if (FileUpload1.HasFile)
{
try
{
str += “Uploading file: “ + FileUpload1.FileName;
// 保存文件
FileUpload1.SaveAs(“c:\\websites\\uploads\\” +
FileUpload1.FileName);
// 显示文件信息
str += “<br/>Saved As: “ + FileUpload1.PostedFile.FileName;
str += “<br/>File Type: “ +
FileUpload1.PostedFile.ContentType;
str += “<br/>File Length (bytes): “ +
FileUpload1.PostedFile.ContentLength;
str += “<br/>PostedFile File Name: “ +
FileUpload1.PostedFile.FileName;
}
catch (Exception ex)
{
str += “<br/><b>Error</b><br/>Unable to save
c:\\websites\\uploads\\” + FileUpload1.FileName +
“<br/>” + ex.Message;
}
}
else
{
str = “No file uploaded.”;
}
lblMessage.Text = str;
lblDisplay.Text = “”;
}
protected void btnDisplay_Click(object sender, EventArgs e)
{
string str = “<u>File:“ + FileUpload1.FileName + “</u><br/>”;
if (FileUpload1.HasFile)
{
try
{
Stream stream = FileUpload1.FileContent;
StreamReader reader = new StreamReader(stream);
string strLine = “”;
do
{
strLine = reader.ReadLine( );
str += strLine;
} while (strLine != null);
}
catch (Exception ex)
{
str += “<br/><b>Error</b><br/>Unable to display “ +
FileUpload1.FileName +
“<br/>” + ex.Message;
}
}
else
{
str = “No file uploaded.”;
}
lblDisplay.Text = str;
lblMessage.Text = “”;
}
}
高亮显示的using声明对于不使用完全限定命名空间，而使用Stream对象是必须的。

在Save 按钮的btnSave_Click事件处理程序中，FileUpload控件的HasFile属性用于检测文本框中是否输入了有效的完全限定文件名。

如果文本框为空或输入的名称无效，将不会通过检测，并且lblMessage将显示“No file upladed”。

假定上传了一个有效文件，那么将执行try代码块中的代码。

关键语句是调用File- Upload 控件的SaveAs方法。

该方法使用硬编码路径和FileName属性传递一个完全限定的文件名。

该语句可能会由于各种原因而失败，包括磁盘空间不足、无效的路径或安全问题（稍后会有更详细的说明）。

如果SaveAs方法失败，则执行catch代码块。

在lblMessage中显示一个错误信息，包括该异常的Message属性ex.Message。

如果SaveAs方法执行成功，关于上传文件的多个信息将显示在lblMessage中，这些信息通过FileUpload.PostedFile（类型为HttpPostedFile）中的属性获取。

文件保存后，页面看起来类似于图5-11。

Display 按钮的Click事件处理程序与前面的类似，只不过它不是显示文件信息，而是显示文件内容。

它通过使用FileContent属性获取表现为Stream对象的上传文件的内容，然后这个Stream对象被用于实例化一个StreamReader对象。

StreamReader的Read-Line方法逐行的遍历文件，然后把合并后的字符串显示在lblDisplay中。

因为该文件包含Gettysburg Address，显示文件后页面看起来类似下图。

文件保存后的FileUploadDemo
FileUploadDemo显示一个文件
当在讨论从客户端上传文件到web服务器时，安全是非常让人关注的。

须注意两点，首先，使用这种方式会公开web服务器，从而会有非常大的安全漏洞，为此要特别细心。

因为这样不仅可以上传病毒，木马和其他恶意软件，还会存在客户端浏览web服务器目
录结构的危险。

因此，应该使用硬编码目标目录，至少严格限定在哪里保存上传的文件。

另外，要注意的一点是，允许在磁盘写文件所必需的权限。

在开发web应用程序时，一般情况下，开发机器同时也是web服务器，特别是使用VS2005默认的开发模式。

在该模式下使用的是内置的web服务器，并且不通过IIS访问网站而是由文件系统访问网站。

这样，永远也不会有权限问题。

然而，当网站部署到产品服务器上，且该网站通过IIS和虚拟目录来访问时，就会出现问题。

这是因为运行的账户必须拥有对用于保存上传文件的目录的写权限。

在Windows2000/XP中，账户的名称是ASPNET。

在Windows Server2003中，写权限必须分配
给IIS_WPG账户组。

利用FileUpload控件并结合良好的安全防护，用户可以把自己的文件传送到网站，以丰富网站功能。

3.5 客户端处理
的核心是服务器端处理。

然而，这种方式存在一些缺点。

主要问题是：任何处理开始之前，都必须回传到服务器。

甚至对于通过本地高速网络连接到服务器的Intranet 应用程序，也是如此。

这将常常给用户带来显而易见的，无法接受的延迟体验。

对于那些经过高速宽带连接的Internet应用程序而言，这种延迟似乎变得更加漫长。

客户端处理可为用户行为提供及时响应，因此能够显著改善用户体验。

它们可使用诸如JavaScript或者VBScript这样的脚本语言来实现。

某些服务器控件使用客户端脚本，来提供用户行为响应，而不需要回传到服务器。

如验证控件下载脚本到浏览器，那么，无效数据将在浏览器中被捕捉和标记，而不需要回传到服务器，此类客户端脚本由提供，而开发人员则不用编写或管理脚本。

开发人员业可以在页面上包含一些自己定制的JavaScript函数。

有两种方式。

第一种方式是把JavaScript直接应用于页面上的控件，常规的HTML控件和HTML服务器控件包含许多事件，当它们被触发时，则可执行包含在客户端脚本块中的脚本，或者执行包含在控件声明的属性内的脚本代码。

例如：HTML按钮控件具有onclick和onserverclick属性处理单击事件。

用户点击按钮后，先执行客户端的onclick事件，在执行服务器端的onserverclick事件。

下表列出了HTML控件可以使用的一些常用事件。

常用的HTML事件
3.5.1 第一种方式示例：
在内容文件的源视图中，将下面的脚本块添加到</head>关闭标签和<body>打开标签之间：<script language=javascript>
function ButtonTest( )
{
alert("Button clicked - client side processing");
}
function DoChange( )
{
document.getElementById("btnSave").disabled=false;
}
</script>
在打开的<script>标签中，使用language属性指定编程语言，当前情况使用的是JavaScript。

在该示例中，实现了两个不同的函数。

ButtonTest函数调用alert方法弹出一个
对话框。

DoChange函数启用了一个Save按钮。

程序实现了一个场景，即首先将Save按钮指定为不可用，一直到用户修改了某些数据，才启用Save按钮。

向窗体添加以下控件：一个HTML按钮、两个按钮、一个HTML输入文本框和一个的TextBox。

如示例3-5所示，您可以将控件拖到窗体上，然后重命名控件，并且设置属性。

两个HTML控件都包含ID和runat属性，它们则成为了服务器控件。

btnServer控件设置了OnClientClick属性，同时，btnSave控件的Enabled属性被设置为false。

示例3-5：Default.aspx中的控件进行客户端处理
<h1>Client-Side Processing</h1>
<input id="btnHTML" runat=server type="button"
value="HTML Button"
onclick="javascript:ButtonTest( );"
onserverclick="btnHTML_ServerClick"/>
<asp:Button ID="btnServer" runat="server"
Text=" Button"
OnClientClick="javascript:ButtonTest( );" />
<br />
<input id="txtHTML" type="text" runat="server"
onchange="javascript:DoChange( );" /><br />
<br />
<asp:TextBox ID="TextBox1" runat="server"
onchange="javascript:DoChange( );"></asp:TextBox>
<br />
<asp:Button ID="btnSave" runat="server"
Text="Save" Enabled=false />
在设计视图中，双击“btnHTML”控件，以便在代码隐藏文件中创建事件处理程序。

接着添加以下高亮显示的代码：
protected void btnHTML_ServerClick(object sender, EventArgs e)
{
txtHTML.V alue = "An HTML server control";
}
在设计视图中，双击“btnServer”来为按钮创建事件处理程序，接着在代码隐藏文件中添加以下高亮显示的代码：
protected void btnServer_Click(object sender, EventArgs e)
{
txtHTML.V alue = "An server control";
}
此时运行页面。

初始情况下，Save按钮不可用（灰色）。

单击“HTML”按钮将触发JavaScript 函数ButtonTest，即弹出对话框“Button clicked - client sid e processing.”。

一旦在对话框中单击了确定按钮，服务器端代码则开始执行。

即在HTML输入框中创建一个“An HTML server control.”字符串。

同样，单击服务器按钮将弹出相同的对话框，并在HTML输入框中创建“An HTML server control.”字符串。

修改任一文本框中的内容，都将启用Save按钮。

从服务器控件调用客户端脚本，可在浏览器中查看页面源文件。

3.5.2第二种方式：动态注册javascript指令块
使用Page.ClientScript.RegisterClientScriptBlock
<html xmlns="/1999/xhtml" >
<head runat="server">
<title>Adding JavaScript</title>
</head>
<body>
<form id="form1" runat="server">
<div>。