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

I have a complex form with different tabs, so my ask is to save the entire form data to database on final save. I have the models as per my database as follows, posting sample class

public class VesselDetail
{
   public string VesselName;
}

public class MainModel
{
   public VesselDetail VesselDetail { get; set; }
}

I have created JavaScript models as follows

class VesselDetail {
    constructor() {

    }
    VesselName;
}
class MainModel {
   constructor() {
    this.VesselDetail = [];
   }
}

On my save I am framing the data as follows

 let data = new MainModel();
 let vesselDetail = new VesselDetail();
 vesselDetail.VesselName = "XYZ";
 data.VesselDetail.push(vesselDetail);
 
 $.ajax({
    url: '/Controller/SaveFormData',
    type: 'POST',
    data: '{mainModel: '   JSON.stringify(data)   '}',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (result) {
        hideSpinner();
    },
    error: function (request) {
        hideSpinner();
    }
});

My controller is as follows

[HttpPost]
public JsonResult PostUserData(MainModel mainModel)
{
   return new JsonResult { Data = "OK" };
}

Somehow I am unable to see the vessel name that was given. I would like to know are my JavaScript models are correct or should I do any changes? Any better idea to make these models in JavaScript.

CodePudding user response：

Don't hand-construct JSON, it's really easy to get it wrong. In this case, you haven't put the necessary " around mainModel in the JSON you're sending the server, which makes it invalid. As a result, the server won't be able to parse the JSON it receives.

 $.ajax({
    url: '/Controller/SaveFormData',
    type: 'POST',
    data: '{mainModel: '   JSON.stringify(data)   '}',
//          ^−−−−−−−−^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− missing quotes
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (result) {
        hideSpinner();
    },
    error: function (request) {
        hideSpinner();
    }
});

Instead, let JSON.stringify do it for you:

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

Also, unless your server is returning JSON you're not using, you don't need dataType. (Even if it is, it should be returning the correct Content-Type header in which case dataType is redundant anyway.)

I also suggest passing the vessel name as an argument to the VesselDetail constructor, and either consistently using property declaration syntax (which is fairly new) or consistently not using it:

Not using it:

class VesselDetail {
    constructor(name) {
        this.VesselName = name;
    }
}

class MainModel {
    constructor() {
        this.VesselDetail = [];
    }
}

Using it:

class VesselDetail {
    VesselName;
    constructor(name) {
        this.VesselName = name;
    }
}

class MainModel {
    VesselDetail = [];
}

CodePudding user response：

you put the VesselName out of the builder

should be like this

class VesselDetail {
constructor() {
    this.VesselName;
  }
}

class MainModel {
constructor() {
    this.VesselDetail = [];
  }
}