De serialising JSON in webmethods

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?

Refer the Link:http://stackoverflow.com/questions/1146110/problem-sending-json-object-succesfully-to-asp-net-webmethod-using-jquery — Ananthakumar, Oct 29 '15 at 11:13

Darin Dimitrov · Accepted Answer · 2011-12-29T14:44:34.963

3

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.

edited Dec 29 '11 at 14:44

answered Dec 29 '11 at 14:39

Darin Dimitrov

1,023,142
271
3,287
2,928

clean version of my answer, upvoted, perhaps add that the returned string is in result.d – Guillaume86 Dec 29 '11 at 14:41
@Guillaume86, in your answer you don't seem to be using a collection which is what is required here. – Darin Dimitrov Dec 29 '11 at 14:42
yeah didn't pay attention to the html, i remove my answer – Guillaume86 Dec 29 '11 at 14:43
1

you can use map to avoid creating the array before populating – Guillaume86 Dec 29 '11 at 14:45
@Guillaume86, excellent suggestion. Answer updated to take it into account. – Darin Dimitrov Dec 29 '11 at 14:49

score 0 · Answer 2 · answered Dec 29 '11 at 14:40

Don't use a struct, use a class. C# will handle the deserialization for you. You want something like:

[WebMethod]
public void  getPieData(OutGoings[] outGoings)
{
    // loop over array, interact with db
}

public class OutGoings
{
    public string Text{ get; set; }
    public string Value{ get; set; }
}

De serialising JSON in webmethods

2 Answers2