Passing Json Map to MVC controller using ajax

Question

I need to pass map (dictionary) to the MVC controller along with a string parameter.

var reportName= 'ReportName';

    var FilterValues = new Map([
[0, "value1"],
[1, "value2"],
[2, "value3"],
]);

var model = { reportName: reportName, FilterValues: JSON.parse(FilterValues) };
        $.ajax({
            url: '/Reports/ExportReport/',
            type: 'POST',
            contentType: "application/json",
            data: model,
        success: function(){
            alert('success');
        }, 
        error: function(){
            alert('failure');
        }
    });


 public void ExportReport(string reportName, Dictionary<int, string> FilterValues)

        {

Also tried this with Object instead of map . It returns me a success but doesn't hit the controller.

let FilterValues = {
            1: "value1",
            2: "value2",
            3: "value3",
        };

        var report = 'test';
      //  var data = ('#DesignationReport').DataTable().$('input,select,textarea').serialize();
        var model = { reportName: report, FilterValues: FilterValues };

This is the last thing I tried.

JSON does not support ES2015 constructs such as Map. Use an object or an array as appropriate. Note that using a Map doesn't benefit you in your example anyway. — Aluan Haddad
– Aluan Haddad, Commented May 8, 2020 at 1:08
Thanks. Tried with object. not working for some reason. any suggestions on how i can improve my code ? — Michael
– Michael, Commented May 8, 2020 at 1:34

Bhasyakarulu Kottakota · Accepted Answer · 2020-05-08 01:56:22Z

Since JSON does not support ES2015 constructs such as Map. We need to have custom class as bellow:

 public class ViewModel
    {
        public List<FilterValue> FilterValues { get; set; }
        public string ReportName { get; set; }
    }

    public class FilterValue
    {
        public int Id { get; set; }
        public string Value { get; set; }
    }

Your post method will be:

[HttpPost]
        public ActionResult ExportReport(ViewModel model)
        {
            var report = model.ReportName;
            var values = model.FilterValues;
            return new EmptyResult();
        }

Then view's scripts will be:

@section scripts{
    <script>
        $(function () {
            var reportName = 'ReportName';
            var filterValues = [];

            filterValues.push({ 'Id': 0, 'Value': 'value1' });
            filterValues.push({ 'Id': 1, 'Value': 'value2' });
            filterValues.push({ 'Id': 2, 'Value': 'value3' });

            var model = JSON.stringify({ ReportName: reportName, FilterValues: filterValues});
            $.ajax({
                url: '/Home/ExportReport/',
                type: 'POST',
                contentType: "application/json",
                data:  model,
                success: function () {
                    alert('success');
                },
                error: function () {
                    alert('failure');
                }
            });
        });
    </script>
}

josgall · Accepted Answer · 2020-05-08 01:36:50Z

Set up your model in MVC like this

        public class SpecialDataModel
        {
            public string reportName { get; set; }
            public List<SingleFilterValue> FilterValues { get; set; }
        }

        public class SingleFilterValue
        {
            public int id { get; set; }
            public string value{ get; set; }
        }

Set up your controller method like this

        [HttpPost]
        public void ExportReport(SpecialDataModel myData)
        {



        }

Set up your data for your ajax data property like this

var reportName= 'ReportName';
var FilterValues = [];
FilterValues.push({'id': 0, 'value': 'value1'});
FilterValues.push({'id': 1, 'value': 'value2'});
FilterValues.push({'id': 2, 'value': 'value3'});

var model = JSON.stringify({ 'reportName' : reportName, 'FilterValues' : FilterValues });

Collectives™ on Stack Overflow

Passing Json Map to MVC controller using ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related