Returning data from Aspx page using JQuery & AJAX

Question

I have a aspx page (Sample.aspx) containing just a HTML Button. In the .CS file of the aspx page i have written a small function (sample_function) which simply returns a string "Hello World". I'm trying to display that string in the Alert box when the user clicks on the button. The problem is when I click on the button the entire source code of the .aspx page is displayed in the Alert box instead of displaying "Hello World". Please help me to solve this. Below is my summerized code of Sample.aspx page.

<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Button1").click(function () {
            $.post("Sample.aspx/sample_function",
    {

    },
    function (data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    });
    });
    });
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div >
    <input id="Button1" type="button" value="Click Me" /></div>
    </form>
</body>

Here is summerized version of my .cs code behind:

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

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

        }

        public string sample_function()
        {
            string s1 = "Hellow World";
            return s1;
        }
    }
}

Karl Anderson · Accepted Answer · 2013-12-09 17:44:21Z

1

Use ASP.NET AJAX Page Methods, like this:

Code-behind:

[WebMethod]
public static string sample_function()
{
    string s1 = "Hellow World";
    return s1;
}

Note: ASP.NET AJAX Page Methods must be decorated with [WebMethod] attribute and must be static, thus they cannot interact with controls on the page, because there is no page instance.

Markup:

$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "Sample.aspx/sample_function",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(result) {
            alert(result.d);
        }  
    });
});

answered Dec 9, 2013 at 17:44

Karl Anderson

34.9k12 gold badges69 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Karl Anderson Over a year ago

@PraneebKarat - no problem, feel free to accept and/or up-vote the answer. Just curious, why you accepted the other answer? :-)

yogihosting Over a year ago

with .ajax() you can return the value, but the question is how to return value from .post() method through .aspx page ? I got the answer in .php page (throught echo) here- tutorialspoint.com/jquery/ajax-jquery-get.htm. But i tried response.write in C# but it did not returned the value. Can anybody tell me how to return value .post() when using asp.net ?

Karl Anderson Over a year ago

@yogihosting the jQuery .post() function is just a wrapper around the .ajax() function; so I am not sure what you are actually asking here. ASP.NET AJAX Page Methods only accept HTTP POSTs, not GETs; so maybe this is where you are seeing results from PHP and not from ASP.NET AJAX Page Methods.

Jhonatas Kleinkauff · Accepted Answer · 2013-12-09 17:42:58Z

0

You must have an WebMethod.

[WebMethod]
public static string sample_function()
{
    string s1 = "Hellow World";
    return s1;
}

answered Dec 9, 2013 at 17:42

Jhonatas Kleinkauff

9661 gold badge7 silver badges18 bronze badges

1 Comment

Praneeb Karat Over a year ago

I tried including [WebMethod] But still it is showing the same output.

Collectives™ on Stack Overflow

Returning data from Aspx page using JQuery & AJAX

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related