How To Make A Slide Show In ASP.NET Using AJAX Library Tool

INITIAL CHAMBER

Step 1

Open Your Visual Studio, go to File-> New Web Site and choose ASP.NET Web Form Site and name it as -> [slideshow_demo].

Step 2

In Solution Explorer, you get your demo Website. There will be many files, but we just needed the main file as – Default.aspx. Open Default.aspx file and place your AJAX Script Manager inside the content placeholder. If at any instance, an error comes, then you should include any Script Manager, as it was already there in the master page, so you need to include it in this case.

Step 3

Afterwards, add one Timer control from AJAX library. We will use this Timer control to generate tick event, so that our slideshow shows images in our accessible time. Also, add an Image control below Timer control.

Script Manager

Script Manager enables client side script to use the extension and library of Microsoft ASP.NET AJAX library. Without this manager, you cannot access AJAX tools. It also enables the partial page rendering.

Timer Control

Timer can be used as a trigger. It will trigger the toolkit control to work for this most of the time. If you set the trigger for 10 sec (generally in milliseconds), then the control will work every 10 seconds. It will also deal with Postback condition, which caused the network traffic and delays.

Update Panel

This control is the most important control in the website development, you have seen this many times, that whenever we use some time related control especially the control, which needs transformation or rendering, like slideshow, image gallery, date time control and many more, instead of refreshing the single control; the whole Webpage gets refreshed after every interval. This is not the part in networking or even in the development. To remove such a hindrance; an update panel is used, where such control that needs updating at every interval can be put inside Update Panel. 

Default.aspx 

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">


   <div class="jumbotron">
       <asp:UpdatePanel ID="UpdatePanel1" runat="server">
           <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
        <asp:Image ID="Image1" width="980px" Height="500px" runat="server" />
         </ContentTemplate>
   </asp:UpdatePanel>

 </div>

    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
            A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
            </p>
        </div>
</asp:Content>

Default.aspx.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            refreshdata();
        }

    }

    protected void Timer1_Tick(object sender, EventArgs e)
    {

        refreshdata();
    }

    private void refreshdata()
    {
        Random rnd = new Random();
        int r = rnd.Next(1, 5);
        Image1.ImageUrl = "~/image/" + r.ToString() + ".png";

    }
}

I cannot show you the perfect output, as GIF is not allowed in the Website. Therefore, I am sharing my source code, which you can try.

Output

I hope you like it. Thank you for reading. Have a great day.