Ajax 与 WebService 之间日期等数据类型的转换

三里屯摇滚

Ajax 与 WebService 之间日期等数据类型的转换

昨天发布了 JQueryElement 3.6.0 主要是增加了一个验证的插件和数据转化功能的增强, 但这次并不是要说新加入的验证插件, 而是说明 Ajax 传递的数据类型和 WebService 所需的类型不同时, 发生的情况, 以及处理特殊的日期格式的问题.

示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar

本文将说明在使用 Ajax 调用 WebService 时, 客户端和服务器端的数据类型转换:

  * 准备

   * WebService 转换数据类型

   * 通过 Parameter 在客户端转化数据类型

   * 数据类型转换失败时

   * 日期类型

准备

请先查看 http://code.google.com/p/zsharedcode/wiki/AjaxReturnJSON 或者准备一节的内容. 本文中的代码可以在 .NET 2.0 下运行, 不同版本中可能需要稍作改动.

WebService 转换数据类型

在 ASP.NET 中, 如果从客户端传递的参数类型和 WebService 所需要的参数类型不同, 则服务器端将试图将参数转化为所需的类型.

如果, 在 WebService 中拥有一个名为 StringToString 的方法:

1. [WebMethod][ScriptMethod]public string StringToString ( string value ){    this.Context.Response.Cache.SetNoStore ( );    return string.Format ( "{0}", value );}StringToString

复制代码

方法具有一个 string 类型的参数 value, 如果在客户端传递的 value 参数的类型为数值, 布尔值, 则将自动的转化为字符串.

下面是使用 JQueryElement 的 Button 控件来调用 WebService 的代码:

1. <je:Button ID="cmdString3" runat="server"    Label="传递布尔值 false 到 string StringToString(string)">    <ClickAsync Url="webservice.asmx" MethodName="StringToString" Success="    function(data){        alert(data);    }    ">        <ParameterList>            <je:Parameter Name="value" Type="Expression" Value="true"                DataType="Boolean"/>        </ParameterList>    </ClickAsync></je:Button>

复制代码

通过 ClickAsync 来设置点击按钮时的 Ajax 操作, 在 Parameter 中, 设置 DataType 为 Boolean 来明确的表示传递给服务器的是一个布尔值, Type 为 Expression 表示 Value 中的是一个 javascript 表达式.

上面的代码传递布尔值 true 给方法 StringToString, 而 StringToString 需要一个字符串, 因此 ASP.NET 会自动的将 true 转化为字符串, 最后的结果将弹出 True.

ASP.NET 可以将传递来的数值, 布尔值转化为字符串. 可以将传递来的表示数字的字符串转化为数值类型, 比如将 "123" 转化为 123. 可以将字符串 "true" 或 "false" 转化为布尔值. 可以将空字符串或形式类似于 "2011-1-1 11:33:44" 的字符串转化为日期类型.

通过 Parameter 在客户端转化数据类型

在 JQueryElement 中, 可以使用 Parameter 来在客户端转化数据类型. 比如: 通过 jQuery 的 val 方法, 可以获取到文本框的值, 这个值是一个字符串, 使用 DataType 来选择需要转化为的类型.

1. <input type="text" id="txtInt1"/><je:Button ID="cmdInt1" runat="server"    Label="传递数值到 string IntToString(int)">    <ClickAsync Url="webservice.asmx" MethodName="IntToString" Success="    function(data){        $('#lblInt1').text('返回 ' + data + ', 类型为: ' + typeof data);    }    ">        <ParameterList>            <je:Parameter Name="value" Type="Selector" Value="'#txtInt1'"                DataType="Number"/>        </ParameterList>    </ClickAsync></je:Button><p id="lblInt1"></p>

复制代码

代码中, 设置 DataType 为 Number, 那么在请求之前, 文本框 txtInt1 中的内容将转化为数值.

数据类型转换失败时

如果, ASP.NET 在转换数据时发生错误, 那么将向客户端返回一个错误, 可以通过 Async 的 Error 来处理:

1. <input type="text" id="txtInt1"/><je:Button ID="cmdInt1" runat="server"    Label="传递字符串到 string IntToString(int)">    <ClickAsync Url="webservice.asmx" MethodName="IntToString" Success="    function(data){        $('#lblInt1').text('返回 ' + data + ', 类型为: ' + typeof data);    }    " Error="    function(data){        alert(data.responseText);    }    ">        <ParameterList>            <je:Parameter Name="value" Type="Selector" Value="'#txtInt1'"                DataType="String"/>        </ParameterList>    </ClickAsync></je:Button><p id="lblInt1"></p>

复制代码

代码中, 将文本框中的字符串传递给了 IntToString 方法, 因此当输入类似于 "abc" 这样的字符串时将发生错误, 在 Error 中通过 data.responseText 即可获取从服务器返回的错误消息.

如果是通过 Parameter 的 DataType 来转化数据类型, 在转化失败时, 将使用默认值来代替. 布尔值默认 true, 数值默认 0, 日期默认为当前时间.

日期类型

从服务器返回的日期类型默认为 "\/Date(xxxxxxxxxx)\/" 的形式, 是一个字符串, 可以通过 jQuery.panzer.formatDate 函数来格式化日期, 或者使用 jQuery.panzer.convertToDate 将 "\/Date(xxxxxxxxxx)\/" 格式的字符串转化为日期类型.

如果是从客户端发送日期到服务器, 则可以发送一个可以表示日期的字符串即可, 比如:

[WebMethod][ScriptMethod]public string DateToString ( DateTime value ){    this.Context.Response.Cache.SetNoStore ( );    return string.Format ( "{0}", value );}<je:Button ID="cmdDate2" runat="server"    Label="传递日期到 string DateToString(DateTime)">    <ClickAsync Url="webservice.asmx" MethodName="DateToString" Success="    function(data){        alert(data);    }    ">        <arameterList>            <jearameter Name="value" Type="Expression" Value="new Date()"                DataType="Date" />        </ParameterList>    </ClickAsync></je:Button>通过 Parameter 的设置, 将日期转化为可以被服务器端识别的当前日期的字符串形式.

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

实际过程演示: http://www.tudou.com/programs/view/dlC1WPtjXEE/, 建议全屏观看.

欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.