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

Posted 2023-04-12

【中文标题】创建包含列表的 JavaScript 类并将其传递给 MVC 控制器

【英文标题】：Create JavaScript class which holds the list and pass it to MVC controller

【发布时间】：2021-11-21 14:50:07

【问题描述】：

这是从这里开始的延续

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控制器

【参考方案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 一样创建实例

【讨论】：

嗨，Serge，假设我按照之前的帖子有正常的课程，JSON.stringify 会起作用吗？

按照这里，我可以有不同的课程***.com/questions/69363036/…

@Developer ，当然是的。但是你有双 VesselDetails。

@Developer 是的，我在 UPDATE 部分为您提供了相同的算法并要求您对其进行测试。它在我的电脑上正常工作。而且你仍然可以使用另一个而不用字符串化你更喜欢它。

我的意思是说而不是数组class MainModel VesselDetails = []; SomeClass=