Send JSON data to a WebMethod

Question

I'm trying to POST some data to a VB.NET WebMethod via AJAX.

JSON.stringify(myRows) contains:

{
   "myRows":[
      {
         "UniqueId":"188",
         "Description":"hello",
         "ClientId":"321",
         "SecretKey":"dftete",
         "Active":"checked",
         "Delete":"delete icon"
      },
      {
         "UniqueId":"191",
         "Description":"sfsss",
         "ClientId":"fsdfs",
         "SecretKey":"cvvcvb",
         "Active":"unchecked",
         "Delete":"delete icon"
      },
      {
         "UniqueId":"201",
         "Description":"I am test singh",
         "ClientId":"23424242",
         "SecretKey":";kfddgdfl;ghf",
         "Active":"unchecked",
         "Delete":"delete icon"
      },
      {
         "UniqueId":"202",
         "Description":"Yay mai ban ne wala hun",
         "ClientId":"n.csdvnsssl",
         "SecretKey":"nj.ssdnfvel,vgd",
         "Active":"unchecked",
         "Delete":"delete icon"
      }
   ]
}

My AJAX call is:

$.ajax({
        type: "POST",
        url: "MyWebServiceUtilities.asmx/savesocialloginkeys",
        data: JSON.stringify(myRows),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
             //some code here
        },
        failure: function (response) {
           //some code here    
        },
        error: function (response) {
            //some code here

        }
    });

Server side web method is this:

<WebMethod()> _
Public Function savesocialloginkeys(ByVal myrows As String) As String
    Dim response As String = ""
    '------------Some code here-------------------------------
    '------------Response will be based on results as per code-------
    Return response
End Function

When I tried to debug, AJAX call is showing error!

`contentType` is the type of data you're sending, in this case you should have : `contentType: "charset=UTF-8"` check http://stackoverflow.com/questions/18701282/what-is-content-type-and-datatype-in-an-ajax-request — CMedina, Jun 01 '16 at 23:41
Welcome to StackOverflow! You should always post any errors you see when debugging, so others can understand what's going wrong. — Nate Barbettini, Jun 02 '16 at 14:55

score 1 · Answer 1 · answered Jun 02 '16 at 15:01

The AJAX call is failing because you're sending a JSON object to the WebMethod, but the WebMethod accepts a String. ASP.NET is trying to be smart and convert the stringified JSON object into a real object, so by the time the request gets to your WebMethod, it's no longer a string.

You need a simple object that represents your JSON structure:

Public Class SocialConnectionModel
    Public Property UniqueId As String

    Public Property Description As String

    Public Property ClientId As String

    Public Property SecretKey As String

    Public Property Active As String

    Public Property Delete As String
End Class

Since your JSON object contains an array of objects under the myRows key, that's what the WebMethod signature must accept:

Imports System.Web.Services
Imports System.ComponentModel

<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 MyWebServiceUtilities
    Inherits System.Web.Services.WebService

    <WebMethod()>
    Public Function savesocialloginkeys(myRows As SocialConnectionModel()) As Boolean
        ' Do something with the data

        ' Return true if succeeded
        Return True
    End Function

End Class

If you haven't done so already, including the <ScriptService()> line is important since you are calling this WebMethod from AJAX.

Now your AJAX call should work as expected:

$.ajax({
    type: "POST",
    url: "MyWebServiceUtilities.asmx/savesocialloginkeys",
    data: JSON.stringify(myrows),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        if (response && response.d) {
            console.log("success");
        }
    },
    failure: function (response) {
        // some code here
    },
    error: function (response) {
        // some code here
    }
});

A suggestion: Try to build your JSON data with appropriate types, instead of strings for every property. For example, the UniqueId property should be an integer, and the Active property could be a bool (I'm guessing). Don't make everything stringly typed unless you have to. :)

Shakti · Accepted Answer · 2020-01-21T00:59:23.147

0

Anyone who still lands here, here is the solution:

<WebMethod()> _
Public Function savesocialloginkeys(ByVal myRows As Object) As String
    '------------Now you can work on myRows with the help of newtonsoft library-----'


End Function

edited Jan 21 '20 at 00:59

answered Dec 25 '19 at 02:30

Shakti

723
8
15

score -1 · Answer 3 · answered Jun 02 '16 at 02:25

you are not sending a json object to server so you must use 'text/html' as contentType like:

                $.ajax({
                    type: "POST",
                    url: "MyWebServiceUtilities.asmx/savesocialloginkeys",
                    data: JSON.stringify(myRows),
                    contentType: "text/html; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                         //some code here
                    },
                    failure: function (response) {
                       //some code here    
                    },
                    error: function (response) {
                        //some code here

                    }
                });

could you post the error that shows your ajax request? that will help us to understand what is wrong — Víctor Manuel Monsalve Retamal, Jun 02 '16 at 19:55

Send JSON data to a WebMethod

3 Answers3