DataGrid View

[Techbee]

Hi All

I am working on an e-commerce site using VB.Net and currently stuck on trying to display my products on the storefront. I am using a GridView control to present records of products from an access database.
The GridView is showing the records as they are in the Database but I need it to show images of the products. My Database contains the products table and the Images table and are linked with relationships.
I have put the ImageFiled control in the GridView but no images are coming up.

Could please help me as to how I can load the images into the Gridview corresponding with the item details. Or is there another contol I can use instead of the GridView.

Thanks
Guys

[ericstenson]

Hey- Make it easy on yourself and easier on your database. Store the imagepath instead.

[Techbee]

Hey- Make it easy on yourself and easier on your database. Store the imagepath instead.

Hi ericstenson

I have stored the imagepath in my Database, but how do I reference this path in my Code so that the image can be passed to the Datagrid.

Regards

[sebastian3]

For storing Image try this :

//UPLOAD FILE                   
                if (this.flBSmallImage.PostedFile.ContentLength > 0)
                {
                    if (strOldBSmallImage.Length > 0)
                    {
                        System.IO.File.Delete(Server.MapPath("../") + "UploadedFiles\\ManagementImage\\" + strOldBSmallImage.ToString());
                    }
                    String strPath = Server.MapPath("../") + "UploadedFiles/ManagementImage";
                    flBSmallImage.PostedFile.SaveAs(strPath + "/" + strBSmallImage);
                }

For viewing the Image, bind the Datgrid in backend and in aspx it should be :

<ItemTemplate>
                                            <asp:Image ID="Image1" ImageUrl='<%# "../UploadedFiles/TemplateImage/" + ((clsTemplateImage)Container.DataItem).upload_image_name%>'
                                            height="71" width="171" AlternateText="" runat="server"/>
                                        </ItemTemplate>

[Techbee]

For storing Image try this :

//UPLOAD FILE                   
                if (this.flBSmallImage.PostedFile.ContentLength > 0)
                {
                    if (strOldBSmallImage.Length > 0)
                    {
                        System.IO.File.Delete(Server.MapPath("../") + "UploadedFiles\\ManagementImage\\" + strOldBSmallImage.ToString());
                    }
                    String strPath = Server.MapPath("../") + "UploadedFiles/ManagementImage";
                    flBSmallImage.PostedFile.SaveAs(strPath + "/" + strBSmallImage);
                }

For viewing the Image, bind the Datgrid in backend and in aspx it should be :

<ItemTemplate>
                                            <asp:Image ID="Image1" ImageUrl='<%# "../UploadedFiles/TemplateImage/" + ((clsTemplateImage)Container.DataItem).upload_image_name%>'
                                            height="71" width="171" AlternateText="" runat="server"/>
                                        </ItemTemplate>

Thank you very much I'll get cracking on it, and will let you know the outcome.

Thanks

[Techbee]

Thanks Sebastian I managed upload and store the image in the Access Database but I have failed to assign the Imagefield to pick the Image using the URL and place it into the Gridview control.

My Gridview control has the following code:

<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/database/myDatabase.mdb"
                SelectCommand="SELECT [ProductID], [Product_Name], [Product_Price], [Product_Description] FROM [Products]">
            </asp:AccessDataSource>
        </strong>
    
    </div>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
            CellPadding="4" DataKeyNames="ProductID" DataSourceID="AccessDataSource1" ForeColor="#333333"
            GridLines="None">
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <Columns>
                <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
                    ReadOnly="True" SortExpression="ProductID" />
                <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" SortExpression="Product_Name" />
                <asp:BoundField DataField="Product_Price" HeaderText="Product_Price" SortExpression="Product_Price" />
                <asp:BoundField DataField="Product_Description" HeaderText="Product_Description"
                    SortExpression="Product_Description" />
                <asp:ImageField DataImageUrlField="ProductID" HeaderText="Image">
                                </asp:ImageField>
                <asp:ButtonField Text="Buy" />
            </Columns>
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <EditRowStyle BackColor="#999999" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>

Can you please advice on how I can include the code into the above code.

Thanks

[Techbee]

For storing Image try this :

//UPLOAD FILE                   
                if (this.flBSmallImage.PostedFile.ContentLength > 0)
                {
                    if (strOldBSmallImage.Length > 0)
                    {
                        System.IO.File.Delete(Server.MapPath("../") + "UploadedFiles\\ManagementImage\\" + strOldBSmallImage.ToString());
                    }
                    String strPath = Server.MapPath("../") + "UploadedFiles/ManagementImage";
                    flBSmallImage.PostedFile.SaveAs(strPath + "/" + strBSmallImage);
                }

For viewing the Image, bind the Datgrid in backend and in aspx it should be :

<ItemTemplate>
                                            <asp:Image ID="Image1" ImageUrl='<%# "../UploadedFiles/TemplateImage/" + ((clsTemplateImage)Container.DataItem).upload_image_name%>'
                                            height="71" width="171" AlternateText="" runat="server"/>
                                        </ItemTemplate>

