Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Web method is not called by jquery from javascript function

Long time WinForm programmer here but new to the web programming scene. I have Visual Studio 2010 and I created a new WebSite project. I can't seem to get ajax to call a webmethod I created. When I click my button on the page nothing happens at all.

It looks like jquery 1.4.1 gets automatically added in a Scripts folder when I create a WebSite project.

In Default.aspx I add 2 script tags:

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="Scripts/Process.js">

I put a button on the page in where the onclick function is defined in Process.js:

<input id="btnTest" type="button" value="Test" onclick="btnTest_onclick()" />

In Process.js I have the following code:

function btnTest_onclick() {

    var strData = JSON.stringify({
        userid: 5
    });

    alert(strData);

    $.ajax({
        url: 'Default.aspx/GetData',
        type: "POST",
        data: strData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: Success,
        failure: Failure,
        async: true
    });
}

function Success(data) {
    alert("success");
}

function Failure(data) {
    alert("failure");
}

In Default.aspx.cs:

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

    }

    [WebMethod()]
    public static string GetData(int id)
    {
        return "hello, my id is " + id;
    }
}
like image 784
user441521 Avatar asked Nov 16 '12 21:11

user441521


2 Answers

I don't know if making Ajax request using JQuery is requirement for you, but you can more easily do ajax request to page methods using abilities of the ASP.NET ajax.

First of all I want to notice that to use PageMethods you need to add script manager control to the page and specify EnablePageMethods="True".

When you will do so, ScriptManager will render PageMethods client side definition which represent proxy of the defined page methods on the page and you can easily invoke this methods using Ajax request.

So, you can try the following code:

<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" EnablePageMethods="True" />
<input id="btnTest" type="button" value="Test" onclick="btnTest_onclick()" />
<script type="text/javascript">
    function btnTest_onclick() {

        PageMethods.GetData(5, Success, Failure);
    }

    function Success(data) {
        alert("success");
        alert(data);
    }

    function Failure(data) {
        alert("failure");
    }

</script>

As you can see this code has less lines of code and it works.

like image 155
Maxim Kornilov Avatar answered Oct 06 '22 00:10

Maxim Kornilov


The data item names must match the page method arguments:

 var strData = JSON.stringify({
                id_MATCH: 5
            });

    [WebMethod()]
    public static string GetData(int id_MATCH)
    {
        return "hello, my id is " + id_MATCH;
    }
like image 34
Steve Wellens Avatar answered Oct 05 '22 23:10

Steve Wellens