jquery login code

code

Ajax Login Example Using Jquery In Asp.net
Posted Date : 10/1/2012     No Of Visit : 126
Introduction : In this article i will show you how you can create and ajax login enabled login page using jquery in asp.net.
Other Related Tag

 
 
In this article i will show you how you can create and ajax login enabled login page using jquery  in asp.net.  After completion of this article you will be able to create a login page which will help you login without redressing the page.

So here we go:

First you needed to create a new web project from your VS. Now add a new page. In this Add two textbox, div and button, one for user id and  second for password. After adding controls your code will look as shown below:

<table width=”30%”>
        <tr>
            <td>
                User Id
            </td>
            <td>
                <asp:TextBox runat=”server” ID=”txtuserid” Width=”150px”></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                <asp:TextBox runat=”server” ID=”txtpassword” TextMode=”Password” Width=”150px”></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
            <div id=”status”></div>
                <asp:Button ID=”btnlogin” runat=”server” Text=”Login” />
            </td>
        </tr>
    </table>

Add the following code at the page load in the main login page.
 

protected void Page_Load(object sender, EventArgs e)
        {
            btnlogin.Attributes.Add(“onclick”, “return AjaxLogin();”);
        }

In above code we are assigning the click event of button.

Now add a new folder named ajax. In this folder add a new ajaxlogin.aspx page. This page will used for making ajax call.

In ajaxlgin.aspx remove all the tag except the page tag. After this your page will look like this.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”AjaxLogin.aspx.cs” Inherits=”WebApplication1.Ajax.AjaxLogin” %>

On your ajax login page use the following code.
 

protected void Page_Load(object sender, EventArgs e)
        {
            string userId=Request.QueryString[“userId”].ToString();
            string Password=Request.QueryString[“Password”].ToString();
            DataTable dt = new DataTable();
            SqlConnection objcon = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings[“connectionstring”].ToString());
            SqlDataAdapter objda = new SqlDataAdapter(“select * from RegisteredUserDetail where UserId=`” + userId + “` and UserPassword=`” + Password + “`”, objcon);
            objda.Fill(dt);
            if (dt.Rows.Count > 0)
            {
                // for successfull login
                Response.Write(“1”);
            }
            else
            {
                // for un-successfull login
                Response.Write(“0”);
            }
        }

Now open your main login page. Add the jquery code at header of the page.

<script language=”javascript” type=”text/javascript”>
        function AjaxLogin() {
            var UserId = document.getElementById(“<%=txtuserid.ClientID %>”).value;
            var Password = document.getElementById(“<%=txtpassword.ClientID %>”).value;
            $(“#status”).html(“Please wait…”);
            if (UserId != “” && Password != “”) {
                var url = “/Ajax/AjaxLogin.aspx/”;
                $.ajax({
                    url: url,
                    data: { userId: UserId, Password: Password },
                    cache: false,
                    success: function (data) {
                        if (data != 0) {
                            document.getElementById(“<%=txtuserid.ClientID %>”).value = “”;
                            document.getElementById(“<%=txtpassword.ClientID %>”).value = “”;
                            $(“#status”).html(“”);
                            alert(“Successfull login…”);
                            return true;
                        }
                        else {
                            document.getElementById(“<%=txtuserid.ClientID %>”).value = “”;
                            document.getElementById(“<%=txtpassword.ClientID %>”).value = “”;
                            $(“#status”).html(“”);
                            alert(“Sorry wrong user id or password.”);
                        }
                    }
                });
            } else {
                alert(“Please enter userid or password.”);
            }
            return false;
        }

    </script>

In your web.confing file add the following code for making connection with data base.

  <connectionStrings>
      <add name=”connectionstring”
      connectionString=”Data Source=xxxxxx;Initial Catalog=xxxxxxxx;Persist Security Info=True;User ID=test;Password=123;MultipleActiveResultSets=True”></add>
  </connectionStrings>

In your SQL server DB create a table which will contain user id and password detail.

In above code we have passed the user is and password a parameter to our ajax page. Now press F5 and run the page.
After running the page your page will look like this.

For validation we have checked if value is blank on that case it will ask for detail

Now enter user id and password, and press login button . User will redirected to the ajaxlogin.aspx page.

In above code we have used request.quesrstring for accessing the parameter value which we have passed in our ajax request.

  data: { userId: UserId, Password: Password },

AjaxLogin page after successful login it will return 1 other wise it will return 0.

Now check the JS code.
In this we have a code section   success: function (data) { . In this data is the return value just check the data value and verify with your return value.

As you click on login after adding detail you will get a please wait message . which we have displaying i a div.

  $(“#status”).html(“Please wait…”);

After successful or invalid login. make it blank. This we are doing for showing that precess have been completed.

  $(“#status”).html(“”);

Successful login

For invalid login..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s