In this article I will explain with an example, how to display Image based on condition in GridView in ASP.Net using C# and VB.Net.
The ImageUrl property of the Image control is set with an Inline Expression which compares the value of the column and based on the value, the respective Image URL is returned which is used to conditionally display the Image in GridView.
 
 
Conditionally displaying Image using IF ELSE Condition with EVAL function in GridView
The following HTML Markup consists of an ASP.Net GridView consisting of two BoundField columns and one TemplateField column populated using EVAL function.
The ImageUrl property of the Image control is set with an Inline Expression which compares the value of Status column and based on whether the value is A or P, the respective Image URL is returned.
Using Inline Expression, the value of the EVAL function is compared and if the Status value is A then the Red Image is show else the Green Image is shown.
Note: The syntax of using EVAL function within Inline Expression is different for C# and VB.Net.
 
C#
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="50" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:TemplateField HeaderText="Status" ItemStyle-Width="100" ItemStyle-HorizontalAlign = "Center">
            <ItemTemplate>
                <asp:Image ImageUrl='<%# "~/Images/" + (Eval("Status").ToString() == "P" ? "P.png" : "A.png") %>' runat="server" Height = "25" Width = "25" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 
VB.Net
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="50" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
            <asp:TemplateField HeaderText="Status" ItemStyle-Width="100" ItemStyle-HorizontalAlign = "Center">
            <ItemTemplate>
                <asp:Image ImageUrl='<%# "~/Images/" & (If(Eval("Status").ToString() = "P", "P.png", "A.png")) %>' runat="server" Height = "25" Width = "25" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 
Note: If the conditions are more complex, it is recommended to use RowDataBound event. For more details refer my article, Dynamically change GridView Cell value using RowDataBound event in ASP.Net using C# and VB.Net.
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Status") });
        dt.Rows.Add(1, "John Hammond", "A");
        dt.Rows.Add(2, "Mudassar Khan", "P");
        dt.Rows.Add(3, "Suzanne Mathews", "P");
        dt.Rows.Add(4, "Robert Schidner", "A");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Status")})
        dt.Rows.Add(1, "John Hammond", "A")
        dt.Rows.Add(2, "Mudassar Khan", "P")
        dt.Rows.Add(3, "Suzanne Mathews", "P")
        dt.Rows.Add(4, "Robert Schidner", "A")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Screenshot
Display Image based on condition in GridView in ASP.Net
 
 
Demo
 
 
Downloads