Untitled

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Login</title>

    <%--CSS & Script Start--%>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--CSS & Script End--%>

    <%--Jquery Call Start--%>
    <script type="text/javascript">

        function UserLogin() {

            var user = $('#username').val();
            var pass = $('#password').val();

            $.ajax({
                type: "POST",
                url: "Default.aspx/UserLogin",
                data: JSON.stringify({ username: user, password: pass }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: onSuccess,
                failure: function (AjaxResponse) {
                    alert("Failed: " + AjaxResponse.d);
                }
            });
            function onSuccess(AjaxResponse) {
                $("#Result").html("Output Result: " + AjaxResponse.d);
                alert(AjaxResponse.d);
            }

            return false;

        }
    </script>
    <%--Jquery Call End--%>
</head>
<body>
    <%--Sample HTML Form Start--%>
    <h2>Login form</h2>
    <form id="form1" runat="server">
        <div>
            <div class="form-group">
                <label for="username">Username:</label>
                <input class="form-control" id="username" placeholder="Enter Username">
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="password" placeholder="Enter password">
            </div>

            <button type="submit" class="btn btn-default" onclick="return UserLogin()">Submit</button>
        </div>
        <%--Sample HTML Form End--%>
        <%--Result Div Start --%>
        <div id="Result" style="background-color:antiquewhite">
        </div>
        <%--Result Div End --%>
    </form>
</body>
</html>