Add image slideshow to your website using asp.net ajax and c#

Suggested Videos
Part 131 - Cache dependency on sql server database table 
Part 132 - Reload data into cache automatically when data in the table changes
Part 133 - What is AutoEventWireup in asp.net

In this video, we will discuss adding image slideshow to a website or web application. 



Step 1: Create an asp.net web application project.

Step 2: In the solution explorer, right click on the project name, and add "Images" folder.



Step 3: For this demo, we will use the sample pictures that are shipped with Microsoft operating system. Copy the images that are present at the following path, and paste them into the images folder.
C:\Users\Public\Pictures\Sample Pictures

Rename the images to use numbers. Since on my machine there are 8 images, I have named them 1.jpg, 2.jpg to 8.jpg. At this point, your solution explorer should look as show below.


Step 4: Drag and drop "ScriptManager" control onto the webform. This control can be found under "AJAX Extensions" in toolbox. ScriptManager control is required on any asp.net page, where you want to take adavantage of asp.net ajax framework. We will discuss more about ScriptManager control in our upcoming asp.net ajax tutorial.

Step 5: Drag and drop "UpdatePanel" control. This control, allow us to perform partial page postbacks as opposed to a full page postback. The responsiveness of a page can be significantly increased using partial page postback, as only the data that is relevant to that UpdatePanel is sent to the server, and only the corresponding data is returned. Another benefit of partial page postbacks is that, they avoid screen flickers that are very common with full page postbacks.

All the content of the updatepanel, must be placed inside ContentTemplate element, so include <ContentTemplate> tag directly inside updatepanel. Drag and drop, the timer and image controls onto the webform, so that they are placed inside the <ContentTemplate> tag. 
1. The Timer control raises a tick event. This event is raised when the specified timer interval has elapsed and the timer is enabled.
2. Timer interval is specified in milli-seconds. For example, If you want the tick event to be raised every one second, then set "Interval" property of timer control to "1000" milliseconds.
3. We will use the tick event of the timer control to change the image dynamically every one second. So, flip the webform to design mode, if it's not already in design mode. Double click on the timer control. This should generate an event handler for tick event.
4. Set the Image control height and width to 100px.
5. Finally copy and paste the following code in the code-behind file.
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        SetImageUrl();
    }
}

private void SetImageUrl()
{
    // Create an instance of Random class
    Random _rand = new Random();
    // Generate a random number between 1 and 8
    int i = _rand.Next(1, 8);
    // Set ImageUrl using the generated random number
    Image1.ImageUrl = "~/Images/" + i.ToString() + ".jpg";
}

// This event is raised every one second as we have set
// the interval to 1000 milliseconds
protected void Timer1_Tick(object sender, EventArgs e)
{
    SetImageUrl();
}

At the moment, the problem with this code is that, it displays a random image every one second. Let's say our requirement is such that, we want to display images in order from 1.jpg, 2.jpg to 8.jpg. Also, below the image, display the number of the image that is being displayed. We will discuss fixing this in our next video.

No comments