现在的位置: 首页 > 综合 > 正文

ASP.NET 2.0新控件介绍

2012年07月01日 ⁄ 综合 ⁄ 共 5638字 ⁄ 字号 评论关闭
 

1.         Adrotator

l         Adrotator广告控件的功能

ü         轮换显示广告图片

ü         显示广告文字

ü         有权重的显示广告

ü         广告显示内容控制

Ø         通过设定XML文件作为广告数据源,轮训显示广告

Ø         XML文件格式如下     

<Advertisements>;表示其中的内容是一个标准的广告链接

<ad>;表示为广告发布信息

<ImageUrl>images/banner1.gif</ImageUrl >

<NavigateUrl>http://www.microsoft.com</ NavigateUrl >

<AlternateText>Microsoft.com</ AlternateText >;鼠标点击的浮动信息

<Keyword>Computers</ Keyword >

<Impressions>80</ Impressions ></Ad>;表示这个广告出现的几率和高

</Advertisements >

Ø         XML文件说明

属性

描述

ImageUrl

广告链接的图片属性

NavigateUrl

点击广告后的链接地址

AlternateText

鼠标放置在图片之上显示的文字

Keyword

指定一个关键字

Impressions

图片显示的权重

演示一个显示三大门户的广告控件

2.         新建网站->新建网页文件ad->切换到设计模式->添加一个Adrotator控件->添加三幅图片到方案->添加一个XML文件并编写文件内容如下:

<Advertisements>

       <Ad>

              <ImageUrl>~/index_logo.gif</ImageUrl>

              <NavigateUrl>http://www.sohu.com</NavigateUrl>

              <AlternateText>sohu</AlternateText>

              <Keyword>Computers</Keyword>

              <Impressions>80</Impressions>

       </Ad>

       <Ad>

              <ImageUrl>~/sina_logo2.gif</ImageUrl>

              <NavigateUrl>http://www.sina.com</NavigateUrl>

              <AlternateText>sina</AlternateText>

              <Keyword>Computers</Keyword>

              <Impressions>80</Impressions>

       </Ad>

       <Ad>

              <ImageUrl>~/neteaselogo.gif</ImageUrl>

              <NavigateUrl>http://www.163.com</NavigateUrl>

              <AlternateText>163</AlternateText>

              <Keyword>Computers</Keyword>

              <Impressions>80</Impressions>

       </Ad>

</Advertisements>

->指定广告描述文件(两种方式:一、源模式下添加代码:<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile ="~/XMLFile.xml" />二、设计模式点击选择数据源->新建数据源->XML文件->选择数据文件(这里直接使用数据绑定控件来完成相同任务))->运行->刷新网页查看效果。三个广告出现几率一样。

3.         Calendar

l         日历控件负责显示一个月的日历,并接受用户的选择日期操作

l         选择日期的模式

模式

描述

Day

用户只能选择一天

DayWeek

用户可以选择一天或者一周

DayWeekMonth

用户可以选择一天或者一周或者一个月

None

用户不能选择

l         日历选择模式演示

新建一个Web窗体->添加一个Calendar控件和一个DroDownList控件->DroDownList控件中添加四种显示模式->DroDownList控件的SelectedIndexChanged事件中添加如下代码

        switch (this.DropDownList1.SelectedValue)

        {

        case "DayWeek":

                this.Calendar1.SelectionMode = CalendarSelectionMode.DayWeek;

              break;

        case "Day":

                this.Calendar1.SelectionMode = CalendarSelectionMode.Day;

              break;

        case "DayWeekMonth":

                this.Calendar1.SelectionMode = CalendarSelectionMode.DayWeekMonth;

              break;

        case "None":

                this.Calendar1.SelectionMode = CalendarSelectionMode.None;

              break;

        default:

              break;

        }

->运行网页->改变DroDownList选项查看效果。

通过样式套用还可以实现不同样式的显示

l         定义自己的节假日

ü         日历控件可以定义自己的节假日

ü         通过对DayRender时间进行编程,可以在显示日期的时候方便的显示自定义的节日

ü         示例

