Adding Image to Gridview - Asp.net

Demo and Code for How to bring images in Asp.net Gridview C# using data model

by Athil

---

Posted on 26 Feb 2020 Category: Asp.net Views: 4218

---

Here iam going to show how to bring images in Gridview using data model.

DEMO

DOWNLOAD DEMO

For this I am going to create a Data model class.

Or you can take datas from the database.

Data Model

        public class imagedata
        {
            public string Name { get; set; }
            public string Image { get; set; }
        
        }

 

in this data model we are having two columns, So add one gridview and need to create two template fields in griview.

Step 1

Click on '>' mark button on the right side of gridview in Design view

Step 2

Edit Columns

Step 3 

Add Two template fields 

Step 4

Disable AutoGenerate Fields

 

Step 4

Step 5

Click on '>' button on right side of gridview and select Edit templates.

Step 6

Select column[0] -Name -> Item template.

Step 7

From the tool box Drag label control to item template place (To show the name).

Step 8

Select column[2] -Image -> Item template and From the tool box Drag Image control to item template place (To show the image).

Step 9

Click '>' button on the right side of image added on item template and select Edit Data Bindings.

Step 10

Select Image Url and Gice Eval("Image") where Image is the data model name

Step 11

Do the Same for Label control for name.

Step 12

Add some images in Images folder.

And Finaly the Asp design will be like 

    <asp:gridview ID="Gridview1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="Label1" Text = '<%# Eval("Name") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Image">
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("image") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:gridview>

 In Page Load add the code 

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<imagedata> images = new List<imagedata>();
                imagedata Image = new imagedata();
                Image.Name = "Lotus";
                Image.Image = "/images/lotus.jpg";
                images.Add(Image);
                Image = new imagedata();
                Image.Name = "Rose";
                Image.Image = "/Images/Rose.jpg";
                images.Add(Image);
                Gridview1.DataSource = images;
                Gridview1.DataBind();

            }

        }

Full C# Code 

public partial class Image_top_griview_Data_model : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<imagedata> images = new List<imagedata>();
                imagedata Image = new imagedata();
                Image.Name = "Lotus";
                Image.Image = "/images/lotus.jpg";
                images.Add(Image);
                Image = new imagedata();
                Image.Name = "Rose";
                Image.Image = "/Images/Rose.jpg";
                images.Add(Image);
                Gridview1.DataSource = images;
                Gridview1.DataBind();
            }
        }

        public class imagedata
        {
            public string Name { get; set; }
            public string Image { get; set; }
        }

    }

 

---

---