如何将对象类型的 json 数组传递给 MVC 控制器类

Posted 2023-04-12

技术标签:

【中文标题】如何将对象类型的 json 数组传递给 MVC 控制器类【英文标题】：How to pass a json array of type object to MVC controller class 【发布时间】：2019-06-23 12:20:30 【问题描述】：

我正在尝试将 JSON 数组传递到我的控制器。我希望能够将数据从 JSON 数组发布到数据库，该数组通过客户端的 javascript 填充并传递给控制器。但是，它没有在控制器中接收任何内容。我的控制器收到一个空值作为参数。

以下是我的控制器：

  [HttpPost]
    [SiteAuthorize]
    public ActionResult SaveDashboard(List<Dashboard> dashboards)
    
        try
        

            string result = "";
            return Json(new  Result = result, Message = "" , JsonRequestBehavior.AllowGet);
        
        catch (Exception ex)
        
            return Json(new  Result = "Error", Message = ex.Message , JsonRequestBehavior.AllowGet);

以下是我的javascript：

    var dashboards = 
    "DashboardName": '',
    "Width": '',
    "Height": '',
       "DashboardCell": [
           
               "DashCellId": '',
               "x": '',
               "y": '',
               "DashWidth": '',
               "DashHeight": '',
               "colspan": '',
               "rowspan": '',
               "Active": '',
               "CellValue": '',
               "cellClass": '',
               "previousElementSibling": ''
           
        ]
    ;

    var tablestructure = $("#TableStructure").val();
    var savename = document.getElementById("namedash").value;

    var table = document.getElementById("table");
    var width = table.clientWidth;
    var height = table.clientHeight;
    var DashboardCell = [];
    dashboards.DashboardName = savename;
    dashboards.Width = width;
    dashboards.Height = height;
    for (var i = 0, row; row = table.rows[i]; i++)
    

        //iterate through rows
        //rows would be accessed using the "row" variable assigned in the for loop
        for (var j = 0, col; col = row.cells[j]; j++)
        
            for (var x = 0; x < col.attributes.length; x++)
            
                if (col.attributes[x].localName == "colspan") 
                    var colspan = col.attributes[x].value;
                
                else if (col.attributes[x].localName == "rowspan") 
                    var rowspan = col.attributes[x].value;
                
                else if (col.attributes[x].localName == "class")
                
                    var cellClass = col.attributes[x].value;
                
            

            var res = col.id.split(", ");
            var x = parseInt(res[0]);
            var y = parseInt(res[1]);
            var DashHeight = col.clientHeight;
            var DashWidth = col.clientWidth;
            if (j > 0) 
                var previousElementSibling = col.previousElementSibling.id;
            
            else 
                var previousElementSibling = '';
            
            var DashCellID = col.id;
            var CellValue = col.innerText;
            var DashCell =  DashCellId: DashCellID, x: x, y: y, DashWidth: DashWidth, DashHeight: DashHeight, colspan: colspan, rowspan: rowspan, Active: 1, CellValue: CellValue, cellClass: cellClass, previousElementSibling: previousElementSibling ;
            DashboardCell.push(DashCell);

            //iterate through columns
            //columns would be accessed using the "col" variable assigned in the for loop
        
    
    dashboards.DashboardCell = DashboardCell;

    $.ajax(
        url: '/KPIReportAdmin/SaveDashboard',
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        data:  dashboards: JSON.stringify(dashboards) ,
        success: function (result)
        

        ,
        error: function (result) 
            alert("Failed");
        

    );

以下是我的课：

public class DashboardCell

    public int Width  get; set; 
    public int Height  get; set; 
    public bool Active  get; set; 
    public int colspan  get; set; 
    public int rowspan  get; set; 
    public int x  get; set; 
    public int y  get; set; 
    public string CellValue  get; set; 
    public string DashCellId  get; set; 
    public string cellClass  get; set; 
    public int previousElementSibling  get; set; 


public class Dashboard

    public string Name  get; set; 
    public int Height  get; set; 
    public int Width  get; set; 
    public int UserID  get; set; 
    public List<DashboardCell> DashboardCell  get; set;

我希望在 SaveDashboard 中收到仪表板列表，但我得到了 null

【问题讨论】：

您的变量名或数据类型可能不匹配。请检查一次。您将dashboards 作为字符串发送，尝试发送对象本身（无字符串化）我在尝试访问控制器时收到以下网络错误：Invalid JSON primitive: object.。是什么原因造成的？ 【参考方案1】：

使用 AJAX 将 JS 对象作为List<T> 集合传递有两种方式：

1) 将JSON.stringify与对象本身放在一起并设置traditional: true选项，只应设置单个参数：

$.ajax(
    url: '/KPIReportAdmin/SaveDashboard',
    type: "POST",
    dataType: "json",
    contentType: "application/json",
    traditional: true,
    data: JSON.stringify(dashboards),
    success: function (result)
    

    ,
    error: function (result) 
        alert("Failed");
    
);

2) 通过使用带有traditional: true 选项的$.param() 函数传递原始对象而不对其进行字符串化：

$.ajax(
    url: '/KPIReportAdmin/SaveDashboard',
    type: "POST",
    dataType: "json",
    data: $.param( dashboards: dashboards , true),
    success: function (result)
    

    ,
    error: function (result) 
        alert("Failed");
    
);

发生异常是因为您传递了一个 JS 对象，该对象包含带有 data: dashboards: JSON.stringify(dashboards) 的 JSON 字符串，并且控制器操作方法不知道如何将其解析为 List<T> 集合对象作为参数。