Send object to mvc controller using ajax

Question

I am passing multiple parameters in an object and then passing it to a Method in the controller. It is hitting the method but it's not carrying the data to be sent from ajax call to the method . When I am going to check object of the model it displays null. SO can I send the data in such a way or should I try another approach? Thanks in advance Please help me. Here is my code.

 var Color = [], Material = [], Size = [], FinishingType = [], Style = []; $('.productFilterLabelList .filterList').on('change', '[type=checkbox]', function () { debugger; var Main = {}; var filterType = $(this).parents('.productFilterLabelList').find('.hdn-filter-type').val(); var filterTypeID = $(this).val(); var ischeked = $(this).is(':checked'); if (ischeked) { if (filterType == 'color') { Color.push(filterTypeID); } else if (filterType == 'size') { Size.push(filterTypeID); } else if (filterType == 'finsih') { FinishingType.push(filterTypeID); } else if (filterType == 'material') { Material.push(filterTypeID) } else { Style.push(filterTypeID); } } else { alert('hello'); if (filterType == 'color') { Color.pop(filterTypeID); } else if (filterType == 'size') { Size.pop(filterTypeID); } else if (filterType == 'finsih') { FinishingType.pop(filterTypeID); } else if (filterType == 'material') { Material.pop(filterTypeID) } else { Style.pop(filterTypeID); } } Main = { Color: Color, Size: Size, FinishingType: FinishingType, Material: Material, Style: Style } console.log(Main); $.ajax({ url: '/Home/SearchByAllFilterTags', type: "Get", contentType: "application/json", dataType: "json", data: '{Main:' +JSON.stringify(Main)+' }', success: function (results) { } }) }); public ActionResult SearchByAllFilterTags(ProductFilterViewModel Main) { return Json("", JsonRequestBehavior.AllowGet); }`public class ProductFilterViewModel { public int[] Color { get; set; } public int[] Material { get; set; } public int[] Size { get; set; } public int[] FinishingType { get; set; } public int[] Style { get; set; } public int[] Pattern { get; set; } //public string FilterText { get; set; } //public List<ProductFilterViewModel> FilterTextList { get; set; } }` 

Answer 1

You don't need to stringify your object. Just pass your Main object:

$.ajax({
    url: '/Home/SearchByAllFilterTags',
    type: "Get",
    contentType: "application/json",
    dataType: "json",
    traditional: true,
    data: Main,
    success: function (results) {
    }
})

Edit:

If your arrays are empty in the action method try to add traditional: true to ajax settings

Answer 2

You do not need to stringify. Use this format:

 Main = {
            "Color": [{Color}],
            "Size": [{Size}],
            "FinishingType": [{FinishingType}],
            "Material": [{Material}],
            "Style": [{Style}]
        }
        console.log(Main);
        $.ajax({
            url: '/Home/SearchByAllFilterTags',
            type: "Get",
            contentType: "application/json",
            dataType: "json",
            data: Main,
            success: function (results) {

            }
        })
    });

As long as you didn't add quotation marks in your json data, your data will not pass.

This will work if your model at the controller is matched.