How do I use a dropdownlist in asp.net to pull up a jpg or bitmap photo from a file, e.g. c:\images\Photo1.jpg; or the photo can be stored in an SQL table

I want to use a dropdownlist in asp.net to select the name of a Product Photo, e.g. Wheel1 and have this display the photo (jpg or bitmap) of the wheel.  

For testing purposes the images will be in c:\images\Wheel.jpg etc.   These will later be moved to a website folder.  I have read it is easier to do it this way than try to store the actual images in SQL but either way is fine.  I would like to use VB since I use VBA a great deal in Microsoft Access.

I am great with DB's but a novice at asp.net so please keep it simple.  

This is my first time using Experts Exchange.  If this has been asked you are welcome to point me to it.

Thank you,
123aspAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sm394Commented:

<asp:Image ID="Image1" runat="server" />
        <asp:DropDownList runat="server" ID="ddlTest" AutoPostBack="True">
            <asp:ListItem Value="-1" Text="Please Select"></asp:ListItem>
            <asp:ListItem>Photo1</asp:ListItem>
            <asp:ListItem>Photo2</asp:ListItem>
        </asp:DropDownList>

in code behind
 Protected Sub ddlTest_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlTest.SelectedIndexChanged
        Image1.ImageUrl = ddlTest.SelectedValue ' SET YOUR PATH TO IMAGE HERE i.e "images/pic1.jpg"
    End Sub
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sm394Commented:
change above ListItem with this

   <asp:ListItem Value="photo1.jpg">Photo1</asp:ListItem>
            <asp:ListItem Value="photo2.jpg">Photo2</asp:ListItem>
0
beaudetiousCommented:
Thank you!  I tried to follow your directions and came up with the code below.  You did not mention to create an image, but I used the tool and created one where the photo would show up.  Correct?

Here's the code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Lookup.aspx.vb" Inherits="Lookup" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
   
            <asp:DropDownList runat="server" ID="ddltest" AutoPostBack="True">
            <asp:ListItem Value="-1" Text="Please Select"></asp:ListItem>
            <asp:ListItem Value="photo1.jpg">Photo1</asp:ListItem>
            <asp:ListItem Value="photo2.jpg">Photo2</asp:ListItem>
         
        </asp:DropDownList>

     
   
    <asp:Image ID="Image1" runat="server" Height="286px" Width="330px" />

   
   
    </form>
</body>
</html>

____________

The I double-clicked the drop down list and here's the code behind.  I am not sure I referenced the c:\images correctly.    There are 2 photos in that folder:  photo1.jpg    and photo2.jpg  


Partial Class Lookup
    Inherits System.Web.UI.Page

    Protected Sub ddltest_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddltest.SelectedIndexChanged
        Image1.ImageUrl = "c:\Images\ddltest.SelectedValue" ' SET YOUR PATH TO IMAGE HERE i.e "images/pic1.jpg"
    End Sub
End Class

________________________________

When you "View in Browser" the dropdownlist works and seems to do a post back, but nothing shows up in the image box on the screen.  The image box has the small icon in the upper left as though it cannot find anything.  

If you can correct any mistakes, I will copy and paste what you send.  Thank you,



0
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

beaudetiousCommented:
Confused:  I am a first time user.  I sent a reply to  sm394   and it ended up on the screen for   beaudetious?   Does this matter?
0
prairiedogCommented:
>>>Confused:  I am a first time user.  I sent a reply to  sm394   and it ended up on the screen for   beaudetious?
I am confused too. How did you send the reply? There is no such feature at EE.
0
beaudetiousCommented:
By "I sent a reply" I meant that I typed the reply into the Comment section as I am doing here and then clicked Submit.  

To go back to the original code question.  When I select Photo1 from the dropdownlist and then right-click on the Image box on the screen I can see the text "Photo1" but no picture is displayed.

I tried variations on            Image1.ImageUrl = "c:\Images\ddltest.SelectedValue" such as        Image1.ImageUrl = "c:\Images\" & ddltest.SelectedValue  but no luck.
0
prairiedogCommented:
Image.ImageUrl is expecting a URL, not a file system path, according to MSDN:

Use the ImageUrl property to specify the URL of an image to display in the Image control. You can use a relative or an absolute URL. A relative URL relates the location of the image to the location of the Web page without specifying a complete path on the server. The path is relative to the location of the Web page. This makes it easier to move the entire site to another directory on the server without updating the code. An absolute URL provides the complete path, so moving the site to another directory requires that you update the code.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.image.imageurl.aspx 
0
123aspAuthor Commented:
To:   sm394     and    prairiedog
I worked with the code and ideas you both sent and finally have something that shows the idea is do-able.

Both of you helped me get to this point.  Is there a way I can split the points or what's the next step?
Thanks,
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.