WCF以Json格式返回对象，客户端以JS调用显示

很少写东西，但是看到别人写的文章自己又禁不住写点，写了有时候又觉得不好意思给大家看！

今天好不容易鼓起勇气写点……

这几天看了一些WCF的资料

第一感觉是：这玩艺太深了

第二感觉是：这玩艺，挺麻烦的（光配置就搞不明白）

今天调了半天，好不容易把这个返回Json对象，在客户端展示的实例给整理出来了。下面分享给大家

此实例：以IIS为Host承载

1、先建一个WCF Service

建一个ServiceContract接口 1 [ServiceContract]

 2 public interface IJsonWCFService
 3 {
 4     /// <summary>
 5     /// GetJsonResult
 6     /// </summary>
 7     /// <param name="name"></param>
 8     /// <param name="address"></param>
 9     /// <param name="phone"></param>
     /// <remarks>
     /// 为实现Json序列化，添加属性
     /// [WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
     /// </remarks>
     /// <returns></returns>
     [OperationContract]
     [WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
     JsonResult GetJsonResult(string name, string address, string phone);
 }

实现这个接口

 1 public class JsonWCFService : IJsonWCFService
 2 {
 3     #region IJsonWCFService Members
 4     /// <summary>
 5     /// Implement the interface
 6     /// </summary>
 7     /// <param name="name">Name</param>
 8     /// <param name="address">Address</param>
 9     /// <param name="phone">PhoneNumber</param>
     /// <returns>JsonResult</returns>
     public JsonResult GetJsonResult(string name, string address, string phone)
     {
         JsonResult result = new JsonResult(name, address, phone);
         return result;
     }
     #endregion
 }

 

这个地方好像忘记了一个返回的DataContract类

 1 [DataContract]
 2 public class JsonResult
 3 {
 4     /// <summary>
 5     /// Construct
 6     /// </summary>
 7     public JsonResult(string name, string address, string phone)
 8     {
 9         _name = string.Format("Name:{0}", name);
         _address = string.Format("Address:{0}", address);
         _phoneNumber = string.Format("PhoneNubmer:{0}", phone);
     }
 
     private string _name;
     /// <summary>
     /// Name
     /// </summary>
     [DataMember]
     public string Name
     {
         get { return _name; }
         set { _name = value; }
     }
     private string _address;
     /// <summary>
     /// Address
     /// </summary>
     [DataMember]
     public string Address
     {
         get { return _address; }
         set { _address = value; }
     }
     private string _phoneNumber;
     /// <summary>
     /// PhoneNumber
     /// </summary>
     [DataMember]
     public string PhoneNumber
     {
         get { return _phoneNumber; }
         set { _phoneNumber = value; }
     }

 

 2、为实现Json序列化设置，我们还得添加一个WebContentTypeMapper

(此类最终会用在Service的配置文件中)

 1 using System.ServiceModel.Channels;
 2 
 3 namespace Microsoft.Ajax.Samples
 4 {
 5     /// <summary>
 6     /// JsonContentTypeMapper
 7     /// 用在配置中<webMessageEncoding webContentTypeMapperType="Microsoft.Ajax.Samples.JsonContentTypeMapper, JsonContentTypeMapper, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">
 8     /// </summary>
 9     public class JsonContentTypeMapper : WebContentTypeMapper
     {
         public override WebContentFormat GetMessageFormatForContentType(string contentType)
         {
             if (contentType == "text/javascript")
             {
                 return WebContentFormat.Json;
             }
             else
             {
                 return WebContentFormat.Default;
             }
         }
     }
 }

 

3、添加svc文件，便于发布Service

svc文件其实是十分简单的一个文件，以下是SVC文件中的内容，可以将此文件添加在网站项目的根目录，也可以是一个子目录。对此没有太多的要求。

 <%@ ServiceHost Language="C#" Debug="true" Service="JsonWCFService" %>

 

4、添加web.config文件

WCFService中相当一部分知识是关于配置的，关于这些内容，一直在“研究”。还没有理出来一个比较顺的思路！

 1 <?xml version="1.0"?>
 2 <configuration>
 3   <appSettings/>
 4   <connectionStrings/>
 5   <system.web>
 6 
 7   </system.web>
 8   <system.serviceModel>
 9     <behaviors>
       <endpointBehaviors >
         <behavior name="jsonWcfBehavior">
           <webHttp/>
         </behavior>
       </endpointBehaviors>
     </behaviors>
     <bindings>      
       <customBinding>        
         <binding name="JsonMapper">
           <!--此处配置相当重要，使用了我们编写的JsonContentTypeMapper类，约定返回值类型是Json-->
           <webMessageEncoding webContentTypeMapperType="Microsoft.Ajax.Samples.JsonContentTypeMapper, JsonContentTypeMapper, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">
           </webMessageEncoding>
           <httpTransport manualAddressing="true"/>
         </binding>
       </customBinding>
     </bindings>
     <services>      
       <service name="JsonWCFService" >
         <!--注意此处的endpoint配置，address和contract两个属性，在客户端Js调用时会用的上-->
         <endpoint address="ajaxEndpoint" behaviorConfiguration="jsonWcfBehavior"
                   binding="customBinding"
                   bindingConfiguration="JsonMapper" contract="IJsonWCFService">
         </endpoint>
       </service>
     </services>
   </system.serviceModel>
 </configuration>

 

 到此为止，Service算是提供完了，可以运行一下看一下结果。

5、剩下的就是客户端的问题，我们来实现客户端调用WCFService的方法

客户端的内容不算太复杂，其中一好多部分内容我自己觉得：应该是固定写法

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title>Json Service Rresult</title>
 4 
 5     <script language="javascript" type="text/javascript">
 6         function Call(contentType) {
 7             var name = document.getElementById("name").value;
 8             var address = document.getElementById("address").value;
 9             var phone = document.getElementById("phone").value;
             if (name && address && phone) {
                 // Create HTTP request
                 var xmlHttp = CreateHttpRequest();
                 if (xmlHttp == null) {
                     alert("此实例只能在支持Ajax的浏览器中运行");
                 }
 
                 // Create result handler
                 xmlHttp.onreadystatechange = function(){
                     if (xmlHttp.readyState == 4) {
                         var result = eval("(" + xmlHttp.responseText + " )").GetJsonResultResult;
                         var html = result.Name + "<br/>";
                         html += result.Address + "<br/>";
                         html += result.PhoneNumber + "<br/>";
                         document.getElementById("divMessagePanel").innerHTML = html;
                     }
                 }
                 //初始化操作Url
                 //tools.self.com:站点发布的域名
                 //ajaxEndpoint请参阅web.config中配置
                 //<endpoint address="ajaxEndpoint" behaviorConfiguration="jsonWcfBehavior"
                 //  binding="customBinding"
                 //  bindingConfiguration="JsonMapper" contract="IJsonWCFService">
                 //</endpoint>
                 //GetJsonResult:服务方法名称
                 var url = "http://tools.self.com/Json/JsonWCFService.svc/ajaxEndpoint/GetJsonResult";
 
                 //初始化Json消息
                 var body = '{"name":"';
                 body = body + name + '","address":"';
                 body = body + address + '","phone":"';
                 body = body + phone + '"}';
                 //发送Http请求
                 xmlHttp.open("POST", url, true);
                 xmlHttp.setRequestHeader("Content-type", contentType);
                 xmlHttp.send(body);
             }
         }
         //创建HttpRequest对象
         function CreateHttpRequest() {
             var httpRequest;
             try {
                 httpRequest = new XMLHttpRequest();
             }
             catch (e) {
                 try {
                     httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                 }
                 catch (e) {
                     try {
                         httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                     }
                     catch (e) {
                         return null;
                     }
                 }
             }
             return httpRequest;
         }        
         
     </script>
 </head>
 <body>
     <h1>
         JsonContentTypeMapper 客户端页面</h1>
     <p>
         姓名:
         <input type="text" id="name" /></p>
     <p>
         地址:
         <input type="text" id="address" /></p>
     <p>
         电话号码:
         <input type="text" id="phone" /></p>
     <input type="button" onclick="return Call('text/javascript');" value="application/json" /><br />
     <br />
     <div style="font-size: 16px; color: red" id="divMessagePanel">
     </div>
 </body>
 </html>
 
 

 

 到此整个功能算是完成了。

Service,Host,Client都有了，功德圆满，大家可以运行看一下结果。