Question

102

pass string array via jQuery AJAX to C# WebMethod

rated 0 times [ 108] [ 6] / answers: 1 / hits: 23331 / 9 Years ago, tue, april 21, 2015, 12:00:00

I want to pass a JavaScript string array to a C# WebMethod via jQuery (POST):

$.ajax({

    type: POST, // GET or POST or PUT or DELETE verb          

    url: PageURL + 'ChangeColor', // Location of the service

    data: { 'OriginalColorHex': ' + JSON.stringify(clipartOriginalColorsHex) + ','ModifiedColorHex':' + JSON.stringify(clipartModifiedColorsHex) +

          ','OriginalColorRGB': ' + JSON.stringify(clipartOriginalColorsRGB) + ','ModifiedColorRGB':' + JSON.stringify(clipartModifiedColorsRGB) +

          ','fileName':' + clipartFileName + ' },

    contentType: application/json; charset=utf-8, // Content type sent to server

    dataType: json, // Expected data format from server

    processdata: true, // True or False      

    traditional: true,          

    success: function (result) { // On Successful service call

        console.log(result);

    }

});

Data going in ajax call looks like this

{ 'OriginalColorHex': '[#000000,#006565,#cccc99]', 'ModifiedColorHex': '[#3366CC,#cc5500,#3366cc]', 'OriginalColorRGB': '[rgb(0,0,0),rgb(0,101,101),rgb(204,204,153)]', 'ModifiedColorRGB': '[rgb(51, 102, 204),rgb(204, 85, 0),rgb(51, 102, 204)]', 'fileName': '179.svg' }

C# WebMethod:

[WebMethod]

public static string ChangeClipartColor(string[] OriginalColorHex, string[] ModifiedColorHex, string[] OriginalColorRGB, string[] ModifiedColorRGB, string fileName)

{

    // Code Here

}

Error

{

   Message:Cannot convert object of type u0027System.Stringu0027 to type u0027System.String[]u0027,

   StackTrace:   at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Objectu0026 convertedObject)rn   at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Objectu0026 convertedObject)rn   at System.Web.Script.Services.WebServiceMethodData.StrongTypeParameters(IDictionary`2 rawParams)rn   at System.Web.Script.Services.WebServiceMethodData.CallMethodFromRawParams(Object target, IDictionary`2 parameters)rn   at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)rn   at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData),

   ExceptionType:System.InvalidOperationException

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazlynnessencec

Add To Favorites

Follow

Total Points: 434

Total Questions: 113

Total Answers: 94

Location: Norway

Member since Mon, May 23, 2022

2 Years ago

answered 9 Years ago jarettajb · Accepted Answer

Quick Fix

JSON arrays do not need to be in quotes. This is valid JSON:

{

    OriginalColorHex: [

        #000000,

        #006565,

        #cccc99

    ]

}

Try validating your JSON with a tool like JSONLint to make sure it's valid. The WebMethod should be able to accept a string array just fine.

A slightly better method

Instead of building your JSON as a string, build an object and then let JavaScript handle the conversion for you:

var clipartOriginalColorsHex = ['#000000','#006565','#cccc99'];

var clipartModifiedColorsHex = ['#3366CC','#cc5500','#3366cc'];

var clipartOriginalColorsRGB = ['rgb(0,0,0)','rgb(0,101,101)','rgb(204,204,153)'];

var clipartModifiedColorsRGB = ['rgb(51, 102, 204)','rgb(204, 85, 0)','rgb(51, 102, 204)'];

var fileName = '179.svg';



var myData = {

    OriginalColorHex: clipartOriginalColorsHex,

    ModifiedColorHex: clipartModifiedColorsHex,

    OriginalColorRGB: clipartOriginalColorsRGB,

    ModifiedColorRGB: clipartModifiedColorsRGB,

    fileName: fileName

};



$.ajax({

    type: POST,       //GET or POST or PUT or DELETE verb          

    url: PageURL + 'ChangeColor',       // Location of the service

    data:   JSON.stringify(myData),

    contentType: application/json; charset=utf-8,     // content type sent to server

    dataType: json,   //Expected data format from server

    processdata: true,  //True or False      

    traditional: true,          

    success: function (result) {//On Successful service call

        console.log(result);

    }

});

Much cleaner, less error-prone, and easier to test. Here's a fiddle to demonstrate.