Je souhaite passer un tableau de chaînes JavaScript à un WebMethod C # 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);
}
});
Les données entrant dans un appel ajax ressemblent à ceci
{ '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' }
WebMethod C #:
[WebMethod]
public static string ChangeClipartColor(string[] OriginalColorHex, string[] ModifiedColorHex, string[] OriginalColorRGB, string[] ModifiedColorRGB, string fileName)
{
// Code Here
}
Erreur
{
"Message":"Cannot convert object of type \u0027System.String\u0027 to type \u0027System.String[]\u0027",
"StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object\u0026 convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object\u0026 convertedObject)\r\n at System.Web.Script.Services.WebServiceMethodData.StrongTypeParameters(IDictionary`2 rawParams)\r\n at System.Web.Script.Services.WebServiceMethodData.CallMethodFromRawParams(Object target, IDictionary`2 parameters)\r\n at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)",
"ExceptionType":"System.InvalidOperationException"
}
Solution rapide
Les tableaux JSON n'ont pas besoin d'être entre guillemets. Ceci est valide JSON:
{
"OriginalColorHex": [
"#000000",
"#006565",
"#cccc99"
]
}
Essayez de valider votre JSON avec un outil tel que JSONLint pour vous assurer qu'il est valide. Le WebMethod devrait pouvoir accepter un tableau de chaînes parfaitement.
Une méthode légèrement meilleure
Au lieu de construire votre JSON en tant que chaîne, créez un objet, puis laissez JavaScript gérer la conversion pour vous:
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);
}
});
Beaucoup plus propre, moins sujet aux erreurs et plus facile à tester. Voici un violon à démontrer.
Parce que les valeurs ne sont pas un tableau. Supprimez les guillemets autour des chaînes qui ressemblent à un tableau.
{ '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' }
Vous passez une chaîne ('["# 000000", "# 006565", "# cccc99"]') dans une chaîne []. Débarrassez-vous des guillemets simples autour de votre tableau. Cela devrait le faire:
$.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);
}
});
Vous pouvez vous simplifier la vie en attendant de structurer vos données une fois que vous avez tout rassemblé.
var data = {
OriginalColorHex: clipartOriginalColorsHex,
ModifiedColorHex: clipartModifiedColorsHex,
OriginalColorRGB: clipartOriginalColorsRGB,
ModifiedColorRGB: clipartModifiedColorsRGB,
fileName: clipartFileName
};
$.ajax({
type: "POST", // GET or POST or PUT or DELETE verb
url: PageURL + 'ChangeColor', // Location of the service
data: JSON.stringify(data),
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);
}
});