Popup Editing/Adding/Deleting Records with GridView

<b style="color:OrangeRed;">Vinay</b> Jade

4.86/5 (16 votes)

Jan 6, 2014

CPOL

3 min read

143363

5774

ModalPopupExtender and ConfirmButtonExtender with GridView to View/Add/Edit data

Download source - 5 KB

Introduction

Ajax Control Toolkit is one of the finest supports provided by Microsoft to compete with modern web development technology. Use of Ajax makes a web application faster for access, gives responsiveness while interacting with the application, avoids full postback of the page and uses partial postback to perform the related operations. The following example is demonstrated using GridView and RequiredFieldValidator provided as server side control and UpdatePanel, ValidatorCalloutExtender and ModalPopupExtender provided as Ajax controls.

Background

The drawback of ASP.NET is that the web applications which are developed in ASP.NET are slower than other web applications. That's why Ajax came into the picture to solve the problem and increase the usability. This example shows how applications are developed in real time environment and what measures we should take into consideration to make ASP.NET websites have faster accessibility and good performance.

Goal

ASP.NET GridView control does not provide popup editing by default which is provided by Kendo-UI grid[^] and DevExpress grid[^], as this grid looks more interactive and provides ease while interacting with grid data. This type of interactive grid can be developed with the help of controls provided by AjaxControlToolkit. The following example is designed using ModelPopupExtender control which is available in AjaxControlToolkit to extend the functionality of GridView by providing editing/adding/deleting options within the popup window.

Using the Code

Create two tables. Emloyee to store employee's records and Dept to store department related records using SQL Server Management Studio as follows with primary key-foreign key relation on column deptno:

Employee table contains columns for storing empid, ename, job, salary and deptno.

Dept table contains columns for storing deptno and dname (department name).

Write three StoredProcedures to perform Add, Edit and Delete operations on database.
Assuming that AjaxControlToolKit.dll is already added to the project and registered in web.config file as following in system.web tag:

<pages>
   <controls>
<add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"/>
   </controls>
</pages>

Add one appSettings tag in Configuration tag as follows to set UnobtrusiveValidatonMode to false:

<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="none"/>
</appSettings>

Write ConnectionString in Configuration tag of web.config file
Add ASP.NET empty website template to the website project and name it as Default.aspx. In source view of Default.aspx, write the following code.
In head tag, add modalBackground class in style tag:

<head runat="server">
    <style type="text/css">
        .modalBackground {
            background-color:silver;
            opacity:0.7;
        }
    </style>
</head>

The above CSS class is added to use with BackgroundCssClass property of ModalPopupExtender. It will apply blackish effect on the web page during popup window display.

Now in form tag of Default.aspx page

In UpdatePanel->

Add one Button control to Add new records

Add one GridView as follows:

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" Width="100%" 
DataKeyNames="empid" BackColor="White" BorderColor="#CCCCCC" 
BorderStyle="Solid" BorderWidth="1px" CellPadding="4">
    <Columns>
      <asp:TemplateField HeaderText="Edit">
               <ItemTemplate>
                 <asp:LinkButton ID="lnkEdit" Text="Edit" 
                 OnClick="lnkEdit_Click" 
                 runat="server"></asp:LinkButton>
               </ItemTemplate>
       </asp:TemplateField>
       <asp:TemplateField HeaderText="Delete">
               <ItemTemplate>
                 <asp:LinkButton ID="lnkDel" Text="Delete" 
                 OnClick="lnkDel_Click" 
                 runat="server"></asp:LinkButton>
                </ItemTemplate>
       </asp:TemplateField>
       <asp:BoundField DataField="empid" HeaderText="Emp ID" />
       <asp:BoundField DataField="ename" HeaderText="Name" />
       <asp:BoundField DataField="job" HeaderText="Job" />
       <asp:BoundField DataField="sal" 
       HeaderText="Salary" DataFormatString="{0:N}"/>
       <asp:BoundField DataField="dname" HeaderText="Department" />
      </Columns>
</GridView>

Add panels for displaying popup window to add, delete and edit records along with ModalPopupExtender as follows:

<!--Panel to add new record-->
<ajaxToolkit:ModalPopupExtender ID="mpe1" runat="server" 
TargetControlID="btnAddNew1" PopupControlID="panelAddNew" 
RepositionMode="RepositionOnWindowResizeAndScroll" DropShadow="true" 
PopupDragHandleControlID="panelAddNewTitle" 
BackgroundCssClass="modalBackground"  ></ajaxToolkit:ModalPopupExtender>
  <asp:Panel ID="panelAddNew" runat="server" style="display:none; 
  background-color:gray;" ForeColor="Black" 
  Width="500" Height="210">
            <asp:Panel ID="panelAddNewTitle" runat="server" 
            style="cursor:move;font-family:Tahoma;padding:2px;" 
            HorizontalAlign="Center" BackColor="Blue" 
            ForeColor="White" Height="25" ><b>Add New</b>
            </asp:Panel>
            <table width="100%" style="padding:5px">
                <tr>
                <td colspan="3">
                    <asp:Label ID="lblStatus1" runat="server">
                    </asp:Label>
                </td>
                </tr>
                <tr>
                    <td><b>Enter Employee Name</b></td>
                    <td><b>:</b></td>
                    <td><asp:TextBox ID="txtName1" runat="server">
                    </asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv1" runat="server" 
                        ErrorMessage="Enter Name" Display="None"  
                        ControlToValidate="txtName1"  ValidationGroup="add">
                        </asp:RequiredFieldValidator>
                        <ajaxToolkit:ValidatorCalloutExtender ID="vce1" 
                        TargetControlID="rfv1" runat="server">
                        </ajaxToolkit:ValidatorCalloutExtender>
                    </td>
                </tr>
                <tr>
                    <td><b>Enter Job</b></td>
                    <td><b>:</b></td>
                    <td><asp:TextBox ID="txtJob1" runat="server">
                    </asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv2" runat="server" 
                        ErrorMessage="Enter Job"  Display="None" 
                        ControlToValidate="txtJob1"  ValidationGroup="add">
                        </asp:RequiredFieldValidator>
                        <ajaxToolkit:ValidatorCalloutExtender ID="vce2" 
                        runat="server" TargetControlID="rfv2" >
                        </ajaxToolkit:ValidatorCalloutExtender>
                    </td>
                </tr>
                <tr>
                    <td><b>Enter Salary</b></td>
                    <td><b>:</b></td>
                    <td><asp:TextBox ID="txtSal1" runat="server">
                    </asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv3" runat="server"  
                        ErrorMessage="Enter Salary" Display="None" 
                        ControlToValidate="txtSal1" ValidationGroup="add">
                        </asp:RequiredFieldValidator>
                        <ajaxToolkit:ValidatorCalloutExtender runat="server"  
                        ID="vce3" TargetControlID="rfv3" >
                        </ajaxToolkit:ValidatorCalloutExtender>
                    </td>
                </tr>
                <tr>
                    <td><b>Select Department</b></td>
                    <td><b>:</b></td>
                    <td><asp:DropDownList ID="ddlAdd" runat="server">
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="rfv4" runat="server" 
                        InitialValue="0" ErrorMessage="Select Department" 
                        Display="None" ControlToValidate="ddlAdd"  
                        ValidationGroup="add"></asp:RequiredFieldValidator>
                        <ajaxToolkit:ValidatorCalloutExtender runat="server" 
                        ID="vce4" TargetControlID="rfv4" >
                        </ajaxToolkit:ValidatorCalloutExtender>
                    </td>
                </tr>
            </table>
            <br />
                <div align="center">
                <asp:Button ID="btnAddNew2" runat="server" 
                Width="70" Text="Add" 
                OnClick="btnAddNew_Click"  ValidationGroup="add"/>
                &nbsp;
                <asp:Button ID="btnCancel1" runat="server" 
                Width="70" Text="Cancel" 
                CausesValidation="false" OnClick="Cancel_Click" 
                ValidationGroup="add"/>
            </div>
        </asp:Panel> 
<!--Panel to Edit record-->

like above add panels to edit and delete records.

Understanding the controls used in this example:

