Post
Ask Question

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
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


Similar Articles