Development of Slide playback webpage based on Microsoft ASP. NET Ajax framework

I. Introduction
Recently, Microsoft ASP. the net Ajax 1.0 framework is presented in front of Web technicians with its complete Ajax-based Web development solution. the organic integration of the Net System and the completely object-oriented client JavaScript component model are becoming increasingly based on.. NET platform. This article should belong to the basics of this framework. I would like to use a specific example (play a web slide) to show readers how to use the object-oriented client JavaScript component model provided by the framework for conventional web development.

On the company website, we often need a mechanism based on WEB slides to demonstrate our (or possibly others') 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 (select Visual C # As the built-in language ). After that, the system should automatically add the necessaryProgramSet-system. Web. extension. dll reference. 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 a class called slideshow, which is 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.CodeAs follows:

  Type. registernamespace (  "  Demo  "  );  //  Constructor and private variable Declaration    Demo. slideshow =  Function (){  This  . _ Slides  =  New  Array ();  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  ){  This  . _ 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 (){  This  . _ Currentindex  =  This  . _ Slides. Length  -  1  ;  This . Showimage () ;}, shownext: function () {var newindex  =  This  . _ Currentindex  +  1  ;  This  . Set_currentindex (newindex );  This  . Showimage () ;}, showprevious: function () {var newindex  =  This  . _ Currentindex  -  1 ;  This  . Set_currentindex (newindex );  This  . Showimage () ;}, showimage: function () {var img  =  $  Get  (  "  Image1  "  );  If  (IMG. style. Visibility  =  " Hidden  "  ) {IMG. style. Visibility  =  "  Visible  "  ;} Var slides  =  This  . Get_slides (); var curindex  =  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    VaR slideshow  =  New  Demo. slideshow (); 

At the beginning of the code, we first register a new namespace called demo. Create a class called slideshow. The constructor of the slideshow class declares four private member variables. 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 this value exceeds the upper and lower boundary of the slides array, it will adjust this value to 0 or reduce the length of the array by 1 (depending on the 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 (in milliseconds) after the code is executed ). 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.

1

4. Create a web method to return the image URL
The slideshow class we created earlier allows you to use the slides attribute to specify slides. One way to use the slides attribute is to create a constant array of image URLs. However, the more appropriate method is to get the image URL from the server. In this way, you can return images based on certain conditions or even a database-driven logic. This requires us to create a web method that can return an image URL array. Then, call the web method from the client's Javascript script.
Next, let's start creating the following web methods.

  [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; 

Note that this getslides () is a static method and is marked with the [webmethod] attribute. It returns an array of strings containing the image URL. In this example, the image URL is hard-coded, but you can easily modify it to use a database or any other method to store image data.

1

5. Call the getslides () web method from a Javascript script
Now that we have prepared the getslides () web method, we need to call it from the client Javascript script. Now, switch to the HTML source view on the web page and add the following <SCRIPT> blocks in the

 <  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  >   

When a web form is loaded to the client at any time, the pageload () function contained in the <SCRIPT> block is automatically called by the Ajax framework. It is very similar to the page_load event on the server side of ASP. NET. In this pageload () method, we are used to implement temporary image hiding. The purpose of this operation is to prevent the browser from displaying non-consecutive image IDs. Then, the getslides () web method is called by using the built-in class pagemethods and pageload () functions. In ASP. in net Ajax, all the operations are asynchronous. Therefore, the getslides () method accepts a callback function-onsuccess is executed upon success; onerror is executed when an error occurs; in the timeout condition, ontimeout is executed.
Here, the onsuccess () function accepts an array of strings returned by the getslides () web method and sets the slides attribute of the slideshow class accordingly. Then, it sets the delayed playback time of the slides to 2000 Ms. Finally, it calls the play () method of the slideshow class to develop a playback slide.
For onerror () and ontimeout () methods, they are only used to display their corresponding error messages.
Next, modify the HTML button control tag as follows:
<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 ()"/>
As you can see, The onclick events of these buttons simply call the methods of the slideshow class.
Now, the entire example is written! Finally, press F5 to run the preceding web form. You should see that our slides start playing in the browser.
Vi. Summary
Again, the example in this article only shows Microsoft ASP. net Ajax 1.0 framework programming is very basic. If you are really interested in this framework, please try it now! 1