Passing javascript array of objects to WebService

Hi folks.

In the topic I will illustrate how to pass array of objects to WebService and how to deal with it in your WebService.

 

Suppose we have this javascript code :

 
    <script language="javascript" type="text/javascript">
        var people = new Array();

        function person(playerID, playerName, playerPPD) {
            this.PlayerID = playerID;
            this.PlayerName = playerName;
            this.PlayerPPD = parseFloat(playerPPD);
        }

        function saveSignup() {
            addSomeSampleInfo();
            WebService.SaveSignups(people, SucceededCallback,OnError);
        }

        function SucceededCallback(result, eventArgs) {
            var RsltElem = document.getElementById("divStatusMessage");
            RsltElem.innerHTML = result;
        }

        function OnError(error) {
            alert("Service Error: " + error.get_message());
        }
        function addSomeSampleInfo() {
            people = new Array();
            people[people.length++] = new person(123, "Person 1 Name", 10);
            people[people.length++] = new person(234, "Person 2 Name", 20);
            people[people.length++] = new person(345, "Person 3 Name", 10.5);
        }  
    </script>
 

poeple :is the array that we want to send to the WebService.

person :The function –constructor- that we are using to create object to our array.

SucceededCallback : This is the callback function invoked if the Web service succeeded.

OnError : this is the Error callback function so any errors that occur when the Web Service is called will trigger this function.

saveSignup : This function used to call the WebSercie Method (SaveSignups), the first parameter that we pass to the WebService and the second is the name of the callback function.

 

Here is the body of the Page :

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        <Services>  
            <asp:ServiceReference Path="WebService.asmx" />  
        </Services>  
 </asp:ScriptManager>    
    <input type="button" id="btn1" onclick="saveSignup()"  value="Click" />   
   <div id="divStatusMessage">   
   </div>
    </form>
</body>

 

 

Then main thing is the ServiceReference and it’s path "WebService.asmx” , this is the Web Service that we are using in this example.

 

 

A web service will be used to receive the javascript array and handle it in our code :

using System;
using System.Web;
using System.Web.Services;
using System.Xml;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Data.SqlClient;
using System.Collections.Generic;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    public string SaveSignups(object [] values)
    {
        string strOutput="";
        string PlayerID="", PlayerName="", PlayerPPD="";
        foreach (object value in values)
        {
            Dictionary<string, object> dicValues = new Dictionary<string, object>();
            dicValues = (Dictionary<string, object>)value;
            PlayerID = dicValues["PlayerID"].ToString();
            PlayerName = dicValues["PlayerName"].ToString();
            PlayerPPD = dicValues["PlayerPPD"].ToString();

            strOutput += "PlayerID = " + PlayerID + ", PlayerName=" + PlayerName + ",PlayerPPD= " + PlayerPPD +"<br>";
        }
        return strOutput;
    }
}

The first thing I implement System.Collections.Generic Namespace, we need it to use the Dictionary Class.

you can find in this code that I pass the javascript objects to array of object called values, then we need to deal with every separate Object and explicit it to Dictionary<string, object> .

The Dictionary Represents a collection of keys and values Dictionary<TKey, TValue>

TKey : The type of the keys in the dictionary

TValue : The type of the values in the dictionary.

For more information about Dictionary check this link : http://msdn.microsoft.com/en-us/library/xfhwa508(VS.80).aspx

 

Now we can get the value for every element because we have mapping from a set of keys to a set of values, the keys of this example is :  PlayerID ,PlayerName,PlayerPPD, this created from the original object person. 

 

Ultimately,this Web method return the values as string, but the main idea of this method to show you how to deal with array of object and convert it to  Dictionary<string, object> object , and get the values of this Dictionary.

 

Hope this helps,

6 Comments

  • How would this work in >NET 4 with the dynamic object ?

  • Dear Phes.

    Yes with .Net 4 you can use dynamic type instead of explicit it to Dictionary.

    The Web Method will be :

    public string SaveSignups(dynamic [] values)

    &nbsp; &nbsp;{

    &nbsp; &nbsp; &nbsp; &nbsp;string strOutput = &quot;&quot;;

    &nbsp; &nbsp; &nbsp; &nbsp;string PlayerID = &quot;&quot;, PlayerName = &quot;&quot;, PlayerPPD = &quot;&quot;;

    &nbsp; &nbsp; &nbsp; &nbsp;foreach (dynamic dc in values)

    &nbsp; &nbsp; &nbsp; &nbsp;{

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;PlayerID = dc[&quot;PlayerID&quot;].ToString();

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;PlayerName = dc[&quot;PlayerName&quot;].ToString();

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;PlayerPPD = dc[&quot;PlayerPPD&quot;].ToString();

    &nbsp; &nbsp; &nbsp; &nbsp;}

    &nbsp; &nbsp; &nbsp; &nbsp;return &quot;test&quot;;

    &nbsp; &nbsp;}

  • Hi, there is a very good library under codeplex to create safe and easy ajax based websites. http://pokein.codeplex.com

    thanks for article!

  • Hello Dear,

    I require the same solution, I tried to implement the same but it is not working as written in the article.
    I created an array in JavaScript and passing the same to WebService, but on the WebService side I am able to retrieve the values from the object array (object[] values) as done in the article using the Dictionary.

    Please share compete running sample or send it to me on naval.kishore@avl.com.

    Thanks in advance.

    Regards
    Naval Kishor

  • Thanks for your solution.

  • This is a beautiful solution, and exactly what I was looking for in my web application. Thank you!

Comments have been disabled for this content.