Immortal Coder: June 2014

Get the return value from ASP.NET Code behind function to the client using JQuery

Using Ajax POST method you can call ASP.NET Server side C# function from the client side. Here the GetSquareOfNumber function is called from client side and return the calculated value from the server when we click the Button2. The c# function should be static, decorated using [WebMethod] attribute and the parameter variable should be same as one we used in the ajax call "param". The returned value will be retrieved in the ajax success function. Use the Breakpoint to check the server code getting called or not.
Script in ASPX page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#Button2").click(function ()
            {
                var num = $('#TextBox1').val();
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetSquareOfNumber", // Your page and function name
                    data: '{param: "' + num + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data)
                    {
                        if (data.d != null)
                        {
                            alert(data.d);
                        }
                    },
                    failure: function (response)
                    {
                        console.log(response.d);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <input id="Button2" type="button" value="button" />
        </div>
    </form>
</body>
</html>

Namespace:

using System.Web.Services;

Code behind C#:

[WebMethod]
public static int GetSquareOfNumber(int param)
{
 return param * param;
}

Call and pass parameter to ASP.NET Code behind function from the client side using JQuery

Using Ajax POST method you can call ASP.NET Server side C# function from the client side with parameter also. Here the SendTheID function is called from client side and the TextBox1 value will be passed as a parameter when we click the Button2. The c# function should be static, decorated using [WebMethod] attribute and the parameter variable should be same as one we used in the ajax call "param". Use the Breakpoint to check the server code getting called or not.
Script in ASPX page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#Button2").click(function ()
            {
                var num = $('#TextBox1').val();
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/SendTheID", // Your page and function name
                    data: '{param: "' + num + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data)
                    {
                        //will return null
                    },
                    failure: function (response)
                    {
                        console.log(response.d);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <input id="Button2" type="button" value="button" />
        </div>
    </form>
</body>
</html>

Namespace:

using System.Web.Services;

Code behind C#:

[WebMethod]
public static void SendTheID(int param)
{
 int returnId = param;
//Write whatever you neeed..
}

Call ASP.NET Code behind function without parameter from the client side using JQuery

Using Ajax POST method you can call ASP.NET Server side C# function from the client side. Here the RunMe function is called from client side when we click the Button1. The c# function should be static and decorated using [WebMethod] attribute. Use the Breakpoint to check the server code getting called or not. Script in ASPX page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#Button1").click(function ()
            {
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/RunMe", // Your page and function name
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (res)
                    {
   //will return null
                        console.log(res);
                    },
                    failure: function (response)
                    {
                        console.log(response.d);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input id="Button1" type="button" value="button" />
        </div>
    </form>
</body>
</html>

Namespace:

using System.Web.Services;

Code behind C#:

[WebMethod]
public static void RunMe()
{
//Write whatever you neeed..
}

Monday, June 9, 2014

Get the return value from ASP.NET Code behind function to the client using JQuery

Call and pass parameter to ASP.NET Code behind function from the client side using JQuery

Call ASP.NET Code behind function without parameter from the client side using JQuery