2

I'm trying to run an AJAX Webservice request on a VB ASP.NET page.

When the page loads, I'm trying to call the webservice but I get a 500 error in the console.

My WebService file looks like this:

<System.Web.Script.Services.ScriptService()>
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")>
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)>
<ToolboxItem(False)>
Public Class usrDataSave
    Inherits System.Web.Services.WebService
    <WebMethod()>
    Public Function saydata(abc As String)
        MsgBox(abc)
        Return abc

    End Function

My ASP.NET page looks like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> 
    <script type="text/javascript">  
    $(document).ready(function() {  
        $.ajax({  
            type: "POST",  
            url: "usrDataSave.asmx/saydata",
            data: "hello_world",  
            contentType: "application/json",  
            datatype: "json",  
            success: function(responseFromServer) {  
                alert(responseFromServer.d)  
            }  
        });  
    });  
    </script> 

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

I expect the page to load and a message box to popup server side that says 'hello_world' as well as the web browser to create a popup that says the same. However, this does not happen as I get a 500 error instead.

I've tried to fix this by using different versions of jQuery as well as enabling requests in the web.config file like this:

 <webServices>
        <protocols>
            <add name="HttpGet"/>
            <add name="HttpPost"/>
        </protocols>
    </webServices>

This doesn't work and I still get that "the server responded with a status of 500" in the web browser console. No errors are logged within the application's debug console.

How can I fix this?

1 Answer 1

3

I am assuming both pages are in the same folder, at the same level.

Then this should work:

   <script type="text/javascript">  
       $(document).ready(function () {
           $.ajax({
               type: "POST",
               url: usrDataSave.asmx/saydata
               data: "{abc: 'hello_world'}",
               contentType: "application/json",
               datatype: "json",
               success: function (responseFromServer) {
                   alert(responseFromServer.d)
               }
           });
       });
   </script> 

Note how your data has to match your parameters.

Say you have this:

<WebMethod()>
Public Function saydata(abc As String, def as string) as string
    MsgBox(abc)
    Return abc & " " & def

End Function

And note how we set the function as string - you should give the function a type - in this case "string":

   <script type="text/javascript">  
       $(document).ready(function () {
           $.ajax({
               type: "POST",
               url: "WebService1.asmx/saydata",
               data: "{abc: 'hello', def: 'world'}",
               contentType: "application/json",
               datatype: "json",
               success: function (responseFromServer) {
                   alert(responseFromServer.d)
               }
           });
       });
   </script> 

Edit

A follow up question was how to return more then one value.

Well, the easy way is to create a structure or class, and let the built in serialization convert that to a JSON string for you.

Our web method could say be this:

Structure Hotel
    Dim FirstName As String
    Dim LastName As String
    Dim HotelName As String
End Structure

<WebMethod()>
Public Function GetHotel() As Hotel

    Dim MyHotel As New Hotel
    MyHotel.FirstName = "Albert"
    MyHotel.LastName = "Kallal"
    MyHotel.HotelName = "Banff Springs Hotel"

    Return MyHotel

End Function

I often use a struct in place of a class - since then I just shove it in right before my web method as per above.

Now, let's drop in a button on the page - and JS function to call this:

        <asp:Button ID="cmdHotel" runat="server" Text="Get Hotel"
            OnClientClick="GetHotel();return false;"  />
        <script>
           function GetHotel() {
               $.ajax({
                   type: "POST",
                   url: "WebService1.asmx/GetHotel",
                   data: "{}",
                   contentType: "application/json",
                   datatype: "json",
                   success: function (r) {
                       s = "FirstName = " + r.d.FirstName + "\n"
                       s = s + "LastName = " + r.d.LastName + "\n"
                       s = s + "Hotel Name  = " + r.d.HotelName
                       alert(s)
                   }
               });
            }

And when we run, we get this:

enter image description here

So, you can often just return a simple string. But, if you create a structure server side, then you can quite much reference the result client side as a JS object as per above.

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

2 Comments

What is the best way to return multiple values in this case? Should I return a comma seperated string and split it in the javascript or is there a better way to do this...
see my edit - I show a good way to pass back several values.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.