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

Question

This is continuation from here

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

I have created JavaScript models as follows

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 = {};
}

In my button click event I will bind the required and passing it to MVC controller as follows

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

But in the controller VesselDetails is getting as null, what was the correct way to pass list to mvc from JavaScript.

@serge

Here is my c# class as per discussion

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

What can be the equivalent in js and send it to mvc controller

Serge · Accepted Answer · 2021-09-30 08:34:18Z

1

Unfortunately you have a bug in your javascript classes - double VesselDetails. I offer to use this classes, this is more object oriented style.

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

action

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

UPDATE

Report class looks for me very alike MainModel class

    class Attachment {

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

        FileName;
        FileType;
    }

    class Report {

        Attachments = [];

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

and you can create instances the same way as it is using MainModel

edited Sep 30, 2021 at 8:34

answered Sep 29, 2021 at 18:55

Serge

44.4k4 gold badges26 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Developer Over a year ago

Hi Serge let's say if I have normal classes as per earlier post will the JSON.stringify works?

Developer Over a year ago

As per here, I can have different classes stackoverflow.com/questions/69363036/…

Serge Over a year ago

@Developer , yes certailnly. But you have double VesselDetails.

Serge Over a year ago

@Developer Yes, I offered you the same algoritim in UPDATE section and asked you to test it. It is working properly at my computer. And you still can use another one without stringify it you like it more.

Developer Over a year ago

I mean to say instead of array class MainModel { VesselDetails = []; SomeClass={} }

|

Collectives™ on Stack Overflow

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

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related