IMP Creating Dynamic Slideshow in ASP.net 4.0

Creating Dynamic Slideshow in ASP.net 4.0

http://devin-lee.com/creating-dynamic-slideshow-in-asp-net-4-0

Creating Dynamic Slideshow in ASP.net 4.0

September 7, 2012

by Devin Lee

asp.net 4.0 , Tutorial

2 Comments

inShare

For this example i'm using Nivo Slider for practice. You can be creative and use any type of slide.

Create The Database

In order to do the dynamic slide, first of all you should make the database in MSSQL server in this format.

Why there is a status column?
I making this is because i want to make sure we can turn it on and off in the backend of our website, for example discount for Christmas slide we only need to make it on and of at certain time.

At this point, i'm assuming that your database is already connected into your web application.
The next step is go to the page where you want to put your slide show is. For example your home page.

Download the Script here.

---

Call the script

Call the code in head of your page. This example i'm using my own master page.

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" href="slider/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="slider/nivo-slider.css" type="text/css" media="screen" />
    <script type="text/javascript" src="slider/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="slider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $('#slider').nivoSlider();
        });
    </script>
</asp:Content>

Do mention do not copy paste, examine the header ID, allocate the script right to make it work.

---

Call the HTML into your application using Repeater Control

Use the Repeater Control to call the slide show
Why is repeater control? Is because repeater control only call the plain format without extra span tag in between.

Here is the step in design view
First of all drag a repeater control into design view

and next step is to call the database

and do not forget to choose the where button.
This is making sure the data that shown only the status column = true
This is just a fancy stuff. you can skip it if you want.

Once you finished, the repeater control is not call the template by it self.
You should type in the code your self. Go to the middle of repeater control and type in the code like this.

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="Slideshow">
    <ItemTemplate>
        <asp:Image Width="940" Height="400" ID="Image1" ImageUrl='<%# Eval("Image") %>' runat="server" />
    </ItemTemplate>
</asp:Repeater>

Explanation : This is just calling the image one by one and the javascript will do the rest

---

As you finished, you will have the finished code like this.

   <div class="slider-wrapper theme-default">
      <div class="ribbon"></div>
        <div id="slider" class="nivoSlider">
           <asp:Repeater ID="Repeater1" runat="server" DataSourceID="Slideshow">
           <ItemTemplate>
               <asp:Image Width="940" Height="400" ID="Image1" ImageUrl='<%# Eval("Image") %>' runat="server" />
           </ItemTemplate>
           </asp:Repeater>
 
           <asp:SqlDataSource ID="Slideshow" runat="server" 
               ConnectionString="<%$ ConnectionStrings:THE_NAME_OF_YOUR_CONNECTION_STRING%>" 
               SelectCommand="SELECT [slideID], [Image] FROM [slideshow] WHERE ([status] = @status)">
                    <SelectParameters>
                        <asp:Parameter DefaultValue="True" Name="Status" Type="Boolean" />
                    </SelectParameters>
                </asp:SqlDataSource>
            </div>
        </div>

Now this is just half the way. what we need to do is make the back end so we can change the slide show, upload, activating and deactivated the slide.

---

Create the grid View For edit, enabling and deactivated the slide

In your admin area, create a page call slide.aspx
Create a gridView Control

<asp:GridView ID="GridView1" runat="server" GridLines="None" CssClass="stdtbl" 
        Width="500px" AutoGenerateColumns="False" 
        DataKeyNames="slideID" DataSourceID="slide">
        <Columns>
            <asp:BoundField Visible="false" DataField="slideID" HeaderText="slideID" InsertVisible="False" 
                ReadOnly="True" SortExpression="slideID" />
            <asp:BoundField DataField="Image" Visible="false" HeaderText="Image" SortExpression="Image" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Image ID="Image1" ImageUrl='<%# Eval("Image", "~/{0}") %>' Width="200" runat="server" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" ReadOnly="true" Enabled="false" Text='<%# Bind("Image") %>' runat="server"></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:CheckBoxField DataField="status" HeaderText="status" 
                SortExpression="status" />
            <asp:CommandField ButtonType="Button" ShowDeleteButton="True" 
                ShowEditButton="True" />
        </Columns>
    </asp:GridView>
 
    <asp:SqlDataSource ID="slide" runat="server" 
        ConnectionString="<%$ ConnectionStrings:YOUR_CONNECTION_STRING_NAME %>" 
        DeleteCommand="DELETE FROM [slideshow] WHERE [slideID] = @slideID" 
        InsertCommand="INSERT INTO [slideshow] ([Image], [status]) VALUES (@Image, @status)" 
        SelectCommand="SELECT * FROM [slideshow]" 
        UpdateCommand="UPDATE [slideshow] SET [Image] = @Image, [status] = @status WHERE [slideID] = @slideID">
        <DeleteParameters>
            <asp:Parameter Name="slideID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="Image" Type="String" />
            <asp:Parameter Name="status" Type="Boolean" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="Image" Type="String" />
            <asp:Parameter Name="status" Type="Boolean" />
            <asp:Parameter Name="slideID" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>

Do mention that you need to generate Update, Delete in here in order to enabling and disabling the slide.
Change the CONNECTION STRING name into your's, and now we got the list of your slideshow.
now you should have a page look like this

---

Adding a Slideshow

Now you probably asking, how to add the slide since we don't have any......

Now add a button in the top or bottom of the page by dragin a button control.

<asp:Button ID="newslide" PostBackUrl="~/admin/newslide.aspx" runat="server" Text="Add New slide" />

and create a new page in your admin area call this baby newslide.aspx

For this page we going to use the formView Control.

<asp:FormView ID="FormView1" runat="server" DataKeyNames="slideID" 
        DataSourceID="newslide" DefaultMode="Insert" 
        oniteminserting="FormView1_ItemInserting">
        <EditItemTemplate>
 
        </EditItemTemplate>
        <InsertItemTemplate>
        <h2 class="featured">Add New Slideshow Image</h2>
         <table class="admintable">
         <tr><th>
            Image:</th><td>
            <asp:FileUpload ID="uploadslide" runat="server" />
            <asp:TextBox Visible="false" ID="ImageTextBox" runat="server" Text='<%# Bind("Image") %>' />
            </td></tr>
 
            <tr><th>
            status:</th><td>
            <asp:CheckBox ID="statusCheckBox" runat="server" 
                Checked='<%# Bind("status") %>' />
            </td></tr>
 
         </table>
            <asp:Button ID="InsertButton" runat="server" CausesValidation="True" 
                CommandName="Insert" Text="Insert" />
            &nbsp;<asp:Button ID="InsertCancelButton" runat="server" 
                CausesValidation="False" CommandName="Cancel" Text="Cancel" /><br />
 
            <em class="small red">Image size is 940px width and 400px height</em>
        </InsertItemTemplate>
        <ItemTemplate>
            slideID:
            <asp:Label ID="slideIDLabel" runat="server" Text='<%# Eval("slideID") %>' />
            <br />
            Image:
            
            <asp:Label ID="ImageLabel" runat="server" Text='<%# Bind("Image") %>' />
            <br />
            status:
            <asp:CheckBox ID="statusCheckBox" runat="server" 
                Checked='<%# Bind("status") %>' Enabled="false" />
            <br />
            <asp:Button ID="EditButton" runat="server" CausesValidation="False" 
                CommandName="Edit" Text="Edit" />
            &nbsp;<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" 
                CommandName="Delete" Text="Delete" />
            &nbsp;<asp:Button ID="NewButton" runat="server" CausesValidation="False" 
                CommandName="New" Text="New" />
        </ItemTemplate>
    </asp:FormView>
    <asp:SqlDataSource ID="newslide" runat="server" 
        ConnectionString="<%$ ConnectionStrings:YOUR_CONNECTION_STRING_NAME %>" 
        DeleteCommand="DELETE FROM [slideshow] WHERE [slideID] = @slideID" 
        InsertCommand="INSERT INTO [slideshow] ([Image], [status]) VALUES (@Image, @status)" 
        SelectCommand="SELECT * FROM [slideshow]" 
        UpdateCommand="UPDATE [slideshow] SET [Image] = @Image, [status] = @status WHERE [slideID] = @slideID">
        <DeleteParameters>
            <asp:Parameter Name="slideID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="Image" Type="String" />
            <asp:Parameter Name="status" Type="Boolean" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="Image" Type="String" />
            <asp:Parameter Name="status" Type="Boolean" />
            <asp:Parameter Name="slideID" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>

Ow yeah, it's complete with the validation... do use it to ensure no crap is added to the database....

---

Now go to the back of the page ( newslide.aspx.cs ) and add the code

    protected void FormView1_ItemInserting(object sender, FormViewInsertEventArgs e)
    {
        FileUpload slideupload = (FileUpload)FormView1.Row.FindControl("uploadslide");
 
        if (slideupload.HasFile)
        {
            slideupload.SaveAs(Server.MapPath("..//" + "images" + "//" + "slideshow") + "//" + slideupload.FileName);
            e.Values["Image"] = "images/slideshow/" + slideupload.FileName;
        }
// explanation : mapPath is the location of where the uploaded file where to be stored.
// e.values[your_database_column] = "value you want to insert into your database"
    }

This code, you have to change the structure depend on structure of your site.
you should have a page look like this

and Walaaaa.... it's done.