Ajax扩展控件

24.SlideShowExtender(滑动显示控件)

该控件主要是用来扩展Image控件的，用来循环显示一些图片，同时可以点上一张下一张来查看图片。主要代码如下:

CSS:

<style type="text/css">

        .slideTitle

        {

            font-weight: bold;

            font-size: small;

            font-style: italic;

        }

        .slideDescription

        {

            font-size: small;

            font-weight: bold;

        }

    </style>

HTML:

<div style="text-align:center">

        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

        </asp:ToolkitScriptManager>

        <asp:Label ID="lblImageTitle" runat="server" CssClass="slideTitle"></asp:Label><br />

        <asp:Image ID="imgImage" runat="server" Height="300" Style="border: 1px solid black;

            width: auto" ImageUrl="~/SlideShow/images/cljd.jpg" AlternateText="Blue Hills image" /><br />

        <asp:Label runat="server" ID="lblImageDescription" CssClass="slideDescription"></asp:Label><br />

         <asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" />

         <asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" />

         <asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" />

        <asp:SlideShowExtender ID="SlideShowExtender1" runat="server"

         TargetControlID="imgImage"

         SlideShowServicePath="~/SlideShow/WebService.asmx"

         SlideShowServiceMethod="GetImages"

         AutoPlay="true"

         ImageTitleLabelID="lblImageTitle"

         ImageDescriptionLabelID="lblImageDescription"

         NextButtonID="nextButton" 

         PlayButtonText="Play"

         StopButtonText="Stop"

         PreviousButtonID="prevButton"

         PlayButtonID="playButton"

         Loop="true">

        </asp:SlideShowExtender>

    </div>

该控件的属性比较直白，就不说了，值得注意的是一开始我拖入的是<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>控件运行时报错:Microsoft JScript 运行时错误: AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts. Ensure the correct version of the scripts are referenced. If you are using an ASP.NET ScriptManager, switch to the AjaxScriptManager in System.Web.Ajax.dll, or use the ToolkitScriptManager in AjaxControlToolkit.dll

改成<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>就可以了

 

WebServce:

using AjaxControlToolkit;

[WebMethod]

    public Slide[] GetImages() {

        DataTable dt = new PutImages().Images();

        Slide[] images = new Slide[dt.Rows.Count];

        for (int i = 0; i < dt.Rows.Count; i++)

        {

            Slide image = new Slide(dt.Rows[i]["imageUrl"].ToString(), dt.Rows[i]["imageTitle"].ToString(), dt.Rows[i]["imageDescription"].ToString());

            images[i] = image;

        }

        return images;

    }

Slide是AjaxControlToolkit命名空间里的类，是专门为此功能建立的类，其属性有imagePath，Name，Description。SlideShowServiceMethod指定的WebMethod方法返回值类型必须是Slide[]。

 

new PutImages().Images()这里我手工构造了Datetable返回，实际操作中可能需要从数据库里读取,代码如下:

 public DataTable Images()

    {

        DataTable dt = new DataTable();

        DataColumn dc1 = new DataColumn("imageUrl", typeof(string));

        DataColumn dc2 = new DataColumn("imageTitle", typeof(string));

        DataColumn dc3 = new DataColumn("imageDescription", typeof(string));

        dt.Columns.Add(dc1);

        dt.Columns.Add(dc2);

        dt.Columns.Add(dc3);

        DataRow dr1 = dt.NewRow();

        dr1["imageUrl"] = "../SlideShow/images/cljd.jpg";

        dr1["imageTitle"] = "草榴经典";

        dr1["imageDescription"] = "草榴果然经典啊";

        DataRow dr2 = dt.NewRow();

        dr2["imageUrl"] = "../SlideShow/images/dotnet.jpg";

        dr2["imageTitle"] = ".NET";

        dr2["imageDescription"] = "你必须知道的.NET";

        DataRow dr3 = dt.NewRow();

        dr3["imageUrl"] = "../SlideShow/images/html5.jpg";

        dr3["imageTitle"] = "HTML5";

        dr3["imageDescription"] = "HTML5会是web的未来吗";

        DataRow dr4 = dt.NewRow();

        dr4["imageUrl"] = "../SlideShow/images/lx.jpg";

        dr4["imageTitle"] = "鲁巷";

        dr4["imageDescription"] = "繁华的武汉鲁巷";

        DataRow dr5 = dt.NewRow();

        dr5["imageUrl"] = "../SlideShow/images/zyge.jpg";

        dr5["imageTitle"] = "张扬果儿";

        dr5["imageDescription"] = "张扬果儿，你怎么能这样可爱？";

        dt.Rows.Add(dr1);

        dt.Rows.Add(dr2);

        dt.Rows.Add(dr3);

        dt.Rows.Add(dr4);

        dt.Rows.Add(dr5);

        return dt;

    }