Get image URL from Access database and display in gridview

Probably pretty basic but I'm just learning...

Using Visual Studio 2005, Visual Basic, Access Database.

What I would like to do is change the ProductImage part. In my database, I have the names of the images: image1.gif, image2.gif, etc. I'd like to have the ProductImage get the URL in the form of images/image1.gif.

I built a gridview based on dataset that results in this:
 <Fields>
                    <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
                    <asp:BoundField DataField="ModelNumber" HeaderText="ModelNumber" SortExpression="ModelNumber" />
                    <asp:BoundField DataField="ModelName" HeaderText="ModelName" SortExpression="ModelName" />
                    <asp:BoundField DataField="UnitCost" HeaderText="UnitCost" SortExpression="UnitCost" />
                    <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
                    <asp:BoundField DataField="ProductImage" HeaderText="ProductImage" SortExpression="ProductImage" />
                     </Fields>

Is that clear enough? Can anyone help? Like I said, I'm just learning so if your answer requires any kind of function stuff you'll have to tell me where it goes and how to use it. 500 points because I'm completely stoopid and need step-by-step instructions.

Thanks,

MH
LVL 7
MHenryAsked:
Who is Participating?
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.

MHenryAuthor Commented:
BTW, I don't care if the image is displayed inside the grid. In fact, I would prefer that it's not. I just did it like that to show the field ProductImage.

Best,

MH
0
BrentxhangeCommented:
is this just returning 1 result, or is it returning multiple results w/pictures?
0
MHenryAuthor Commented:
The gridview is returning all the stuff listed above. I want the picture to be the picture that matches with the ProductID returned in the grid. It's just the one picture associated with that ProductID.

0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

BrentxhangeCommented:
no, thats not what i mean, will there be multiple records like:

   CategoryID | ModelNumber | ModelName | UnitCost | Description | ProductImage
   
   record 1     |    record 1     |  record 1     |record 1  |record 1     |record 1    
   record 2     |    record 2     |  record 2     |record 2  |record 2     |record 2    
 ........
 or will there be just  record?? (only 1 picture to diplay or multiple pictures)
0
MHenryAuthor Commented:
This is for the details page. It will have the detailview with just one set of information (like above). I want to add the picture somewhere on the page.
0
BrentxhangeCommented:
ok, thanks, can u send my the "Select Statment" (including where statments) and I can develop the code for you.  It will be a server side script that will create a picture from the location given in the database record.
0
MHenryAuthor Commented:
Hopefully you mean this:

SELECT CategoryID, Description, ModelName, ModelNumber, ProductID, ProductImage, UnitCost FROM Products WHERE (ProductID = ?)

Thanks,

