在 JavaScript 中创建类并将其传递给 MVC 控制器的正确方法是什么

Question

我有一个带有不同选项卡的复杂表单，所以我的要求是在最终保存时将整个表单数据保存到数据库中。我的数据库模型如下，发布示例类

public class VesselDetail
{
   public string VesselName { get; set; }
}

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

我已经创建了如下的 JavaScript 模型

class VesselDetail {
    constructor() {

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

在我的保存中，我将数据构建如下

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

我的控制器如下

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

不知何故，我无法看到给出的船只名称。我想知道我的 JavaScript 模型是否正确，或者我应该进行任何更改吗？用 JavaScript 制作这些模型有什么更好的办法。

Answer 1

不要手动构建 JSON，真的很容易出错。在这种情况下，您没有在发送服务器的 JSON 中将必要的 " 放在 mainModel 周围，这使其无效。因此，服务器将无法解析它接收到的 JSON。

 $.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();
    }
});

相反，让JSON.stringify 为你做这件事：

 $.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();
    }
});

此外，除非您的服务器返回您未使用的 JSON，否则您不需要 dataType。 （即使是，它也应该返回正确的 Content-Type 标头，在这种情况下，dataType 无论如何都是多余的。）

我还建议始终使用属性声明语法（这是相当新的）或始终不使用它：

不使用它：

class VesselDetail {
}

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

使用它：

class VesselDetail {
    VesselName;
}

class MainModel {
    VesselDetail = [];
}

这是一个 JSON 示例，它将由您的代码通过上述更改生成（我使用了属性声明语法——上面的第二组类——但它们都会生成相同的东西）：

class VesselDetail {
    VesselName;
}

class MainModel {
    VesselDetail = [];
}

let data = new MainModel();
let vesselDetail = new VesselDetail();
vesselDetail.VesselName = "XYZ";
data.VesselDetail.push(vesselDetail);
const json = JSON.stringify({mainModel: data});

console.log(json);

如您所见，VesselName 不是空白。

Answer 2

试试这个，已经在 VS2019 中测试过并且可以正常工作

var mainModel= { VesselDetail : { VesselName :"XYZ"} };
  
 $.ajax({
    url: '/Controller/PostUserData',
    type: 'POST',
    data: { mainModel: mainModel),
    success: function (result) {
        hideSpinner();

        alert(JSON.stringify(result));
    },
    error: function (request) {
        hideSpinner();
 
    }
});

并通过添加 setter 和 getter 来修复 VesselDetail 类

public class VesselDetail
{
   public string VesselName { get; set;}
}

我发现您的操作存在错误。什么是数据？

return new JsonResult { Data = "OK" };

试试这个

return  new JsonResult(mainModel.VesselDetail.VesselName);

但如果你喜欢它，你可以试试这个

class VesselDetail {
VesselName;
}

class MainModel {
VesselDetail = {};
}

let mainModel= new MainModel();
data.VesselDetail.VesselName="XYZ";

更新

有时这会更好，这取决于网络版本或您是否使用 API 控制器

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

但您必须将 [FromBody] 添加到操作中

[HttpPost]
public JsonResult PostUserData([FromBody] MainModel mainModel)
{
   return  new JsonResult(mainModel.VesselDetail.VesselName);
}

Answer 3

你把 VesselName 放在 builder 之外

应该是这样的

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

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