Control	ID	Description
`GridView`	`gv`	Display record in grid format
`ModalPopupExtender`	`mpe1`,`mpe2`,`mpe3`	`mpe1` is for adding new record, `mpe2` is to edit existing record, `mpe3` is to delete selected record
`RequiredFieldValidator`	`rfv1` to `rfv8`	Validating `TextBoxes` and `DropdownList` in web application
`ValidatorCalloutExtender`	`vce1` to `vce2`	Extending `RequiredFieldValidators` to enhance the default functionality
`Panel`	`panelAddNew`, `panelEdit`, `panelDelete`	`panelAddNew`, `panelEdit`, `panelDelete` are added display popup windows to perform add, edit and delete operations
`Button`	`btnDummy1`, `btnDummy2`	Used for `TargetContolID` property of `ModalPopupExtender` because Linkbuttons are child control of `GridView` and cannot be use for `TargetControlID` property of `ModalPopupExtender`

Note: ModalPopupExtender and Panel control can be used in ItemTemplate of GridView but the problem is that all these controls will repeat for each record in GridView. So to avoid this un-necessary repetition, these controls are taken outside of GridView.

Now in Default.aspx.cs file, add the following code:

public partial class _Default : System.Web.UI.Page
{
    SqlConnection cn = null;
    SqlDataAdapter da = null;
    SqlDataReader dr = null;
    SqlCommand cmd = null;
    DataSet ds = null;
    string sqlQry = null;
    
    protected void Page_Load(object sender, EventArgs e)
    {
        cn = new SqlConnection();
        cn.ConnectionString = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;
        if (!Page.IsPostBack)
        {
            Bind_Data();
            Bind_Data_Ddl(ddlAdd);
            Bind_Data_Ddl(ddlEdit);
        }
    }
    
    void Bind_Data_Ddl(DropDownList ddl)    //Binding Data to DropdownLists
    {
        sqlQry = "select deptno,dname from dept";
        da = new SqlDataAdapter(sqlQry, cn);
        ds = new DataSet();
        da.Fill(ds, "dept");
        ddl.DataSource = ds.Tables["dept"];
        ddl.DataTextField = "dname";
        ddl.DataValueField = "deptno";
        ddl.DataBind();
        ddl.Items.Insert(0,new ListItem ("Select","0"));
    }

    void Bind_Data()    //Binding Data to GridView
    {
        sqlQry = "select e.empid,e.ename,e.job,e.sal,
        d.dname from employee e,dept d where e.deptno=d.deptno";
        da = new SqlDataAdapter(sqlQry, cn);
        ds = new DataSet();
        da.Fill(ds, "emp");
        gv.DataSource = ds;
        gv.DataMember = "emp";
        gv.DataBind();
    }

    void End_Block(Panel p)    //Clearing TextBoxes and DropdownLists
    {
        foreach (dynamic txtBox in p.Controls)
        {
            
                if(txtBox is TextBox)
                txtBox.Text = String.Empty;
            
        }
        ddlEdit.ClearSelection();
        ddlAdd.ClearSelection();
        mpe1.Hide();
        mpe2.Hide();
        mpe3.Hide();
        
    }   
  
  //Code to add new record in database
   protected void btnAddNew_Click(object sender, EventArgs e)
    {
        try
        {
            if (cn.State != ConnectionState.Open)
                cn.Open();
            cmd = new SqlCommand();
            cmd.CommandText = "prcAddEmployee";
            cmd.Connection = cn;
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@tename", txtName1.Text);
            cmd.Parameters.AddWithValue("@tjob", txtJob1.Text);
            cmd.Parameters.AddWithValue("@tsal", txtSal1.Text);
            cmd.Parameters.AddWithValue("@tdeptno", ddlAdd.SelectedValue);
            cmd.ExecuteNonQuery();
            mpe1.Hide();
        }
        catch(SqlException e)
        {
            lblStatus1.Text = "Record is not added";
            mpe1.Show();
        }
        finally
        {
            Bind_Data();
            cmd.Dispose();
            cn.Close();
        }
    }

    protected void Cancel1_Click(object sender, EventArgs e)
    {
        End_Block(panelAddNew);
    }
   
