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

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

本文更新:

2011-12-12: 去掉 ParameterList 和 AjaxList.

由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:

http://code.google.com/p/zsharedcode/wiki/AjaxDataType

请到 Download 下载资源的 JQueryElement 示例下载一节下载示例代码

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

* 准备

* WebService 转换数据类型

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

* 数据类型转换失败时

* 日期类型

准备

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

WebService 转换数据类型

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

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

[WebMethod]
[ScriptMethod]
public string StringToString ( string value )
{
    this.Context.Response.Cache.SetNoStore ( );

    return string.Format ( "{0}", value );
}

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

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

<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 来选择需要转化为的类型.

<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 来处理:

<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);
    }
    ">
        <ParameterList>
            <je:Parameter 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/, 建议全屏观看.