Display images in GridView control from DataBase in Asp.net


Posted Date: 09/09/2012     Posted By: Neeraj Yadav


Image in Gridview in Asp.Net



In this article, I am explaining how to store images in database and display images from database in the GridView Control.

Now follow steps as given below

Steps [1] Design image table which has stored the images



Steps [2] Create store procedure for insert image in table


create proc [dbo].[insert_catagory](@imagid int , @image_name varchar(50),
@imp_path varchar(250)) as

insert into image(image_id,image_name,image_path)
values(@imagid,@image_name, @imp_path)


Steps [3] Default.aspx


<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<asp:Label ID="lable1" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
Image id:
</td>
<td>
<asp:TextBox ID="txtImageId" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Image Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Upload Image:
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="submit" OnClick="Button1_Click" />
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit"
OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowDeleting="GridView1_RowDeleting">
<Columns>
<asp:BoundField DataField="image_id" HeaderText="Image ID" ReadOnly="True" />
<asp:BoundField DataField="image_name" HeaderText="Image Name" />
<asp:BoundField DataField="image_path" HeaderText="Image Path" />
<asp:TemplateField HeaderText="image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Width="40px" Height="40px" ImageUrl='<%#DataBinder.Eval(Container,"DataItem.image_path") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" HeaderText="Edit" />
<asp:CommandField HeaderText="Delete" ShowDeleteButton="True" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</form>
</body>


Steps [4] Default.aspx.cs



using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{

SqlConnection con = new SqlConnection("Data Source=NEERAJ-PC;Initial Catalog=neeraj;User ID=sa;pwd=sa");
SqlCommand cmd;
SqlDataAdapter da;
DataSet ds;
static int a = 0;


protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();

}
}

protected void Button1_Click(object sender, EventArgs e)
{
string str = Server.MapPath(@"Image/");
FileUpload1.SaveAs(str + FileUpload1.FileName);
string s3 = FileUpload1.FileName;

int m = Convert.ToInt32(txtImageId.Text);
con.Open();
int n =add_catagory(m, txtName.Text, s3);
if (n == 1)
{
Response.Write("Record inserted sucessfully");
txtImageId.Text = "";
txtName.Text = "";
}
BindGrid();

}
public int add_catagory(int s1, string s2, string s3)
{
cmd = new SqlCommand("insert_catagory", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@imagid", SqlDbType.Int).Value = s1;
cmd.Parameters.AddWithValue("@image_name", SqlDbType.VarChar).Value = s2;
cmd.Parameters.AddWithValue("@imp_path", SqlDbType.VarChar).Value = s3;
int k = cmd.ExecuteNonQuery();

return k;
}
public void BindGrid()
{

da = new SqlDataAdapter("select * from image", con);
ds = new DataSet();
da.Fill(ds, "t1");
GridView1.DataSource = ds.Tables[0];
GridView1.DataBind();
if (a == 0)
{
int n = ds.Tables[0].Rows.Count;
for (int i = 0; i < n; i++)
{
string file = ds.Tables[0].Rows[i][2].ToString();
string path = "Image/" + file;
Image im = (Image)GridView1.Rows[i].FindControl("Image1");
im.ImageUrl = path;
}
a = 1;
}
}

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
BindGrid();

}


protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
a = 0;
BindGrid();

}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
int img_id = Convert.ToInt32(GridView1.Rows[e.RowIndex].Cells[0].Text);
FileUpload fp = (FileUpload)GridView1.Rows[e.RowIndex].FindControl("FileUpload1");
TextBox img_name = (TextBox)GridView1.Rows[e.RowIndex].Cells[1].Controls[0];
TextBox imp_path = (TextBox)GridView1.Rows[e.RowIndex].Cells[2].Controls[0];
string imagepath = fp.FileName;
string s1 = Convert.ToString(img_name.Text);
string s3 = "IMAGE/" + fp.FileName;
if (fp.FileName == "")
{
s3 = imagepath;
}
else
{
fp.SaveAs(Server.MapPath("Image/" + fp.FileName));
}

string s = "update image set image_name='" + s1 + "',image_path='" + imagepath + "' where image_id=" + img_id;
execcutecommand(s);
GridView1.EditIndex = -1;
a = 0;
BindGrid();

}
public void execcutecommand(string s)
{
cmd = new SqlCommand(s, con);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int id = Convert.ToInt32(GridView1.Rows[e.RowIndex].Cells[0].Text);
string s = "delete from image where image_id =" + id;
execcutecommand(s);
a = 0;
BindGrid();
}

}


The figure below displays the GridView with the images from database





Login to give the Comment