    //Code to edit existing record in database
    protected void lnkEdit_Click(object sender, EventArgs e)
    {
        try
        {
            LinkButton lnk = sender as LinkButton;
            GridViewRow gr = (GridViewRow)lnk.NamingContainer;
            string tempID = gv.DataKeys[gr.RowIndex].Value.ToString();
            ViewState["tempId"] = tempID;
            sqlQry = "select ename,job,sal,
            deptno from employee where empid=" + tempID;
            if (cn.State != ConnectionState.Open)
                cn.Open();
            cmd = new SqlCommand(sqlQry, cn);
            dr = cmd.ExecuteReader();
            if (dr.Read())
            {
                txtName2.Text = dr["ename"].ToString();
                txtJob2.Text = dr["job"].ToString();
                txtSal2.Text = dr["sal"].ToString();
                ddlEdit.SelectedIndex = ddlEdit.Items.IndexOf
                (ddlEdit.Items.FindByValue(dr["deptno"].ToString()));
            }
            mpe2.Show();
        }
        catch(SqlException e)
        {
          return;
        }
        finally
        {
            cmd.Dispose();
            dr.Close();
            cn.Close();
        }
    }

    protected void btnUpdate_Click(object sender, EventArgs e)
    {
        try
        {
            if (cn.State != ConnectionState.Open)
                cn.Open();
            cmd = new SqlCommand();
            cmd.CommandText = "prcUpdateEmployee";
            cmd.Connection = cn;
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@tempid", 
            Convert.ToInt16(ViewState["tempId"].ToString()));
            cmd.Parameters.AddWithValue("@tename", txtName2.Text);
            cmd.Parameters.AddWithValue("@tjob", txtJob2.Text);
            cmd.Parameters.AddWithValue("@tsal", txtSal2.Text);
            cmd.Parameters.AddWithValue("@tdeptno", ddlEdit.SelectedValue);
            cmd.ExecuteNonQuery();
        }
        catch(SqlException e)
        {
            lblStatus2.Text = "Record is not updated";
            mpe2.Show();
        }
        finally
        {
            Bind_Data();
            cmd.Dispose();
            cn.Close();
        }        
    }

    protected void Cancel2_Click(object sender, EventArgs e)
    {
        End_Block(panelEdit);
    } 

    //Code to delete record from database
    protected void lnkDel_Click(object sender, EventArgs e)
    {
        try
        {
            LinkButton lnk = sender as LinkButton;
            GridViewRow gr = (GridViewRow)lnk.NamingContainer;
            string tempID = gv.DataKeys[gr.RowIndex].Value.ToString();
            ViewState["tempId"] = tempID;
            sqlQry = "select empid from employee where empid=" + tempID;
            if (cn.State != ConnectionState.Open)
                cn.Open();
            cmd = new SqlCommand(sqlQry, cn);
            dr = cmd.ExecuteReader();
            if (dr.Read())
            {
                lblId.Text = dr.GetValue(0).ToString();
            }
            mpe3.Show();
        }
        catch(SqlException e)
        {
            return;
        }
        finally
        {
            cmd.Dispose();
            dr.Close();
            cn.Close();
        }
    }

    protected void btnDelete_Click(object sender, EventArgs e)
    {
        try
        {
            if (cn.State != ConnectionState.Open)
                cn.Open();
            cmd = new SqlCommand();
            cmd.CommandText = "prcDeleteEmployee";
            cmd.Connection = cn;
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@tempid", 
            Convert.ToInt16(ViewState["tempId"].ToString()));
            cmd.ExecuteNonQuery();
            mpe3.Hide();
        }
        catch(SqlException e)
        {
            lblStatus3.Text = "Record not deleted";
            mpe3.Show();
        }
        finally
        {
            Bind_Data();
            cmd.Dispose();
            cn.Close();
        }
    }      
}

Run the project to check the output.

Output Widows

Default.aspx web page

Web page for adding new record

Web page for editing existing record

Web page for deleting record

Points of Interest

Measures which are taken into consideration while implementing this example are as follows:

Use of AjaxControlToolKit controls to make the web application faster, interactive and responsive.
Use of stored procedures to avoid SQL Injection attacks.
Writing ConnectionStrings into web.config file so that it can be accessed anywhere in the project by using ConfigurationManager class.