Question

我有一个接受复杂对象的操作合约，我正在通过jQuery调用该操作。如何使用jQuery传入类似于复杂类型的对象。以下是操作签名：

public Resolution CreateNewResolution(Resolution NewResolution);

我需要在客户端传递一个Resolution对象，但我不知道如何使用jQuery。有什么帮助吗？

谢谢

Answer 1

请参阅Denny's post作为开始，虽然我不同意他对GET的使用，并在复杂参数的查询字符串中传递JSON。这似乎是错误的。

用于data的参数是您的分辨率类型的json表示。例如，假设类型和操作在服务器端定义如下：

[DataContract( Namespace = "urn:brandon.michael.hunter/ws/2010/01", 
               Name = "Resolution" )]
public class Resolution
{
    [DataMember( IsRequired = true, Name = "Name" )]
    public string Name     { get; set; } 

    [DataMember( IsRequired = true, Name = "Rank" )]
    public int Rank { get; set; }

    [DataMember( IsRequired = true, Name = "SerialNumber" )]
    public int SerialNumber { get; set; } 

    [DataMember( IsRequired = false, Name = "Id" )]
    public int Id { get; set; } 
}

[OperationContract]
[WebInvoke(Method = "PUT",
           RequestFormat=WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "new")]
public Resolution CreateNewResolution(Resolution r)
{
    // your logic here
    r.Id = System.Guid.NewGuid();
    return r;
}

然后，在Javascript中，您使用的代码可能如下所示：

var resolution = {r: { Name : "Fred", Rank : 2,  SerialNumber : 17268 }};

// convert object to JSON string  (See http://jollytoad.googlepages.com/json.js)
var objectAsJson = $.toJSON(resolution);
// result is a string:  '{"Name":"Fred","Rank":"2","SerialNumber":"17268"}'

$.ajax({
  type        : "PUT",              // must match Method in WebInvoke
  contentType : "application/json",
  url         : "Service.svc/new",  // must match UriTemplate in WebInvoke
  data        : objectAsJson, 
  dataFilter  : function (data, type) {
      // convert from "\/Date(nnnn)\/" to "new Date(nnnn)"
      return data.replace(/"\\\/(Date\([0-9-]+\))\\\/"/gi, 'new $1');
  },
  processData : false,              // do not convert outbound data to string (already done)
  success     : function(msg){ ... },
  error       : function(xhr, textStatus, errorThrown){ ... } 
 });

注意：

您需要将变量（r）的名称作为传递的JSON中的第一个对象，至少使用WCF 4.当我使用前面的示例时，它直到我放入开头变量的名称。
要在JSON中传递复杂对象，请使用PUT或POST作为请求的类型（HTTP方法）
您需要将复杂对象转换为JSON字符串。有a nice, tiny jquery plugin to do this。 Denny提供了自己的实现。
我发现如果我使用processData=true，那么发送到服务的结果字符串是查询字符串格式，而不是JSON格式。不是我想传递复杂对象的东西。所以我把它设置为假。对于您正在进行WebGet的更简单的非JSON请求，使用true将是正常的，并且所有参数都在查询字符串中。
dataFilter允许对DateTime对象进行正确的反序列化
传递给成功回调的msg参数包含返回的json。
您可能希望使用URL重写器来隐藏请求网址中的.svc标记
在这种情况下，WCF服务使用webHttp行为，而不是enableWebScript。后者动态生成Javascript代理以调用服务，但您提出问题的方式使您看起来不想要这样。

Answer 2

查看Gil Fink关于结合WCF数据服务，JSONP和jQuery的博客

http://blogs.microsoft.co.il/blogs/gilf/archive/2011/04/24/combining-wcf-data-services-jsonp-and-jquery.aspx

在Mike Flasko在MIX11的session期间，他展示了如何使用JSONPSupportBehavior属性创建一个支持JSONP的WCF数据服务，该属性可从MSDN代码库中download获得（并且应该是一部分of Microsoft.Data.Services.Extensions名称空间）。在这篇文章中，我将展示一个使用属性和jQuery的简单示例，以便为WCF数据服务进行JSONP跨域调用。

设置环境

首先，我开始创建两个不同的ASP.NET Web应用程序。第一个应用程序包括调用页面，第二个应用程序包括WCF数据服务。然后，我在第二个Web应用程序中创建了一个实体框架模型和该模型的WCF数据服务。我还添加了前面提供的link中存在的JSONPSupportBehavior.cs类。该类包括实现WCF IDispatchMessageInspector接口的JSONPSupportBehavior的实现。它还包括我在代码中使用的JSONPSupportBehaviorAttribute。代码很简单，看起来像：

[JSONPSupportBehavior] 
public class SchoolDataService : DataService<SchoolEntities>
{
  // This method is called only once to initialize service-wide policies.
  public static void InitializeService(DataServiceConfiguration config)
  {      
    config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);      
    config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
  }
}

进行JSONP通话

在第二个Web应用程序中，我创建了一个将保存JSONP调用示例的Web表单。以下是进行调用的代码：

<!DOCTYPE html>
<html>
<head runat="server">
    <title>JSONP Call</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <output id="result">
    </output>
    </form>
    <script type="text/javascript">
        $.getJSON('http://localhost:23330/SchoolDataService.svc/Courses?$format=json&$callback=?', 
        function (response) { 
            $.each(response.d, function (index, value) {
                var div = document.createElement('div');
                div.innerHTML = value.Title;
                $('#result').append(div);
            })
        });        
    </script>
</body>
</html>

让我们探索网络表单代码：起初我使用Microsoft CDN来检索jQuery库。然后，我创建了一个HTML5输出元素，以便向其追加调用的输出。在主脚本中，我使用jQuery的getJSON函数调用WCF数据服务。请注意，为了从WCF数据服务获取JSON响应，您需要使用$ format = json查询字符串参数。检索数据后，我迭代并为检索到的每个课程标题创建一个div元素。这是在我在getJSON函数调用中连接的成功函数中完成的。以下是运行代码的输出：

enter image description here

摘要

在帖子中，我提供了一个使用jQuery对WCF数据服务进行JSONP调用的简单示例。这种解决方案可以帮助您从客户端使用其他域中存在的WCF数据服务。在后续帖子中，我将使用新的datajs库

显示相同的示例

将复杂对象传递到WCF Rest Service

2 个答案: