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).

sample screenshot

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>

The HTML code that goes with your C# code above. Probably "HomePage.aspx". (also, note that I've corrected your spelling of "picture" in the question. You're swapping the "r" and the "e" at the end). — Josh Darnell
– Josh Darnell, Commented Apr 11, 2013 at 13:48
Okey thanks did not see it, I have add the code for the homepage. — kalle Johansson
– kalle Johansson, Commented Apr 11, 2013 at 13:53

Denys Wessels · Accepted Answer · 2013-04-12 05:43:28Z

3

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:
Rename Pictuer table to Picture

enter image description here

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)

edited Apr 12, 2013 at 5:43

answered Apr 11, 2013 at 13:53

Denys Wessels

17.1k16 gold badges85 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

kalle Johansson Over a year ago

I will check the code and then come back. Thanks so much for your reply.

Denys Wessels Over a year ago

Ok,good luck with your project and please mark as answered if it helps you

kalle Johansson Over a year ago

I got an error 1; The name 'pictuer' does not exist in the current context and the same thing is ddlmovie and error

Denys Wessels Over a year ago

copy the code exactly as it is in my answer.if you're having problems download the sample code provided in the answer

kalle Johansson Over a year ago

Nothing happens when I press the text here I only get to a empty page. I have copy the code exactly and I got the same errors

|

Collectives™ on Stack Overflow

asp.net DropDownList c#

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related