Thanks Sebastian I managed upload and store the image in the Access Database but I have failed to assign the Imagefield to pick the Image using the URL and place it into the Gridview control.

My Gridview control has the following code:

<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/database/myDatabase.mdb"
SelectCommand="SELECT [ProductID], [Product_Name], [Product_Price], [Product_Description] FROM [Products]">
</asp:AccessDataSource>
</strong>

</div>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="ProductID" DataSourceID="AccessDataSource1" ForeColor="#333333"
GridLines="None">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="Product_Name" HeaderText="Product_Name" SortExpression="Product_Name" />
<asp:BoundField DataField="Product_Price" HeaderText="Product_Price" SortExpression="Product_Price" />
<asp:BoundField DataField="Product_Description" HeaderText="Product_Description"
SortExpression="Product_Description" />
<asp:ImageField DataImageUrlField="ProductID" HeaderText="Image">
</asp:ImageField>
<asp:ButtonField Text="Buy" />
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>

Can you please advice on how I can include the code into the above code.

Thanks

[sebastian3]

Its ok but u have to select the image url field in the select query and put the image url field in the Imagefield value.You have put

<asp:ImageField DataImageUrlField="ProductID" HeaderText="Image">
</asp:ImageField>

But u have to put the Image Url column name of your table like if the column in your table where u store the path is "imgpath" then it should be :

<asp:ImageField DataImageUrlField="imgpath" HeaderText="Image">
</asp:ImageField>

. One thing the path must be a absolute path that us tore in the database like : "UploadedFiles/ManagementImage/image1.jpg"
Otherwise if u store only the filename in the database then u have to insert the absolute path hardcoded.Then u could replace the asp:Imagefield with a templatefield : <ItemTemplate><asp:Image ID="Image1" ImageUrl='<%# "../UploadedFiles/TemplateImage/" + (Container.DataItem).upload_image_name%>' runat="server"/></ItemTemplate> Do let me know if it works.I would be available for further cooperation.

[Techbee]

Its ok but u have to select the image url field in the select query and put the image url field in the Imagefield value.You have put

<asp:ImageField DataImageUrlField="ProductID" HeaderText="Image">
</asp:ImageField>

But u have to put the Image Url column name of your table like if the column in your table where u store the path is "imgpath" then it should be :

<asp:ImageField DataImageUrlField="imgpath" HeaderText="Image">
</asp:ImageField>

. One thing the path must be a absolute path that us tore in the database like : "UploadedFiles/ManagementImage/image1.jpg"
Otherwise if u store only the filename in the database then u have to insert the absolute path hardcoded.Then u could replace the asp:Imagefield with a templatefield : <ItemTemplate><asp:Image ID="Image1" ImageUrl='<%# "../UploadedFiles/TemplateImage/" + (Container.DataItem).upload_image_name%>' runat="server"/></ItemTemplate> Do let me know if it works.I would be available for further cooperation.

Thanks Sebastian, I've tried both codes unfortunately the first one did not return any images after putting the column of the table. The second one is reading an error. Please see below the code that I have included after replacing the Imagefield as you suggested.

<asp:BoundField DataField="ImagePath" HeaderText="ImagePath" SortExpression="ImagePath" />
                <asp:BoundField DataField="ImageName" HeaderText="ImageName" SortExpression="ImageName" />
                <asp:BoundField DataField="ProductID" HeaderText="ProductID" SortExpression="ProductID" />
                <ItemTemplate>
                <asp:Image ID = "Image1" ImageUrl="<%../UploadedFiles/TemplateImage/" + 
                (Container.DataItem).upload_image_name %>" runat="server" />
                 </ItemTemplate>

The error detected is highlighted in red.
Error Message: Code blocks are not supported in this context.

I do apologise for being a pain, I'm still trying to get the grips with programming.

Regards
Bright

[sebastian3]

Ok no problem, there is always second way.
Actually the code i sent u <ItemTemplate><asp:Image ID="Image1" ImageUrl='<%# "../UploadedFiles/TemplateImage/" + (Container.DataItem).upload_image_name%>' runat="server"/></ItemTemplate> this was for the particular path : "../UploadedFiles/TemplateImage/" .
U should have to change this path to your own image path where u have stored the image.
If u r working in Product.aspx say and the image is in images folder then the code will be ImageUrl='<%# "images/" + (Container.DataItem).upload_image_name%>' If it is in a image folder in the parent directory then u have to put a ".." (dot dot) like ImageUrl='<%# "../images/" + (Container.DataItem).upload_image_name%>' If its in the current folder then just leave it blank : ImageUrl='<%# Container.DataItem).upload_image_name%>' I just sended u a example path, u have to change it as urs.

Another thing replace (Container.DataItem).upload_image_name with Eval("upload_image_name") .

Or u can do 1 thing , send me the files hierarchy in ur project , i will give u the Imageurl to use , OK .

[Techbee]

