How To Pass Multiple urls to Imageurl in Gridview in ASP.NET

Question

0.00/5 (No votes)

See more:

In ASP.NET,I Have A GridView On A WebForm..Now I Have TO Retrieve The Images From Two Different Tables In Database And Display The Images In Single Column.
To Display The Images in The GridView I Had Used:

XML

<asp:GridView ID="grdCart" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" OnRowCancelingEdit="grdCart_RowCancelingEdit" OnRowDeleting="grdCart_RowDeleting" OnRowEditing="grdCart_RowEditing" OnRowUpdating="grdCart_RowUpdating">
    <Columns>
        <asp:TemplateField HeaderText="Product Image">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" width="100" ImageUrl='<%# "DisplayAllItems.aspx?id="+Eval("ProductID")+"&DisplayAllProducts.aspx?id="+Eval("ProductID")%>' />
            </ItemTemplate>
        </asp:TemplateField>
   </Columns>
</asp:GridView>

But Only Single Image Of Item Is Displaying And The Product Image Is Not Displaying...Pls Help Me....

Posted 30-Dec-12 1:23am

CHAITANYA KIRAN KASANI

Updated 30-Dec-12 1:25am

v2

Add a Solution

Comments

Suresh Dasari's 30-Dec-12 8:05am

Use Dynamic Templates, Use Multiple asp:Image Tags

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suresh Dasari's · Answer 1 · 2012-12-30T02:30:00

Solution 1

XML

<ItemTemplate>
                            <asp:Image ID="Image2" runat="server" Width="100" ImageUrl='<%# "DisplayAllItems.aspx?id="+Eval("ProductID")+" %>' />
                            <asp:Image ID="Image1" runat="server" Width="100" ImageUrl='<%# "DisplayAllProducts.aspx?id="+Eval("ProductID")%>' />
                        </ItemTemplate>

OR

in .aspx

XML

<asp:TemplateField HeaderText="Product Image">
                        <ItemTemplate>
                            <asp:Panel ID="pnlImages" runat="server">
                            </asp:Panel>
                        </ItemTemplate>
                    </asp:TemplateField>

in aspx.cs

protected void grdCart_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Panel pnl = (Panel)e.Row.FindControl("pnlImages");

Image img = new Image();
img.ImageUrl = "~/Image/ball_grey.png";
pnl.Controls.Add(img);

img = new Image();
img.ImageUrl = "ImageHandler.ashx?image=Image/ball_silver.png";
pnl.Controls.Add(img);
}
}

Posted 30-Dec-12 2:30am

Suresh Dasari's

Updated 30-Dec-12 2:58am

v2

Comments

CHAITANYA KIRAN KASANI 30-Dec-12 15:08pm

ThanQ For Your Response....But By Using Multiple asp:images tags..The Two Images are Displaying In same Column one after the other..but In The Grid Extra Unopened image Is Showing With Each Image In Column.....Actually what i need is that there are different pages with "add to cart" button. after adding some items from different webpages.In The UserCart It Have To Display The Items With Images In The GridView That We Are Added To Cart.So I Have Taken Different Tables To Maintain Different Type of Data..And After Click on add to cart button.All The Items From different webpages should display In the gridview with their images and details retrieve from database of different tables... Pls Help Me Suresh

Suresh Dasari's 3-Jan-13 3:38am

do you want to display the images row wise, i.e similar to the shopping cart ?
combine all the tables data into one dynamic data table in code side.
then bind that combined data table to grid view, use only one image tag to display the image.
the data should be in row wise.
i.e
IdColumn ImageColumn
Table1_pkvalue1 Table1-Image1
Table1_pkvalue2 Table1-Image2
Table2_pkvalue3 Table1-Image3
Table2_pkvalue1 Table1-Image1
Table5_pkvalue4 Table1-Image4
Table7_pkvalue2 Table1-Image2

or

use DataList in the template field instead of image tag
place the image tag in the DataList.

CHAITANYA KIRAN KASANI 5-Jan-13 13:49pm

hi Suresh...I had combined the tables as u said...now how i have to bind the merged table with gridview...

pls check it once

