How to display images in ASP net gridview from folder

Question

0.00/5 (No votes)

See more:

Hello everyone,

I want to display an image from webserver's folder based on row values.
The database is pretty easy, just two columns (string username, int state) we'll get the state based on a WPF application and there are two states: 0,1
It works, that is nice but I want to display the results via the company's web-application platform.

I started with a simple GridView and added an extra column for the image:

ASP.NET

        <asp:GridView ID="Grid1" PageSize="50" DataSourceID="LinqStateSource" AllowPaging="True" OnRowDataBound="GridView1_RowDataBound"ShowFooter = "True" 
 AllowSorting="True" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="username" HeaderText="Username" SortExpression="username" />
        <asp:BoundField DataField="state" HeaderText="State" SortExpression="State" />
        <asp:ImageField HeaderText="Picture" />
    </Columns>
</asp:GridView>

<!--- LINQ! ---!>
<asp:LinqDataSource ID="LinqStateSource" runat="server" ContextTypeName="...WebApp.data.LinqStateSourceDataContext" EntityTypeName="" TableName="tblname"/>

It works so far, but now I want to show a picture (green, red dots) instead of the "state" column.

In Code behind I started with that:

C#

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
       {

           foreach (GridViewRow row in Grid1.Rows)
           {
               for (int i = 0; i < Grid1.Columns.Count; i++)
               {
                   /*if(e.Row.Cells[1].Text== "1")
                       e.Row.Cells[2].Image = @"...\images\greendot.ico";
                        |_______ "mindcode"
                   else
                       e.Row.Cells[2].Image = @"...\images\reddot.ico";
                        |_______ "mindcode"
                      /*
               }
           }

       }

I have no clue how to manage it.

Thank you,
Vincent

What I have tried:

C#

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
       {

           foreach (GridViewRow row in Grid1.Rows)
           {
               for (int i = 0; i < Grid1.Columns.Count; i++)
               {
                   /*if(e.Row.Cells[1].Text== "1")
                       e.Row.Cells[2].Image = @"...\images\greendot.ico";
                        |_______ "mindcode"
                   else
                       e.Row.Cells[2].Image = @"...\images\reddot.ico";
                        |_______ "mindcode"
                      /*
               }
           }

       }

Posted 2-Sep-16 2:11am

Haechtsuppe

Updated 2-Sep-16 6:09am

v2

Add a Solution

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)

njammy · Accepted Answer · 2016-09-02T05:17:00

I find it easier to do one of the following options:

OPTION 1: bind in markup:
1. Prepare your datasource to include the url on query (maybe put some "case when " style logic in your DB query). e.g. SELECT url AS imageUrl FROM myTable...
2. Bind image source url to control on markup
e.g.
<img src="<%#Eval("imageUrl")" />

OPTION 2: Add image control on row data bind

C#

string imageUrlValue = @"...\images\{0}.ico";
            DataRow myRow = e.Row.DataItem as DataRow;
            Image img = new Image();
            img.ImageUrl = 
                string.Format
                (
                    imageUrlValue,
                    myRow["Mycolumn"] == "1" ? "greendot" : "reddot"
                );
            row.Cells[2].Controls.Add(img);

Richard Deeming · Accepted Answer · 2016-09-02T06:09:00

Another option: bind the image in markup, using a code-behind function to generate the URL:

ASP.NET

<asp:Image runat="server"
    ImageUrl='<%# BuildStateImageUrl((int)Eval("State")) %>'
/>

C#

protected string BuildStateImageUrl(int state)
{
    switch (state)
    {
        case 1:
        {
            return "~/images/greendot.png";
        }
        default:
        {
            return "~/images/reddot.png";
        }
    }
}

NB: Icon files (.ico) are not guaranteed to work in all browsers. You should convert the files to one of the standard web formats instead (.png, .jpg or .gif).

How to display images in ASP net gridview from folder

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0