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

Posted 2023-04-01

【中文标题】在 JavaScript 中创建类并将其传递给 MVC 控制器的正确方法是啥

【英文标题】：What's the correct way to create class in JavaScript and pass that to MVC controller在 JavaScript 中创建类并将其传递给 MVC 控制器的正确方法是什么

【发布时间】：2021-11-20 13:44:51

【问题描述】：

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

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 制作这些模型有什么更好的办法。

【参考方案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 不是空白。

【讨论】：

必须要有构造函数吗？我有这么多领域

我的 VesselName 仍然为空

@Developer - 不，这不是强制性的。您也可以按照您在问题中的方式进行操作。我以为这只是一个领域。 （我已经删除了答案的那一部分。）上面的代码肯定会生成包含非空白VesselName 的有效 JSON。如果你在服务器上得到一个空白，要么是你使用的 JavaScript 代码没有填写 VesselName，要么是服务器代码没有在正确的地方寻找它。

在客户端我可以看到，但在我的 MVC 控制器中我看不到

【参考方案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);

【讨论】：

我已经get;set;你的控制器代码怎么样？

得到 500 错误我可以得到控制器吗？

@Developer 你的控制器名称是什么？，你必须用它替换“控制器”

你的控制器是不是像这样[HttpPost] public JsonResult PostUserData(MainModel mainModel) return new JsonResult Data = "OK" ;

我正在 MainModel 检查 VesselName 是否来了

【参考方案3】：

你把 VesselName 放在 builder 之外

应该是这样的

class VesselDetail 
constructor() 
    this.VesselName;
  


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