清华电脑学堂：ASP.NET 4.5网站开发与应用实践教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.7 其他控件

除了上述控件以外，还有其他常用控件，如图片显示控件、日历控件和广告控件等。

几乎每一个网页中都有图片的显示，图片显示使用Image控件，而根据图片的不同区域，响应不同事件则需要使用ImageMap控件。此外，还有常见的时间控件，可供用户选择或查阅日期，本节将详细介绍。

3.7.1 图片显示控件

图片显示控件是一个容易操作的控件，其图片的显示正如标签控件显示文本一样。通过为图片控件指定图片位置，即可显示指定图片。

图片显示控件为Image控件，其在工具箱中的符号为。与其他控件不同，Image控件不支持任何事件，通常情况下，将通过使用ImageMap或ImageButton控件来创建交互式图像。

但Image控件有着常用属性，可在代码中通过属性来控制Image控件对图片的显示，包括图片的位置、大小等，常见的属性如表3-14所示。

表3-14 Image控件的常用属性

除了显示图像外，Image控件还可以为图像指定各种类型的文本。与之相关的属性如下所示。

（1）ToolTip：在一些浏览器中作为工具提供显示的文本。

（2）AlternateText：在无法找到图形文件时显示的文本。如果没有指定任何ToolTip属性，某些浏览器将使用AlternateText值作为工具提示。

（3）GenerateEmptyAlternateText：该属性的值如果为true，则所呈现的图像元素的alt特性将设置为空字符串。

ImageUrl属性可以显示指定的文本，还可以通过该属性绑定数据源，以显示数据库后台的图像。Image控件的简单使用代码如下。

        <asp:Image ID="imgShow" ImageUrl="~/sg_icon.png" runat="server" Width=
        "200px" Height="200px" />

上述代码为图片显示控件指定了图片位置“～/sg_icon.png”，以及图片显示的宽度200px和高度200px。

3.7.2 图片响应控件

ImageMap控件同样可以显示图像，但该控件可提供三种不同区域，以响应不同的事件。ImageMap控件在工具箱中的符号为，若添加了该控件，其区域内部可添加三种区域，代码如下。

        <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Styles/
        1045.jpg">
        <asp:CircleHotSpot />
        <asp:PolygonHotSpot />
        <asp:RectangleHotSpot />
        </asp:ImageMap>

ImageMap控件创建具有用户可以单击的单个区域的图像，这些单个的区域点称为作用点。每一个作用点都可以是一个单独的超链接或回发事件。

ImageMap控件由两个元素组件：一个是图像，它可以是任何标准的Web图形格式的图形（如.jpg、.gif或.png）；另一个是HotSpot的集合，每个作用点都是一个类型为CircleHotSpot、RectangleHotSpot和PolygonHotSpot的不同项。

ImageMap控件可以包含Image控件的属性，除了那些属性外，该控件还有两个重要属性：HotSpots和HotSpotMode。

HotSpotMode属性表示获取或设置单击HotSpot对象时该控件对象的默认行为。它的值是HotSpotMode枚举的值之一，具体说明如下。

（1）NotSet：未设置。默认情况下控件会执行导航操作，即导航到指定的网页；如果未指定导航的网页，则导航到当前网站的根目录。

（2）Navigate：导航到指定的网页，如果未指定导航的网页则导航到当前网站的根目录。

（3）PostBack：执行回发操作，用户单击区域时执行预先定义的事件。

（4）Inactive：无任何操作，这时该控件和Image控件的效果一样。

ImageMap控件在页面中的使用，首先需要为该控件添加相应的区域，接着是对其单击事件代码的编写。如分别定义三种区域代码如下。

      <asp:ImageMap ID="ImageMap1" ImageUrl="~/Styles/1045.jpg " runat=
      "server" ImageAlign="Left" style="border:none" onclick="ImageMap1_
      Click" Width="500">
          <asp:CircleHotSpot Radius="80" X="100" Y="100" AlternateText="圆形区
          域" HotSpotMode="PostBack" PostBackValue="CH" />
          <asp:RectangleHotSpot Bottom="200" Left="300" Right="500" Top="0"
          HotSpotMode="PostBack" AlternateText="方形区域" PostBackValue="RH" />
          <asp:PolygonHotSpot Coordinates="100,100,300,300,200,300" HotSpotMode=
          "PostBack" PostBackValue="PH" AlternateText="多边形区域" />
      </asp:ImageMap>

