vượt qua chuỗi mảng qua jQuery AJAX để C# WebMethod

Question

Tôi muốn vượt qua một chuỗi mảng hoạt Javascript để một C# WebMethod qua 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); 
    } 
}); 

dữ liệu đi vào cuộc gọi ajax trông như thế này

{ '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 
} 

Lỗi

{ 
    "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" 
} 

Answer 1

Quick Fix

mảng JSON không cần phải được trong dấu ngoặc kép. Đây là JSON hợp lệ:

{ 
    "OriginalColorHex": [ 
     "#000000", 
     "#006565", 
     "#cccc99" 
    ] 
} 

Hãy thử xác thực JSON của bạn bằng công cụ như JSONLint để đảm bảo rằng nó hợp lệ. WebMethod sẽ có thể chấp nhận một mảng chuỗi tốt.

Một phương pháp tốt hơn một chút

Thay vì xây dựng JSON của bạn như là một chuỗi, xây dựng một đối tượng và sau đó để xử lý JavaScript chuyển đổi cho bạn:

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

sạch hơn nhiều, ít dễ bị lỗi và dễ kiểm tra hơn. Đây là một số fiddle để minh họa.

Answer 2

Do giá trị không phải là mảng. Loại bỏ các dấu ngoặc kép xung quanh các chuỗi trông giống như một mảng.

{ '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' } 

Answer 3

Bạn đang chuyển một chuỗi ('["# 000000", "# 006565", "# cccc99"]') vào chuỗi []. Loại bỏ các dấu nháy đơn xung quanh mảng của bạn. Điều này nên làm điều đó:

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

});

Answer 4

Bạn có thể làm cho cuộc sống của mình dễ dàng hơn bằng cách chờ đợi để xâu chuỗi dữ liệu của bạn sau khi bạn đã tập hợp tất cả lại với nhau.

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