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

Question

这是从这里继续

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 变为 null，将列表从 JavaScript 传递给 mvc 的正确方法是什么。

@serge

根据讨论

，这是我的 c# class

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 controller

Answer 1

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

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

更新

报告class跟我很像MainModelclass

    class Attachment {

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

        FileName;
        FileType;
    }

    class Report {

        Attachments = [];

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

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

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

Create JavaScript class which holds the list and pass it to MVC controller

javascript

c#

ajax

asp.net-mvc-4