asp.net2.0 新增控件(1)--UI控件

ASP.NET2.0 新增控件(1)

概述：
   ASP.NET2.0中大约新增了50个控件：

分类	控件
数据控件	GridView、DetailsView
数据源控件	SqlDataSource, ObjectDataSource, XmlDataSource, 等
登陆控件	Login, CreateUserWizard, PasswordRecovery, 等
导航控件	Menu, TreeView, SiteMapPath
Web部件控件	WebPartManager, WebPartZone, 等
UI控件	FileUpload, BulletedList, MultiView, Wizard, 等

   本文只重点介绍UI控件。其他控件将陆续随相应的新功能和新特性一起介绍。
   UI控件是用户界面控件，在ASP.NET2.0中新增了如下几种控件：

名称	描述
BulletedList	BulletedList 控件创建一个无序或有序（编号的）的项列表，它们分别呈现为 HTML ul 或 ol 元素。可以指定项、项目符号或编号的外观；静态定义列表项或通过将控件绑定到数据来定义列表项；也可以在用户单击项时作出响应。
FileUpload	使用 FileUpload 控件，您可以为用户提供一种将文件从用户的计算机发送到服务器的方法。该控件在允许用户上载图片、文本文件或其他文件时很有用。
HiddenField	HiddenField 控件提供了一种在页面中存储信息但不显示信息的方法。例如，可以在 HiddenField 控件中存储用户首选项设置。
ImageMap	利用 ImageMap 控件可以创建一个图像，该图像包含许多用户可以单击的区域，这些区域称为作用点（热区）。每一个作用点都可以是一个单独的超链接或回发事件。
MultiView 和 View	MultiView 和 View Web 服务器控件用作其他控件和标记的容器，并提供了一种可方便地显示信息的替换视图的方式。
Substitution	Substitution 控件用在配置为需要进行缓存的 ASP.NET 网页上。Substitution 控件允许您在页上创建一些区域，这些区域可以用动态方式进行更新（即不希望被缓存的区域），然后集成到缓存页。
Wizard	通过使用窗体收集用户输入是 Web 开发中一个要反复涉及的任务。用来完成某个任务的一组窗体通常称为“向导”。ASP.NET 提供了 Wizard 控件，可以简化许多与生成一系列窗体以收集用户输入的操作关联的任务。即通过分步骤地过程页指导用户操作。

   其实，这些新增控件大部分都是原先的HTML控件，只是原先并没有包装成WEB控件，而在ASP.NET2.0种将其进行了包装。
   下面我们就分别进行介绍：

一. BulletedList控件：
   1. MSDN中的概述：
      BulletedList 控件创建一个无序或有序（编号的）的项列表，它们分别呈现为 HTML ul 或 ol 元素。可以指定项、项目符号或编号的外观；静态定义列表项或通过将控件绑定到数据来定义列表项；也可以在用户单击项时作出响应。
      BulletedList 与 ListBox、DropDownList 及其他 ASP.NET 列表控件派生自相同的 ListControl 类，因此其用法与这些控件的用法类似。通过创建静态项或将控件绑定到数据源，可以定义 BulletedList 控件的列表项。如果在设计时知道需要显示的是哪个项，可在标记中将控件的 Items 集合设置为一组单独的项。如果要显示的项是动态的，可以通过代码在运行时创建项集合。

注意：

         不要对以上三种列表控件的值属性使用敏感数据（如客户号）。虽然它是不可见的，但各个项的 Value 属性设置仍将呈现在Html页上，用户能在该页的源代码中很容易地看到它们。

   2. 如何：定义列表项：
      由概述知道，BulletedList控件与其他两种列表控件在帮定方式上是相同的。均可以采用直接指定静态项或者配置数据源动态生成。这里就不做过多说明。
   3. 如何：自定义列表项外观：

属性	功能
BulletStyle	用于设定项目符号的样式
BulletImageUrl	用于指定代替项目符号的自定义图片的路径
FirstBulletNumber	自定义列表项的起始编号
DisplayMode	项目符号列表的现实样式：    Text：静态文本   由控件所显示的文本不是交互式的。    HyperLink：用户可以单击链接定位到其他页。您必须提供一个目标 URL 作为单个项的 Value 属性。    LinkButton：用户可以单击单个项，然后控件将执行一次回发。

   4. 如何：相应用户单击：
      用法与其他列表控件也很相似。
      (1). 为Click 事件创建一个事件处理程序。
      (2). 在事件处理程序中，获取传递给处理程序的 BulletedListEventArgs 参数 e 的 Index 属性。
      (3). 使用索引从控件中获取合适的项，然后获取该项的 Text 和 Value 属性。
   由于BulletedList比较简单而且与原先的列表控件差别不大，这里就介绍这么多。