ü         接着本控件示例中在代码文件中声明一个数组(string[,] holidays = new string[12,31];->Page——Load中定义自定义节日(holidays[5, 11] = "七夕情人节";->CalendarCalendar1_DayRender事件中进行加入如下代码

       CalendarDay d;

        TableCell c;

        d = e.Day;

        c = e.Cell;

        if (d.IsOtherMonth)

            c.Controls.Clear();

        else

        {

            try

            {

                string hol = holidays[d.Date.Month-1, d.Date.Day-1];

                if (hol != "")

                {

                    c.Controls.Add(new LiteralControl("<br><font color = red>" + hol + "</font>"));

                }

            }

            catch (Exception exc)

            {

                Response.Write(exc.ToString());

            }

        }

运行网页->改变月份查看效果。

4.         fileupload

上传文件控件

l         ASP.NET 2.0 提供了一个非常方便的文件上传控件fileupload,可以快速的把文件上传到服务器端,而无需编写更多的代码。

l         文件上传控件示例

5.         ImageButton

图片按钮控件

l         图片按钮控件示例:获取用户点击位置

l         图片按钮控件可以在按钮上显示一幅图片,并代替按钮控件的基本功能,不仅如此,图片按钮控件还可以方便的获取图片点击的位置。

l         图片按钮控件示例

新建一个Web 窗体->添加图片到方案中->添加一个ImageButton,三个Label控件->ImageButton中设置加入的图片->label1Text为“您点击的坐标是”->ImageButtonImageButton1_Click事件中添加如下代码:

        int x = e.X;

        int y = e.Y;

        Label2.Text = "X: " + x.ToString() + " Y: " + y.ToString();

        if (y >= 120)

            Label3.Text = "你点击的是新浪!";

        else

            Label3.Text = "你点击的是搜狐";

运行网页->点击图片查看效果。

6.         Imagemap

图片地图控件

l         图片地图控件可以在一副图片中设置很多热区,当用户点击不同热区的时候会有不同的反应,既可以让用户通过点击热区跳转到不同的URl也可以让用户通过点击热区运行不同的服务代码。

l         图片地图控件示例

l         新建一个Web 窗体->添加图片到方案中->添加一个Imagemap,一个Label控件->ImageButton中设置加入的图片->ImageButtonHotSpots属性中添加两个热区,在热区中设置模式为postback,对应的设置AlternateText为搜狐和新浪,设置PostBackValue的值->ImagemapImageMap1_Click事件中写下如下代码:

        switch (e.PostBackValue)

        {

            case "souhu":

                Label1.Text = "感谢您为搜狐投上一票!";

                break;

            case "xinlang":

                Label1.Text = "感谢您为新浪投上一票!";

                break;

            default:

                break;

        }

运行网页->点击图片查看效果。

注:三种作用点类型的方式

<asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" runat="server" HotSpotMode="PostBack">

 <asp:RectangleHotSpot Bottom="100" Left="100" Right="200"

    PostBackValue="Northeast" />

 <asp:RectangleHotSpot Bottom="200" Right="100" Top="100"

    PostBackValue="Southwest" />

 <asp:RectangleHotSpot Bottom="200" Left="100" Right="200"

    Top="100" />

 <asp:CircleHotSpot Radius="50" X="100" Y="100"

    HotSpotMode="Navigate"

    NavigateUrl="http://www.contoso.com/" />

 <asp:PolygonHotSpot Coordinates="0,0;100,100;200,0"

    PostBackValue="Triangle1" />

</asp:ImageMap>

7.         MultiView

MultiView控件

l         MultiView控件是为了显示View控件的而定制的工具,View控件是一个Web控件的容器。我们可以在一个网页上设置几个view控件,然后通过MultiView控件来选择把什么样的控件呈现给用户,请看下面这个例子。

l         MultiView示例

新建一个Web 窗体->添加一个MultiView控件,在MultiView控件中添加三个View控件,三个View控件中分别添加今天所谈及的AdrotatorCalendarImagemap三个控件。三个控件的设置分别参考上文。添加一个DroDownlist控件。DroDownlist控件中添加三个项:View1View2View3.Value分别为012->DroDownlist控件的DropDownList1_Selected IndexChanged事件中添加如下代码:

this.MultiView1.ActiveViewIndex =Convert.ToUInt16( this.DropDownList1.SelectedValue);

->运行网页

总结

l         Adrotator

l         Calendar

l         ImageButton

l         Imagemap

l         MultiView

抱歉!评论已关闭.