In this tutorial, I’ll show you how to use DropDownList inside GridView, and how to perform edit, update, delete operation on each field along with DropDownList.

INITIAL CHAMBER

Step 1: Open Visual Studio 2010 and create an empty website. Give a suitable name gridview_demo.

Step 2: In Solution Explorer you will get your empty website. Add a web form, SQL Database. By following these steps:
For Web Form

gridview_demo (Your Empty Website) - Right Click, Add New Item, then Web Form. Name it gridview_demo.aspx.

For SQL Server Database

gridview_demo (Your Empty Website) - Right Click, Add New Item, then SQL Server Database. Add Database inside the App_Data_folder.

DATABASE CHAMBER

Step 3: Go to your Database [Database.mdf], we will create a table - tbl_Data. Go to the database.mdf - Table, then Add New table. Design your table like the following:

Table - tbl_data [Don’t forget to make ID - Identity Specification - Yes]



Figure 1: Database

DESIGN CHAMBER

Step 5: Now Open your gridview_demo.aspx file, where we create our design for binding and performing edit, delete, and update operation with dropdownlist.

Gridview_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <div>
  11. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
  12. AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" DataKeyNames="id"
  13. onrowcancelingedit="GridView1_RowCancelingEdit"
  14. onrowdeleting="GridView1_RowDeleting" onrowediting="GridView1_RowEditing"
  15. onrowupdating="GridView1_RowUpdating" BackColor="White"
  16. BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CellPadding="3"
  17. CellSpacing="1" GridLines="None">
  18. <Columns>
  19. <asp:TemplateField HeaderText="Name">
  20. <EditItemTemplate>
  21. <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("name") %>'>
  22. </asp:TextBox>
  23. </EditItemTemplate>
  24. <ItemTemplate>
  25. <asp:Label ID="Label2" runat="server" Text='<%# Bind("name") %>'>
  26. </asp:Label>
  27. </ItemTemplate>
  28. </asp:TemplateField>
  29. <asp:TemplateField HeaderText="Email">
  30. <EditItemTemplate>
  31. <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("email") %>'>
  32. </asp:TextBox>
  33. </EditItemTemplate>
  34. <ItemTemplate>
  35. <asp:Label ID="Label3" runat="server" Text='<%# Bind("email") %>'>
  36. </asp:Label>
  37. </ItemTemplate>
  38. </asp:TemplateField>
  39. <asp:TemplateField HeaderText="Gender">
  40. <EditItemTemplate>
  41. <asp:DropDownList ID="DropDownList2" runat="server"
  42. SelectedValue='<%# Bind("gender") %>'>
  43. <asp:ListItem>--Select Gender--</asp:ListItem>
  44. <asp:ListItem>Male</asp:ListItem>
  45. <asp:ListItem>Female</asp:ListItem>
  46. </asp:DropDownList>
  47. </EditItemTemplate>
  48. <ItemTemplate>
  49. <asp:Label ID="Label4" runat="server" Text='<%# Bind("gender") %>'>
  50. </asp:Label>
  51. </ItemTemplate>
  52. </asp:TemplateField>
  53. </Columns>
  54. <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
  55. <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
  56. <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
  57. <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
  58. <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
  59. <SortedAscendingCellStyle BackColor="#F1F1F1" />
  60. <SortedAscendingHeaderStyle BackColor="#594B9C" />
  61. <SortedDescendingCellStyle BackColor="#CAC9C9" />
  62. <SortedDescendingHeaderStyle BackColor="#33276A" />
  63. </asp:GridView>
  64. </div>
  65. </form>
  66. </body>
  67. </html>
Your design looks like the following:



Figure 2: GridView

You have to look around this Property in GridView:
  1. DataKeysName: id.
  2. Auto Generate Delete Button: True.
  3. Auto Generate Edit Button : True.

In Events: [Make Double Click in each event shown below to go to the code]

  1. Row Cancelling Edit
  2. Row Deleting
  3. Row Editing
  4. Row Updating



Figure 3: Row

CODE CHAMBER

Step 6: Open your gridview_demo.aspx.cs and write some code so that our application starts working.

  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;
  7. using System.Data.SqlClient;
  8. using System.Data;
  10. public partial class _Default: System.Web.UI.Page
  11. {
  12. SqlConnection con = new SqlConnection(@
  13. "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  14. protected void Page_Load(object sender, EventArgs e)
  15. {
  17. if (!Page.IsPostBack)
  18. {
  19. refreshdata();
  20. }
  22. }
  24. public void refreshdata()
  25. {
  26. SqlCommand cmd = new SqlCommand("select * from tbl_data", con);
  27. SqlDataAdapter sda = new SqlDataAdapter(cmd);
  28. DataTable dt = new DataTable();
  29. sda.Fill(dt);
  30. GridView1.DataSource = dt;
  31. GridView1.DataBind();
  33. }
  34. protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
  35. {
  36. GridView1.EditIndex = e.NewEditIndex;
  37. refreshdata();
  38. }
  39. protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
  40. {
  41. int id = Convert.ToInt16(GridView1.DataKeys[e.RowIndex].Values["id"].ToString());
  42. SqlCommand cmd = new SqlCommand("delete from tbl_data where id = @id", con);
  43. cmd.Parameters.AddWithValue("@id", id);
  44. con.Open();
  45. cmd.ExecuteNonQuery();
  46. con.Close();
  47. refreshdata();
  49. }
  50. protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
  51. {
  52. GridView1.EditIndex = -1;
  53. refreshdata();
  54. }
  55. protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
  56. {
  57. int id = Convert.ToInt16(GridView1.DataKeys[e.RowIndex].Values["id"].ToString());
  58. TextBox txtname = GridView1.Rows[e.RowIndex].FindControl("TextBox2") as TextBox;
  59. TextBox txtemail = GridView1.Rows[e.RowIndex].FindControl("TextBox3") as TextBox;
  60. DropDownList drpgender = GridView1.Rows[e.RowIndex].FindControl("DropDownList2") as DropDownList;
  62. SqlCommand cmd = new SqlCommand("update tbl_data set name=@name, email=@email,gender=@gender where id =@id", con);
  63. cmd.Parameters.AddWithValue("@name", txtname.Text);
  64. cmd.Parameters.AddWithValue("@email", txtemail.Text);
  65. cmd.Parameters.AddWithValue("@gender", drpgender.SelectedItem.Text);
  66. cmd.Parameters.AddWithValue("@id", id);
  67. con.Open();
  68. cmd.ExecuteNonQuery();
  69. con.Close();
  70. refreshdata();
  71. }
  73. }
OUTPUT CHAMBER



Figure 4: Output

Update



Figure 5: Update



Figure 6: Update

Show table data



Figure 7: Show data

Hope you liked it. All controls are working, you can check out. Thank you for reading. Have a good day!