Click here to Skip to main content
Click here to Skip to main content

Ajax And Server Data Type Conversions

, 18 Nov 2011
Rate this:
Please Sign up or sign in to vote.
This post explains how do client-side and server-side convert data type when calling a WebService using Ajax

The original: http://zoyobar.blogspot.com/2011/11/ajax-and-server-data-type-conversions.html

Introduction/Catalog

Due to the limited time, synchronization cannot be guaranteed in more than one blog article, at the following address you can view up-to-date content, please understand:

http://zoyobar.blogspot.com/2011/11/ajax-and-server-data-type-conversions.html

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

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.

Comment

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

zoyobar

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140821.2 | Last Updated 18 Nov 2011
Article Copyright 2011 by zoyobar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid