In this Blog we will evaluate
ASP.NET ModalPopUp ajax extender control.
Using this control we will show
ModalPopUp in pageload & this popup should be shown to user only once during the
session i.e. popup should not be shown when page is refreshed and should not be
shown after returning back to this page before session expires.
Let's dig into this article by
following below steps:
1. As
we all know the primary control to be used whenever we use .NET Ajax control.
Yes you have guessed it right it's not other than ScriptManager control. Add
this to the form
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
2. Next
we need ModalPopUp extender control
<asp:ModalPopupExtender
runat="server"
ID="myExtender"
BackgroundCssClass="myModalPopupbackGrnd"
PopupControlID="myPopup"
TargetControlID="myhiddencontrol">
</asp:ModalPopupExtender>
myExtender:
Modalpopup control ID
myModalPopupbackGrnd:
background CSS name for entire page
myPopup: Name of panel which
will be shown as PopUp
myhiddencontrol: Modalpopup
extender expects target control ID. Based on this control event extenders are
executed. For example if we want popup to shown upon click event these we need
to give button control ID. But in our case we want to show popup on page load we
will give label ID
3 Now let's
add the panel which will be shown as popup
<asp:Panel
ID="myPopup"
runat="server"
CssClass="myModalPopup"
Style="display:
none;">
<asp:Panel
ID="dragHandler"
runat="server">
Welcome</asp:Panel>
<div
style="padding:
3px;">
This is a demo popup extender
</div>
<div
style="width:
500px; text-align:
right;">
<asp:Button
ID="btnOK"
runat="server"
Text="Thanks!"
/>
</div>
</asp:Panel>
In panel we will place our
content which is to be shown in popup.
dragHandler: panel to show
header & by selecting this we can move popup.
btnOK: button ok upon clicking
we will hide popup
4. To
make our popup to be drag we need to add DragHandler & provide the DragHandler
ID with the Panel ID which is inside PopUp panel
<asp:DragPanelExtender
ID="drgPnlExt"
runat="server"
TargetControlID="myPopup"
DragHandleID="dragHandler"
/>
5.
To hide popup when OK button is
clicked, we will write a JS function inside head tag, which will do this for us.
function
HideMyPopup() {
$find('myExtender').hide();
return false;
}
6. Place
the below code in Style tag inside head tag
.myModalPopupbackGrnd
{
background-color: #dedede;
filter: alpha(opacity=50);
opacity: 0.7;
}
.myModalPopup
{
min-width: 200px;
min-height: 150px;
background:
white;
}
7. Let's
get into server side code, to bind JS function with button click event need to
use below code
btnOK.Attributes.Add("onclick",
"return HideMyPopup();");
8. To show popup only on page load of
the page, we need to use below code in PageLoad event
if (Session.IsNewSession)
myExtender.Show();
else
myExtender.Hide();
9. Now
execute and see it. Popup extender shows up for first time only & will not show
when you refresh.
Happy Kooding… Hope this helps!