写作目的:扩展ajaxtoolkit应用
ajaxtoolkit版本:Version 1.0.10606.0
ASP.NET AJAX 版本:version 1.0
测试环境:vista+vs2005sp1+IE7
适应人群:M$的asp.net发烧友
概述:
官方网站的DEMO:(http://ajax.asp.net/ajaxtoolkit/SlideShow/SlideShow.aspx)您访问时也许已经升级,请注意版本
![07061601.JPG](https://i-blog.csdnimg.cn/blog_migrate/f3abdf03e5106a3eb252f5ab11d36051.jpeg)
这个web控件主要来源于ms古老的幻灯片,vista的sidebar也有相应的控件,用以显示图片,无论在winform上还是webform上都是一种很cool的用户体验:
![](https://i-blog.csdnimg.cn/blog_migrate/4a09e2b7aef34a83b5920db1def1bc3d.jpeg)
问题:
虽然这次发布的版本中加入了一个新的属性:ImageTitleLabelID,用来显示图片的描述,但是如果想做为广告显示幻灯片放映,还需要使用链接来转到相应的广告
方法:
1.需要下载ajaxtoolkit的相应版本的源代码包,请到官网下载
2,在你已经引用控件包的网站中新建网站,加入以下代码:
1
<
ajaxToolkit:ToolkitScriptManager
ID
="ToolkitScriptManager1"
runat
="server"
>
2
</
ajaxToolkit:ToolkitScriptManager
>
3
<
asp:Image
ID
="Image1"
runat
="server"
Height
="175px"
Width
="300px"
/><
br
/>
4
<
asp:Label
ID
="Label_Title"
runat
="server"
></
asp:Label
><
br
/>
5
<
asp:Label
ID
="Label_Description"
runat
="server"
></
asp:Label
><
br
/>
6
<
asp:Button
ID
="Button_Preview"
runat
="server"
Text
="上一个"
/>
7
<
asp:Button
ID
="Button_Stop"
runat
="server"
Text
="停止"
/>
8
<
asp:Button
ID
="Button_Next"
runat
="server"
Text
="下一个"
/><
br
/>
9
<
ajaxToolkit:SlideShowExtender
ID
="SlideShowExtender1"
runat
="server"
AutoPlay
="True"
10
Loop
="True"
SlideShowServiceMethod
="GetSlides"
SlideShowServicePath
="~/WebService/ad.asmx"
11
TargetControlID
="Image1"
ImageDescriptionLabelID
="Label_Description"
ImageTitleLabelID
="Label_Title"
NextButtonID
="Button_Next"
PlayButtonID
="Button_Stop"
PlayButtonText
="播放"
PreviousButtonID
="Button_Preview"
StopButtonText
="停止"
>
12
</
ajaxToolkit:SlideShowExtender
>
我的ad.asmx中有一个GetSlides的方法,用于从数据库中获取每个图片的url,标题和描述.
当然作为演示,你也可以使用demo中所给出的页面方法来实现,只不过数据是硬性写入的.
如果这个网页可以正常工作,请看下一步:
3.从你的源代码包中拷贝出SlideShowBehavior.js文件,它会出现在X: \解压目录\AjaxControlToolkit\SlideShow目录下,复制它到你的网站中,比如~/js/SlideShowBehavior.js
设置你的SlideShowExtender的ScriptPath属性为~/js/SlideShowBehavior.js
4,因为我们只需图片标题和链接,所以可以把描述的字段替换成链接的地址,我们修改js文件中的写部分:
1
updateImage :
function
(value)
{
2
/// <summary>
3
/// Set current image to be the specified Slide.
4
/// </summary>
5
/// <param name="value" type="Object" mayBeNull="false" />
6
/// <returns />
7
8![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (value)
{
9![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.raiseSlideChanging(this._currentValue, value))
{
10
return;
11
}
12
this._currentValue = value;
13
this._elementImage.src = value.ImagePath;
14
this._elementImage.alt = value.Name;
15
16![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._imageDescriptionLabel && value.Description)
{
17
this._imageDescriptionLabel.innerHTML = value.Description;
18
}
19![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._imageTitleLabel && value.Name)
{
20
this._imageTitleLabel.innerHTML ="<a href=\""+value.Description+"\" target=\"_blank\">" + value.Name + "</a>";
21
}
22
this.raiseSlideChanged(value);
23
this.resetButtons();
24
}
25
}
,
黄色背景部分为添加的内容.看一下效果:
最后修改一下显示效果,再把Description的label隐藏掉就行了.
希望本文能对您有所帮助.