Monthly Archives: February 2017

02.01.17
by

Calling C# Function From JQuery

Sample Code to call C# function from JQuery

ASPX Page Code 

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

C# Code behind File 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [System.Web.Services.WebMethod]
    public static string UserLogin(string username,string password)
    {
        return "You enter Username : " + username + "& Password :" + password;

    }
}