string constr = "Data Source=.\\SQLEXPRESS;AttachDbFILEName=|DataDirectory|\\ImageDB.mdf;integrated security=true;user instance=true;";
DataTable done = new DataTable();
DataTable dtwo = new DataTable();
DataTable dthree = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
string id = Request.QueryString["id"];
FillTable(id);
}
protected void FillTable(string id)
{
string qry1 = "Select ProductID,ProductName,ProductDescription,ProductPrice,ProductImage from tblImage";
string qry2 = "Select ProductID,ProductName,ProductDescription,ProductPrice,ProductImage from tblRatnams";
string qry3 = "Select ProductID,ProductName,ProductDescription,ProductPrice,ProductImage from tblRudrakshas";

SqlConnection con = new SqlConnection(constr);
SqlDataAdapter da1 = new SqlDataAdapter();
SqlDataAdapter da2 = new SqlDataAdapter();
SqlDataAdapter da3 = new SqlDataAdapter();

da1.SelectCommand = new SqlCommand(qry1, con);
da2.SelectCommand = new SqlCommand(qry2, con);
da3.SelectCommand = new SqlCommand(qry3, con);

da1.Fill(done);
da2.Fill(dtwo);
da3.Fill(dthree);

done.Merge(dtwo,false);
done.Merge(dthree,false);
////string query = "SELECT ProductImage FROM done WHERE ProductID = @ProductID";//Here I Am Unable To Findout How to Write The Query
SqlCommand com = new SqlCommand(query, con);
com.Parameters.Add("@ProductID", SqlDbType.Int).Value = Int32.Parse(id);
con.Open();
SqlDataReader r = com.ExecuteReader();

if (r.Read())
{
byte[] imgData = (byte[])r["ProductImage"];
Response.BinaryWrite(imgData);
}
con.Close();
}
i am unable to write the query to retrieve binarycode[image] from DataTable...
please help me ....if any corrections suggest me...

Suresh Dasari's 7-Jan-13 0:18am

http://www.codedigest.com/Articles/ASPNET/6_GridView_with_Image.aspx
http://www.dotnetfunda.com/articles/article1084-saving-images-into-the-database-in-aspnet-and-displaying-to-the-gridview-.aspx

Suresh Dasari's · Answer 2 · 2013-01-06T18:51:00

XML

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID">
            <Columns>
                <asp:BoundField DataField="ProductName" HeaderText="ProductName" />
                <asp:BoundField DataField="ProductDescription" HeaderText="ProductDescription" />
                <asp:BoundField DataField="ProductPrice" HeaderText="ProductPrice" />
                <asp:TemplateField HeaderText="Image">
                    <ItemTemplate>
                        <img src="GridViewImage123.ashx?autoid=<%# Eval("Id").ToString() %>&tableName=<%# Eval("TableName").ToString() %>"
                            width="150" height="100" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

CSS

While combining all the data, add one more column table name also
i.e in

string qry1 = "Select ProductID,ProductName,ProductDescription,ProductPrice,ProductImage,'tblImage' as TableName from tblImage";
string qry2 = "Select ProductID,ProductName,ProductDescription,ProductPrice,ProductImage,'tblRatnams' as TableName from tblRatnams";
string qry3 = "Select ProductID,ProductName,ProductDescription,ProductPrice,ProductImage,'tblRudrakshas' as TableName from tblRudrakshas";

C#

//Send the TableName to ashx
public class GridViewImage123 : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        if (context.Request.QueryString["autoId"] == null) return;

        string constr = "Data Source=.\\SQLEXPRESS;AttachDbFILEName=|DataDirectory|\\ImageDB.mdf;integrated security=true;user instance=true;";

        string productId = context.Request.QueryString["productId"];
        string tableName = context.Request.QueryString["tableName"];

        using (SqlConnection conn = new SqlConnection(constr))
        {
            string query = "SELECT ProductImage FROM " + tableName + " WHERE ProductID =" + productId;

            using (SqlCommand cmd = new SqlCommand(query, conn))
            {
                conn.Open();
                using (SqlDataReader reader = cmd.ExecuteReader(System.Data.CommandBehavior.CloseConnection))
                {
                    reader.Read();
                    context.Response.BinaryWrite((Byte[])reader[reader.GetOrdinal("ProductImage")]);
                    reader.Close();
                }
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}