MH
0
BrentxhangeCommented:
I also need the paramater (where the "(ProductID = ?)" gets the "?"from if that makes sense.  eg. <asp paramater name=ProductID ....../>
0
BrentxhangeCommented:
ok, your code will look somthing like this.  This should work but may have a runtime error because I just wrote this without an editor:

<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.UI.WebControls" %>
<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Configuration" %>
<%@ Import Namespace="System.Web.Configuration" %>

<Script runat=server>
Sub Page_Load(ByVal s As object, byval e as eventargs)
Dim connection As OleDbConnection
Dim command As OLEDBCommand
Dim reader As OLEDBDataReader
Dim connstr As String
Dim sqlstr As String
Try
'Change this to your connection string or change the name if your connection string is in the web.config file
connstr = ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString
connection = New OLEDbConnection(connstr)
connection.open()
'connection now open to database, creating select statment
sqlstr = "SELECT ProductImage, UnitCost FROM Products WHERE (ProductID = ?)"
command = New OLEDBCOMMAND(sqlstr, connection)
'defines where statment parameters
command.Parameters.Add(New OleDbParameters("ProductID" , *****NEEDS TO BE FILLED***))
reader = command.executereader()
reader.read()
Dim picstr As String = reader.getvalue("0")
dim pic as System.Web.UI.WebControls.Image ();
pic.imageurl = picstr
PlaceHolder1.controls.add(pic)
Finally
If(Not ISNothing(reader)) THen
connection.close()
End If
If (Not ISNothing(Connection)) Then
Connection.Close
End If
End Try
End Sub

</script>

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
0
MHenryAuthor Commented:
I'm guessing that would be the string from the master page:

details.aspx?ProductId={0}

The full text from the source code is:
<asp:HyperLinkField DataNavigateUrlFields="ProductID" DataNavigateUrlFormatString="details.aspx?ProductID={0}"
                HeaderText="Details" Text="Details" />



0
MHenryAuthor Commented:
Brentxhange
Not sure if it matters, but I am using Master/Child pages. I just slapped all the stuff right under this:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="details.aspx.vb" Inherits="details" title="Untitled Page" %>


Ok, not sure if I got the connection string right. It is in the config file so I used this:
connstr = ConfigurationManager.ConnectionStrings("zxvu1151ConnectionString").


So far, these errors:
OleDbParameters is not defined
dim pic as System.Web.UI.WebControls.Image ();   *Says the ; is not valid*
pic.imageurl = picstr  *Name pic is not declared
PlaceHolder1.controls.add(pic)  *PlaceHolder is not declared

Is this correct for the "needs to be replaced?"
command.Parameters.Add(New OleDbParameters("ProductID" , details.aspx?ProductId={0}))

Thanks,

MH
0
BrentxhangeCommented:
ok....#1 AutoEvenWireup="true"
       #2 The ";" should not be there, my mistake
       #3 in the imports I forgot to put this "<%@ Import Namespace="System.Web.UI.WebControls.Image" %>"
       #4 I think the command is correct, once the rest works try it and let me know.

I think thats all that needs to be corrected.  Let Me know

Brent
0
MHenryAuthor Commented:
Should that be AutoEventWireup?

And where does it go?
0
BrentxhangeCommented:
yes, autoeventwireup.  It goes in the page header, with the page directive
0
MHenryAuthor Commented:
Ok, still have these errors:

OleDbParameters is not defined
pic.imageurl   **image.url is not a member of "System Array"
PlaceHolder1.controls.add(pic)  **value of type '1 dimensional array of System.Web.UI.Webcontrols.Image' cannot be converted to 'System.Web.UI.Control'

Also says the question mark is not a valid character here:
command.Parameters.Add(New OleDbParameters("ProductID" , details.aspx?ProductId={0}))

0
MHenryAuthor Commented:
Just in case anyone else is looking for a similar answer:

Believe it or not, this is relatively simple. But not obvious to a newbie - like me. This works in 2005 anyway...

After three or four hours of searching and playing around, I found that if you go into the "edit fields" screen of the detailsview, there is an "imageField."

Add the imageField to the selected fields.
Select it in the selectedFields window.
Scroll down until you find the data section.
In dataImageURLField, choose the field where you have the image information, ie "image.gif"
In dataImageURLFormat, type: images/{0}  

That is assuming your image is in a images subdirectory.

This works in my case anyway. The field I was using wasn't even a query field, just a field in the table.

Oh yeah, it helps if you actually have the image in the folder you are pointing to. After banging my head on the floor for a couple of hours, I thought maybe I should make sure the image I was looking for was in there. Of course, it wasn't.

Best,

MH
0
MHenryAuthor Commented:
Brentxhange,

I'll still award the points if you want to help me work out those two errors. I'd still like to know how to get the image outside of the grid.

Didn't mean to make it sound like I had found the answer I was looking for.

Best,
MH
0
BrentxhangeCommented:
I will have a chance to look over this later today, I was on holidays for the past few.  I believe that there is somthing missing from the page inherits.  Could you please post the entire page code (once again), so I can make sure all the requred elements are present.

Thanks
0
MHenryAuthor Commented:
Brentxhange,

Here's what I have. I wasn't sure what to put in the "needs to be filled" area...

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="details.aspx.vb" Inherits="details" title="Untitled Page" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.UI.WebControls" %>
<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Configuration" %>
<%@ Import Namespace="System.Web.Configuration" %>
<%@ Import Namespace="System.Web.UI.WebControls.Image" %>
<Script runat=server>
Sub Page_Load(ByVal s As object, byval e as eventargs)
Dim connection As OleDbConnection
Dim command As OLEDBCommand
Dim reader As OLEDBDataReader
Dim connstr As String
Dim sqlstr As String
Try
'Change this to your connection string or change the name if your connection string is in the web.config file
            connstr = ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString
connection = New OLEDbConnection(connstr)
connection.open()
'connection now open to database, creating select statment
sqlstr = "SELECT ProductImage, UnitCost FROM Products WHERE (ProductID = ?)"
command = New OLEDBCOMMAND(sqlstr, connection)
'defines where statment parameters
command.Parameters.Add(New OleDbParameters("ProductID" , details.aspx?ProductId={0}))
reader = command.executereader()
reader.read()
Dim picstr As String = reader.getvalue("0")
            Dim pic As System.Web.UI.WebControls.Image()
pic.imageurl = picstr
PlaceHolder1.controls.add(pic)
Finally
If(Not ISNothing(reader)) THen
connection.close()
End If
If (Not ISNothing(Connection)) Then
Connection.Close
End If
End Try
End Sub

</script>

    <h1>
        Product List</h1>
    <p>
        &nbsp;</p>
    <p>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
        <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" CellPadding="4"
            DataSourceID="ObjectDataSource1" ForeColor="#333333" GridLines="None" Height="50px"
            Width="100%">
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
            <EditRowStyle BackColor="#999999" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <Fields>
                <asp:BoundField DataField="ProductID" HeaderText="ProductID" SortExpression="ProductID" />
                <asp:BoundField DataField="ModelName" HeaderText="ModelName" SortExpression="ModelName" />
                <asp:BoundField DataField="TotalNum" HeaderText="TotalNum" SortExpression="TotalNum" />
            </Fields>
            <FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:DetailsView>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetData" TypeName="productListTableAdapters.CustomerAlsoBoughtTableAdapter">
        </asp:ObjectDataSource>
    </p>
    <p>
        <a href="storeHome.aspx"><span style="color: #0000ff; text-decoration: underline">back</span></a></p>
   
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="RightPlaceHolder" Runat="Server">
    <br />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">
        <Columns>
            <asp:BoundField DataField="ModelName" HeaderText="ModelName" SortExpression="ModelName" />
            <asp:BoundField DataField="TotalNum" HeaderText="TotalNum" SortExpression="TotalNum" />
            <asp:HyperLinkField DataNavigateUrlFields="ProductID" DataNavigateUrlFormatString="details.aspx?ProductID={0}"
                HeaderText="details" Text="GoTo" />
        </Columns>
    </asp:GridView>
</asp:Content>

Best,

MH
0
MHenryAuthor Commented:
Brentxhange,

Here's the code if I put the image inside the details view. Is there maybe a way to grab the image from this somehow?



<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="details.aspx.vb" Inherits="details" title="Untitled Page" %>

    <h1>
        Product List</h1>
    <p>
        &nbsp;</p>
    <p>
        &nbsp;<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" CellPadding="4"
            DataSourceID="ObjectDataSource1" ForeColor="#333333" GridLines="None" Height="50px"
            Width="100%">
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
            <EditRowStyle BackColor="#999999" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <Fields>
                <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
                    SortExpression="ProductID" />
                <asp:BoundField DataField="ModelName" HeaderText="ModelName" SortExpression="ModelName" />
                <asp:BoundField DataField="UnitCost" HeaderText="UnitCost" SortExpression="UnitCost" />
                <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
                <asp:ImageField DataImageUrlField="ProductImage" DataImageUrlFormatString="images/{0}">
                </asp:ImageField>
               
            </Fields>
            <FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:DetailsView>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetDataByProductID" TypeName="productListTableAdapters.ProductsTableAdapter">
            <SelectParameters>
                <asp:QueryStringParameter Name="ProductID" QueryStringField="ProductID" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </p>
0
MHenryAuthor Commented:
I hate to see this one closed without an answer. He got really close. If anyone else can supply a working answer, I'd be happy to split points. The way the answer is right now, it doesn't work.

MH
0
Bob LearnedCommented:
Where in lies the problem?  What doesn't work?

Bob
0
BrentxhangeCommented:
Hi, I'm sorry about the wait, this has really stupmed me and my computer crashed :(
it is almost idntical except you are missing 1 thin in the <asp:imageField> code
Try this code:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="details.aspx.vb" Inherits="details" title="Untitled Page" %>

    <h1>
        Product List</h1>
    <p>
        &nbsp;</p>
    <p>
        &nbsp;<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" CellPadding="4"
            DataSourceID="ObjectDataSource1" ForeColor="#333333" GridLines="None" Height="50px"
            Width="100%">
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
            <EditRowStyle BackColor="#999999" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <Fields>
                <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
                    SortExpression="ProductID" />
                <asp:BoundField DataField="ModelName" HeaderText="ModelName" SortExpression="ModelName" />
                <asp:BoundField DataField="UnitCost" HeaderText="UnitCost" SortExpression="UnitCost" />
                <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
                <asp:ImageField DataImageUrlField="ProductImage" DataImageUrlFormatString="../images/{0}">
                </asp:ImageField>
               
            </Fields>
            <FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:DetailsView>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetDataByProductID" TypeName="productListTableAdapters.ProductsTableAdapter">
            <SelectParameters>
                <asp:QueryStringParameter Name="ProductID" QueryStringField="ProductID" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </p>
0
BrentxhangeCommented:
or try pasting this code outside of the datagrid(in the main page)

<asp:formview id="FormView1" runat="server" datasourceid="ObjectDataSource1" cellpadding="0" borderwidth="0px" enableviewstate="False">
                        <ItemTemplate>
                              <h4>
                                                <img src="..images/<%# Eval("ProductImage") %>" </h4>
                              <hr />
                        </ItemTemplate>
                  </asp:formview>
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
MHenryAuthor Commented:
Brentxhange,

Well, believe it or not it worked! I didn't try the longer answer yet, the second one you supplied was so much simpler and elegant I thought I would give it a shot first.

The only thing was you left off the closing bracket on the image tag, so just for anyone who might search for this, the answer that worked is:

<asp:formview id="FormView1" runat="server" datasourceid="ObjectDataSource1" cellpadding="0" borderwidth="0px" enableviewstate="False">
                    <ItemTemplate>
                         <h4>
                                        <img src="..images/<%# Eval("ProductImage") %>"> </h4>
                         <hr />
                    </ItemTemplate>
               </asp:formview>

Fantastic work, my friend. You more than earned the points!

My thanks,

MH
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
Visual Basic.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.