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
![asp1.gif]()
Step 2 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page open
![webform.gif]()
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
![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]()