2010-01-14 79 views
11

我有一個Operation Contract,它接受一個複雜的對象,我通過jQuery調用操作。我如何傳入類似jQuery的複雜類型對象。下面是操作簽名:將複雜對象傳遞到WCF Rest服務

public Resolution CreateNewResolution(Resolution NewResolution); 

我需要在客戶機上的分辨率對象通過,但我不知道該怎麼辦像使用jQuery。任何幫助?

謝謝

回答

22

一開始見Denny's post,雖然我不同意他使用GET的同意,並通過JSON查詢字符串中的複雜PARAMS。這似乎是錯誤的。


您使用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 thisDenny提供了他自己的實現。
  • 我發現如果我使用processData=true,那麼發送到服務的結果字符串是以查詢字符串格式,而不是JSON。不是我想要傳遞複雜對象。所以我把它設置爲false。對於更簡單的非JSON請求,如果您在做WebGet,並且所有參數都在查詢字符串中,那麼使用true將會很好。
  • 的dataFilter允許的日期時間正確的反序列化對象
  • msg PARAM傳遞給成功回調包含返回的JSON。
  • 您可能希望使用URL重寫器來隱藏請求URL中的.svc標記
  • 在這種情況下,WCF服務使用webHttp行爲,而不是enableWebScript。後者動態地生成Javascript代理來調用服務,但是你問這個問題的方式,使得它看起來像你不想要的那樣。

+1

您是否更新此顯示POST而不是PUT? POST通常被認爲是避免跨站腳本問題的最安全方法 – LamonteCristo 2011-10-30 17:28:39

0

退房吉爾·芬克就結合WCF數據服務,JSONP和jQuery

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

在邁克Flasko的session在MIX11博客中,他展示瞭如何創建一個JSONP知道WCF數據服務與JSONPSupportBehavior屬性可用於從MSDN代碼庫download(並應該是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> 

讓我們探索Web表單代碼: 起初我使用微軟CDN,以便檢索jQuery庫。然後,我創建了一個HTML5輸出元素,以便將該輸出追加到它的輸出中。在主腳本中,我使用jQuery的getJSON函數調用WCF數據服務。請注意,爲了從WCF數據服務獲得JSON響應,您需要使用$ format = json查詢字符串參數。在檢索數據之後,我迭代併爲檢索到的每個課程標題創建一個div元素。這是在getJSON函數調用中連線的成功函數中完成的。以下是運行代碼的輸出:

enter image description here

摘要

在後我提供製備使用jQuery一個JSONP調用WCF數據服務的一個簡單的例子。這種解決方案可以幫助您從客戶端使用其他域中存在的WCF數據服務。在後續文章中,我將使用新的datajs庫顯示相同的示例