asp.net DropDownList c#

Question

I need to know how to display data from a dropdown list. For example:

DropDownList

Select Images
car
boat
fishing

The first thing the user see is the select images dropdown. The user will see some random picture that displays from the select image dropdown.

If the user presses the car picture in the list, and then new picture will show and so on.

Each picture will show up in the html table something like the picture that I have drawn (below). Say each list has three pictures, then each of the three will be displayed in the table (as seen below).

Here is the code I have written so far.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Collections;


namespace Prototype
{
    public partial class HomePage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                FillddlPictuer();
            }
        }

        public void FillddlPictuer()
        {
            string cs = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

            using (SqlConnection conn = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand("SELECT * FROM pictuer", conn);

                try
                {
                    conn.Open();
                    SqlDataReader readeer = cmd.ExecuteReader();

                    ListItem newItem = new ListItem();
                    newItem.Text = "Select Image";
                    newItem.Value = "0";
                    ddlMovie.Items.Add(newItem);

                    while (readeer.Read())
                    {
                        newItem = new ListItem();
                        newItem.Text = readeer["name"].ToString();
                        newItem.Value = readeer["id"].ToString();
                        ddlMovie.Items.Add(newItem);
                    }
                    StringBuilder sb = new StringBuilder();

                }

                catch
                { 
                    //Handel any error
                    conn.Close();
                }



            } //Close the first using  
        }
    }
}

HomePage code

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="HomePage.aspx.cs" Inherits="Prototype.HomePage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMainSection" runat="server">
    <div id="ImageGalleryBorder"></div>
    <div id="ChampionBorder"></div>
    <div id="OtherStuffBorder">  
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderMainAside" runat="server">
    <h1>New videos</h1>
    <asp:DropDownList ID="ddlMovie" runat="server"
        CssClass="DropDownListAside">
    </asp:DropDownList>
    <asp:Label ID="lblOutput" runat="server" Text="Label" Visible="False"></asp:Label>
    <br />
</asp:Content>

Solution

1. Change the Picture table in SQL to include a path column, this will be used to store the path to the image on the server:
2. Rename Pictuer table to Picture

ASPX:

<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="ddlMovie" runat="server" AutoPostBack="true" OnSelectedIndexChanged="MovieChanged" />
        <asp:PlaceHolder ID="pictures" runat="server" />
        <span id="error" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

Code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GetPictures();
        AddPicture(ddlMovie.SelectedItem.Value);
        ReDisplayPictures();
    }
}

private void ReDisplayPictures()
{
    List<string> imagePaths = ViewState["Images"] as List<string>;
    if (imagePaths != null)
    {
        foreach (string path in imagePaths)
        {
            var image = new Image{Width = 100,Height = 100,ImageUrl = path};
            pictures.Controls.Add(image);
        }
    }
}

private void AddPicture(string imageUrl)
{
    List<string> imagePaths = ViewState["Images"] as List<string>;
    if (imagePaths == null)
        imagePaths = new List<string>();

    imagePaths.Add(imageUrl);
    ViewState["Images"] = imagePaths;
}

protected void MovieChanged(object sender, EventArgs e)
{
    AddPicture(ddlMovie.SelectedItem.Value);
    ReDisplayPictures();
}

private void GetPictures()
{
    try
    {
        string cs = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        using (var conn = new SqlConnection(cs))
        {
            using (var command = new SqlCommand("SELECT * FROM Picture", conn))
            {
                conn.Open();
                SqlDataReader reader = command.ExecuteReader();
                while (reader.Read())
                {
                    string name = reader["name"].ToString();
                    string path = reader["path"].ToString();
                    var item = new ListItem { Text = name, Value = path };
                    ddlMovie.Items.Add(item);
                }
            }
            conn.Close();
        }
    }
    catch (Exception eX)
    {
        error.InnerHtml = String.Format("An error occured, description - {0}",
            eX.Message);
    }
}

}

I've created a sample project for you, you can download it here from Google drive (Just click File->Download)