Home Send object to mvc controller using ajax
Reply: 2

Send object to mvc controller using ajax

shami sheikh
1#
shami sheikh Published in 2018-02-14 07:17:13Z

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

      

Albert
2#
Albert Reply to 2018-02-14 08:12:44Z

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

Barr J
3#
Barr J Reply to 2018-02-14 07:52:00Z

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.307219 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO