Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

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

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
In this video I'll show you how you can add a slideshow to your ASP.NET application with your own images by using the SlideShow control extender that ships as part of the Microsoft AJAX Control Toolkit. So as always, to get started, I'll fire up Visual Web Developer Express and say Create a New Web Site, choose the AJAX Control Toolkit Web Site template. We're going to be displaying images in this application, so to get started, I'm going to need some images to display. I'm often asked about the merits or the deficits in storing images in a SQL Server database as opposed to the file system. Certainly you can do it 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 a link to the physical location on disk of that particular image as well as any metadata that you might want to associate with that image. The other possible benefit that that gives you by using the file system is that it makes it very easy to scale your application horizontally as opposed to having to do so through a database-driven mechanism. The other thing that it does, of course, is it makes it much easier to program against. If you're storing images in a database, then you'll need to add a fair bit of code to serialize that image file into something that you can store as a binary object in the database and then whenever that image needs to be displayed, you'll need to have logic that deserializes that binary object in your database and then deserializes those into an HTTP streamable representation of that image that can be displayed on a page. So from my perspective, there are just several advantages, not the least of which is simplicity, that indicate that storing images in the file system can be advantageous. In our case, we need some images. I'm going to take an images folder here off my desktop and I'm going to drop it into my solution. This is just for the convenience of the demo so that you can unzip this and have things ready to run. You probably don't want to store the images themselves in your solutions directory. You probably want to have some logic that's specific to your application. So how we're going to implement that in this demo is we're going to need an AJAX callable web service method to fetch the images that will be displayed in the slideshow. I'm going to create a web service, and we'll place the code in a separate file. We're just going to call this SlidesService. The first thing that we're going to do here is—remember, this is a very common mistake. I get email almost every day. You need to make sure that you add the ScriptService attribute to your class definition so that you can call this service from AJAX code. We don't want HelloWorld; in fact, we're going to call this GetSlides. We're not going to return a string; we're instead going to return an AjaxControlToolkit.Slide. There's AjaxControlToolkit.Slide, which will be the return type. Now we're going to need a local collection of those slides to work with, and again, this is where you would implement some more semantically specific logic for your application. In our case, I'm just going to create an array of AjaxControlToolkit.Slide. We'll say Dim MySlides as AjaxControlToolkit.Slide. And actually, I'm going to make this an array. And then, rather than doing something to algorithmically iterate the directory that contains my images, in our case I'm just going to hard code them just for the simplicity of the demo. Start with MySlides(0)and go through MySlides(4). Sorry. Wrong language. Here we'll say New AjaxControlToolkit.Slide, and we're going to call the second version of the constructor, which has 3 different arguments: the actual path to the string, the name of the string, and then some description that can also be displayed along with the string. In our case, we're going to provide all 3. The first is going to be the location of the image, so it's images. And then Blue hills will be the first one... the name of the image, Blue Hills, and then some other description, really irrelevant, just for the purposes of the demo. Then I'm going to use the magic of cut and paste to add 4 more of these, one for each element in the collection. And then I'll replace the images one at a time. Of course I also have to replace the names and the comments, which I will do momentarily. So VerticalPicture, Water lilies, and Winter. We have all the images there. Now let's go ahead and change the comments. Sunset, the Setting Sun. The sunset picture was taken in Sedona, so... Setting Sun. This VerticalPicture here... Vertical Demo. These really are not particularly important for the purposes of the demo. Very Cold. Okay. Now the only thing we need to do is correct the return type to match the expected return type. So we're going to Return MySlides. There we go. Now let's hop back over into our Default.aspx page, and we can start to build out the user interface, including the AJAX code that will be used to call the service method that we just created. The first thing I'm going to do here is I'm just going to do a little formatting and then I'm going to add another div that we can use to contain the slideshow. I'm going to just hard code a center alignment for the slideshow. Obviously, you can use CSS classes that are defined in an external style sheet if you choose, which is often the best way to go. But for something as simple as center alignment, I'm okay with just doing it this way. We're going to create a slideshow that displays images, so we need to begin with an Image control. Go here to my standard toolbox for my ASP.NET controls, grab an Image control, and let's flush out some of the arguments to this Image control. Let's start by specifying that we want a height of 300. I'm actually going to add a style here as well. Certainly you could feel free to use a CSS style sheet, which is often the preferred mechanism. In our case, I'm just going to add a border just for the purposes of the demo so that you can see the Image control as a container for the slides in the slideshow. We'll say border:1 pixel, make it a solid border with a black color, and set the width up as automatic. I'm just going to use my preferred formatting mechanism for these control arguments. We need to provide some default information, the first image to display. So in our case, again in the images directory, and we'll just display the first one by default. You could do this programmatically if you wanted. And then also I'm going to provide the alternate text, which will be the description. All that's necessary. Let's fix the formatting. Okay. Next I'm going to want a label to display some additional information. We know that this additional information is available by virtue of the arguments that we passed in to the constructor for each of the images that we created in the AjaxControlToolkit.Slide controls collection. We're also going to need some navigation buttons, so let's grab one of those. I've got an ASP.NET button here, and the first one is going to be Previous and its text will be Prev. We're just sort of setting this up as VCR type controls. I'm also going to specify that I want to increase the font size a little bit over the standard one for the page. Okay. Let's rename the label to be imageLabel1, and I don't need a default text because that's going to be dynamically displayed by virtue of its association to the SlideShow control. Now we're going to need a couple of additional buttons, one for Next and one for Play. Let's put the Play button in the middle. All right. So let's have a look at our UI so far. Okay. Here's what our UI is going to look like. This is going to be our image in this label control here, the additional information is going to be displayed, and then we have our VCR style controls. Now we're ready to add the control of center itself to our page. Let's go down to our AJAX Control Toolkit tab in our toolbox, again which we manually create because there's no installer for the toolkit, and let's drop down, find the SlideShowExtender. This just tells us that the toolkit DLLs were already in the Bin directory because we started with the toolkit template. So here's our SlideShowExtender. Now we can begin to configure this. The first thing I'm going to do is I'm actually going to use just the XML shorthand version. I'll get rid of that full closing tag and we'll just start to add the parameters that we're going to need. The first thing we need to specify is what the TargetControlID is going to be, and in our case it's going to be Image1. This is the Image control that we'll be extending. Next we need to specify how we're going to get the images that we want to display. So first we're going to need a SlideShowServicePath, which in our case will be GetSlides, and then we're also going to need a SlideShowServiceMethod, which in our case will be—oops, sorry. The method is GetSlides. The path is the SlideService.asmx file that we created earlier. That's better. Next I'm going to specify AutoPlay equals true so when rendering first happens we will automatically start iterating through the images that are available for our slideshow. Next we want to specify where the description is going to be populated. In our case, it's going to be imageLabel1. Just make sure I got the spelling right there. So imageLabel1. Now we want to wire up the Next, Play, and Previous buttons, so let's do that by starting with the NextButtonID, which is going to be NextButton. We're going to wire Play and Stop up as well. The PlayButtonID is going to be playButton. Because the Play button has context-sensitive semantic value, so if it's currently playing the value is Stop, and if it's not playing the value is Play, we can also specify what that text should be. Let's say PlayButtonText equals Play. StopButtonText equals Stop. And then PreviousButtonID, which in our case will be prevButton. That should be everything that we need to run our slideshow, so let's go ahead and give it a try. Wait a second here. Notice that we're in Play mode by default because we specified AutoPlay equal to true. If we want to accelerate through the displays, we can do this by clicking the Next, Previous buttons. If I want to look at this in detail, I can click on the Play button and get things to stop, toggle back and forth. Notice it automatically stops when it gets to the end. So that's it. It's that easy to add a slideshow display of your own images to your ASP.NET application by using the SlideShow control extender that ships as part of the Microsoft AJAX Control Toolkit.

Video Details

Duration: 19 minutes and 27 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Sep 4, 2013

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.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.