Asp.net confirmation box with yes/no button options using modalpopup

By: Suresh Dasari Dec 23, 2011

Introduction:

Here I will explain how to implement confirmation box with Yes/No button options and change the style of Confirmation box in asp.net using Ajax ModalPopupExtender.

Description:

In many situations we will use confirmation box ex: During delete one record we will ask confirmation of user like “Are you sure you want to delete record?” if user clicks on Ok button we will delete particular record otherwise if clicks on Cancel button then we won’t delete users. Initially our default confirmation box will be like this

If we want to change the button options Ok, Cancel to Yes, No or if we want to change the style of Confirmation box we don’t have any chance to change the default style of our confirmation box. If we want to customize confirmation box we need to implement our own style of confirmation message box.

To implement this concept I search over the internet I find some JQuery plugins but I find that they used huge code to change style of confirmation box at that time I decided to implement our own for that I am using my previous posts Delete gridview records with confirmation box and how to use Ajax ModalPopup to edit gridview records in asp.net

First design table in your database like this

Column Name	Data Type	Allow Nulls
UserId	int(set identity property=true)	No
UserName	varchar(50)	Yes
FirstName	varchar(50)	Yes
LastName	varchar(50)	Yes

After that enter some dummy data in table to bind that data to gridview add AjaxControlToolkit.dll reference to your application you don’t know how to use AjaxControlToolkit no worry check this post how to install AjaxControlToolkit and design your aspx page like this

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

<title>Customized Style of Confirmation Box</title>

.modalBackground

{

background-color: Gray;

filter: alpha(opacity=80);

opacity: 0.8;

z-index: 10000;

}

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}

Table.Gridview{border:solid 1px #df5015;}

.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;padding:0.5em 0.5em 0.5em 0.5em;text-align:center}

.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;padding:0.5em 0.5em 0.5em 0.5em;}

.Gridview tr{color: Black; background-color: White; text-align:left}

:link,:visited { color: #DF4F13; text-decoration:none }

</style>

function closepopup() {

$find('ModalPopupExtender1').hide();

}

</script>

</head>

<body>

<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">

</ajax:ToolkitScriptManager>

<asp:UpdatePanel ID="updatepnl1" runat="server">

<asp:GridView runat="server" ID="gvDetails" CssClass="Gridview"

DataKeyNames="UserId" AutoGenerateColumns="false">

<asp:BoundField DataField="UserName" HeaderText="UserName" />

<asp:BoundField DataField="FirstName" HeaderText="FirstName" />

<asp:BoundField DataField="LastName" HeaderText="LastName" />

<asp:TemplateField>

<asp:ImageButton ID="btnDelete" ImageUrl="~/Images/Delete.png" runat="server" onclick="btnDelete_Click" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:Label ID="lblresult" runat="server"/>

<asp:Button ID="btnShowPopup" runat="server" style="display:none" />

<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"

CancelControlID="btnNo" BackgroundCssClass="modalBackground">

</ajax:ModalPopupExtender>

<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="100px" Width="400px" style="display:none">

<td style=" height:10%; color:White; font-weight:bold;padding:3px; font-size:larger; font-family:Calibri" align="Left">Confirm Box</td>

</td>

</tr>

<tr>

<asp:Label ID="lblUser" runat="server"/>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

</td>

<asp:ImageButton ID="btnYes" OnClick="btnYes_Click" runat="server" ImageUrl="~/Images/btnyes.jpg"/>

<asp:ImageButton ID="btnNo" runat="server" ImageUrl="~/Images/btnNo.jpg" />

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

After completion our aspx page design write the following namespaces in codebehind

C# Code

using System;

using System.Data;

using System.Data.SqlClient;

using System.Drawing;

using System.Web.UI;

using System.Web.UI.WebControls;

After completion of writing namespaces and write the following code

SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindUserDetails();

}

protected void BindUserDetails()

{

//connection open

con.Open();

//sql command to execute query from database

SqlCommand cmd = new SqlCommand("Select * from UserDetails", con);

cmd.ExecuteNonQuery();

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataSet ds = new DataSet();

da.Fill(ds);

//Binding data to gridview

gvDetails.DataSource = ds;

gvDetails.DataBind();

con.Close();

}

protected void btnYes_Click(object sender, ImageClickEventArgs e)

