WCF服務在JavaScript中使用ASP.NET的AJAX方法

在微軟應用開發平臺上WCF (Windows Communication Foundation)增加了很多新功能，特別是在應用程序中實現如何相互溝通。

在本文中，我們將會看到WCF如何用於直接從客戶端調用JavaScript代碼。這是一個提供非常棒的ASP.NET AJAX的功能。在本文中，我們不關注WCF內部機制，而我們將重點放在如何直接從Javascript調用一個服務。因此，不如就如何ASP.NET或的.NET運行庫管理這個功能。

      爲了說明這個想法正確性，我們創建一個解決方案。我們將看到兩個辦法來增加WCF的服務，可以從JavaScript的調用。使用AJAX並啓用服務項目模板（Ajax-Enable WCF Service），使用服務接口（Service Interface）定義一個類庫。

如，下圖所示ToDoUpdateToDo時序圖：

       在這裏，我們將看到一個非常簡單的方式使用JavaScript中的WCF服務。打開vs2008sp1，右鍵單擊Web應用程序項目，然後選擇添加新項。選擇基於AJAX的WCF服務項目模板，並將其命名爲“HelloWorldService.svc ”並單擊確定。該向導將添加HelloWorldService.svc文件名的解決方案。該文件也有一個代碼文件。建立文件的過程我就不詳細說了。如果您在一個XML文件編輯器打開HelloWorldService.svc，

您將看到一個標記，如下所示：

<%@ ServiceHost Language="C#" Debug="true" 
  Service="WebUI.HelloWorldService" CodeBehind="HelloWorldService.svc.cs" %>

如果你打開代碼文件，你將會看到代碼如下所示：

namespace WebUI
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = 
        AspNetCompatibilityRequirementsMode.Allowed)]
    public class HelloWorldService
    {
        [OperationContract]
        public void DoWork()
        {
            return;
        }
    }
}

      Microsoft Visual Studio 2008會自動的在Web.config文件中添加必要的配置。現在，先添加一個HelloWorld（）方法返回一個字符串“HelloWorld ”，並添加一個[OperationContract]屬性的方法。現在，添加頁面的Web應用程序項目，並將其命名爲“HelloWorldTest.aspx ”。拖放腳本管理項目從Visual Studio工具箱。在ScriptManager標記，增加服務範圍的服務。

實例代碼如下： 

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/HelloWorldService.svc" />
    </Services>
</asp:ScriptManager>

      現在，添加一個按鈕和一個TextBox頁面，並在按鈕Click事件中，使用JavaScript函數調用服務。當你寫的服務調用功能時，在Visual Studio 2008年HTML編輯器將提供智能寫必要的函數調用。完整的HTML代碼如下:

<form id="form1" runat="server">
<div>
    <script language="javascript" type="text/javascript">
        function GetValueFromServer() {
            HelloWorldService.HelloWorld(onSuccess, onFailure);
        }
        function onSuccess(result) {
            document.getElementById('txtValueContainer').value = result;
        }
        function onFailure(result) {
            window.alert(result);
        }
    </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/HelloWorldService.svc" />
        </Services>
    </asp:ScriptManager>
    <input id="btnServiceCaller" type="button" value="Get Value" 
           onclick="GetValueFromServer()"; />
    <input id="txtValueContainer" type="text" value="" />
</div>
</form>

      請注意，當調用服務時，我們可以通過兩種方法：一個是回調和其他的錯誤回調。如果我們需要通過任何參數的函數，參數將首先然後回調。

因此，如果我們有一個函數命名getvalue其中兩個字符串參數，我們要調用的功能[NameSpaceName].[ServiceName].getvalue(“value one”, valuetwo”,on_success,on_error); 分別的在on_sucess和on_error的回調和錯誤回調。下圖所示，類圖如下：

                                     

使用服務接口中定義的類庫

所以，我們看到如何使用AJAX-enabled WCF Service的項目模板。現在，我們也將看到我們如何才能使這項服務爲ASP.NET AJAX的。當我們創建類庫項目，默認情況下，這不是說的服務模式和運行時支持是必要的運行WCF序列化。因此，我們必須增加必要的服務參考。先右鍵單擊類庫

項目，並選擇添加引用，然後選擇這些引用：

System.Runtime.Serialization 
System.ServiceModel 

      在這一階段，我們將使用一個TODO管理爲例，證明了整個想法。增加服務的數據庫，然後創建一個TODO表ID，Description和Status字段。現在，添加一個LINQ到SQL類文件從項目模板。拖放的TODO表從數據庫的LINQ到SQL類文件設計。現在，請點擊設計器到屬性窗口中，改變單向序列模式。現在，我們的設計器生成的LINQ到SQL類是準備用於WCF。如果您想使用自定義用戶定義的類型，您必須設置[DataContract]層次屬性到您的類，還必須添加[DataMember]特殊屬性。 現在，我們要添加這樣的一個服務接口：

namespace ServiceLibrary
{
    [ServiceContract(Namespace = "ServiceLibrary")]
    interface IToDoService
    {
        [OperationContract]
        ToDo GetToDo(long ID);
        [OperationContract]
        ToDo AddToDo(ToDo toDo);
        [OperationContract]
        bool DeleteToDo(ToDo todo);
        [OperationContract]
        ToDo UpdateToDo(ToDo todo);
        [OperationContract]
        List<ToDo> GetAllToDo();
    }
}

      請注意，我們已經提到了一個名字空間內ServiceContract接口屬性。這是非常重要的。我們將使用這個名稱的服務名稱內的JavaScript代碼來訪問服務。現在，我們要執行此服務界面;代碼如下。請注意，在代碼中，我使用了     [AspNetCompatibilityRequirements（ RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed ） ]類屬性，這是必須要求顯示服務作爲一個ASP.NET AJAX技術調用WCF Service。

namespace ServiceLibrary
{
    [AspNetCompatibilityRequirements(RequirementsMode = 
        AspNetCompatibilityRequirementsMode.Allowed)]
    public class ToDoService : IToDoService
    {
        #region IToDoService Members
        public ToDo GetToDo(long ID)
        {
            DataClasses1DataContext context = new DataClasses1DataContext();
            var toDos = from p in context.ToDos
                        where p.ID == ID
                        select p;
            List<ToDo> listTodos =  toDos.ToList();
            if (listTodos != null && listTodos.Count > 0)
            {
                return listTodos[0];
            }
            else
            {
                return null;
            }
        }
        #endregion
    }
}

配置Web應用程序使用的TODO服務
     現在我們已經確定的所有必要的東西，來運行TODO的應用程序，現在是時候解開服務到客戶端作爲一個ASP.NET AJAX技術調用WCF Service。爲此，我們要添加一個基於AJAX的WCF Service的.SVC文件,不使用它的代碼文件。或者，我們可以添加一個XML文件或文本文件，然後將其重新命名爲ToDoService.svc 。打開一個XML編輯器，並新增了一條指令，如下所示： 

<%@ ServiceHost Language="C#" Debug="true" Service="ServiceLibrary.ToDoService" %>

 現在，我們得進行必要的配置，以運行此服務的Web.config中。代碼如下：

<system.serviceModel>
  <behaviors>
   <endpointBehaviors>
    <behavior name="AspNetAjaxBehavior">
     <enableWebScript />
    </behavior>
    <behavior name="WebUI.HelloWorldServiceAspNetAjaxBehavior">
     <enableWebScript />
    </behavior>
   </endpointBehaviors>
  </behaviors>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
  <services>
   <service name="ServiceLibrary.ToDoService">
    <endpoint behaviorConfiguration="AspNetAjaxBehavior" binding="webHttpBinding"
     contract="ServiceLibrary.IToDoService" />
   </service>
   <service name="WebUI.HelloWorldService">
    <endpoint address="" behaviorConfiguration="WebUI.HelloWorldServiceAspNetAjaxBehavior"
     binding="webHttpBinding" contract="WebUI.HelloWorldService" />
   </service>
  </services>
</system.serviceModel>

      現在，右鍵點擊文件並選擇在瀏覽器中查看看到的服務啓動和運行良好。到下一個階段，您必須添加一個serviceHostingEnvironment並設aspNetCompatibilityEnabled = “true”，以便能夠使用ASP.NET中的WCF service的功能，比如它的HTTP環境，Session等在JavaScript使用此服務. 現在，使用該服務的HelloWorldService就像我們以前使用的。下面，我給出實例代碼在ScriptManager標記中來解釋清楚。請注意，我們增加了clientServiceHelper.js文件。我們已經把所有的客戶端JavaScript函數到WCF在該文件中通信。

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/Script/ClientServiceHeler.js" />
    </Scripts>
    <Services>
        <asp:ServiceReference Path="~/ToDoService.svc" />
    </Services>
</asp:ScriptManager>

       我們使用了ASP.NET AJAX的客戶端模型，面向對象的JavaScript客戶端編寫代碼clientServiceHelper.js 。

Type.registerNamespace("ServiceClients");
    ServiceClients.ToDoClient = function() {
}
ServiceClients.ToDoClient.prototype = {

    AddToDo: function(todo, callback, errorCallBack) {
        ServiceLibrary.IToDoService.AddToDo(todo, callback, errorCallBack);
    },
    DeleteToDo: function(todo, callback, errorCallBack) {
        ServiceLibrary.IToDoService.DeleteToDo(todo, callback, errorCallBack);
    },

    UpdateToDo: function(todo, callback, errorCallBack) {
        ServiceLibrary.IToDoService.UpdateToDo(todo, callback, errorCallBack);
    },
    GetAllToDo: function(callback, errorCallBack) {
        ServiceLibrary.IToDoService.GetAllToDo(callback, errorCallBack);
    },
    dispose: function() {
    }
}
ServiceClients.ToDoClient.registerClass('ServiceClients.ToDoClient', null, Sys.IDisposable)

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

 總結：

在本文中，我們看到了我們如何能夠使用基於AJAX的WCF service項目模板。然後，我們看到我們如何能夠使用服務接口的WCF服務。我們還看到了如何配置在Web.config使用服務。最後，我們看到我們如何添加服務引用ScriptManager 。我們還可以添加一個服務中提及的C ＃代碼。

簡單的代碼示例如下：

ScriptManager manager = ScriptManager.GetCurrent(Page);
ServiceReference reference = new ServiceReference("ToDoService.svc");
manager.Services.Add(reference);

Microsoft Visual Studio 2008 SP1 ，.NET Framework 3.5 SP1 ，ASP.NET AJAX ，IIS 7 or VS Integrated Web Server

[WCF and SVS file configured]  

下載