Passing array of complex objects from view to controller using Ajax

Question

In the controller I need to receive two parameters (detail and test), one is a List of a custom objects, the other is a string, I'm able two pass only one parameter (list of objects) when pass both I receive null values in the controller.

Resulting Json to controller:

[{
    "detail": [{
        "tag": "PIC330_620%2F_.PV_Out%23Value",
        "color": "%2331c63e"
    }, {
        "tag": "A330_10%2F_.FbkFwdOut%23Value",
        "color": "%238edeed"
    }, {
        "tag": "TIC330_603%2F_.PV_Out%23Value",
        "color": "%23e8ea62"
    }, {
        "tag": "TI330_600%2F_.PV_Out%23Value",
        "color": "%23f7cbb4"
    }, {
        "tag": "TIC311_602%2F_.MV%23Value",
        "color": "%23ef935d"
    }, {
        "tag": "TIC311_602%2F_.PV_Out%23Value",
        "color": "%23f28a9b"
    }, {
        "tag": "TIC310_600%2F_.MV%23Value",
        "color": "%2385f968"
    }, {
        "tag": "TIC310_605%2F_.PV_Out%23Value",
        "color": "%2308d687"
    }],
    "test": "lolo"
}]

//Generate list of objects
function getViewDetail() {
        var details = [];
        var tag;
        var color;
        var detail;
        $('.tagContainer').each(function (i, obj) {
            tag = $(this).find('.tag_label').text();
            color = $(this).children('.colorpicker').val();
            detail = { tag: encodeURIComponent(tag), color: encodeURIComponent(color) };
            details.push(detail);

        });  
        return details;

    }
// Call Ajax
function sendParameters(){
    var details = getViewDetail();
                        var list = [];
                        list.push({ detail: details, test: 'lolo' });
                        list = JSON.stringify(list);
                            console.log(list);
                        jQuery.ajax({
                            url: '@Url.Action("SaveView", "Batch")',
                            async: false,
                            data: list,
                            contentType: 'application/json',
                            dataType: 'json',
                            type: 'POST',
                            success: function (result) {
                                if (!result.success) {
                                    showErrorMessage(result.title, result.message);
                                }
                                else {
                                    showSuccessMessage(result.title, result.message);
                                }
                            }
                        });
}

//In the controller (abbreviated)
public JsonResult SaveView(IEnumerable<Detail> detail, string test)
        {}

//class
public class Detail
    {
        string _tag;
        string _color;

        public string tag { get => _tag; set => _tag = value; }
        public string color { get => _color; set => _color = value; }
    }

Answer 1

Try this:

data = { detail: details, test: 'lolo' };
data = JSON.stringify(data);

And send it through ajax:

data: data,

Your action's signature is expecting two parameters, detail and test . What you were passing was a list of object with two properties detail and test on it. Got the difference ? In short your posting object should be like:

{
    "detail": [...],
    "test": "lolo"
}