Introduction : AJAX (Asynchronous JavaScript and XML) is a new web development technique use for the interactive website. AJAX helps us develop web applications and retrieve a small amount of data from web server. AJAX consists of a different type of technology.

Login Control : A login control provides a ready to use user interface that can be used as a Login interface in the web site and it is implemented through <table></table> HTML tag. Login controls integrate with ASP.NET membership and ASP.NET forms authentication to help automate user authentication for a Web site.

Login Control Property :

Step 1 : Open Visual Studio 2010.

asp1.gif

Step 2 : Go to Solution Explorer and right-click.

webform.gif

Step 3 : Go to Solution Explorer and right-click.

CSS Code :

<style type="text/css">
 .style1
 {
text-align: center;
font-size: xx-large;
font-family: "Monotype Corsiva";
z-index: 1;
left: 316px;
top: 20px;
position: absolute;
height: 49px;
width: 113px;
}
</style>

Step 4 : Now go to the Default.aspx page and drag a control from Toolbox.

Step 5 : Now go to the Default.aspx page and write the below code.

Code :

</head>
<body alink="#000000">
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 <div style="background-color: #00FF00; color: #FFFFFF; position: relative;">
 <h1>My Login control</h1>
 <br />
 <asp:LinkButton ID="lnkLogin" runat="server" Text = "Login" CssClass="style1"
ForeColor="Black" ></asp:LinkButton>
<br />
 <br />
 <asp:Panel ID="pnlLogin" runat="server" CssClass="modalPopup"
BackColor="#66FFCC" >
 <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 style="background-color: #666633; color: #000000; font-weight: bolder">
 <%--<asp:Login ID = "Login1" runat = "server" OnAuthenticate ="OnAuthenticate">
</asp:Login>--%>
 <asp:Login ID="Login1" runat="server" DestinationPageUrl="~/Default2.aspx"
onauthenticate="Login1_Authenticate">
 </asp:Login>
 <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="false"
 TargetControlID="lnkLogin" PopupControlID="pnlLogin"
 BackgroundCssClass="modalBackground" CancelControlID="lnkCancel">
 </asp:ModalPopupExtender>
 </tr>
</table>
</asp:Panel>

Step 6 : Now we drag a Login Control from the Toolbox and define the onAuthenticate event property.

login1`.gif

Step 7 : Now go to default.aspx.cs option and write the below code.

Code :

protected void Login1_Authenticate(object sender, AuthenticateEventArgs e)
{
e.Authenticated = Membership.ValidateUser(Login1.UserName, Login1.Password);
if (!e.Authenticated)
{
ModalPopupExtender1.Show();
}
}
}

Step 8 : The following namespace use for the (Login1_Authenticate) event.

Namespace :

using System.Web.UI.WebControls;
 using System.Text.RegularExpressions;
 using System.Text;
 using System.Web.Security;

Step 9 : Now run the Web application by pressing f5.

login1.gif

Step 10 : Now double click on Login option and window pops up showing the login control.

login2.gif

Step 11 : Now when the user enters the wrong user name and password, a error message flash in asking the user to enter the correct username, password.

login3.gif