Hi
These are the few steps do this task
Step 1:Take a script Manager ajax control in Default page
Step 2:Write the Css code for modal popup Like this
<style type=”text/css”>
/*Modal Popup*/
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style
Step 3: Take the gridview control
Step 4: Keep the ConfirmButtonExtender(Ajax control),ModalPopupExtender(Ajax Control) and Panal (for display the custom Delete message) in Template field of gridview.
<asp:TemplateField HeaderText=”Action”>
<ItemTemplate><asp:LinkButton ID=”delete” runat=”server” CommandName=”Delete” Text=”Delete” />
<ajaxtoolkit:ConfirmButtonExtender TargetControlID=”delete” ID=”confBtnDelete” runat=”server”
DisplayModalPopupID=”ModalPopupExtender1″/><ajaxtoolkit:ModalPopupExtender ID=”ModalPopupExtender1″ runat=”server” TargetControlID=”delete”
PopupControlID=”PNL” OkControlID=”ButtonOk” CancelControlID=”ButtonCancel” BackgroundCssClass=”modalBackground” />
<asp:Panel ID=”PNL” runat=”server” Style=”display: none; width: 200px; background-color: White;
border-width: 2px; border-color: Black; border-style: solid; padding: 20px;”>
Are you sure you want to delete this data?
<br />
<br />
<div style=”text-align: right;”>
<asp:Button ID=”ButtonOk” runat=”server” Text=”OK” />
<asp:Button ID=”ButtonCancel” runat=”server” Text=”Cancel” />
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
Step 5: Configure the DataSource Control like this
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:testConnectionString %>”
DeleteCommand=”DELETE FROM [tblStory] WHERE [Id] = @Id” ProviderName=”<%$ ConnectionStrings:testConnectionString.ProviderName %>”
SelectCommand=”SELECT [Id], [Desc1] FROM [tblStory]”>
</asp:SqlDataSource>
Step 6: Compile the code. You will get the expected alert box.
Whole Default.aspx code is like
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”AjaxConfirmayion.aspx.cs” Inherits=”AjaxConfirmayion” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajaxtoolkit” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><script runat=”server”>
</script>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″ runat=”server”>
<title></title>
<style type=”text/css”>
/*Modal Popup*/
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<div><asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager></div>
<div style=”margin-left:280px; margin-top:190px; “><asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False” DataKeyNames=”Id”
DataSourceID=”SqlDataSource1″ EmptyDataText=”There are no data records to display.”
AllowPaging=”True” CellPadding=”4″ ForeColor=”#333333″
Width=”476px” style=”margin-right: 150px”>
<RowStyle BackColor=”#EFF3FB” />
<Columns><asp:BoundField DataField=”Id” HeaderText=”Id” />
<asp:BoundField DataField=”Desc1″ HeaderText=”Description” />
<asp:TemplateField HeaderText=”Action”>
<ItemTemplate><asp:LinkButton ID=”delete” runat=”server” CommandName=”Delete” Text=”Delete” />
<ajaxtoolkit:ConfirmButtonExtender TargetControlID=”delete” ID=”confBtnDelete” runat=”server”
DisplayModalPopupID=”ModalPopupExtender1″/><ajaxtoolkit:ModalPopupExtender ID=”ModalPopupExtender1″ runat=”server” TargetControlID=”delete”
PopupControlID=”PNL” OkControlID=”ButtonOk” CancelControlID=”ButtonCancel” BackgroundCssClass=”modalBackground” />
<asp:Panel ID=”PNL” runat=”server” Style=”display: none; width: 200px; background-color: White;
border-width: 2px; border-color: Black; border-style: solid; padding: 20px;”>
Are you sure you want to delete this data?
<br />
<br />
<div style=”text-align: right;”>
<asp:Button ID=”ButtonOk” runat=”server” Text=”OK” />
<asp:Button ID=”ButtonCancel” runat=”server” Text=”Cancel” />
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField></Columns>
<FooterStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” />
<PagerStyle BackColor=”#2461BF” ForeColor=”White” HorizontalAlign=”Center” />
<SelectedRowStyle BackColor=”#D1DDF1″ Font-Bold=”True” ForeColor=”#333333″ />
<HeaderStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” />
<EditRowStyle BackColor=”#2461BF” />
<AlternatingRowStyle BackColor=”White” />
</asp:GridView></div>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:testConnectionString %>”
DeleteCommand=”DELETE FROM [tblStory] WHERE [Id] = @Id” ProviderName=”<%$ ConnectionStrings:testConnectionString.ProviderName %>”
SelectCommand=”SELECT [Id], [Desc1] FROM [tblStory]”>
</asp:SqlDataSource>
</form>
</body>
</html>You can download the Source code from here
http://cid-4b1f6c3e92f6522c.office.live.com/browse.aspx/.Public?uc=1
Chandradev's Blog 