Create a SlideShow class in ASP. NET

I. Introduction

On the company website, we often need a mechanism based on Web slides to demonstrate our own products. Of course, you can use common JavaScript to develop such slides. However, with the help of the ASP. net ajax framework, this development work will be greatly simplified. In this example, we want to develop such a simple slide using the Web page method and client script extension technology. End users can play and pause slides, loop playback, and manual control.

2. Create an ASP. net ajax-Enabled website

Start Visual Studio 2005, and select the menu item "file | new website ...", Use the template "ASP. net ajax-Enabled Website" to create a new website, and name the project SlideShow and select Visual C # As the built-in language ). After that, the System should automatically add a reference to the necessary assembly-System. Web. Extension. dll. In addition, you will notice that a ScriptManager Server Control is automatically added to the page. Note that this server control is the control center of the entire ASP. net ajax framework.

Then, add an HTML table with two rows and one column, add a label in the first row, and add six HTML button controls in the second row. 1. shows the general layout of the web form Default. aspx.

3. Create a SlideShow class

Right-click the project to add a new java Script file and name it JScript. js. Here, we will create the SlideShow class, which will be responsible for completing all slide operation tasks-such as playing, holding, and navigation slides. Note that the SlideShow class is developed based on the script extension technology of the ASP. net ajax client. The specific implementation code is as follows:

 
 

  
  
Type. registerNamespace ("Demo ");
  
  
// Constructor and private variable Declaration
  
  
Demo. SlideShow=Function(){
  
  
This. _ slides=NewArray ();
  
  
This. _ delay=2000;
  
  
This. _ currentIndex=0;
  
  
This. _ pause=False;
  
  
}
  
  
// Prototype Definition
  
  
Demo. SlideShow. prototype=
  
  
{
  
  
Get_Slides: function (){
  
  
Return this. _ slides;
  
  
},
  
  
Set_Slides: function (value ){
  
  
This. _ slides=Value;
  
  
},
  
  
Get_Delay: function (){
  
  
Return this. _ delay;
  
  
},
  
  
Set_Delay: function (value ){
  
  
This. _ delay=Value;
  
  
},
  
  
Get_CurrentIndex: function (){
  
  
Return this. _ currentIndex;
  
  
},
  
  
Set_CurrentIndex: function (value ){
  
  
If (value <0 ){
  
  
ThisThis. _ currentIndex= This. _ slides. length-1;
  
  
Return;
  
  
}
  
  
If (value> = this. _ slides. length ){
  
  
This. _ currentIndex=0;
  
  
}
  
  
Else {
  
  
This. _ currentIndex=Value;
  
  
}
  
  
},
  
  
Get_IsPaused: function (){
  
  
Return this. _ pause;
  
  
},
  
  
Set_IsPaused: function (value ){
  
  
This. pause=Value;
  
  
},
  
  
Pause: function (){
  
  
This. _ pause=True;
  
  
},
  
  
Play: function (){
  
  
This. _ pause=False;
  
  
Window. setTimeout ("slideshow. ShowImage ()",
  
  
This. get_Delay ());
  
  
},
  
  
ShowFirst: function (){
  
  
This. _ currentIndex=0;
  
  
This. ShowImage ();
  
  
},
  
  
ShowLast: function (){
  
  
ThisThis. _ currentIndex= This. _ slides. length-1;
  
  
This. ShowImage ();
  
  
},
  
  
ShowNext: function (){
  
  
VarNewIndex=This. _ CurrentIndex + 1;
  
  
This. set_CurrentIndex (newIndex );
  
  
This. ShowImage ();
  
  
},
  
  
ShowPrevious: function ()
  
  
{
  
  
VarNewIndex=This. _ CurrentIndex-1;
  
  
This. set_CurrentIndex (newIndex );
  
  
This. ShowImage ();
  
  
},
  
  
ShowImage: function (){
  
  
VarImg= $ Get ("Image1 ");
  
  
If (Img. style. visibility= "Hidden "){
  
  
Img. style. visibility="Visible";
  
  
}
  
  
VarSlides=This. Get_Slides ();
  
  
VarCurIndex=This. Get_CurrentIndex ();
  
  
Img. src=Slides[CurIndex];
  
  
If (this. get_IsPaused () = false)
  
  
{
  
  
This. set_CurrentIndex (curIndex + 1 );
  
  
This. Play ();
  
  
}
  
  
}
  
  
}
  
  
// Registration type
  
  
Demo. SlideShow. registerClass ("Demo. SlideShow ");
  
  
// Create a global SlideShow instance
  
  
VarSlideshow=NewDemo. SlideShow ();
 
 

At the beginning of the code, we first register a new namespace called Demo. Then, create the SlideShow class. The constructor of the SlideShow class declares four private member variables. Among them, the _ slides variable points to an array containing the slide image URL; The _ delay variable indicates the interval between two adjacent slides in milliseconds ); the _ currentIndex variable stores the index values of the current slide in the _ slides array. Finally, the _ pause variable indicates whether the slide is paused (true) or running (false ).

Next, in the SlideShow class prototype, we define the getter/setter method associated with the previous four attributes, that is, Slides, Delay, CurrentIndex, and IsPaused. Other methods are relatively basic, so we only introduce the set_CurrentIndex () method (). This set_CurrentIndex () attribute method is used to check the index value provided to it. If the value exceeds the upper and lower boundary of the slides array, it will adjust the value to 0 or the length of the array minus 1 based on the actual situation ). This is critical, so that the slides can be played cyclically.

Next, the Pause () method simply sets the member Variable _ pause to true-which can control how the slides are paused.
The Play () method is used to Play the slides. It first sets the _ pause variable to false, and then calls the setTimeout () method of the JavaScript Object windows. The setTimeout () method accepts two parameters: the code to be executed after a specific time delay; the corresponding time span after the code is executed is measured in milliseconds ). In this example, the latency value comes from the get_Delay () attribute. The setTimeout () method calls the ShowImage () method.

The ShowImage () method is used to display the core work of an image. It references the CurrentIndex and Slides attributes, and then sets the src attribute of the image label to the appropriate image corresponding to the Slides array. Note that Image1 is the ID of An Image Tag-we will add it later. In addition, pay attention to the usage of the $ get () method, which is equivalent to the document. getElementById () method. Then, add 1 to the CurrentIndex value and call the Play () method again. In this way, an infinite loop will be formed, and the slides will be continuously played.

The last four methods-ShowFirst (), ShowLast (), ShowNext (), and ShowPrevious () are used to simply adjust the value of the _ currentIndex member variable and call ShowImage () method to display a slide.

After the class is created, we use the registerClass () method to register it to the ms ajax framework. Finally, declare a global instance variable of the SlideShow class.

Finally, open the Web page Default. aspx, select the ScriptManager control, set its EnablePageMethods attribute to true, and add the JScript. js file to its script set. The above describes how to create the SlideShow class.

1. Analysis on ASP. NET Web Security
2. Session State of ASP. NET
3. Analysis on the attribute ASP. NET of IsPostBack
4. ASP. NET architecture and security mechanism
5. Overview ASP. NET Crystal Reports