Click here to Skip to main content
15,867,330 members
Articles / Web Development / ASP.NET

Popup Editing/Adding/Deleting Records with GridView

Rate me:
Please Sign up or sign in to vote.
4.86/5 (17 votes)
7 Jan 2014CPOL3 min read 140.3K   5.7K   40   21
ModalPopupExtender and ConfirmButtonExtender with GridView to View/Add/Edit data

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

  1. 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:
  2. Employee table contains columns for storing empid, ename, job, salary and deptno.

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

  3. Write three StoredProcedures to perform Add, Edit and Delete operations on database.
  4. Assuming that AjaxControlToolKit.dll is already added to the project and registered in web.config file as following in system.web tag:
  5. HTML
    <pages>
       <controls>
    <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"/>
       </controls>
    </pages> 
  6. Add one appSettings tag in Configuration tag as follows to set UnobtrusiveValidatonMode to false:
  7. HTML
    <appSettings>
        <add key="ValidationSettings:UnobtrusiveValidationMode" value="none"/>
    </appSettings> 
  8. Write ConnectionString in Configuration tag of web.config file
  9. 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.
  10. In head tag, add modalBackground class in style tag:
  11. ASP.NET
    <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.

  12. Now in form tag of Default.aspx page

    In UpdatePanel->

    • Add one Button control to Add new records
    • Add one GridView as follows:
      HTML
      <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:
      HTML
      <!--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.

  13. Understanding the controls used in this example:

    ControlIDDescription
    GridViewgvDisplay record in grid format
    ModalPopupExtendermpe1,mpe2,mpe3mpe1 is for adding new record, mpe2 is to edit existing record, mpe3 is to delete selected record
    RequiredFieldValidator rfv1 to rfv8Validating TextBoxes and DropdownList in web application
    ValidatorCalloutExtendervce1 to vce2Extending RequiredFieldValidators to enhance the default functionality
    PanelpanelAddNew, panelEdit, panelDeletepanelAddNew, panelEdit, panelDelete are added display popup windows to perform add, edit and delete operations
    ButtonbtnDummy1, btnDummy2Used 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.

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

    C#
    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();
            }
        }      
    }
  15. Run the project to check the output.

Output Widows

Default.aspx web page

Image 1

Web page for adding new record

Image 2

Web page for editing existing record

Image 3

Web page for deleting record

Image 4

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Student NA
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionAdd new second one - previous values stay in the text boxes and a drop down Pin
Dong Lee2-Aug-16 15:59
Dong Lee2-Aug-16 15:59 
QuestionDropdown list that passing the selected values. Pin
Member 1122788114-Jan-15 10:03
Member 1122788114-Jan-15 10:03 
QuestionAdding Stop work when place in MasterPage Pin
Member 112278819-Jan-15 8:37
Member 112278819-Jan-15 8:37 
QuestionI need Oracle Procedure for prcAddEmployee AND prcUpdateEmployee Pin
Member 1122788126-Nov-14 8:27
Member 1122788126-Nov-14 8:27 
QuestionHow create a High light Select for the Edit Pin
Member 1122788126-Nov-14 4:34
Member 1122788126-Nov-14 4:34 
QuestionError Message "ORA-00936: missing expression" Pin
Member 1122788126-Nov-14 2:44
Member 1122788126-Nov-14 2:44 
AnswerRe: Error Message "ORA-00936: missing expression" Pin
Member 1122788126-Nov-14 3:29
Member 1122788126-Nov-14 3:29 
GeneralRe: Error Message "ORA-00936: missing expression" Pin
Member 1122788126-Nov-14 3:58
Member 1122788126-Nov-14 3:58 
QuestionHow to appear gridview inside table of UpdatePanel Pin
Member 1085816225-Oct-14 17:14
Member 1085816225-Oct-14 17:14 
QuestionHow to add save multiple checkboxlist in panel Pin
Member 1085816227-Sep-14 20:16
Member 1085816227-Sep-14 20:16 
AnswerRe: How to add save multiple checkboxlist in panel Pin
Vinay Jade11-Oct-14 18:14
professionalVinay Jade11-Oct-14 18:14 
QuestionUpdate and delete not working Pin
Member 1060478316-Jun-14 4:04
Member 1060478316-Jun-14 4:04 
Pls help resolve..

Have tried all as instructed and the update isnt working

Below is the command i used for my update stored procedure


CREATE PROCEDURE prcUpdateEmployee
@tename NVARCHAR(50) = NULL ,
@tjob NVARCHAR(50) = NULL ,
@tsal NVARCHAR(50) = NULL ,
@tdeptno int

AS
BEGIN

Update Employee Set ename=@tename,job=@tjob,sal=@tsal,deptno=@tdeptno

END



ThanksConfused | :confused:
AnswerRe: Update and delete not working Pin
Vinay Jade28-Jul-14 7:48
professionalVinay Jade28-Jul-14 7:48 
Suggestion[My vote of 1] Your code incompatible with visual studio 2010 express Pin
Ni!E$H_WAGH26-Mar-14 17:47
professionalNi!E$H_WAGH26-Mar-14 17:47 
Bug[My vote of 1] BIG problem Pin
Dave Vroman13-Jan-14 8:56
professionalDave Vroman13-Jan-14 8:56 
GeneralRe: [My vote of 1] BIG problem Pin
Vinay Jade14-Jan-14 1:11
professionalVinay Jade14-Jan-14 1:11 
GeneralRe: [My vote of 1] BIG problem Pin
Dave Vroman14-Jan-14 11:52
professionalDave Vroman14-Jan-14 11:52 
GeneralRe: [My vote of 1] BIG problem Pin
Vinay Jade15-Jan-14 2:43
professionalVinay Jade15-Jan-14 2:43 
SuggestionSuggestions Pin
thatraja6-Jan-14 23:15
professionalthatraja6-Jan-14 23:15 
GeneralRe: Suggestions Pin
Vinay Jade7-Jan-14 0:48
professionalVinay Jade7-Jan-14 0:48 
GeneralRe: Suggestions Pin
thatraja7-Jan-14 1:16
professionalthatraja7-Jan-14 1:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.