how to show an image in image control of which image path is stored in database when user selects a value in dropdownlist in asp.net?

Question

I have a database which is shown below in the image : Image of database

Here is the image of the form : Image of the Form In this form i want to show up the image in image control of which image path is stored up in database and according to subcategory value from the drop down list when user selects it how can i do it please help ... Thank You Guys here is the source code of my form i have added sqldatasource and bind the dropdown list with 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

Providing the 'pic' column in database holds links to the images are absolute, it also depends on how you have set the drop down list up.

You will need an OnSelectedIndexChanged for the drop down which does the following:

Selects the pic url from the database where subcategory = dropdown value or text. (this depends on how you set the drop-down list up).

With that obtained value set the pic to the one you have obtained.

You need the following, providing code would make it easier.

In you ASP file add the following to the dropdown:

OnSelectedIndexChanged="drp_SelectedIndexChanged" AutoPostBack="True"

Within code behind you need:

   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

Are you having issue in showing image in image control ? Can you right click on that container and check path in properties ?

You can use AutoPostBack as True and "OnSelectedIndexChanged" to call server function and update image control based on result.

Or you can use JQuery to show images in Div tag.

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

Answer 3

Thank You All of you guys especially @John for your syntax you provided thanks alot.. Below is the code :

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