In this article I will explain with an example, how to use jQuery UI Dialog Modal Popup as Yes No Confirmation Box in ASP.Net using C# and VB.Net.
The jQuery UI Dialog Modal Popup can be configured to work as the JavaScript Yes No Confirmation Box by using Custom Buttons.
HTML Markup
The following HTML Markup consists of jQuery UI Script and CSS files inherited to use jQuery UI Dialog Modal Popup box, an HTML DIV and an ASP.Net Button with UseSubmitBehavior property set to False.
Inside the jQuery document ready event handler, the jQuery UI Dialog Modal Popup box is initialized and the Delete Button is assigned the jQuery click event handler.
In this scenario the jQuery UI Dialog Modal Popup box makes of Custom Buttons, to read more about it please refer my article jQuery UI Dialog Modal Popup Custom Buttons example.
The jQuery UI Dialog Modal Popup box has two Custom Buttons i.e. Yes and No. When the Yes Button is clicked, the rel attribute of the Delete button is set to value delete and the click event of the Delete Button is triggered.
And when the No Button is clicked, the jQuery UI Dialog Modal Popup box is closed using the “close” command.
When the Button is clicked, if the rel attribute does not have value delete, the jQuery UI Dialog Modal Popup box is opened using the “open” command, else using the __doPostBack function, the Sever Side event handler of the Button is triggered.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id*=btnDelete]").removeAttr("onclick");
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Confirmation",
width: 350,
height: 160,
buttons: [
{
id: "Yes",
text: "Yes",
click: function () {
$("[id*=btnDelete]").attr("rel", "delete");
$("[id*=btnDelete]").click();
}
},
{
id: "No",
text: "No",
click: function () {
$(this).dialog('close');
}
}
]
});
$("[id*=btnDelete]").click(function () {
if ($(this).attr("rel") != "delete") {
$('#dialog').dialog('open');
return false;
} else {
__doPostBack(this.name, '');
}
});
});
</script>
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="DeleteRecord" UseSubmitBehavior="false" />
<div id="dialog" style="display: none" align="center">
Do you want to delete this record?
</div>
Server Side Code
When the Yes option is clicked inside the jQuery UI Dialog Modal Popup box, the following event handler is raised which simulates deletion of record.
C#
protected void DeleteRecord(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Record Deleted.')", true);
}
VB.Net
Protected Sub DeleteRecord(sender As Object, e As EventArgs)
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Record Deleted.')", True)
End Sub
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
