c# - asp.net DropDownList c#

Question

我需要知道如何显示下拉列表中的数据。例如:

下拉列表

选择图片
汽车
船
钓鱼

用户首先看到的是选择图像下拉菜单。用户将看到从选择图像下拉列表中显示的一些随机图片。

如果用户点击列表中的汽车图片，则会显示新图片等。

每张图片都会显示在 html 表中，类似于我绘制的图片(如下)。假设每个列表有三张图片，那么三张图片中的每一张都会显示在表格中(如下所示)。

这是我到目前为止编写的代码。

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  
        }
    }
}

首页代码

<%@ 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>

Answer 1

1. 更改 SQL 中的图片表以包含一个路径列，这将用于存储服务器上图像的路径:
2. 将 Pictuer 表重命名为 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>

代码隐藏:

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);
    }
}

我已经为你创建了一个示例项目，你可以下载它here来自 Google 驱动器(只需单击文件 -> 下载)