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 { get; set; }
}

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.