CODEWITHSUNDEEP
c#asp.netajaxjsonwebmethod
Dooie
Dooie

Reputation: 1669

De serialising JSON in webmethods

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?

    Upvotes: 1

    Views: 417

    • Answers (2)

    Darin Dimitrov
    Darin Dimitrov

    Reputation: 1038930

    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.

    Upvotes: 3

    Didaxis
    Didaxis

    Reputation: 8746

    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; }
}

    Upvotes: 0

    Related Questions