接下来可定义其单击事件，如单击不同区域，弹出不同内容的对话框，其单击事件代码如下所示。

        protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
        {
            String region = "";                  //弹出对话框的显示文字
            switch (e.PostBackValue)
            {
              case "CH":
                  region = "圆形区域";
                  break;
              case "RH":
                  region = "方形区域";
                  break;
              case "PH":
                  region = "多边形区域";
                  break;
            }
            Page.ClientScript.RegisterStartupScript(GetType(), "", "<script>alert
            ('"+region+"'); </script>"); //弹出对话框
        }

3.7.3 日历控件

一些网站中会有时间的选择或显示，可以使用日历控件Calendar控件。但对于日期的选择或显示，目前有多种第三方的控件可以使用，本节介绍ASP.NET中自带的控件。

Calendar控件在工具箱中的符号为，它显示日历中的可选日期，并显示与特定日期关联的数据。使用该控件可以执行以下操作。

（1）捕获用户交互（例如在用户选择一个日期或一个日期范围时）。

（2）自定义日历的外观。

（3）在日历中显示数据库中的信息。

Calendar控件可以显示某个月的日历，也允许用户选择日期，还可以跳转日期到前一个或下一个月，如表3-15所示对Calendar控件的主要属性进行了具体说明。

表3-15 Calendar控件的主要属性

读者在调用SelectedDate属性获取选定的日期时，该属性返回一个DateTime对象，通过DateTime对象的各个方法可以获取不同的内容。例如，调用Add()方法可以返回一个新的日期对象；调用ToShortDateString()方法将DateTime对象的值转换为其等效的短日期字符串表示形式。

提示

除了上述属性外，Calendar控件还可以使用其他属性指定外观内容。如ForeColor属性设置文本的颜色；DayHeaderStyle属性设置标头行的样式；以及BackColor属性设置背景颜色等。

Calendar控件主要使用两个事件：DayRender和SelectionChanged。当控件创建要发送到浏览器的输出时引发DayRender事件，在准备要显示的日时将为每个日引发该事件；当用户通过单击日期选择器控件选择一天、一周或整月时引发该事件。

在DayRender事件的方法中带有两个参数：包括对引发事件的Calendar控件的引用和DayRenderEventArgs类型的对象。该对象提供对另外两个对象的访问。

（1）Cell：它是一个TableCell对象，可以用于设置个别日的外观。

（2）Day：可以用于查询关于呈现日的信息。该对象不仅支持各种可用于了解有关日的信息的属性（如IsSelected和IsToday等），还支持Controls集合，可操作该集合以将内容添加到日中。

3.7.4 广告控件

广告控件AdRotator控件用来在页面上生成随机广告性质的元素，并通过AdvertisementFile属性获取或设置包含广告信息的XML文件的路径。

AdRotator控件通常获取XML文件中的信息，并将广告信息显示出来。其在工具箱中的符号为，只需创建好相关的XML文件，并通过AdvertisementFile属性获取XML文件的路径即可，在XML文件中，需要对广告进行设置的属性如表3-16所示。

表3-16 广告信息属性

AdRotator控件的AdvertisementFile属性获取XML文件，必须确保XML文件内容的规范性。如创建一个XML文件，则其文件内容格式如下。

        <? xml version="1.0" encoding="utf-8" ? >
        <Advertisements>
          <Ad>
            <ImageUrl>Styles/1045.jpg</ImageUrl>
            <NavigateUrl>广告链接地址</NavigateUrl>
            <AlternateText>提示信息 </AlternateText>
            <Keyword>广告分类/关键字</Keyword>
            <Impressions>该广告出现的频率</Impressions>
          </Ad>
          <Ad>
            <ImageUrl>显示图片的地址</ImageUrl>
            <NavigateUrl></NavigateUrl>
            <AlternateText></AlternateText>
            <Keyword> </Keyword>
            <Impressions>10</Impressions>
          </Ad>
        </Advertisements>
上一章目录下一章