Call ASP.NET WebMethod using AJAX JSON

Question

I'm prototyping a new web app in ASP.NET with VB.NET codebehind that uses JQuery's AJAX to call a WebMethod, but I keep getting parsererrors. Here's my markup:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testpage.aspx.vb" Inherits="WorkOrder_testpage" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="../jquery-ui-1.9.2.custom.min.css" rel="stylesheet" />
    <script src="../jquery-1.8.3.js"></script>
    <script src="../jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnTest').click(function () {
                $.ajax({
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    url: 'testpage.aspx/testFunction',
                    //data: {a:'hello'},
                    dataType: 'json',
                    success: function (data) {
                        $('#lblDebug').text(data);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(textStatus + ": " + errorThrown);
                    }
                });
            });
            $('#btnTest').focus();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
        <span id="lblDebug"></span><input type="button" id="btnTest" value="TEST" />
    </form>
</body>
</html>

And my codebehind:

Imports System.Web.Services
Imports System.Web.Script.Serialization
Partial Class WorkOrder_testpage
    Inherits System.Web.UI.Page
    <WebMethod()> _
    Public Shared Function testFunction() As String
        Dim jsonSer As New JavaScriptSerializer
        testFunction = jsonSer.Serialize("hello")
    End Function
End Class

Things I have tried already:

omitting the dataType and/or contentType. This results in HTML being passed back upon success
using "data.d" instead of "data" when outputting results on success. Only works when omitting dataType and/or contentType, no data shown.
Adding an httpModules element to the web.config. No change, however there may be more I'm missing there.
formatting my return data in just about every way imaginable. Always ends in a parsererrror. It always says, "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data"

Where I THINK I'm going wrong:

I think either I'm still not formatting my JSON right, in which case please illuminate me, or there is some configuration I am unaware of that is preventing my JSON from getting through.

I know this is similar to about 80 other questions, but none I have found so far have seemed to be of any help.

My sources of help:
asp.net jquery ajax json: Simple example of exchanging data PageMethods, jQuery and JSON http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ http://www.aspdotnet-suresh.com/2013/12/jquery-ajax-json-example-in-aspnet.html
And many many more.

Update 6/10/14

I tried Mun's answer below with similar/same results. If anybody has done this with the same structure, I would like to know how much, if any, you had to add or configure in your web.config file.

score 1 · Answer 1 · answered Jun 06 '14 at 23:30

It may be easier to call your webmethod via PageMethods instead of jQuery.

Code Behind (in C# but easily convertible to VB.NET):

[WebMethod]
public static string SayHello(string name)
{
    return "Hello " + name;
}

WebForm:

$("#btnTest").click(function() {
    PageMethods.SayHello("Test", function(result) {
      alert(result);  // Should show "Hello Test"
    });
});

The Javascript proxy for your SayHello method will automatically be created by the Script Manager, allowing it to be called client-side.

Thanks, but I'm still getting HTML back. I used the same format. Is there something else I'm missing? — JacobD, Jun 09 '14 at 15:09

Call ASP.NET WebMethod using AJAX JSON

1 Answers1