Here I am explaining how to use make user Login easily by placing the ASP.Net Membership Login control inside ASP.Net AJAX Control Toolkit Modal Popup.
Login User Control
We’ll create a Login user control that will be later used to allow the user to Login to the application using Modal Popup
HTML Markup
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>
<asp:LinkButton ID="lnkLogin" runat="server" Text = "Login"></asp:LinkButton>
<asp:Panel ID="pnlLogin" runat="server" CssClass="modalPopup" style = "display:none">
<table width = "100%" cellpadding = "0" cellspacing = "0">
<tr>
<td align = "right">
<asp:LinkButton ID="lnkCancel" runat="server" Text = "[X]"></asp:LinkButton>
</td>
</tr>
<tr>
<td>
<asp:Login ID = "Login1" runat = "server" OnAuthenticate = "OnAuthenticate">
</asp:Login>
</td>
</tr>
</table>
</asp:Panel>
<cc1:ModalPopupExtender ID="popup" runat="server" DropShadow="false"
TargetControlID="lnkLogin" PopupControlID="pnlLogin"
BackgroundCssClass="modalBackground" CancelControlID="lnkCancel">
</cc1:ModalPopupExtender>
Above you will notice that I have added an ASP.Net ScriptManagerProxy and Modal Popup Extender Control. In the Modal Popup Panel I have placed an ASP.Net Membership Login Control which calls the following event handler on its OnAuthenticate event.
C#
protected void OnAuthenticate(object sender, AuthenticateEventArgs e)
{
e.Authenticated = Membership.ValidateUser(Login1.UserName, Login1.Password);
if (!e.Authenticated)
{
popup.Show();
}
}
VB.Net
Protected Sub OnAuthenticate(ByVal sender As Object, ByVal e As AuthenticateEventArgs)
e.Authenticated = Membership.ValidateUser(Login1.UserName, Login1.Password)
If Not e.Authenticated Then
popup.Show()
End If
End Sub
The above event handler simply fires validates the user using the Membership ValidateUser method. If the login fails it again displays the modal popup with the error message.
Placing the User Control on Web Page
First you need to Register the User Control we just build in the following way
<%@ Register Src = "~/UserControls/UC_Login.ascx" TagName = "Login" TagPrefix = "uc" %>
Below is the HTML markup of the page.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<table>
<tr>
<td>
<asp:LoginView ID = "LoginView1" runat = "server">
<LoggedInTemplate>
Congratulations. You are now Logged in.
</LoggedInTemplate>
<AnonymousTemplate>
Please click Login to continue.
<uc:Login ID = "ucLogin" runat = "server" />
</AnonymousTemplate>
</asp:LoginView>
</td>
</tr>
</table>
</div>
</form>
You will notice above I have placed the User Control in the Anonymous Template of the ASP.Net LoginView control.
For the demo application below are the login details
Login: demo
Password: demo@123
With this the article comes to an end. You can download the source in VB.Net and C# and also the demo database using the link below.
LoginControlInsideModalPopup.zip