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

Yes i 've tried it before its hitting controller method but unable to find data in model object into the method. — shami sheikh
– shami sheikh, Commented Feb 14, 2018 at 7:38
just remove json.stringify so your code must be like this { 'Main': Main}, — Amro Mustafa
– Amro Mustafa, Commented Feb 14, 2018 at 8:00

AlbertK · Accepted Answer · 2018-02-14 08:12:44Z

5

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

edited Feb 14, 2018 at 8:12

answered Feb 14, 2018 at 7:21

AlbertK

13.5k5 gold badges45 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shami sheikh Over a year ago

passing simply the main object but still not getting the data at controller it still dislaying null.

Barr J · Accepted Answer · 2018-02-14 07:52:00Z

0

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.

edited Feb 14, 2018 at 7:52

answered Feb 14, 2018 at 7:40

Barr J

11k2 gold badges31 silver badges49 bronze badges

6 Comments

shami sheikh Over a year ago

model is same but still not getting the data at model.

Barr J Over a year ago

remove content type from the ajax request

shami sheikh Over a year ago

yes its hitting the method and 1 array in model but its not actual value which i have pushed into the varriable it shows 0 in array

shami sheikh Over a year ago

I think it displays the array index no instead of value

shami sheikh Over a year ago

Ok thank you but the ajax was already hitting the method . There was a problem with data anyway Thanks you so much.

|

Collectives™ on Stack Overflow

Send object to mvc controller using ajax

2 Answers 2

Edit:

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit:

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related