Here I have created sample that two pages on one page (i.e. Customer.aspx ) that populating the grid view containing customers details with his/her image, also you can update the details of customer by clicking update link inside the grid view, when you click on the update link it will redirect to another page containing whole customer details on this page you can update the customer details. This will reflect changes inside the grid view as well as the database.
Customers.aspx
HTML
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="Image1" ImageUrl='<% # Eval("CustomerId","images/{0}.jpg") %>' Width="50px"
Height="50px" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField Text="Update" DataNavigateUrlFields="CustomerId" DataNavigateUrlFormatString="UpdateCustomer.aspx?CustomerId={0}" />
</Columns>
</asp:GridView>
</div>
</form>
Namespaces
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.GetCustomers();
}
}
private void GetCustomers()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT CustomerId,Name,Country FROM Customers", con))
{
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
DataTable images = new DataTable();
da.Fill(images);
gvCustomers.DataSource = images;
gvCustomers.DataBind();
}
}
}
}
UpdateCustomer.aspx
HTML
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Label Text="CustomerID" runat="server" />
</td>
<td>
<asp:Label ID="lblCustomerID" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label Text="Name" runat="server" />
</td>
<td>
<asp:TextBox ID="txtName" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label Text="Countries" runat="server" />
</td>
<td>
<asp:DropDownList ID="ddlCountries" runat="server">
<asp:ListItem Text="Select Country" Value="Select Country" />
<asp:ListItem Text="United States" Value="United States" />
<asp:ListItem Text="India" Value="India" />
<asp:ListItem Text="France" Value="France" />
<asp:ListItem Text="Russia" Value="Russia" />
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label Text="Image" runat="server" />
</td>
<td>
<asp:Image ID="imgCustomer" runat="server" Width="50px" Height="50px" />
</td>
</tr>
<tr>
<td>
<asp:Label Text="Upload File" runat="server" />
</td>
<td>
<asp:FileUpload ID="fileUpload1" runat="server" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<asp:Button ID="btnUpdate" Text="Update" runat="server" OnClick="CustomerUpdate" />
</td>
</tr>
</table>
</div>
</form>
Namespaces
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
C#
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.GetCustomer();
}
}
protected void CustomerUpdate(object sender, EventArgs e)
{
this.CustomerUpdate();
}
private int id
{
get
{
return !string.IsNullOrEmpty(Request.QueryString["CustomerId"]) ? int.Parse(Request.QueryString["CustomerId"]) : 0;
}
}
private void CustomerUpdate()
{
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("UPDATE Customers SET Name=@Name, Country=@Country WHERE CustomerId=@CustomerId", con))
{
if (this.fileUpload1.HasFile)
{
string fileName = Path.GetFileName(this.fileUpload1.FileName);
string filePath = "~/images/" + id.ToString() + ".jpg";
cmd.Parameters.AddWithValue("@CustomerId", id);
cmd.Parameters.AddWithValue("@Name", txtName.Text);
cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
this.SaveImage(filePath);
Response.Redirect(Request.Url.AbsoluteUri, false);
Response.Redirect("~/Customers.aspx");
}
}
}
}
private void GetCustomer()
{
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT CustomerId,Name,Country FROM Customers WHERE CustomerId=@CutomerId", con))
{
cmd.Parameters.AddWithValue("@CutomerId", id);
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
DataTable images = new DataTable();
da.Fill(images);
foreach (DataRow dr in images.Rows)
{
this.lblCustomerID.Text = dr["CustomerId"].ToString();
this.txtName.Text = dr["Name"].ToString();
this.ddlCountries.SelectedItem.Value = dr["Country"].ToString();
this.imgCustomer.ImageUrl = "~/images/" + dr["CustomerId"].ToString() + ".jpg";
}
}
}
}
}
private void SaveImage(string file)
{
if (this.fileUpload1.HasFile)
{
this.fileUpload1.PostedFile.SaveAs(Server.MapPath(file));
}
}
Screenshots
1)Customers gridview before update

2)update Customer

3)Customer gridview after update
