ASP.NET GridView: How to edit and delete data records

Question

Hi I have used gridview to create a table. Is there a way to implement edit and delete. I have done it in PHP before. The method I would like to use is create two more columns in the table with edit and delete buttons on each row. Then when the buttons are click it passes the 'id' through the URL and able to edit or delete. Not really sure how to do this in asp.net webforms. Below is my code for the table. Thank you.

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
    <asp:BoundField HeaderText="Surgery" DataField="surgery" />
    <asp:BoundField HeaderText="PatientID" DataField="patientID" />
    <asp:BoundField HeaderText="Location" DataField="location" />

</Columns>          

SqlCommand cmd = new SqlCommand("select surgery, patientID, location from details", conn);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
sda.Fill(dt);

conn.Close();

GridView1.DataSource = dt;
GridView1.DataBind();

Answer 1

The GridView supports those operations. You can add a CommandField which will contain the command buttons or LinkButtons (you can choose the type of button and assign the text of each button). The patientID field should be included in the DataKeyNames property of the GridView, in order to retrieve it when the time comes to update or delete the record in the database.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
    DataKeyNames="patientID" 
    OnRowEditing="GridView1_RowEditing" OnRowCancelingEdit="GridView1_RowCancelingEdit"
    OnRowUpdating="GridView1_RowUpdating" OnRowDeleting="GridView1_RowDeleting" >
<Columns>
    <asp:CommandField ShowEditButton="true" ShowCancelButton="true" ShowDeleteButton="true" />
    <asp:BoundField HeaderText="Surgery" DataField="surgery" />
    ...
</Columns>

You will then need to handle a few events in code-behind:

// The RowEditing event is called when data editing has been requested by the user
// The EditIndex property should be set to the row index to enter edit mode
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
    GridView1.EditIndex = e.NewEditIndex;
    BindData();
}

// The RowCancelingEdit event is called when editing is canceled by the user
// The EditIndex property should be set to -1 to exit edit mode
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
    GridView1.EditIndex = -1;
    BindData();
}

// The RowUpdating event is called when the Update command is selected by the user
// The EditIndex property should be set to -1 to exit edit mode
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    int patientID = (int)e.Keys["patientID"]
    string surgery = (string)e.NewValues["surgery"];
    string location = (string)e.NewValues["location"];

    // Update here the database record for the selected patientID

    GridView1.EditIndex = -1;
    BindData();
}

// The RowDeleting event is called when the Delete command is selected by the user
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
    int patientID = (int)e.Keys["patientID"]

    // Delete here the database record for the selected patientID

    BindData();
}

Since the data must be bound to the GridView at the end of each of those event handlers, you can do it in a BindData utility function, which should also be called when the page loads initially:

private void BindData()
{
    SqlCommand cmd = new SqlCommand("select surgery, patientID, location from details", conn);
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    sda.Fill(dt);
    conn.Close();
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

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