日期:2014-05-16  浏览次数:20822 次

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"