Work with Login Controls in AJAX

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">
            text-align: center;
            font-size: xx-large;
            font-family: "Monotype Corsiva";
            z-index: 1;
            left: 316px;
            top: 20px;
            position: absolute;
            height: 49px;
            width: 113px;

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 :

body alink="#000000">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <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 />
<asp:Panel ID="pnlLogin" runat="server" CssClass="modalPopup"
<table width = "100%" cellpadding = "0" cellspacing = "0">
td align = "right">
<asp:LinkButton ID="lnkCancel" runat="server" Text = "[X]"></asp:LinkButton>
td style="background-color: #666633; color: #000000; font-weight: bolder">
<%--<asp:Login ID = "Login1" runat = "server" OnAuthenticate ="OnAuthenticate">
    <asp:Login ID="Login1" runat="server" DestinationPageUrl="~/Default2.aspx"
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow
TargetControlID="lnkLogin" PopupControlID="pnlLogin"
BackgroundCssClass="modalBackground" CancelControlID="lnkCancel">

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)

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.


Similar Articles