龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

基于微软ASP.NET AJAX框架开发幻灯片播放网页(1)(2)

时间:2013-03-06 14:58来源:未知 作者:admin 点击:
分享到:
四、创建一个返回图像URL的web方法 我们前面创建的SlideShow类允许你使用Slides属性来指定幻灯片。一种使用Slides属性的方法是创建一个图像URL的常量数组。

四、创建一个返回图像URL的web方法

我们前面创建的SlideShow类允许你使用Slides属性来指定幻灯片。一种使用Slides属性的方法是创建一个图像URL的常量数组。然而,更为适当的方法则是从服务器端得到图像URL。通过这种方式,你可以基于一些条件或甚至一种数据库驱动的逻辑返回图像。这需要我们创建一个能够返回一个图像URL数组的web方法。然后,从客户端JavaScript脚本中调用这个web方法。

接下来,让我们开始创建下列web方法。

[WebMethod]
public static string[] GetSlides(){
string[] slides = new string[4];
slides[0] = "images/slide1.jpg";
slides[1] = "images/slide2.jpg";
slides[2] = "images/slide3.jpg";
slides[3] = "images/slide4.jpg";
return slides;

注意,这个GetSlides()是一个静态方法,并且被标记有[WebMethod]属性。它返回一个包含图像URL的字符串数组。在这个示例中,我们对图像URL进行了硬编码,但是你可以很容易地把它修改为使用数据库或任何其它方式来存储图像数据。

五、从JavaScript脚本中调用GetSlides() web方法

现在,既然我们已经准备好GetSlides() Web方法,那么接下来,我们需要从客户端JavaScript脚本中调用它。现在,切换到Web页面的HTML源视图并且在web表单的<HEAD>节中添加下列<script>块:

<script type="text/javascript">
function pageLoad(){
var img=$get("Image1");
img.style.visibility="hidden";
PageMethods.GetSlides(OnSuccess,OnError,OnTimeOut);
}
function OnSuccess(result){
slideshow.set_Slides(result);
slideshow.set_Delay(2000);
slideshow.Play();
}
function OnError(result){
alert(result.get_message());
}
function OnTimeOut(result){
alert(result);
}
</script>

任何时候当一个web表单加载到客户端时,该<script>块包含的pageLoad()函数将被AJAX框架自动调用。它非常类似于ASP.NET的服务器端Page_Load事件。在这个pageLoad()方法中,我们用于实现暂时的图像隐藏。这样做的目的是为了避免浏览器显示不连续的图像标识。然后,借助于内置的类―PageMethods,pageLoad()函数调用GetSlides() web方法。在ASP.NET AJAX中,所有的执行都是异步的,因此,GetSlides()方法将接受一个回调函数―在成功时执行OnSuccess;出现错误时执行OnError;而在超时条件下则执行OnTimeOut。

在此,OnSuccess()函数接受一个由GetSlides() web方法返回的字符串数组并且相应地设置SlideShow类的Slides属性。然后,它把幻灯片的延迟播放时间设置为2000毫秒。最后,它调用SlideShow类的Play()方法开发播放幻灯片。

对于OnError()和OnTimeOut()方法,它们只用于简单地显示各自相应的错误消息。

接下来,按如下所示修改HTML按钮控件标记:

<input id="Button1" ... onclick="slideshow.ShowFirst()" />

<input id="Button2" ... onclick="slideshow.ShowPrevious()" />

<input id="Button5" ... onclick="slideshow.Pause()"/>

<input id="Button6" ... onclick="slideshow.Play()"/>

<input id="Button3" ... onclick="slideshow.ShowNext()" />

<input id="Button4" ... onclick="slideshow.ShowLast()"/>

如你所见,这些按钮的onclick事件简单地调用SlideShow类的各个方法。
好了,至此,整个示例编写结束!最后,按F5运行上面的web表单,你应该会看到我们的幻灯片在浏览器中开始播放了。

六、小结

再次想说的是,本文中的例子仅展示了微软ASP.NET Ajax 1.0框架编程的非常基础的一面,如果你真对这个框架感兴趣,那么请抓紧动手试一下吧!

  1. ASP.NET AJAX框架调用后台代码的基本方法
  2. ASP.NET AJAX1.0尝鲜试用:Web Service调用
  3. 分清ASP.NET AJAX中的Extender和Behavior模型
  4. 使用ASP.NET AJAX访问Script Method时启用客户端缓存

精彩图集

赞助商链接