Using JQuery to call a WebMethod

Question

I am having trouble getting inside my Search WebMethod from my JQuery call. Maybe someone could help to point me in the right direction.

I also packed up everything into a zip file incase someone wants to check it out for a closer look.

http://www.filedropper.com/jsonexample

Thanks Ryan

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JSON Example</title>
    <script type="text/javascript" language="JavaScript" src="jquery-1.3.1.min.js"></script>

<script type="text/javascript" language="javascript">

function Search() {
    var search = $("#searchbox").val();
    var options = {
        type: "POST",
        url: "Default.aspx/Search",
        data: "{text:" + search + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            alert('Success!');
        }
    };
    $.ajax(options);
}
</script>

</head>
<body>
    <form id="form1" runat="server">
        <input type="text" id="searchbox" size="40" />
        <a href="#" onclick="Search()" id="goSearch">Search</a>
        <br />        
        <div id="Load" />
    </form>
</body>
</html>

And here is the code behind for the default.aspx

 Imports System.Data
    Imports System.Web.Services
    Imports System.Web.Script.Serialization

    Partial Class _Default
        Inherits System.Web.UI.Page

        <WebMethod()> _
        Public Shared Function Search(ByVal text As String) As IEnumerable
            Return "test"
        End Function

    End Class

What do you mean getting inside your WebMethod, like not hitting a breakpoint? Why don't you just use the code that is emitted for you via MS Ajax PageMethods? Otherwise calling it via jQuery doesn't really save you anything. — Quintin Robinson
– Quintin Robinson, Commented Feb 18, 2009 at 22:30
I understand that there are a couple of other ways to access methods through javascript such as PageMethods. I also realize that this example doesnt do anything. But I made the simpliest non working version for everyone's help. I just am not able to get inside my breakpoint for the Search Method. — Ryan
– Ryan, Commented Feb 18, 2009 at 22:38
including you open/close script tags on the same line trucates your code. Please update your question and put a line break between the open and close script tags. — bendewey
– bendewey, Commented Feb 19, 2009 at 1:25

Dave Ward · Accepted Answer · 2009-02-18 23:02:30Z

15

To solve a problem like this, the first thing to do is watch it in Firebug.

If you click the "Search" link and watch the POST request/response in Firebug's console, you'll see it's throwing a 500 server error: Invalid JSON Primitive.

The reason for that is because the key/value identifiers in your "data" JSON literal aren't quoted. Line 17 should be:

data: "{'text':'" + search + "'}",

Then, all will work as expected.

Note: The suggested data { test: search } will not work. If you provide jQuery with an actual JSON literal instead of a string, it will convert that into a key/value pair of test=search and POST that instead of the JSON. That will also cause an ASP.NET AJAX ScriptService or PageMethod to throw the Invalid JSON Primitive error.

answered Feb 18, 2009 at 23:02

Dave Ward

60.7k14 gold badges119 silver badges134 bronze badges

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

2 Comments

Quintin Robinson Over a year ago

FireBug and Fiddler are godsends.

Ryan Over a year ago

That fixed it! Thanks Dave, I love your blog and the amazing stuff you write about.

flesh · Accepted Answer · 2009-02-18 22:38:31Z

6

You need to do the following (C#):

The WebMethod must be public static
It must be decorated with the [WebMethod] attribute
You need a ScriptManager on your .aspx page
Set the ScriptManager's EnablePageMethods="true"

And here is some sample javascript:

$().ready(function() {
    $(yourDropDownList).change(LoadValues);
});


function LoadValues() {
    PageMethods.YourMethod(arg1, CallSuccess, CallFailed);
}

function CallFailed(result) {
    alert('AJAX Error:' + result.get_message());
}

function CallSuccess(result) {
    //do whatever you need with the result
}

answered Feb 18, 2009 at 22:38

flesh

23.9k24 gold badges83 silver badges99 bronze badges

1 Comment

Ryan Over a year ago

I am using a shared method. The method that you are describing is the other type of way to access webmethods. I got my example based off encosia.com/2008/05/29/…

Collectives™ on Stack Overflow

Using JQuery to call a WebMethod

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related