如何正确编写JavaScript类并将数据传递到ASP.NET MVC控制器

问题核心原因 #

你的C#后端MainModel类中VesselDetail是单个对象类型，但前端JS的MainModel里将VesselDetail定义成了数组，前后端类型不匹配，导致ASP.NET的模型绑定器无法正确解析提交的数据，自然拿不到VesselName的值。此外你提交请求的路径和后端Action名不匹配、手动拼接JSON字符串的写法也属于潜在错误点。

具体修改方案 #

1. 修正JS模型定义 #

把MainModel里的VesselDetail从数组改成单个对象，修改后的JS模型如下：

class VesselDetail {
    // 优化：构造函数支持直接传属性初始化
    constructor(vesselName = '') {
        this.VesselName = vesselName;
    }
}
class MainModel {
   constructor() {
    // 不要定义成数组，直接初始化对应对象即可
    this.VesselDetail = new VesselDetail();
   }
}

2. 修正数据组装逻辑 #

不需要用push方法，直接给属性赋值即可：

let data = new MainModel();
// 直接给属性赋值即可，不需要调用push方法
data.VesselDetail.VesselName = "XYZ";

3. 优化AJAX提交写法 #

手动拼接JSON字符串的方式容易出现转义错误，直接序列化整个参数对象更稳妥，同时要注意请求路径和后端Action名保持一致：

$.ajax({
    url: '/Controller/PostUserData', // 和后端Action名保持一致，之前的SaveFormData是错误路径
    type: 'POST',
    // 直接序列化整个参数对象，不需要手动拼接JSON格式
    data: JSON.stringify({ mainModel: data }),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (result) {
        hideSpinner();
    },
    error: function (request) {
        hideSpinner();
    }
});

更优的多标签页表单JS模型编写方案 #

针对多标签页的复杂表单场景，可以封装基础模型类实现批量赋值能力，每个标签页对应一个子模型，维护更清晰：

// 基础模型提供通用批量赋值能力
class BaseModel {
    assign(props = {}) {
        Object.keys(props).forEach(key => {
            if (this.hasOwnProperty(key)) {
                this[key] = props[key];
            }
        });
        return this;
    }
}

// 船舶信息子模型（对应船舶标签页字段）
class VesselDetail extends BaseModel {
    VesselName = '';
    VesselType = '';
    MMSI = '';
    // 扩展其他船舶相关字段
}

// 货物信息子模型（对应货物标签页字段）
class CargoInfo extends BaseModel {
    CargoName = '';
    CargoWeight = 0;
    // 扩展其他货物相关字段
}

// 根模型整合所有标签页子模型
class MainModel extends BaseModel {
    VesselDetail = new VesselDetail();
    CargoInfo = new CargoInfo();
    // 继续添加其他标签页对应的子模型
}

// 使用示例：直接传入表单采集的对象批量赋值
const vesselFormData = {
    VesselName: 'XYZ',
    VesselType: '集装箱船',
    MMSI: '123456789'
};
const data = new MainModel();
data.VesselDetail.assign(vesselFormData);

内容的提问来源于stack exchange，提问作者Developer