Ok no problem, there is always second way.
Actually the code i sent u <ItemTemplate><asp:Image ID="Image1" ImageUrl='<%# "../UploadedFiles/TemplateImage/" + (Container.DataItem).upload_image_name%>' runat="server"/></ItemTemplate> this was for the particular path : "../UploadedFiles/TemplateImage/" .
U should have to change this path to your own image path where u have stored the image.
If u r working in Product.aspx say and the image is in images folder then the code will be ImageUrl='<%# "images/" + (Container.DataItem).upload_image_name%>' If it is in a image folder in the parent directory then u have to put a ".." (dot dot) like ImageUrl='<%# "../images/" + (Container.DataItem).upload_image_name%>' If its in the current folder then just leave it blank : ImageUrl='<%# Container.DataItem).upload_image_name%>' I just sended u a example path, u have to change it as urs.

Another thing replace (Container.DataItem).upload_image_name with Eval("upload_image_name") .

Or u can do 1 thing , send me the files hierarchy in ur project , i will give u the Imageurl to use , OK .

Thanks, I've tried the code and it is returning an error:

Parser Error 
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately. 

Parser Error Message: System.Web.UI.WebControls.DataControlFieldCollection must have items of type 'System.Web.UI.WebControls.DataControlField'. 'ItemTemplate' is of type 'System.Web.UI.HtmlControls.HtmlGenericControl'.

Source Error:

<asp:BoundField DataField="ImageName" HeaderText="ImageName" SortExpression="ImageName" />
<asp:BoundField DataField="ProductID" HeaderText="ProductID" SortExpression="ProductID" />
<ItemTemplate>
 <asp:Image ID = "Image1" ImageUrl= ImageUrl='<%# "../Images/" + (Container.DataItem).upload_image_name%>' runat="server" />
 </ItemTemplate>

It is not accepting the <Item Template>.
Is there any other way I can create a store front without using the DataGridview control ie. Datalist or any other methods.
My Images folder is in the root directory as well as the Database Folder (Ms Access) which consist of an Images table containing all the uploaded images.
Thanks

[sebastian3]

Ok no problem, lets get back to the original version. replace the Itemtemplate with the ImageField and put it as before. This time add a FormatString to add the absolute field. <asp:ImageField DataImageUrlField="ImageFileName" DataImageUrlFormatString="~/Images/{0}" Remember replace the DataImageUrlField value "ImageFileName" to ur own database column name where u have stored the Image file name.Ok. And Change the DataImageUrlFormatString value as per ur folder structure.

Or still further , send me the aspx and code behind files, i would try further.:)

[Techbee]

Ok no problem, lets get back to the original version. replace the Itemtemplate with the ImageField and put it as before. This time add a FormatString to add the absolute field. <asp:ImageField DataImageUrlField="ImageFileName" DataImageUrlFormatString="~/Images/{0}" Remember replace the DataImageUrlField value "ImageFileName" to ur own database column name where u have stored the Image file name.Ok. And Change the DataImageUrlFormatString value as per ur folder structure.

Or still further , send me the aspx and code behind files, i would try further.:)

Hi
I think I've got to the point that I have no more hair left in my head. Still no images loading into the GridView control.

Could you please look at my code maybe there's something that I am missing.

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Index.aspx.vb" Inherits="Index" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    &nbsp;<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/database/myDatabase.mdb"
        SelectCommand="SELECT [ProductID], [Product_Name], [Product_Price], [Product_Description], [ImagePath], [ImageName] FROM [Products]">
    </asp:AccessDataSource>
    <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
        AutoGenerateColumns="False" CellPadding="4" DataKeyNames="ProductID" DataSourceID="AccessDataSource1"
        ForeColor="#333333" GridLines="None">
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <Columns>
            <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
                ReadOnly="True" SortExpression="ProductID" />
            <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" SortExpression="Product_Name" />
            <asp:BoundField DataField="Product_Price" HeaderText="Product_Price" SortExpression="Product_Price" />
            <asp:BoundField DataField="Product_Description" HeaderText="Product_Description"
                SortExpression="Product_Description" />
            <asp:BoundField DataField="ImagePath" HeaderText="ImagePath" SortExpression="ImagePath" />
            <asp:BoundField DataField="ImageName" HeaderText="ImageName" SortExpression="ImageName" />
            <asp:ImageField DataImageUrlField="ImageName" DataImageUrlFormatString="~/Images/{0}">
            </asp:ImageField>
        </Columns>
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#999999" />
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    </asp:GridView>
</asp:Content>

The code behind:

Partial Class Index
    Inherits System.Web.UI.Page

End Class

I hope this makes sense.

Thanks

[sebastian3]

Sorry for replying late,it was a holiday here.
Ok n problem,there is always a solution, just u say what u r storing in ImagePath column of your table. I mean in which format. Whether it is in "/images/folderx/" this format or storing only the folder name like "folderx" or total path "/images/folderx/filex.jpg". These is essential as for the path and the ImageName column so that these can be concatenated to get the original path in correct format. I think u have to bind it in the back end server side code.
Dont panic its not a very big problem, ASP.NET is not that bad at all.
Also please clearly denote the output ur getting, that is the error. Cheer Up Dear