Send a JS Array = {} to C# (WebMethod)

Question

Actually I have a Array declared on JS side like below:

 var benefArray = {};
 var benefCount = 0;
 var benefNome = $('#txtBenefNome').val();
 var benefDataNasc = $('#txtBenefDataNasc').val();
 var benefGrauParent = $('#txtBenefGrauParent').val();

 benefCount++;
 benefArray[benefCount] = new Array(benefNome, benefDataNasc, benefGrauParent);

              //Ajax Sender
            function sendAjax(url, parametros, sucesso) {
                $.ajax({
                    type: "POST",
                    url: url,
                    data: parametros,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: sucesso
                });
            };

 sendAjax("Client.aspx/AddClient", "{benefArray: \"" + benefArray + "\"}",
 function (msg) {
                    var retorno = msg.d;
                    alert(retorno);
                });

On my C# WebMethod side I Have:

    [WebMethod]
    public static string AddClient(object benefArray)
    {
        var t = benefArray;
    }

I'm trying to get those values from Javascript, what I have to do? Any insight on this will be appreciated! Thanks

Answer 1

Start by defining a model that will represent the data you are working with so that you work with strong types and get rid of the object ugliness on your AddClient method:

public class Benef
{
    public string Nome { get; set; }
    public string DataNasc { get; set; }
    public string GrauParent { get; set; }
}

then have your web method take an array of this model:

[WebMethod]
public static string AddClient(Benef[] benefs)
{
    // TODO: process ...

    // by the way as a result you could also return a strongly 
    // typed model and not only strings 
    // which could be easily manipulated on the client side
    return "some result"; 
}

and on the client you would define an array of parameters:

var parameters = { 
    benefs: [
        {
            Nome: $('#txtBenefNome').val(),
            DataNasc: $('#txtBenefDataNasc').val(),
            GrauParent: $('#txtBenefGrauParent').val()
        }
    ]
};

$.ajax({
    type: 'POST',
    url: 'Client.aspx/AddClient',
    data: JSON.stringify(parameters),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(result) {
        alert(result.d);
    }
});

As far as the JSON.stringify method I am using here is concerned it is native in modern browsers. But if you intend to support older browsers it is recommended to include the json2.js script to your page.