{

//getting userid of particular row

int userid = Convert.ToInt32(Session["UserId"]);

con.Open();

SqlCommand cmd = new SqlCommand("delete from UserDetails where UserId=" + userid, con);

int result = cmd.ExecuteNonQuery();

con.Close();

if (result == 1)

{

lblresult.Text = Session["UserName"] + " Details deleted successfully";

lblresult.ForeColor = Color.Green;

BindUserDetails();

}

protected void btnDelete_Click(object sender, ImageClickEventArgs e)

{

ImageButton btndetails = sender as ImageButton;

GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;

Session["UserId"] = gvDetails.DataKeys[gvrow.RowIndex].Value.ToString();

Session["UserName"] = gvrow.Cells[0].Text;

lblUser.Text = "Are you sure you want to delete " + Session["UserName"] + " Details?";

ModalPopupExtender1.Show();

}

VB.NET Code

Imports System.Data

Imports System.Data.SqlClient

Imports System.Drawing

Imports System.Web.UI

Imports System.Web.UI.WebControls

Partial Class _Default

Inherits System.Web.UI.Page

Private con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then

BindUserDetails()

End If

End Sub

Protected Sub BindUserDetails()

'connection open

con.Open()

'sql command to execute query from database

Dim cmd As New SqlCommand("Select * from UserDetails", con)

cmd.ExecuteNonQuery()

Dim da As New SqlDataAdapter(cmd)

Dim ds As New DataSet()

da.Fill(ds)

'Binding data to gridview

gvDetails.DataSource = ds

gvDetails.DataBind()

con.Close()

End Sub

Protected Sub btnYes_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)

'getting userid of particular row

Dim userid As Integer = Convert.ToInt32(Session("UserId"))

con.Open()

Dim cmd As New SqlCommand("delete from UserDetails where UserId=" & userid, con)

Dim result As Integer = cmd.ExecuteNonQuery()

con.Close()

If result = 1 Then

lblresult.Text = Convert.ToString(Session("UserName")) & " Details deleted successfully"

lblresult.ForeColor = Color.Green

BindUserDetails()

End If

End Sub

Protected Sub btnDelete_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)

Dim btndetails As ImageButton = TryCast(sender, ImageButton)

Dim gvrow As GridViewRow = DirectCast(btndetails.NamingContainer, GridViewRow)

Session("UserId") = gvDetails.DataKeys(gvrow.RowIndex).Value.ToString()

Session("UserName") = gvrow.Cells(0).Text

lblUser.Text = "Are you sure you want to delete " & Convert.ToString(Session("UserName")) & " Details?"

ModalPopupExtender1.Show()

End Sub

End Class

Demo

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

15 comments :

Dorababu said...: Hi suresh i need small help when the pop-up was opened i would like to make YES Image button get selected and when ever user press Enter on YES it should take corresponding action. If the user press NO i would like to cancel and close the pop-up..; January 6, 2012 at 7:37 PM
Anonymous said...: Thanks For Your Help !
Always Contribute on asp.net; May 8, 2012 at 8:47 PM
Anu Verma said...: Content is very Good, thanks for Help; May 26, 2012 at 10:16 AM
Unknown said...: Hi suresh I need ur help about this popup..
Can i open my aspx page into this popup???????; March 19, 2013 at 11:22 AM
Anonymous said...: Nice Thanks; June 28, 2013 at 9:25 AM
Surendra Yadav said...: Hi Suresh,

All of your posts are simple and nice. Thanks a lot.; July 9, 2013 at 11:26 PM
logesh said...: Hi, May I know the reason for hiding the button "btnShowPopUp" which you have set as TargetControlId.; July 25, 2013 at 12:49 AM
Unknown said...: hi sir,
i want to delete a data from list box using javascript yes ,no ...i refer your above code but i didnt understand cleary..can you help me for this..doubt is if user press yes then how to pass delete query yes....; September 14, 2013 at 12:20 AM
Anonymous said...: Congratulations for the excellent article.
Thanks for your help, helped me a lot, please follow placing items of this type.; January 31, 2014 at 8:45 AM
k2 said...: hi thank you very much for this. but, need confirm box to be arise after delete with message deleted successfully do u want to continue or not . plz help............; February 7, 2014 at 4:41 AM
Unknown said...: can I use it with out post back; February 16, 2014 at 6:27 AM
Anonymous said...: Can You do it without Session?? or other fields by passing Parameters from link button to confirm yes button?; July 8, 2014 at 9:21 PM
Unknown said...: Please present your data in tabular form for better understand; June 23, 2015 at 3:37 AM
Santhosh Kumar Y V said...: Thank you; June 16, 2016 at 10:33 PM
Unknown said...: Hi Suresh Sir,
I am using above example with ajax Update and Progress panel but the javascript function of Closepopup is not working ..
Please help me ....; June 17, 2016 at 7:52 AM