二. FileUpLoad控件：
   1. MSDN中的概述：
      使用 FileUpload 控件，您可以为用户提供一种将文件从用户的计算机发送到服务器的方法。该控件在允许用户上载图片、文本文件或其他文件时很有用。
      FileUpload 控件显示一个文本框，在此用户可以键入希望上载到服务器的文件的名称。该控件还显示一个“浏览”按钮，该按钮显示一个文件导航对话框。（显示的对话框取决于用户计算机的操作系统。）出于安全方面的考虑，不能将文件名预加载到 FileUpload 控件中。
      用户选择要上载的文件并提交页面后，该文件作为请求的一部分上载。文件将被完整地缓存在服务器内存中。文件完成上载后，页代码开始运行。
      使用 FileUpload 控件，用户可能上载潜在有害的文件，这包含脚本文件和可执行文件。无法预先限制用户可以上载的文件。如果希望限制用户可以上载的文件的类型，则必须在上载文件后检查文件特征（例如，文件扩展名和文件的 ContentType 属性的值）。
   2. 如何：编码实现上载文件：
      这里是我的项目中FileUpload 控件的实际应用，由于保密性的要求所以有所简化。
      这是一个实现数据库远程和本地同时备份的功能流中抽取出的数据库文件上传得例子：
      首先：向网页中拖拽一个FileUpload 控件和一个Button控件。
      其次：在网页后端代码中对Button控件的Click事件进行编码，
         (1). 通过测试 FileUpload 控件的 HasFile 属性，检查该控件是否有上载的文件。
         (2). 检查该文件的文件名或 MIME 类型以确保用户已上载了您要接收的文件。若要检查 MIME 类型，请获取作为 FileUpload 控件的 PostedFile 属性公开的 HttpPostedFile 对象。然后，通过查看已发送文件的
ContentType 属性，就可以获取该文件的 MIME 类型。
         (3). 将该文件保存到您指定的位置。您可以调用 HttpPostedFile 对象的 SaveAs 方法。或者，还可以使用 HttpPostedFile 对象的 InputStreamInputStream 属性，以字节数组或流形式管理已上载的文件。
如下：

protected void Button1_Click(object sender, EventArgs e)
    {
        lblBackOK.Text = "";
        /**//*用字符串得到服务器的相对路径，以备上传使用。
         * 其中：使用 HttpServerUtility 类的 MapPath 方法，即Server对象的MapPath方法，
         * 并将表示应用程序根文件夹的颚化符 (~) 加上自己指定的上传文件夹名称传递给该方法。*/
        string path = Server.MapPath("~/Pages_Admin") + "/DBCopy/";
        //从FileUpload控件中得到用户选择的本地文件名，用作判断，以保证上传文件具有一定的安全性或标准性。
        string name = FileUpload1.FileName;
        //在上传前确定上传文件时候是系统所需的数据库备份文件。
        //确定上传文件的扩展名：
        if (!FileUpload1.HasFile)
        {
            String fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();
            if(fileExtension != ".bak")
                CustomValidator1.IsValid = false;
        }
        //确定文件名：
        else if (!name.Contains("assetsdb"))
        {
            CustomValidator1.IsValid = false;
        }
        else
        {
            try
            {
                /**//*FileUpload 控件和 HttpPostedFile 对象都支持将文件写入磁盘的 SaveAs 方法。
                 * 使用 PostedFile 属性中的SaveAs方法，将前面得到的服务器物理路径
                 * 与用户选择的文件名作为参数执行上传即可，写入磁盘。*/
                FileUpload1.PostedFile.SaveAs(path
                    + FileUpload1.FileName);
                //以下是服务器备份方法，这里不予讨论
                DBOperate dbop = new DBOperate();
                dbop.DbRestore(Server.MapPath("~/Pages_Admin"), name);
                lblRestoreOK.Text = "恢复成功！";
            }
            catch(ArgumentException ae)
            {
                lblRestoreOK.Text = ae.Message;
            }
        }
    }

注意：

         1. 使用 FileUpload 控件，用户可能上载潜在有害的文件，这包含脚本文件和可执行文件。无法预先限制用户可以上载的文件。如果希望限制用户可以上载的文件的类型，则必须在上载文件后检查文件特征（例如，文件扩展名和文件的 ContentType 属性的值）。
         2. 可上载的最大文件的大小取决于 MaxRequestLength （请求的最大大小（以千字节为单位）。默认大小为 4096 KB (4 MB)。 ）配置设置的值。如果用户试图上载大于最大允许值的文件，则上载会失败。可以在配置文件的System.web节的httpRuntime元素中配置。

<configuration>
  <system.web>
  <httpRuntime maxRequestLength="4000"
    enable = "True"
    idleTimeOut = "15"
    requestLengthDiskThreshold="512
    useFullyQualifiedRedirectUrl="True"
    executionTimeout="45"
    versionHeader="1.1.4128"/>
  </system.web>
</configuration>

      至此，整个备份事例就完成了。对于FileUpload控件的使用以及实例就介绍完了。

三. ImageMap控件：
   1. MSDN中的概述：
      利用 ASP.NET ImageMap 控件可以创建一个图像，该图像包含许多用户可以单击的区域，这些区域称为作用点。每一个作用点都可以是一个单独的超链接或回发事件。可以在一幅图片中设置很多热区，当用户点击不同热区的时候会有不同的反应。通过点击热区，可以跳转到不同的URL也可以执行不同的服务器代码。
      ImageMap 控件主要由两个部分组成。第一个是图像，它可是任何标准 Web 图形格式的图形，如 .gif、.jpg 或 .png 文件。第二个元素是作用点控件的集合。每个作用点控件都是一个不同的元素。对于每个作用点控件，您要定义其形状（圆形、矩形或多边形）以及用于指定作用点的位置和大小的坐标。
   2. 如何：定制热区：
      可以根据需要为图像定义任意数目的作用点。不需要定义覆盖整个图形的作用点。
      在放置了ImageMap控件，且加载了图片后，我们可以在ImageMap控件的属性中找到HotSpots属性，点开它的设置窗口。会发现在“添加”按钮的右侧有可以点击的箭头，点开后，出现下拉菜单。其中包含三项即圆形热区(CircleHotSpot)、长方形热区(RectangleHotSpot)、多变性热区(PolygonHotSpot)三种形状。
      对于圆形热区(CircleHotSpot)而言，只要定义圆心（X，Y）、半径（Radius）；对于长方形热区(RectangleHotSpot)，需要定义左上角的 x 坐标(Left)、左上角的 y 坐标(Top)、右下角的 x 坐标(Right)、右下角的 y 坐标(Bottom)；对于多变性热区(PolygonHotSpot)，我们要将 Coordinates 属性设置为指定 PolygonHotSpot 对象每个顶点的坐标的字符串。多边形顶点是两条多边形边的交点。
      除热区外外观外我们还要关注的属性有：

属性

描述

AlternateText

获取或设置当公布图像不可用时显示在控件中的替换文字。支持工具提示功能的浏览器将此文本显示为公布的工具提示，即鼠标移至热区上时出现的提示。

HotSpotMode

获取或设置单击控件中的HotSpot对象时HotSpot 的行为模式：

选项	描述
NotSet	未定义行为，HotSpot 对象将导航至某个 URL
Inactive	HotSpot 不具有任何行为
Navigate	HotSpot 定位到 URL
PostBack	HotSpot 生成到服务器的回发，

NavigateUrl

热区模式为Navigate时，要跳转到的URL地址

PostBackValue

热区模式为PostBack时，要标示产生事件的热区名成，在单击事件的ImageMapEventArgs数据中传送。

      可以定义重叠的作用点。每个作用点都包含一个 z 索引值，如果用户点击某个由两个或更多重叠的作用点定义的区域，则 z 顺序的值最高的作用点便是选定的作用点。
      以上属性的选择均可以在设计模式中轻松配置。无需书写代码。
   3. 如何：响应用户单击事件：

注意：

         如果 ImageMap 控件或单个作用点已配置为转到特定 URL，则您没有机会直接对单击做出响应。但是，如果控件或单个作用点配置为执行回发，则可以为该事件编写处理程序并确定单击了哪个作用点。

      首先：如上所说，向页面放置ImageMap控件，并定制其热区属性是PostBack。
      例如：

<asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" 
            runat="server" 
            HotSpotMode="PostBack" 
            OnClick="ImageMap1_Click">
         <asp:RectangleHotSpot Bottom="100" Right="100" 
             HotSpotMode="PostBack" PostBackValue="NW" />
         <asp:RectangleHotSpot Bottom="100" Left="100" Right="200" 
             HotSpotMode="PostBack" PostBackValue="NE" />
         <asp:RectangleHotSpot Bottom="200" Right="100" Top="100" 
             PostBackValue="SW" />
         <asp:RectangleHotSpot Bottom="200" Left="100" Right="200" 
             Top="100" PostBackValue="SE" />
        </asp:ImageMap>

      其次：为 ImageMap 控件添加 Click 事件处理程序。
      然后：在事件处理程序中，读取ImageMapEventArgs对象的PostBackValue 属性，以确定单击了哪个作用点。
      例如：

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
    String region = "";
    switch(e.PostBackValue)
    {
        case "NW":
            region = "Northwest";
            break;
        case "NE":
            region = "Northeast";
            break;
        case "SE":
            region = "Southeast";
            break;
        case "SW":
            region = "Southwest";
            break;
    }
    Label1.Text = "You clicked the " + region + " region.";
}

      最后：在页面放置Label控件(Label1)。
   至此，关于ImageMap控件的基本用法就介绍完了，一般在对网站投票或者需要更形象地展示站点的时候可以充分应用这一功能。

四. MultiView 和 View 控件：
   1. MSDN中的概述：
      MultiView 和 View Web 服务器控件用作其他控件和标记的容器，并提供了一种可方便地显示信息的替换视图的方式。可以使用 MultiView 和 View 控件执行如下任务：

• 根据用户选择或其他条件提供备选控件集。例如，您可能允许用户从一个源 (feed) 列表中选择，其中每个源都在独立的 View 控件中配置。然后可以显示包含用户选择的源的 View 控件。可以使用 MultiView 和 View 控件作为创建多个 Panel 控件的一种替代方法。

• 创建多页窗体。MultiView 和 View 控件可以提供与 Wizard 控件相似的行为。Wizard 控件尤其适合于创建用户分步骤顺序填写的窗体。如果要创建根据条件（而不是按顺序）更改的显示，或者如果不需要 Wizard 控件支持的额外功能，则可以使用 MultiView 控件来代替 Wizard。 

      二者结构关系为：MultiView 控件用作一个或多个 View 控件的外部容器。View 控件又可包含标记和控件的任何组合。MultiView 控件可以同时允许开发人员同时编辑出多个View控件页面，可以根据用户选择一次显示一个活动的View 控件页面，并公开该 View 控件内的标记和控件。通过设置 MultiView 控件的 ActiveViewIndex 属性，可以指定当前可见的 View 控件。未选择某个 View 控件时，该控件不会呈现到页面中。但是，每次呈现页面时都会创建所有 View 控件中的所有 Web 服务器控件的实例，并且将这些实例的值存储为页面的视图状态的一部分。   
   2. 向 Web 窗体页添加 MultiView Web 服务器控件：
      (1). 从工具箱的“标准”选项卡中，将 MultiView 控件拖动到页面上。
      (2). 从工具箱的“标准”选项卡中，将 View 控件拖动到 MultiView 控件上。
      (3). 键入任何您想要添加到 View 控件中的静态文本。若要向 View 控件添加控件，请将它们从“工具箱”中拖动到 View 控件上，以创建您想要的布局。
      (4). 将 MultiView 控件的 ActiveViewIndex 属性设置为要显示的 View 控件的索引值。如果不想显示任何 View 控件，则将此属性设置为 -1。
      (5). 通过添加代码来以编程方式设置 ActiveViewIndex 属性，从而设置要显示的 View 控件。
         a. 声明代码如下：

<asp:MultiView ID="Main" ActiveViewIndex="0" RunAt="server">
  <asp:View RunAt="server">
  </asp:View>
  <asp:View RunAt="server">
  </asp:View>
  <asp:View RunAt="server">
  </asp:View>
</asp:MultiView>

注意：

         在每个View中可以像在一般页面中一样随意编辑布局和控件等。但是只有一个由ActiveVIewIndex属性决定的View中的内容被现实。

         b. 通过更改ActiveViewIndex属性，选择呈现不同的View中的内容，代码如下：

protected void radioButton_CheckedChanged(Object sender, System.EventArgs e)
{
    if(radioProduct.Checked)
    {
        //"0"代表将要呈现的View的索引值
        MultiView1.ActiveViewIndex = 0   
    }
    else if(radioCategory.Checked)
    {
        //"1"代表将要呈现的View的索引值
        MultiView1.ActiveViewIndex = 1
    }
}

      由此可见，MultiView控件的使用是很简单而且很方便。

注意：

         由于视图状态虽然不显示，却在后端隐藏加载，这样，视图状态的多少和大小将直接影响到页面的加载性能。请慎用！

至此，我们关于ASP.NET2.0的新控件中UI控件的介绍就到这里，因为Wizard控件的很好的例子就是最新的登陆控件集中的控件，所以留给大家自己思考和研究。而Substitution控件与缓存部分联系相当紧密，所以留待缓存介绍部分再作详细说明。
         最后，祝大家编成愉快！