创建包含列表的 JavaScript 类并将其传递给 MVC 控制器

Question

这是从这里开始的延续

What's the correct way to create class in JavaScript and pass that to MVC controller

public class VesselDetail
{
   public string VesselName { get; set; }
   public string VesselData { get; set; }
}

public class MainModel
{
   public List<VesselDetail> VesselDetails { get; set; }
}

我已经创建了如下的 JavaScript 模型

class VesselDetail {
    VesselName;
    VesselData; 
}
class VesselDetails {
constructor() {
    this.VesselDetails = [];
}
addVessel(VesselName,VesselData) {
    let p = new VesselDetail();
    p.VesselName= VesselName;
    p.VesselData= VesselData;
    this.VesselDetails.push(p);
    return p;
  }
 }
class MainModel {
   VesselDetails = {};
}

在我的按钮单击事件中，我将绑定所需的并将其传递给 MVC 控制器，如下所示

let model= new MainModel();
let vesselDetail = new VesselDetails();
vesselDetail.addVessel("vesselName1", "vessel desc");
vesselDetail.addVessel("vesselName2", "vessel desc1");
model.VesselDetails= vesselDetail;

$.ajax({
    url: url,
    type: 'POST',
    async: false,
    data: '{mainModel: ' + JSON.stringify(model) + '}',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (result) {
        
    },
    error: function (request) {
        
    }
});

但是在控制器中 VesselDetails 为空，将列表从 JavaScript 传递给 mvc 的正确方法是什么。

@serge

根据讨论，这是我的 c# 类

Public class Attachment {
Public string FileName  {get;set;}
Public string FileType  {get;set;}
}

Public class Report {
Public string ReportName {get;set;}
Public List<Attachment> Attachments {get;set;}
}

js中可以有什么等价物，发给mvc控制器

Answer 1

不幸的是，您的 javascript 类中有一个错误 - 双 VesselDetails。我提议使用这些类，这是更面向对象的风格。

        class VesselDetail {

        constructor(vesselName, vesselData) {
            this.VesselName = vesselName;
            this.VesselData = vesselData;
        }

        VesselName;
        VesselData;
    }

    class MainModel {

        VesselDetails=[];

        addVesselDetails(...args) {
        this.VesselDetails = args;
        }
   }
    

ajax

let model = new MainModel();

//using special function

model.addVesselDetails(
new VesselDetail("vesselName1", "vessel desc")
,new VesselDetail("vesselName2", "vessel desc2")
);

//or directly

    model.VesselDetails.push(
    new VesselDetail("vesselName1", "vessel desc"),
    new VesselDetail("vesselName2", "vessel desc2")
   );

$.ajax({
    url: url,
    type: 'POST',
    async: false,
    data: JSON.stringify(model),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (result) {
        
    },
    error: function (request) {
        
    }
});

动作

public JsonResult CreateVessel([FromBody]MainModel mainModel)
{
            // some processing
   return  new JsonResult ( mainModel.VesselDetails[0].VesselName );
}

更新

Report 类看起来很像 MainModel 类

    class Attachment {

        constructor(fileName, fileType) {
            this.FileName = fileName;
            this.FileType = fileType;
        }

        FileName;
        FileType;
    }

    class Report {

        Attachments = [];

        addAttachments(...args) {
            this.Attachments = args;
        }
    }

您可以像使用 MainModel 一样创建实例