ARTICLE
AJAX ModalPopup Extender Control
This article demonstrates how to use ModalPopup Extender Control in ASP.Net using Ajax's.
This article demonstrates how to use ModalPopup Extender Control in ASP.Net
using Ajax's.
Note: We are assuming that you have already completed the installation of
the Ajax Toolkit as well as have a basic understanding of coding.
About the control:
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. When displayed, only
the modal content can be interacted with; clicking on the rest of the page does
nothing. When the user is done interacting with the modal content, a click of an
OK/Cancel control dismisses the modal content and optionally runs custom script.
The custom script will typically be used to apply whatever changes were made
while the modal mode was active. If a postback is required, simply allow the
OK/Cancel control to postback and the page to re-render. You can also absolutely
position a modal popup by setting the X and Y properties. By default it is
centered on the page, however if just X or Y is specified then it is centered
vertically or horizontally.
This article provides a few steps which will be easy to follow.
Step 1:
Before you can use any of the Ajax Control Toolkit controls in a page, you first
need to add a ScriptManager to the page. You can drag the ScriptManager from the
Visual Studio Toolbox window onto the page. The ScriptManager is located in the
Ajax Control Toolkit tab under the Toolbox.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Step 2:
Drag a LinkButton Give id lnkLoginbtn
<asp:LinkButton ID="lnkLoginbtn" runat="server" >Login</asp:LinkButton>
Step 3:
Drag Panel control from Toolbox.Design a Login form in it.
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display:
none" >
<table style="width:
270px">
<tr>
<td align="right">
<asp:Label ID="lblUsername" runat="server" Height="30px" Text="UserName :"></asp:Label>
</td>
<td style="width:
179px" >
<asp:TextBox ID="txtUsername" runat="server" Width="100px"></asp:TextBox></td>
</tr>
<tr>
<td style="width:
30% " align="right">
<asp:Label ID="lblPassword" runat="server" Height="30px" Text="Password :"></asp:Label>
</td>
<td style="width:
179px">
<asp:TextBox ID="txtPassword" runat="server" Width="100px"></asp:TextBox></td>
</tr>
<tr>
<td >
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel"
/>
<asp:Button ID="btnLogin" runat="server" Text="LogIn" OnClick="btnLogin_Click" /></td>
</tr>
</table>
</asp:Panel>
Step 4:
Drag ModalPopup Extender Control from Ajax toolkits provide give
TargetControlID="lnkLoginbtn"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="btnLogin"
OnOkScript="ok()"
CancelControlID="btnCancel"
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderLogin" runat="server"
TargetControlID="lnkLoginbtn"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="btnLogin"
OnOkScript="ok()"
CancelControlID="btnCancel" />
Step 5:
In cs files btnLogin Click event write user Authentication Code.
protected void btnLogin_Click(object
sender, EventArgs e)
{
[User Authentication Code………..]
}
Step 6:
Run Website...........