Ajax and Server Data Type Conversions
This post explains how do client-side and server-side convert data type when calling a WebService using Ajax
The original post can be found here.
Introduction/Catalog
Due to limited time, synchronization cannot be guaranteed in more than one blog article. At the following address, you can view up-to-date content, hope you understand:
Download sample: JQueryElementDemo-en.zip, the directory is /ajaxdatatype/Default.aspx.
This post explains how do client-side and server-side convert data type when calling a WebService using Ajax:
- Prepare
- How Do The WebService Convert Data
- Converting Data In Client By Parameter
- Data Type Conversion Fails
- Date
Prepare
Please view the prepare section at Return JSON In Different .NET Version. The code in this post can run under .NET 2, different .NET versions may need a little change.
How Do The WebService Convert Data
In ASP.NET, if the type of the parameters passed from the client is different from the required parameter of the WebService, the server-side will try to reassign the parameter to the required type.
If the WebService has a method named StringToString:
[WebMethod]
[ScriptMethod]
public string StringToString ( string value )
{
this.Context.Response.Cache.SetNoStore ( );
return string.Format ( "{0}", value );
}
StringToString method has a string parameter value, if the client passes a numeric or a boolean value, server-side will automatically convert it to string.
Here is code calling WebService by a JQueryElement Button control:
<je:Button ID="cmdString3" runat="server"
Label="pass false to 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>
Set click event's Ajax options of a button by ClickAsync, in the Parameter, set the DataType to Boolean explicitly pass a Boolean value to the server, the Expression represents the Value property is a JavaScript expression, more information about Parameter can refer to Through Parameter Object Add Ajax Request Parameter.
The code above passes a Boolean value true to the method StringToString and StringToString needs a string, so True will automatically be converted to a string, the final results will pop up True.
ASP.NET can convert numerical, boolean value to a string. It can convert a numeric string to a number, such as "123" to 123, the string "true" or "false" into Boolean values, an empty string or a string similar to "2011-1-1" into a date type.
Converting Data In Client By Parameter
JQueryElement, you can use the Parameter to convert data types in the client. For example, by val method of jQuery, you can get to the value of text box, the value is a string, but you can use the DataType property to convert it to different types.
<input type="text" id="txtInt1" />
<je:Button ID="cmdInt1" runat="server"
Label="pass a number to string IntToString(int)">
<ClickAsync Url="webservice.asmx" MethodName="IntToString" Success="
function(data){
$('#lblInt1').text('result ' + data + ', type: ' + typeof data);
}
">
<ParameterList>
<je:Parameter Name="value" Type="Selector" Value="'#txtInt1'"
DataType="Number" />
</ParameterList>
</ClickAsync>
</je:Button>
<p id="lblInt1"></p>
In the code, set the DataType property as Number, JavaScript will convert the value of text box before requesting.
Data Type Conversion Fails
In ASP.NET, if data conversion error occurred, then an error is returned to the client, you can use Async's property Error to handle:
<input type="text" id="txtInt1" />
<je:Button ID="cmdInt1" runat="server"
Label="pass a string to string IntToString(int)">
<ClickAsync Url="webservice.asmx" MethodName="IntToString" Success="
function(data){
$('#lblInt1').text('result ' + data + ', type: ' + 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>
In the code, the string in the text box is passed to the IntToString method, so it'll error when the input string is similar to "ABC", you can use data.responseText to get the error message returned from the server in the Error property.
If using the DataType property of Parameter to convert data types, when the conversion fails, it'll use the default values instead. Default Boolean value is true, the number default value is 0, the date defaults to the current time.
Date
The default form of Date returned from the server is "\/Date(xxxxxxxxxx)\/", it is a string, you can use method jQuery.panzer.formatDate to format the date, or use jQuery.panzer.convertToDate convert "\/Date(xxxxxxxxxx)\/" into date type.
If the date is sent from the client to the server, you can send a string to represent a date, such as:
[WebMethod]
[ScriptMethod]
public string DateToString ( DateTime value )
{
this.Context.Response.Cache.SetNoStore ( );
return string.Format ( "{0}", value );
}
<je:Button ID="cmdDate2" runat="server"
Label="pass date to 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>
Through the Parameter, turn the date to current date string that can be recognized by the server-side.
