Question

Based on the following code…

A user can come along and add as many ‘outgoings’ as they like via a separate function. I then add a new ‘li’ to the DOM and auto generate the txt ID

<ul id="ulOutgoing">    
    <li>
        <label>Outgoing 1</label><input type="text" id="txtOutGoing0">
    </li>
    <li>
        <label>Outgoing 2</label><input type="text" id="txtOutGoing1">
    </li>
</ul>    

At the end of the users path i need to send all txt values and labels to the server to firstly save to a db then generate a response based on the supplied data.

var OutGoings = {};

$('#ulOutgoing').find('li').each(function () {
    var obj = {};
    obj.text = $(this).find('label').html();
    obj.value = $(this).find('input').val();
    OutGoings.OutGoing = obj;
});

var DTO = { 'OutGoings': OutGoings };

function callBack(response) {
    //Handel my webmethods response
}

ajaxCall(DTO, 'visualise-my-outgoings.aspx/getPieData', callBack, false);

My web method needs to accept the JSON Object and make it usable so I can loop over the txt value and labels and perform some db interactions and further logic

[WebMethod]
public static string getPieData(OutGoings OutGoings)
{
    //Handel the object
}

public struct OutGoings
{

}

So… I have two questions

Am i creating the correct JSON object to push to my web method

How do I deserialise the object in my webmethod and what structure should my ‘OutGoings’ struct take?

Answer 1

You probably need a collection of OutGoing:

public class OutGoing
{
    public string Label { get; set; }
    public string Value { get; set; }
}

in your page method:

[WebMethod]
public static string GetPieData(OutGoing[] outGoings)
{
    // Handle the object

    return "Hello World";
}

and finally the client simply fill this collection by looping through the li elements:

var outGoings = $('#ulOutgoing li').map(function() {
    return {
        Label: $('label', this).html(),
        Value: $('input', this).val()
    };    
}).toArray();

and then POST it to the page method:

$.ajax({
    url: 'visualise-my-outgoings.aspx/GetPieData',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ outGoings: outGoings }),
    success: function(result) {
        // TODO : process the results
        alert(result.d);
    }
});

The JSON.stringify method is what properly serializes the javascript array into a JSON string. It is natively built-in modern browsers. If you need to support legacy browsers you might need to include the json2.js script to your page.