當用戶在asp.net的dropdownlist中選擇一個值時，如何在圖像控制中顯示哪個圖像路徑存儲在數據庫中的圖像？

Question

我有一個數據庫，如下圖所示： 數據庫的圖像

這是表單的圖像：表單的圖像在此表單中，我想在圖像控件中顯示圖像，該圖像控件的圖像路徑存儲在數據庫中，並且當用戶選擇它時如何根據下拉列表中的子類別值顯示我做到了，請幫助...謝謝你們，這是我表格的源代碼，我已經添加了sqldatasource並將下拉列表與sqldatasource綁定在一起.........

<form method="post" enctype="multipart/form-data">
<table border="0" width="450px" height="500px" align="center" class="tableshadow">
    <tr>
        <td colspan="2" class="toptd" style="color: white; font-size: 24px; text-align: center;
            height: 40px; background-color: #60b2e7">
            Update Subcategory
        </td>
    </tr>
    <tr>
        <td class="lefttxt">
            <asp:Label ID="Label1" runat="server" Text="Select Subcategory:"></asp:Label>
        </td>
        <td>
            &nbsp;
            <asp:DropDownList ID="DropDownList1" runat="server" Height="35px" Width="134px" DataSourceID="SqlDataSource1"
                DataTextField="subcatname" DataValueField="subcatid">
                <asp:ListItem Text="Select category" Value="0"></asp:ListItem>
            </asp:DropDownList>
            <asp:Button ID="btnshow" runat="server" OnClick="btnshow_Click" Text="Show" Width="94px" />
        </td>
    </tr>
    <tr>
        <td class="lefttxt">
            <asp:Label ID="Label2" runat="server" Text="Subcategory Name:"></asp:Label>
            <br />
        </td>
        <td>
            <asp:TextBox ID="txtsubcategoryname" runat="server"></asp:TextBox>
            <br />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtsubcategoryname"
                ErrorMessage="*Please Enter the Subcategory Name" Font-Bold="True" Font-Italic="True"
                Font-Size="X-Small" ForeColor="Red"></asp:RequiredFieldValidator>
        </td>
    </tr>
    <tr>
        <td class="lefttxt">
            <asp:Label ID="Label3" runat="server" Text="Select Category:"></asp:Label>
        </td>
        <td>
            <asp:DropDownList ID="DLCategory" runat="server" Height="35px" Width="146px" DataSourceID="SqlDataSource1"
                DataTextField="categoryname" DataValueField="categoryname">
                <asp:ListItem Text="Select category" Value="0"></asp:ListItem>
            </asp:DropDownList>
            &nbsp;
            <tr>
                <td class="lefttxt">
                    <asp:Label ID="Label6" runat="server" Text="Category Name:"></asp:Label>
                    <br />
                </td>
                <td>
                    <asp:TextBox ID="txtcategoryname" runat="server"></asp:TextBox>
                    <br />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtcategoryname"
                        ErrorMessage="*Please Enter the Category Name" Font-Bold="True" Font-Italic="True"
                        Font-Size="X-Small" ForeColor="Red"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="lefttxt">
                    <asp:Label ID="Label4" runat="server" Text="Old Pic:"></asp:Label>
                </td>
                <td>
                    &nbsp;<input type="hidden" name="h1" value="" /><asp:Image ID="Image1" runat="server" />
                </td>
            </tr>
            <tr>
                <td class="lefttxt">
                    <asp:Label ID="Label5" runat="server" Text="Upload New Pic:"></asp:Label>
                </td>
                <td>
                    <asp:FileUpload ID="FileUpload1" runat="server" Width="225px" />
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <asp:Button ID="btnupdate" runat="server" Text="Update" OnClick="btnupdate_Click" />
                </td>
            </tr>
</table>
</form>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ToursandTravelsConnectionString %>"
    SelectCommand="SELECT [subcatid], [subcatname], [categoryname], [pic] FROM [subcategory]">
</asp:SqlDataSource>

Answer 1

在數據庫中提供“ pic”列是否包含指向圖像的鏈接是絕對的，這還取決於您如何設置下拉列表。

您需要為下拉菜單執行以下操作：OnSelectedIndexChanged：

從數據庫中選擇圖片網址，其中子類別=下拉值或文本。 （這取決於您如何設置下拉列表）。

使用獲得的值將圖片設置為您獲得的圖片。

您需要以下內容，提供代碼將使其變得更容易。

在您的ASP文件中，將以下內容添加到下拉列表中：

OnSelectedIndexChanged="drp_SelectedIndexChanged" AutoPostBack="True"

在后面的代碼中，您需要：

   protected void drp_SelectedIndexChanged(object sender, EventArgs e) {
        //SQL To obtain url for image based on drop down selection
        //providing code makes this easier
        //with return url:
      Image1.ImageUrl = //returned url
    }

Answer 2

在圖像控件中顯示圖像時遇到問題嗎？ 您可以右鍵單擊該容器並檢查屬性中的路徑嗎？

您可以將AutoPostBack用作True並使用“ OnSelectedIndexChanged”來調用服務器功能並根據結果更新圖像控件。

或者，您可以使用JQuery在Div標簽中顯示圖像。

jQuery(document).ready(function(){
  $("#dropdownID").change(function() {
    $.ajax({
     url: "SericeFunction name",
     success: function(msg){
      .....<bind img tag >
     }
   });
  });
});

Answer 3

謝謝大家，尤其是@John，非常感謝您提供的語法。.下面是代碼：

protected void btnshow_Click(object sender, EventArgs e)
{
    using (var cn = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=D:\PROJECT SEM6\Online Tours and Travels\App_Data\ToursandTravels.mdf;Integrated Security=True;User Instance=True"))
    using (var cmd = cn.CreateCommand())
    {
        cn.Open();
        cmd.CommandText = "select pic from subcategory where subcatid = '"+DropDownList1.Text+"'";
        cmd.Parameters.AddWithValue("@subcatid",DropDownList1.Text);
        using (var reader = cmd.ExecuteReader())
        {
            if (reader.Read())
            {
                var filePath = reader.GetString(0);
                // For this to work images must be stored inside the web application.
                // filePath must be a relative location inside the virtual directory
                // hosting the application. Depending on your environment some
                // transformations might be necessary on filePath before assigning it
                // to the image url.
                Image1.ImageUrl =("~/"+filePath);
            }
        }
    }