使用 ajax 将 Json Map 传递给 MVC 控制器答案

【问题标题】：Passing Json Map to MVC controller using ajax使用 ajax 将 Json Map 传递给 MVC 控制器
【发布时间】：2020-08-23 11:42:59
【问题描述】：

我需要将映射（字典）与字符串参数一起传递给 MVC 控制器。

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)

        {

还尝试使用 Object 而不是 map 。它让我成功，但没有击中控制器。

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

这是我尝试的最后一件事。

【问题讨论】：

JSON 不支持 ES2015 构造，例如 Map。根据需要使用对象或数组。请注意，无论如何，使用Map 对您的示例没有任何好处。
谢谢。用对象试过。由于某种原因不工作。关于如何改进我的代码的任何建议？

标签： javascript json ajax model-view-controller controller

【解决方案1】：

由于 JSON 不支持 ES2015 构造，例如 Map。我们需要有如下自定义类：

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

您的发布方法将是：

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

那么视图的脚本将是：

@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>
}

【讨论】：

【解决方案2】：

像这样在 MVC 中设置模型

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

像这样设置你的控制器方法

        [HttpPost]
        public void ExportReport(SpecialDataModel myData)
        {



        }

像这样为您的 ajax 数据属性设置数据

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

【讨论】：