Home > AJAX > Delete Record from Gridview using Modal Popup Extender

Delete Record from Gridview using Modal Popup Extender


Hi

try this example to delete record from Gridview using Modal Popup Extender

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        //  keeps track of the delete button for the row
        //  that is going to be removed
        var _source;
        // keep track of the popup div
        var _popup;
       
        function showConfirm(source){
            this._source = source;
            this._popup = $find('mdlPopup');
           
            //  find the confirm ModalPopup and show it   
            this._popup.show();
        }
       
        function okClick(){
            //  find the confirm ModalPopup and hide it   
            this._popup.hide();
            //  use the cached button as the postback source
            __doPostBack(this._source.name, '');
        }
       
        function cancelClick(){
            //  find the confirm ModalPopup and hide it
            this._popup.hide();
            //  clear the event source
            this._source = null;
            this._popup = null;
        }
    </script>
    <style type="text/css">
        .modalBackground {
            background-color:Gray;
            filter:alpha(opacity=70);
            opacity:0.7;
        }
        .confirm{
           background-color:White;
           padding:10px;
           width:370px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <strong>Delete with ModalPopUp Extender and Paging<br />
        </strong>
        <br />
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <p style="background-color:AliceBlue; width:95%">
                Example of using a ModalPopupExtender as a delete confirm button<br />
                for the indivdual rows of a GridView.  To test out the functionality,<br />
                click the Delete button of any of the rows and watch what happens.<br />
            </p>
            <br />
            &nbsp;<cc1:ModalPopupExtender ID="md1" BehaviorID="mdlPopup" runat="server"
                TargetControlID="div" PopupControlID="div"
                OkControlID="btnOk" OnOkScript="okClick();"
                CancelControlID="btnNo" OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>
            <div id="div" runat="server" align="center" class="confirm" style="display:none">
                Are you sure you want to delete this item?
                <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
                <asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
            </div>
        </div>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePanel">
            <ProgressTemplate>
                    <asp:Label ID="lblProgress" runat="server" Text="Loading . . . . . "></asp:Label>
                <img src="images/progress_ani.gif" />
            </ProgressTemplate>
        </asp:UpdateProgress>
         <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>           
                    <asp:Label ID="lblTitle" runat="server" BackColor="LightBlue" Width="95%" />
                    <asp:GridView
                        ID="gvToDoList" runat="server" AutoGenerateColumns="False" Width="95%" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowPaging="True" AllowSorting="True" >
                        <AlternatingRowStyle BackColor="AliceBlue" />
                        <HeaderStyle HorizontalAlign="Left" />
                        <Columns>
                            <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
                            <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" />
                            <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <asp:Button
                                        ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;"
                                        OnClick="BtnDelete_Click" Text="Delete" CommandArgument='<%# Eval("CustomerID") %>' />
                                </ItemTemplate>
                                <ControlStyle Width="50px" />
                                <ItemStyle HorizontalAlign="Center" />
                                <HeaderStyle Width="60px" />
                            </asp:TemplateField>                           
                        </Columns>                   
                    </asp:GridView>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                        SelectCommand="SELECT * FROM [Customers]">
                    </asp:SqlDataSource>
                </ContentTemplate>
            </asp:UpdatePanel>
    </form>
</body>
</html>

in code behind:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void BtnDelete_Click(object sender, EventArgs e)
    {
        //  get the gridviewrow from the sender so we can get the datakey we need
        Button btnDelete = sender as Button;
        SqlConnection conn = new SqlConnection(
            ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
        SqlCommand cmd = new SqlCommand(
            "DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID",
            conn);
        cmd.Parameters.AddWithValue("CustomerID", btnDelete.CommandArgument);

        try
        {
            conn.Open();

            if (cmd.ExecuteNonQuery().Equals(1))
            {
                gvToDoList.DataBind();
            }
        }
        finally
        {
            conn.Close();
        }

    }
}

Hope it helps

Good Luck

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: