News
IBM to offer mobile security as a service IBM will start delivering mobile security-as-a-service (MaaS) through its own cloud infrastructure in India, a move that is expected to better address in-country data requirements... IBM Spectrum Computing: IBM has enlarged its portfolio of software-defined infrastructure solutions with cognitive features for workload management.  * LiFi internet technology has been introduced, the new type of wireless internet connection that gives 100 times faster than traditional WiFi -- Invented by Professor Harald Haas from the University of Edinburgh. * Sci. Rachid Yazami has developed a smart chip that charges smartphones in less than 10 minutes. BenQ has launched BlueCore projector - Consumer electronics major BenQ has launched its first BlueCore laser light source projector. For those unaware, devices with BlueCore laser technology have a high contrast output of 80000:1 with an extended lamp life and efficiency. ***
  Jan 3 2015 10:32PM     John
  0 Comments    1399 Views  
AJAX (Asynchronous JavaScript and XML) is the art of exchanging data with a server and updating parts of a web page – without reloading the entire page.
Previously we have discussed about basics of ajax call and how it works.
Usually when we used to authenticate the user with server ,will get response from the server after page reloads.
Now lets see, authenticate the user with server without page reloading using AJAX in JavaScript.
Note : Before using Ajax, you need to add the AjaxControlToolKit.ddl to your bin folder.
You can download from the below link, Click Here
HTML

<body>
    <div class="container login">
        <div class="main">
            <h2>
                Authentication Using Ajax
            </h2>
            <h5>
                Try Username : thedevelopertips and Password : thedevelopertips</h5>
            <div style="float: left;">
                <span>Enter the UserName:</span> <span>
                    <input id="txtUsername" type="text" />
                </span>
            </div>
            <br >
            <br >
            <div style="float: left;">
                <span>Enter the Password &nbsp;:</span> <span>
                    <input type="password" id="txtPassword" type="text" />
                </span>
            </div>
            <br >
            <br >
            <div class="ml19px">
                <input type="button" name="password" value="Reset" onclick="btnReset();" class="width55 ml4px btnReset" />
                <input type="button" value="Login" id="btnLogin" onclick="btnAuthenticateUser();"
                    class="width55 ml4px btn" />

                <br >
                <br >
                <span style="float: left; padding: 3px; display: none;" id="successMsg" class="dsNone success ml19px">
                    Success</span> <span style="float: left; padding: 3px; display: none;" id="errorMsg"
                        class="dsNone error ml19px">
Success</span>
            </div>
        </div>
    </div>
</body>

CSS

<style type="text/css">
    .success
    {
        color: white;
        background-color: green;
        margin-left: 12px;
        border-radius: 3px;
    }

    .error
    {
        color: white;
        background-color: rgb(247, 23, 23);
        margin-left: 12px;
        border-radius: 3px;
    }

    .btn
    {
        line-height: 2.0;
        border-radius: 4px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        color: #fff;
        background-color: #00a9da;
        border-color: #0094bf;
    }

    .btnReset
    {
        line-height: 2.0;
        border-radius: 4px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        color: #fff;
        background-color: #e85f61;
        border-color: #e85f61;
    }

    .width55
    {
        width: 100px;
    }

    .ml4px
    {
        margin-left: 4px;
    }

    .ml19px
    {
        margin-left: 19%;
    }

    .login
    {
        height: 220px;
        background-color: #f5f5f5;
        width: 35%;
        padding: 20px;
        border-radius: 16px;
    }

</style>

Java Script

<script type="text/javascript">
    var xmlHttp;
    function GetXmlHttpObject() {
        var xmlHttp = null;
        try {
            xmlHttp = new XMLHttpRequest();
        }
        catch (e) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xmlHttp;
    }
    function btnAuthenticateUser() {
        try {
            var username = document.getElementById('txtUsername');
            var pwd = document.getElementById('txtPassword');
            xmlHttp = GetXmlHttpObject();
            if (xmlHttp == null) {
                alert("Your browser does not support AJAX!");
                return;
            }
            var url = 'LoginValidationWithAjax.aspx?UserName=' + username.value + '&Pwd=' + pwd.value;
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        if (xmlHttp.responseText == "Login Success") {
                            document.getElementById("successMsg").style.display = "block";
                            document.getElementById("errorMsg").style.display = "none";
                            document.getElementById("successMsg").innerHTML = xmlHttp.responseText;
                        }
                        else {
                            document.getElementById("errorMsg").style.display = "block";
                            document.getElementById("successMsg").style.display = "none";
                            document.getElementById("errorMsg").innerHTML = " Login Failure ";
                        }
                    }
                    if (xmlHttp.readyState == 4) {
                        // LoadingPage();
                    }
                }
            }
            xmlHttp.open("POST", url, true);
            xmlHttp.send(null);
            if (xmlHttp.readyState == 1) {
                //alert('Loading');
            }
        } catch (e) {
            alert(e.Message);
        }
    }
</script>

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class LoginValidationWithAjax : System.Web.UI.Page
{
    string returnvalue = string.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if ((Request.QueryString["UserName"] == "thedevelopertips")
            && (Request.QueryString["Pwd"] == "thedevelopertips"))
            {
                returnvalue = "Login Success";
                Response.ContentType = "text/XML";
                Response.Write(returnvalue);
                Response.End();
            }
        }
    }
}

Demo
You can see live Ajax login Validation demo from clicking the below Submit button and getting response from server without page reload.
Hi, This is John.I hope this page will helps you to Validate the Login Page with JavaScript Ajax.Thanks.
BackToTop
Comments



 
Search
1&1 Hosting
Recent Posts
Bind Gridview from CSV file in Asp.Net C#
Jun 18 2016 11:38PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Feb 27 2016 11:51AM Posted By John
Gridview custom CSS in ASP.Net
Feb 25 2016 10:59AM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Feb 25 2016 10:20AM Posted By Micheal
Read excel file and convert to List in C#
Feb 25 2016 6:26AM Posted By Michael
Encryption and Decryption for Password in C#
Feb 17 2016 3:52AM Posted By Michael
How to create Chart in ASP.Net C#
Feb 16 2016 8:03AM Posted By Michael Ryan
Tags
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: