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">

<asp:ServiceReference Path="~/HelloWorldService.svc" />

</Services>

</asp:ScriptManager>

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

<div>

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">

<asp:ServiceReference Path="~/HelloWorldService.svc" />

</Services>

</asp:ScriptManager>

<input id="btnServiceCaller" type="button" value="Get Value"

onclick="GetValueFromServer()"; />

</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

ToDo GetToDo(long ID);

ToDo AddToDo(ToDo toDo);

bool DeleteToDo(ToDo todo);

ToDo UpdateToDo(ToDo todo);

List<ToDo> GetAllToDo();

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

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>

</behavior>

</endpointBehaviors>

</behaviors>

<endpoint behaviorConfiguration="AspNetAjaxBehavior" binding="webHttpBinding"

contract="ServiceLibrary.IToDoService" />

</service>

<endpoint address="" behaviorConfiguration="WebUI.HelloWorldServiceAspNetAjaxBehavior"

binding="webHttpBinding" contract="WebUI.HelloWorldService" />

</services>

</system.serviceModel>

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

<asp:ScriptReference Path="~/Script/ClientServiceHeler.js" />

</Scripts>

<asp:ServiceReference Path="~/ToDoService.svc" />

我們使用了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]

本文轉自

高陽 51CTO部落格，原文連結：http://blog.51cto.com/xiaoyinnet/196076 ，如需轉載請自行聯系原作者

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

繼續閱讀

tab滑鼠經過菜單切換

XX系統實施過程問題總結

vue （vue2.0）使用總結(從大體結構總結)

無元件上傳圖檔到資料庫中，最完整解決方案

vue搭建過程及出現問題

【MySQL資料庫】資料庫索引事務1.索引2.事務

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

NOSQL安全攻擊

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

登入plsql 報錯 the account is locked --使用者被鎖

sqlServer根據經緯查距離

SequoiaDB巨杉資料庫C++驅動概述

layui多任務上傳添加進度條