用Visual Studio.NET 2008实现功能强大的Ajax+WCF Service交互

Visual Studio.NET 2008已经出了Beta2版。相信有些朋友已经下载尝鲜了。与Visual Studio.NET 2008一起发布的.NET Framework 3.5对于JavaScript及Json有着非常好的支持，这将使得客户端的Ajax代码可以非常方便的和服务器交互，传送数据。下面有一个简短例子可以帮助您了解这些特性。

在这个例子里面，我们用Ajax的方式查询服务器上进程情况。

首先我们先打开Visual Studio.NET 2008并创建一个ASP.NET Web Site.

然后我们在这个项目里面添加一个Ajax-enabled WCF Service: ProcessService

这里我们可以看到，一个默认的WCF Service已经被生成：

 

[ServiceContract(Namespace = "" )]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public   class  DiscService
... {
    // Add [WebGet] attribute to use HTTP GET
    [OperationContract]
    public void DoWork()
    ...{
        // Add your operation implementation here
        return;
    }

    // Add more operations here and mark them with [OperationContract]
}

这里我们就需要作一些小小的修改：

 

using  System;
using  System.Runtime.Serialization;
using  System.ServiceModel;
using  System.ServiceModel.Activation;
using  System.ServiceModel.Web;
using  System.IO;
using  System.Diagnostics;
using  System.Collections.Generic;

[ServiceContract(Namespace = "" )]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public   class  DiscService
... {
    // Add [WebGet] attribute to use HTTP GET
    [OperationContract]
    public MyProcess[] GetProcess(string random)
    ...{
        List<MyProcess> myProcesses = new List<MyProcess>();
        Process[] processes = Process.GetProcesses();
        foreach (Process process in processes)
        ...{
            MyProcess mp = new MyProcess();
            mp.ProcessName = process.ProcessName;
            mp.Memory = process.VirtualMemorySize64;
            mp.ThreadCount = process.Threads.Count;
            myProcesses.Add(mp);
        }
        return myProcesses.ToArray();
    }

    // Add more operations here and mark them with [OperationContract]
}

[DataContract]
public   class  MyProcess
... {
    [DataMember]
    public long Memory;

    [DataMember]
    public int ThreadCount;

    [DataMember]
    public string ProcessName;
}

修改好编译项目，然后用浏览器浏览ProcessService.svc, 这时候可以看到一些WCF的说明关于当前WCF Service的Meta publishing 被disabled了。不要紧，现在你可以在URL后面输入一个/js后缀，比如我这里URL是：http://localhost:1314/AjaxWithWCF/ProcessService.svc/js。这时候你就会看到一个下载提示框，你可以通过这个URL得到一个Javascript的proxy文件，这些javascript是用来访问我们刚刚建立的WCF Service的。

现在我们的Service端准备好了，接下来就是添加一个Ajax Web Form. (默认的Ajax Web Form 会帮我们添加必要的Web.config section, 同事也会在aspx Code里面添加一个ScriptManager)让我们来添加一个按钮和一个搜索框以及简单的Javascript来访问这个Service.

我们可以在Form 里面加上这些代码：

< script  type ="text/javascript"  src ="ProcessService.svc/js" ></ script >
< script  type ="text/javascript"   > ...
      function GetProcessList()
      ...{
         ProcessService.GetProcess(Math.random().toString(), GetProcessSuccess, GetProcessFail, "");
      }
      
      function GetProcessSuccess(result)
      ...{
         var div = document.getElementById("processlist");
         for(var i=0;i<result.length;i++)
         ...{
            var mp = document.createTextNode(result[i].ProcessName + " Thread:" + result[i].ThreadCount + " memory:" + result[i].Memory); 
            var newLine = document.createElement("br");
            div.appendChild(mp);
            div.appendChild(newLine);
            
         }
      }
      
      function GetProcessFail(error)
      ...{
      }
       </ script >
         < input  type ="button"  onclick ="javascript:GetProcessList()"  value ="refresh"   />
         < div  id ="processlist" ></ div >

运行结果大家可以自己试一下。需要说明的几点是：

• 调用时就是： 类名.方法名(参数1，参数2，...，成功处理函数，失败处理函数，"");
• 成功处理函数和失败处理函数处理见sample
• 代码一定要加在Form里面，否则会抱错
• 这里random参数没有被使用，目的有两个，一个是让大家看到参数怎么传递，二来ajax调用Request往往需要一个变化的内容，要不然cache可能会直接返回一个之前的response.
• 这里列表每次没有清空，大家可以添加一下相关代码

 

总的来说Visual Studio.NET 2008里面的Ajax开发被大大的增强了，这不就是我们一直所期待的吗？