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

JavaScript
​x
 
<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>

JavaScript
 
<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>

JavaScript
 
 <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?

Answer

Ok, 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>

JavaScript
 
   <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 parmaters..

So, say you have this:

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

End Function

JavaScript
 
<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>

JavaScript
 
   <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:

Follow up question was how to return more then one value?

Well, the easy way? Create a structure or class – let the built in serialization convert that to a json string for you.

So 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

JavaScript
 
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, lets drop in a button on the page – and js function to call this:

eg:

        <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)
                   }
               });
            }

JavaScript
 
        <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/see this:

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.

ASP.NET VB WebService request with AJAX 500 error

Advertisement

Answer

Edit: