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]  

下載