What @ariful alam is suggesting is suggesting is getting rid of using the JavaScript alert/comfirm completely.
Instead you would have a
<div>
that would display your message and have 2 buttons "yes" and "no".
So, really your ImageButton would not submit anything to the server at all. When the user clicks the ImageButton, it would display the
<div>
that contains the message and the "yes" and "no" button.
The Yes button would be the thing that submit to the server...the No button would simply hide the
<div>
.
Something like this:
-
<div id="confirmSubmit" style="display:none; position:absolute; z-index:1; height:200px; width:200px;">
-
<div id="messageSection">
-
<p>Are you sure?</p>
-
</div>
-
<div id="buttonSection">
-
<asp:Button ID="userConfirmed" OnClick="btnDelete_Click" runat="server" Text="Yes" onclick="document.getElementByID('confirmSubmit').style.display='none'" />
-
<input type="button" onclick="document.getElementByID('confirmSubmit').style.display='none'">No</input>
-
</div>
-
</div>
-
Your ImageButton would execute some JavaScript to display the above
<div>
:
-
<asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/Images/icon/deletebuttonoff.png"
-
CausesValidation="False" OnClientClick="document.getElementByID('confirmSubmit').style.display='block'; return false;" />
Make sure that the function signature for the
btnDelete_Click
method works for the Yes button.
If you don't want to use html
<div>
and want to stick to ASP.NET controls, you can use Panels like this:
-
<asp:Panel ID="confirmSubmit" runat="server" style="display:none; position:absolute; z-index:1; height:200px; width:200px;">
-
<asp:Panel ID="messageSection" runat="server">
-
<p>Are you sure?</p>
-
</asp:Panel>
-
<asp:Panel ID="buttonSection" runat="server">
-
<asp:Button ID="userConfirmed" OnClick="btnDelete_Click" runat="server" Text="Yes" onclick="document.getElementByID('confirmSubmit').style.display='none'" />
-
<asp:Button ID="userCanceled" runat="server" onClientClick="document.getElementByID('confirmSubmit').style.display='none'; return false;" Text="No" />
-
</asp:Panel>
-
</asp:Panel>
-
You can get quite fancy with this. You could display a <div> over top of the content of the page while your message box is displaying to prevent people from interacting with the page. You can style the div to match the look and feel of your website...You can use asp.net Labels and localize your message to fit the language of the user...you could add images or whatever you want to your message...You can do quite a bit with it!
-Frinny