ModalPopupExtender with Yes/ No options without postback
Recently, I faced an issue while implementing ModalPopup in my project. As per project requirements. I want to show <b>confirmation with Yes/ No</b> options instead of Ok / Cancel. So, I go with Ajax ModalPopUpExtender control, but after using when I give Yes Page gets postback. But as per requirement we don't want postback. In this article I'm trying to explain how to show popup with Yes/ No confirmation and when I press Yes/ No / close how to avoid postback.
Background
Recently, I faced an issue while implementing ModalPopup in my project. As per project requirements. I want to show <b>confirmation with Yes/ No</b> options instead of Ok / Cancel.
So, I go with Ajax ModalPopUpExtender control, but after using when I give Yes Page gets postback. But as per requirement we don't want postback.
In this article I'm trying to explain how to show popup with Yes/ No confirmation and when I press Yes/ No / close how to avoid postback.Abstract
In this article I'm trying to explain how to work with ModalPopUpExtender. For this you must download the latest version of AjaxControlToolkit.dll and add Reference to the project.Description
The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it. Properties
TargetControlID — ID of the element that activates the modal popup.
PopupControlID – Id of the element to display as a modal popup.
CancelControlID - ID of the element that cancels the modal popup, but in my example I'm not using CancelControlID. I handle cancel action using Javascript function.
BackgroundCssClass - This is the property to set the back ground color while modal is appear in the screen.Source Code
Following code-snippet is of designing of our aspx page:
<style type="text/css">
.modalBackground
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
</style>
<script type="text/javascript">
function closepopup() {
$("#<%=pnlPopup.ClientID %>").hide();
$(".modalBackground").hide();
}
</script>
</head><body> <form id="form1" runat="server"> <div align="center"> <span class="style1"><strong>Ajax Modal PopUp</strong></span><br /> <br />
<asp:Button ID="btnShowPopup" Text="Show Popup" runat="server" Style="display: none" />
<cc1:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlPopup" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" BackColor="White" Height="100px"
Width="400px" Style="display: none">
<table width="100%" style="border: Solid 2px #D46900; width: 100%; height: 100%"
cellpadding="0" cellspacing="0">
<tr style="background-image: url(~/Images/header.gif)">
<td style="height: 10%; color: White; font-weight: bold; padding: 3px; font-size: larger;
font-family: Calibri" align="left">
Confirm Box
</td>
<td style="color: White; font-weight: bold; padding: 3px; font-size: larger" align="right">
<a href="javascript:void(0)" onclick="closepopup()">
<img src="~/Images/Close.gif" style="border: 0px" align="right" /></a>
</td>
</tr>
<tr>
<td colspan="2" align="left" style="padding: 5px; font-family: Calibri; font-size: 12px;">
<asp:Label ID="lblCancelText" runat="server" Text="Are you sure you want to cancel?"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
</td>
<td align="right" style="padding-right: 15px">
<asp:UpdatePanel ID="upCancel" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:ImageButton ID="btnCancelYes" OnClick="btnCancelYes_Click" runat="server"
ImageUrl="~/Images/btnyes.jpg" />
<a href="javascript:void(0)" onclick="closepopup()">
<img src="~/Images/btnNo.jpg" style="border: 0px" align="right" /></a>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnCancelYes" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>
</div> </form></body></html>Code Behind
Following code-snippet is from our aspx page code behind:
protected void btnCancelBriefYes_Click(object sender, EventArgs e)
{
mpe.Hide();
}Output
Here is the output:
ScriptManager
<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />
We need to include the above line under div tag, otherwise we will get the exception.Conclusion
Hope this article will helpful to some one those who are looking for the same.
Follow