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.
- JavaScript
- XML
- Asynchronous Call to the server
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 :
- Title Text
- UserNameText
- PasswordLabelText
- Login Button Text
- Create UserText
Step 1 : Open Visual Studio 2010.
- Go to File->New->WebSite
- Select ASP.NET WebSite
Step 2 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page open
Step 3 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select StyleSheet
- StyleSheet.css page open
- Write the below code
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.
- Drag ScriptManger,LinkButton,ModalPopupExtender Control.
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.
- Right-click in Login control
- Select property option and define the event
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.
Step 10 : Now double click on Login
option and window pops up showing the login control.
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.
