ModalPopupExtender is nice control that can help us to generate popup using ajax control toolkit. Normally when a button that triggers the popup get clicked popup appears,the server side code in correponding button click not get called.
But Situation always demand something extra,this time I was strugling to show the popup depending upon condition which get evaluated in server side button click of ‘TargetControlID’ button.Second requirement was that if the user doesn’t respond to popup just remove it after certain times from it shown.
After lot of effort I finally made something that resemble my need.Altough I think I might have achieved same, using simple javascript,it is worth to something different.
Here is Code from ASPX
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalBackground {
background-color:white;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
<script type="text/javascript">
function hideAfterOneSec() {
alert('set timeout function');
setTimeout(hide, 3000);
}
function hide() {
$find('mdlPopup').hide();
document.getElementById('pnlPopup').style.visibility = "hidden";
document.getElementById('mdlPopup_backgroundElement').style.display = "none";
clearTimeout();
alert('cleared timeout');
}
function submitForm() {
alert('forcing postback');
__doPostBack('btnShowPopup', '');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<asp:Panel ID="pnlPopup" runat="server" style="border:1px solid red;display:none;" >
<table>
<tr>
<td colspan="2" style="font-weight:bold;font-size:medium;color:Green">
<asp:Label ID="LblResponse" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="background-image:url('images/ok.jpg');width:140px;height:150px;"></td>
<td>
<asp:Image ID="CartImage" runat="server" ImageUrl="~/images/cart.jpg" width="150px" height="150px"/>
</td>
</tr>
<tr>
<td colspan="2">
<b>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Continue Shopping" Value="doShopping"></asp:ListItem>
<asp:ListItem Text="Show My Cart" Value="showCart"></asp:ListItem>
</asp:RadioButtonList>
</b>
<asp:Button ID="BtnOk" runat="server" Text="Ok" />
</td>
</tr>
</table>
</asp:Panel>
<div>
<asp:ModalPopupExtender ID="ModalPopup1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="BtnOk" BackgroundCssClass="modalBackground" BehaviorID="mdlPopup" Enabled="false">
</asp:ModalPopupExtender>
</div>
<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup"
onclick="btnShowPopup_Click" OnClientClick="submitForm()"/>
</form>
</body>
</html>
Point to note here is
Initially ‘ModalPopupExtender’ is not enabled,
TargetControlID i.e. btnShowPopup has onclientclick script that always forces postback
hideAfterOneSec() function that I will latter attach as StartupScript on serverside click of target control ‘btnShowPopup’
serverside click of target control ‘btnShowPopup’ will evaulate condition and accordingly display message in label ‘LblResponse’.
Now Let’s Look intoCsharp code
Only Event that is of interest is ‘btnShowPopup_Click’
protected void btnShowPopup_Click(object sender, EventArgs e)
{
ClientScriptManager script = Page.ClientScript;
ModalPopup1.Hide();
/*delay to confirm the popup not spawn by clientside*/
for (int i = 0; i < 1000; i++)
{
}
/*Evaulate your condition here*/
/*Evaulate your condition here*/
LblResponse.Text = "You have successfully added 1 item(s) to your Cart !";
ModalPopup1.Enabled = true;
ModalPopup1.Show();
script.RegisterStartupScript(this.GetType(), "hideAfterOneSec", "<script type='text/javascript'>hideAfterOneSec()</script>");
}
Inside ‘btnShowPopup_Click’ we first hide our popup then we decide what message we want to display by evaulating condition,then placing the message into label which is inside the popup panel.
After we will show the popup.then we attach javascript that will remove popup after time specified in settimeout function (here 3000 ms).
Here I am changing only the Text of Label in serverside code. one can leverage it further to dynamically change inner content of Panel.but here the situation is that,user adds an item to cart he get popup if items get added succesfully,as item can go out of stock in between.
No comments:
Post a Comment