Introduction

This article explains how to bind the data to a GridView with Image and Fileupload Controls using TemplateFields.

Description

A GridView is a databound control for displaying and manipulating data in web applications. A GridView displays data in tabular format, in other words a collection of rows and columns. Here each row represents one record and each column represents one field in a database table.

In a GridView each column is represented by one TemplateField, each TemplateField can contain a HeaderTemplate, ItemTemplate, EditItemTemplate and FooterTemplate.

Frequently used Events

The following are frequently used events:

The following is an example to show the GridView with Edit, Cancel, Update, Delete and Pagination using TemplateFields.

Column Name Data Type
EmpId Int
EmpName Varchar(50)
EmpEmailId Varchar(50)
EmpMobileNum Bigint
EmpImage Varchar(256)

Set the ConnectionString in web.config as in the following:

  1. <connectionStrings>
  2. <add name="myconnection" connectionString="Data Source=ABHI-PC\SQLEXPRESS;Initial Catalog=Articles;Integrated Security=True"
  3. providerName="System.Data.SqlClient" />
  4. </connectionStrings>
Default.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html>
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. <style>
  8. .hdrow {
  9. text-align:center;
  10. color:White;
  11. background-color:midnightblue;
  12. height:30px;
  13. }
  14. .gridview
  15. {
  16. width:50%;
  17. background-color:white;
  18. margin:0px auto;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <form id="form1" runat="server">
  24. <div>
  25. <asp:GridView ID="gv1" runat="server" AutoGenerateColumns="false" OnRowEditing="gv1_RowEditing" OnRowUpdating="gv1_RowUpdating" OnRowCancelingEdit="gv1_RowCancelingEdit" OnRowDeleting="gv1_RowDeleting" CssClass="gridview" OnPageIndexChanging="gv1_PageIndexChanging" PageSize="3" AllowPaging="true">
  26. <Columns>
  27. <asp:TemplateField>
  28. <HeaderStyle CssClass="hdrow" />
  29. <HeaderTemplate>
  30. <asp:Label ID="hlbleid" runat="server" Text="Employee Id"></asp:Label>
  31. </HeaderTemplate>
  32. <ItemTemplate>
  33. <asp:Label ID="lbleid" runat="server" Text='<%# Eval("EmpId") %>'>
  34. </asp:Label>
  35. </ItemTemplate>
  36. </asp:TemplateField>
  37. <asp:TemplateField>
  38. <HeaderStyle CssClass="hdrow" />
  39. <HeaderTemplate>
  40. <asp:Label ID="hlblename" runat="server" Text="Employee Name"></asp:Label>
  41. </HeaderTemplate>
  42. <ItemTemplate>
  43. <asp:Label ID="lblename" runat="server" Text='<%# Eval("EmpName") %>'>
  44. </asp:Label>
  45. </ItemTemplate>
  46. <EditItemTemplate>
  47. <asp:TextBox ID="txtename" runat="server" Text='<%# Eval("EmpName") %>'>
  48. </asp:TextBox>
  49. </EditItemTemplate>
  50. </asp:TemplateField>
  51. <asp:TemplateField>
  52. <HeaderStyle CssClass="hdrow" />
  53. <HeaderTemplate>
  54. <asp:Label ID="hlblemid" runat="server" Text="Email ID"></asp:Label>
  55. </HeaderTemplate>
  56. <ItemTemplate>
  57. <asp:Label ID="lblemid" runat="server" Text='<%# Eval("EmpEmailId") %>'>
  58. </asp:Label>
  59. </ItemTemplate>
  60. <EditItemTemplate>
  61. <asp:TextBox ID="txtemid" runat="server" Text='<%# Eval("EmpEmailId") %>'>
  62. </asp:TextBox>
  63. </EditItemTemplate>
  64. </asp:TemplateField>
  65. <asp:TemplateField>
  66. <HeaderStyle CssClass="hdrow" />
  67. <HeaderTemplate>
  68. <asp:Label ID="hempnumber" runat="server" Text="Mobile Number"></asp:Label>
  69. </HeaderTemplate>
  70. <ItemTemplate>
  71. <asp:Label ID="lblmnumber" runat="server" Text='<%# Eval("EmpMobileNum") %>'>
  72. </asp:Label>
  73. </ItemTemplate>
  74. <EditItemTemplate>
  75. <asp:TextBox ID="txtmnumber" runat="server" Text='<%# Eval("EmpMobileNum") %>'>
  76. </asp:TextBox>
  77. </EditItemTemplate>
  78. </asp:TemplateField>
  79. <asp:TemplateField>
  80. <HeaderStyle CssClass="hdrow" />
  81. <HeaderTemplate>
  82. <asp:Label ID="hlblimg" runat="server" Text="Image"></asp:Label>
  83. </HeaderTemplate>
  84. <ItemTemplate>
  85. <asp:Image ID="img1" runat="server" ImageUrl='
  86. <%# "~/Images/"+Eval("EmpImage") %>' Height="100px" Width="100px" />
  87. </ItemTemplate>
  88. <EditItemTemplate>
  89. <asp:FileUpload ID="fu1" runat="server" />
  90. </EditItemTemplate>
  91. </asp:TemplateField>
  92. <asp:TemplateField>
  93. <HeaderStyle CssClass="hdrow" />
  94. <ItemTemplate>
  95. <asp:Button ID="btnedit" runat="server" Text="Edit" CommandName="Edit" />
  96. <asp:Button ID="btndelete" runat="server" Text="Delete" CommandName="Delete" />
  97. </ItemTemplate>
  98. <EditItemTemplate>
  99. <asp:Button ID="btnupdate" runat="server" Text="Update" CommandName="Update" />
  100. <asp:Button ID="btnDelete" runat="server" Text="Delete" CommandName="Delete" />
  101. </EditItemTemplate>
  102. </asp:TemplateField>
  103. </Columns>
  104. </asp:GridView>
  105. </div>
  106. </form>
  107. </body>
  108. </html>
Default.aspx.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  8. using System.Data.SqlClient;
  9. using System.Data;
  10. using System.Web.Configuration;
  12. public partial class _Default: System.Web.UI.Page
  13. {
  14. SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["connection1"].ConnectionString);
  15. protected void Page_Load(object sender, EventArgs e)
  16. {
  17. if (!IsPostBack)
  18. {
  19. Bind();
  20. }
  22. }
  23. public void Bind()
  24. {
  25. SqlCommand cmd = new SqlCommand("select * from Employee", con);
  26. SqlDataAdapter da = new SqlDataAdapter(cmd);
  28. DataSet ds = new DataSet();
  29. da.Fill(ds, "Employee");
  31. gv1.DataSource = ds;
  32. gv1.DataBind();
  33. }
  34. protected void gv1_RowEditing(object sender, GridViewEditEventArgs e)
  35. {
  36. gv1.EditIndex = e.NewEditIndex;
  37. Bind();
  38. }
  39. protected void gv1_RowUpdating(object sender, GridViewUpdateEventArgs e)
  40. {
  41. int index = e.RowIndex;
  43. GridViewRow row = (GridViewRow) gv1.Rows[index];
  45. Label eid = (Label) row.FindControl("lbleid");
  46. TextBox ename = (TextBox) row.FindControl("txtename");
  47. TextBox emid = (TextBox) row.FindControl("txtemid");
  48. TextBox mnumber = (TextBox) row.FindControl("txtmnumber");
  50. FileUpload fu = (FileUpload) row.FindControl("fu1");
  52. if (fu.HasFile)
  53. {
  55. string file = System.IO.Path.Combine(Server.MapPath("~/Images/"), fu.FileName);
  56. fu.SaveAs(file);
  58. SqlCommand cmd = new SqlCommand("update Employee set EmpImage = '" + fu.FileName + "' where EmpId=" + Convert.ToInt32(eid.Text) + "", con);
  60. con.Open();
  61. int res = cmd.ExecuteNonQuery();
  62. con.Close();
  63. }
  65. SqlCommand cmd1 = new SqlCommand("update Employee set EmpName='" + ename.Text + "',EmpEmailId='" + emid.Text + "',EmpMobileNum=" + Convert.ToInt64(mnumber.Text) + "", con);
  66. con.Open();
  67. int res1 = cmd1.ExecuteNonQuery();
  68. con.Close();
  70. if (res1 == 1)
  71. {
  72. Response.Write("<script>alert('Updation done!')</script>");
  73. }
  74. gv1.EditIndex = -1;
  75. Bind();
  76. }
  77. protected void gv1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
  78. {
  79. gv1.EditIndex = -1;
  80. Bind();
  81. }
  82. protected void gv1_RowDeleting(object sender, GridViewDeleteEventArgs e)
  83. {
  84. int index = e.RowIndex;
  86. GridViewRow row = (GridViewRow) gv1.Rows[index];
  88. Label eid = (Label) row.FindControl("lbleid");
  90. SqlCommand cmd = new SqlCommand("delete from Employee where EmpId=" + Convert.ToInt32(eid.Text) + "", con);
  91. con.Open();
  92. int res = cmd.ExecuteNonQuery();
  93. con.Close();
  95. if (res == 1)
  96. {
  97. Response.Write("<script>alert('Deletion done!')</script>");
  98. }
  99. Bind();
  100. }
  101. protected void gv1_PageIndexChanging(object sender, GridViewPageEventArgs e)
  102. {
  103. gv1.PageIndex = e.NewPageIndex;
  104. Bind();
  105. }
  106. }
Output