創建包含串列的JavaScript類并將其傳遞給MVC控制器

這是從這里的延續

在 JavaScript 中創建類并將其傳遞給 MVC 控制器的正確方法是什么

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 的正確方法是什么。

@嗶嘰

根據討論，這是我的 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控制器

uj5u.com熱心網友回復：

不幸的是，您的 javascript 類中有一個錯誤 - 雙 VesselDetails。我提議使用這些類，這是更面向物件的風格。

        class VesselDetail {

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

        VesselName;
        VesselData;
    }

    class MainModel {

        VesselDetails=[];

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

阿賈克斯

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

更新

報表類找我很像 MainModel 類

    class Attachment {

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

        FileName;
        FileType;
    }

    class Report {

        Attachments = [];

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

并且您可以像使用 MainModel 一樣創建實體

標籤：

上一篇：如何在不輸入屬性名稱的情況下遍歷模型并列印

下一篇：保持視圖名稱和對應的控制器方法名稱不同