Introduction

In this blog, you will learn how to edit, update, delete, and cancel in GridView. First, drag and drop the GridView. In GridView properties, set AutoGenarateColumns to False.

Next, open Default.aspx source code. To make a column in GridView, use <asp:TemplateField>. Here, first, I created a table named 'Product' in my database. It contains 3 columns: ProductId, ProductName, and ProdcutPrice.
  1. Download Sample
  2. Inside that folder, a person.sql file will be there. Execute it in your database.
    1. /****** Object: Table [dbo].[Product] Script Date: 07/07/2012 02:18:07 ******/
    2. SET ANSI_NULLS ON
    3. GO
    5. SET QUOTED_IDENTIFIER ON
    6. GO
    8. SET ANSI_PADDING ON
    9. GO
    11. CREATE TABLE [dbo].[Product](
    12. [pk_id] [int] IDENTITY(1,1) NOT NULL,
    13. [ProductId] [varchar](5) NULL,
    14. [ProductName] [varchar](50) NULL,
    15. [ProductPrice] [numeric](8, 2) NULL,
    16. PRIMARY KEY CLUSTERED
    17. (
    18. [pk_id] ASC
    19. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
    20. ) ON [PRIMARY]
    22. GO
    24. SET ANSI_PADDING OFF
    25. GO
  3. Change the connection string in web.config file.
    1. <configuration>
    2. <connectionStrings>
    3. <add name="MyConnection"
    4. connectionString="Data Source=MONISH-PC\MONISH;Initial Catalog=master;Persist Security Info=True;User ID=saty;Password=123"
    5. providerName="System.Data.SqlClient" />
    6. </connectionStrings>

Building the Sample

This sample is written by three tier architecture so you have to add references.

  • UI->BusinessLogic
  • BusinessLogic->DataAccess back to BL
  • BusinessLogic->Commonfunctioon back to BL
  • BusinessLogic -> UI finally BL return data to UI

ASP.NET

ASP.NET

Description

In Default.aspx, we have to add the following source code. This is used to Edit the Row in Gridview. Here, I am going to edit only two columns - name and marks.

  1. <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" AutoGenerateColumns="False" onrowcancelingedit="GridView1_RowCancelingEdit" onrowdeleting="GridView1_RowDeleting" onrowediting="GridView1_RowEditing" onrowupdating="GridView1_RowUpdating">
  2. <AlternatingRowStyle BackColor="White" />
  3. <Columns>
  4. <asp:TemplateField Visible="False">
  5. <ItemTemplate>
  6. <asp:Label ID="lblPk_id" runat="server" Text='<%#Eval("pk_id")%>'></asp:Label>
  7. </ItemTemplate>
  8. </asp:TemplateField>
  9. <asp:TemplateField Headertext="ProductId">
  10. <EditItemTemplate>
  11. <asp:TextBox ID="txtProductId" runat="server" Text='<%#Eval("ProductId")%>'></asp:TextBox>
  12. </EditItemTemplate>
  13. <FooterTemplate>
  14. <asp:TextBox ID="txtProductId" runat="server" Text='<%#Eval("ProductId")%>'></asp:TextBox>
  15. </FooterTemplate>
  16. <ItemTemplate>
  17. <asp:Label ID="lblProductId" runat="server" Text='<%#Eval("ProductId")%>'></asp:Label>
  18. </ItemTemplate>
  19. </asp:TemplateField>
  20. <asp:TemplateField HeaderText="ProductName">
  21. <EditItemTemplate>
  22. <asp:TextBox ID="txtProductName" runat="server" Text='<%#Eval("ProductName")%>'></asp:TextBox>
  23. </EditItemTemplate>
  24. <FooterTemplate>
  25. <asp:TextBox ID="txtProductName" runat="server" Text='<%#Eval("ProductName")%>'></asp:TextBox>
  26. </FooterTemplate>
  27. <ItemTemplate>
  28. <asp:Label ID="lblProductName" runat="server" Text='<%#Eval("ProductName")%>'></asp:Label>
  29. </ItemTemplate>
  30. </asp:TemplateField>
  31. <asp:TemplateField HeaderText="ProductPrice">
  32. <EditItemTemplate>
  33. <asp:TextBox ID="txtProductPrice" runat="server" Text='<%#Eval("ProductPrice")%>'></asp:TextBox>
  34. </EditItemTemplate>
  35. <FooterTemplate>
  36. <asp:TextBox ID="txtProductPrice" runat="server" Text='<%#Eval("ProductPrice")%>'></asp:TextBox>
  37. </FooterTemplate>
  38. <ItemTemplate>
  39. <asp:Label ID="lblProductPrice" runat="server" Text='<%#Eval("ProductPrice")%>'></asp:Label>
  40. </ItemTemplate>
  41. </asp:TemplateField>
  42. <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
  43. <asp:TemplateField>
  44. <FooterTemplate>
  45. <asp:Button ID="btnInsert" runat="Server" Text="Insert" CommandName="Insert" UseSubmitBehavior="False" /> </FooterTemplate>
  46. </asp:TemplateField>
  47. </Columns>
  48. <EditRowStyle BackColor="#2461BF" />
  49. <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  50. <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  51. <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
  52. <RowStyle BackColor="#EFF3FB" />
  53. <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
  54. <SortedAscendingCellStyle BackColor="#F5F7FB" />
  55. <SortedAscendingHeaderStyle BackColor="#6D95E1" />
  56. <SortedDescendingCellStyle BackColor="#E9EBEF" />
  57. <SortedDescendingHeaderStyle BackColor="#4870BE" /> </asp:GridView>

Note - I have used SQL Server 2008.

Summary

For this article, we filled GridView with data from the database.

We can perform the following operations on data using GridView:

  1. Add New record into a database; here, data will directly be added to a database table.
  2. Update Records into the database, using edit link.
  3. Delete Records using delete link