Video: How Do I: Use the ASP.NET AJAX SlideShow Extender?

Presenter:Joe Stagner

This video demonstrates how the SlideShow extender from the ASP.NET AJAX Control Toolkit turns the standard ASP.NET Image control in to a fully-functional slide show. We also see how an ASP.NET Web service can return not only text and XML data but complete AJAX objects to be consumed by the ASP.NET AJAX Web application. Joe also comments on the benefits of storing images in the file system rather than the database.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

In this video I show you how you can add a slideshow to your ASP net application with your own images by using the slideshow control center that ships as part of the Microsoft Ajax control folk it was always its title far of visual Web developer express to create a new website choose the Ajax control toolkit website template to display images in this application so to get started on the needs of images to display I m often asked about the merits or poured the deficits and storing images in a SQL Server databases and close the file system certainly can do either way in my opinion there are some advantages to both but the primary advantages lie in using the file system to store the images themselves and then using the SQL Server database to store both the link to the physical location on disk of that of that particular image as well as any metadata you might want to associate with with that image the other thing is that I wanted also benefited that gives you by using file system is that it makes it very easy to

Minute 1

Scale your application horizontally as opposed to the having to do so through 80 database driven mechanism and it is of course it is much easier to program against with restoring images in a database than you ll need to add a sentiment of code to serialized that image file into something the source of binary object in a database and then whenever the image needs to be displayed only to at Logica deserializes that binary log large object that binary object in your database and then deserialize those into HTB Struble a representation of that image to display a page so my perspective there just several of several advantages not the least of which is simplicity that indicate that storing images in the filesystem can be advantageous or in our case recent images of taken images folder here offer desktop and a drop in my solution account is a system or the convenience of the demos that you can unzip this and have been for

Minute 2

You probably don t want to store the images themselves in your solutions directory you probably want to come to have some logic is specific to your application but so what were power and influence that in this demo is a more in the eighth and Ajax called the Web service method dispatch the images will be displayed in the slideshow so I m going to create a Web service and will place a goodness or file and about what to call this of him slides service in the first and are going to do here is remembered as very common mistake at e mail almost everyday you need to make sure the add the script service attributes of your class definition so that you can call these in call the service from the Ajax code that you want hello world exactly call this get gets slides

Minute 3

And were not to return a string or instead going to return a and Ajax control told the slides of his Ajax control toolkit slide which will be the return type know anything become a local collection of the sliced work with again this is where you implement a with some more semantically specific logic for your application in our case it is to create an array of up of Ajax controls focus lives will say around him lies slides as Ajax control toolkit slide and actually from the makers and array and then rather than doing something to algorithmically iterate the directory that contains my images are cases where hardcode them systems see the demo

Minute 4

So start with my slight zero and go through my slides for and actually started wrong language here will say new Ajax control toolkit slide show and hormone called a the second version of the constructor which has three different from three different arguments the actual path to the string the name of the string is some description that can also be displayed along with the strength so in our case to provide all three and the first is going to be the location of the image those images and then blue Hills will be the first one the name of the image who hills and then

Minute 5

Some other description really relevant as for the purposes of demo and then use the magic of cut and paste to add a for more of these one for each element in the collection and then they ll replace the images one at a time for Sosa to replace the names the comments which I will do momentarily and it s so vertical picture waterlily use and winter so it will images bear know what s go ahead and change the comments

Minute 6

Sunset and and settings and in a the sunset pictures taken in Sedona so yeah setting sun in this vertical picture here and in an article demo

Minute 7

Is really are going to do important for the versus a demo of it and and and and and and very clear look at undoubtedly deduce correct the return type could not match the expected return types over to the return of my slides married a now a top back over into our default aspx page

Minute 8

And we can start to build up the user interface including a dark code that will be used to call a service method which is created so for cinema do here is the discriminate little formatting and the can add another to give that we can use contain the slideshow intends to show them just don t hardcode a center alignment for for the slideshow in an of a so you can can use the CSS classes are defined in an external style sheet if you choose which is so often the best ago but for something as simple as our line them up okay with just a doing at this way and we re going to create a

Minute 9

Slice of the displays images 70 to begin with an image control will hear my standards a standard toolbox for my infinite controls of an image control and let s social for some of the arguments to this image control was struck by specifies everyone a height of 300 and election of the Paris file here as well and in the certainly you could feel free to is a CSS style sheet which is often the preferred mechanism are kisses him at a border just for the purposes demos that you can not see the image control as a container for the slides and slideshow so say to order a one pixel

Minute 10

A maker of solid borders with a black color and then set the width of his automatic and than just going to use my preferred formatting mechanism for these control arguments no way to provide some default information first image to display the sooner case to get an image directory and will just display the first one by default and it certainly could do this programmatically if you wanted and then also there to provide the alternate text will be description so

Minute 11

And all that is necessary since the formatting of okay a now next a little while labeled to displace additional information and we really this additional information is available by virtue of the poem the arguments that we passed in to the constructor for each of the for each of the images that we created in the data control toolkit slide for a controlled collection also need some navigation button selects the rebel does saga is dreaded going here and were

Minute 12

First was good the previous and its text will be in praise so the weirdest of setting this up for sale VCR tight controls on and I m also going to specify that no one increase the font size for little bit over the standard one of the page and okay let s rename the label to the image label one and I don t need the full text because it s going to

Minute 13

Dynamically displayed by the virtue of its association to the sludge of control in order to need a couple of additional buttons one for next and one of foreplay and so was put the play button in the middle of it and writes also look at our UI so far okay so here s where you are to look like this can be our are image from in this label control here the additional information attribute

Minute 14

Have our serve easier style controls now ready to add the control center itself for a page let s go now to our Ajax control toolkit Tavener toolbox again which we manually create because is no solid little bit and let some drop down to find the slideshow extender is just also said the toolkit deals are Re in the in the bin directory because we started with the toolkit template soldiers are slideshow extender that we can begin to configure this so for some it is much of them uses the axonal shorthand version soldier level closing tag and start at the parameters that are in the first thing you need to specify for the target control ID is going to be and in our case it s going to be image once this is the image control that will be extending

Minute 15

At in next week to specify a Howard I get that come order to get the images who are displayed so first you need a slideshow service path which in our case will be get slides off there were also going to slideshow service method which in our case will be books are the messages get slides and the half is the slide service as a max file that we created earlier is better

Minute 16

Next to specify autoplay equal truth so when rendering first happens we ll automatically display was automatically start iterating through the through the images are available for our slideshow next we will specify where the description is can he be populated and in our case could be initially belonged to ensure the spelling right there and so image label one that was specify through our wire up the and the next the

Minute 17

For playing previous buttons so let s do that by start with the next button ID which is going to be next buttons and you know why our wire play is stop up as well and the play button ID is going to be play button now because play the play button has context sensitive semantic value rights of its currently playing the value is stop it if it s not going to values play you can also specify what that text should be so it s a play button text

Minute 18

Stop button text and then there previous button ID which our case will be freeze button and that should be everything that we need to run our slideshow fills it a try so wait a second here not notice that doubt we are in play mode by default because we specified autoplay equal to true for accelerated through the displays we can do this by putting them in

Minute 19

Previous buttons if I want to look at this in in detail I can click on the play button and get things to stock or toggle back and forth as automatic software gets to the end so that it is that easy to add a slideshow display of your own images to your ASP net application by using a slideshow control center that ships as part of Microsoft execs control toolkit

Click here to go to original video page