使用ASP.NET AJAX实现幻灯片效果-技术开发专区

使用ASP.NET AJAX实现幻灯片效果

作者：Bipin Joshi 编辑：振宇 2007-07-18 16:21

创建一个用来返回图片URL的web method

SlideShow类允许你使用Slides属性来指定图片数组。我们可以设置Slides属性为一个固定的图片链接数组。但是，更合适的方法是动态地从服务端获得图片链接数组。这样你就可以返回一个基于某些条件生成的图片链接数组，或者应付某些数据库驱动的逻辑。为了实现这样的功能，我们来创建一个返回图片链接数组的web method。这个web method将被客户端的JavaScript调用。

转到web form的后置代码中，增加如下所示的web method。

[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]属性。它将返回一个图片链接数组。为了方便，我们在示例程序中是通过硬编码得到数组的，你可以将它改为从数据库中取值。

用JavaScript调用GetSlides()方法

现在，我们需要用客户端的JavaScript来调用上面的web method，即GetSlides()方法。转换到HTML源视图，并在web form的<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>

    这段脚本内包含一个pageLoad()方法，只要web from在客户端被加载，AJAX框架就会自动地调用它。它非常像ASP.NET里的Page_Load事件。在pageLoad()方法中，首先隐藏了图片。然后通过内置的PageMethods类的帮助，调用了GetSlides()方法。在ASP.NET AJAX中，所有的执行都是异步的，所以GetSlides()方法是有回调函数的，并且其回调函数分别会在执行成功、出错或超时的时候被调用。

    OnSuccess()函数接收一个通过GetSlides()方法返回的字符串数组为参数，然后设置SlideShow类的Slides属性。再往下是设置幻灯片的延迟时间为2000毫秒。最后，它调用SlideShow类的Play()方法来开始运行幻灯片。

    OnError()和OnTimeOut()分别用于显示错误信息。

    接下来，像下面这样修改button标记：

<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()"/>

你可以看到，button的onclick事件分别调用对应的SlideShow类的方法。

就是这些东西，很简单吧。运行这个web form，你就会在浏览器中看到我们的幻灯片。

第1页：新建一个SlideShow类第2页：开发Web Form 第3页：创建web method

关注我们