如何使用WinJS.xhr将参数传递给WCF REST方法？

Question

I am trying to pass parameters to my WCF which uses REST to pass data.

The definition of my method is :

[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json)]
void newUserAndImageEntry(byte[] pArrayImage, string pContentType, string pUserName, string pFileName);

What I am trying is sort of :

WinJS.xhr({ url: "http://localhost:9814/Student.svc/newUserAndImageEntry" })
    .then(function (r ) {
        DO WHAT?;
    });

But dont know what to do in the function or if I have to pass my parameters in advance..

Answer 1

Your operation as is won't work - since you have more than one parameter, you need to define the BodyStyle property as Wrapped (or WrappedRequest - in your scenario, since the operation doesn't have a return value, it doesn't matter):

[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           BodyStyle = WebMessageBodyStyle.WrappedRequest)]
void newUserAndImageEntry(byte[] pArrayImage, string pContentType,
    string pUserName, string pFileName);

Another problem is that byte arrays probably isn't a good type to receive data from JavaScript - it will be received as an array of numbers which is not very efficient. Doing some preprocessing on the client - for example, to encode the bytes as base64, will give you a smaller payload

[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           BodyStyle = WebMessageBodyStyle.WrappedRequest)]
void newUserAndImageEntry(string pArrayImageAsBase64, string pContentType,
    string pUserName, string pFileName);

Now for the client side: you need to pass your parameters in the data field in the object you pass as a parameter. Something like the code below. Check the WinJS.xhr documentation for more details on the call.

var arrayImage = getArrayImage();
var arrayImageBase64 = convertToBase64(arrayImage);
var contentType = 'image/jpeg';
var userName = 'johndoe';
var fileName = 'balls.jpg';
var data = {
    pArrayImageAsBase64: arrayImageBase64,
    pContentType: contentType,
    pUserName: userName,
    pFileName: fileName
};
var xhrOptions = {
    url: "http://localhost:9814/Student.svc/newUserAndImageEntry",
    headers: { "Content-Type": "application/json" },
    data: JSON.stringify(data)
};
WinJS.xhr(xhrOptions).done(
    function (req) {
        // Call completed, find more info on the parameter
    }, function (req) {
        // An error occurred, find more info on the parameter
    });