MVC ajax json 发布到控制器操作方法

Posted 2023-04-01

【中文标题】MVC ajax json 发布到控制器操作方法

【英文标题】：MVC ajax json post to controller action method

【发布时间】：2011-05-06 10:24:49

【问题描述】：

我正在尝试实现对包含复杂对象作为参数的控制器操作方法的 JQuery AJAX 调用。 我已经阅读了很多博客并尝试了从这些博客中学到的几种技术。我构建最佳尝试代码的关键帖子（如下）是 *** 帖子 here 。

我想触发一个异步帖子，当用户关闭一个字段时调用[不是表单保存帖子——如我发现的其他示例所示]。

我的目的是：

在客户端实例化一个对象[不是为视图提供类型的视图模型]； 用视图中多个字段的数据填充对象； 将此对象转换为 JSON； 使用 jQuery.Ajax 方法调用控制器操作方法，传递 JSON 对象。

结果将作为 JSON 结果返回；并且数据将根据返回的结果加载到视图中的字段中。

问题是：

如果 action 方法带有 HttpPost 属性，则不会调用控制器 Action 方法（即使 AJAX 调用类型设置为“POST”）。 如果action方法是HttpGet属性，则参数属性值为null ReadObject 方法引发错误：“期望来自命名空间 '' 的元素 'root'.. 遇到名为 'namespace' 的 'None'”。

希望有人可以提供帮助。谢谢。代码如下：

客户端 js 文件

 var disputeKeyDataObj = 
     "InvoiceNumber": "" + $.trim(this.value) + "",
     "CustomerNumber": "" + $.trim($('#CustomerNumber').val()) + ""
  ;

  var disputeKeyDataJSON = JSON.stringify(disputeHeadlineData);      

  $.ajax(
     url: "/cnr/GetDataForInvoiceNumber",
     type: "POST",
     data: disputeKeyDataJSON,
     dataType: 'json',
     contentType: "application/json; charset=utf-8",
     success: EnrichedDisputeKeyData(result)
  );

与 Action 方法参数关联的类型的操作过滤器和类

 [DataContract]  
 public class DisputeKeyData  
   
    [DataMember(Name = "InvoiceNumber")]  
    public string InvoiceNumber  get; set; 

    [DataMember(Name = "CustomerNumber")]
    public string CustomerNumber  get; set; 
   

控制器上的动作方法

  //[HttpPost]
  [ObjectFilter(Param = "disputeKeyData", RootType = typeof(DisputeKeyData))]  
  public ActionResult GetDataForInvoiceNumber(DisputeKeyData disputeKeyData)  
    
     //Blah!  
     //....  
     return Json(disputeKeyData, JsonRequestBehavior.AllowGet);  
    

【参考方案1】：

以下是我如何使其工作的。

关键点是： 我需要使用与视图关联的 ViewModel，以便运行时能够解析请求中的对象。

[我知道有一种方法可以绑定默认 ViewModel 对象以外的对象，但最终只是填充了我需要的必要属性，因为我无法让它工作]

[HttpPost]  
  public ActionResult GetDataForInvoiceNumber(MyViewModel myViewModel)  
              
     var invoiceNumberQueryResult = _viewModelBuilder.HydrateMyViewModelGivenInvoiceDetail(myViewModel.InvoiceNumber, myViewModel.SelectedCompanyCode);
     return Json(invoiceNumberQueryResult, JsonRequestBehavior.DenyGet);
  

用于调用此操作方法的 JQuery 脚本：

var requestData = 
         InvoiceNumber: $.trim(this.value),
         SelectedCompanyCode: $.trim($('#SelectedCompanyCode').val())
      ;


      $.ajax(
         url: '/en/myController/GetDataForInvoiceNumber',
         type: 'POST',
         data: JSON.stringify(requestData),
         dataType: 'json',
         contentType: 'application/json; charset=utf-8',
         error: function (xhr) 
            alert('Error: ' + xhr.statusText);
         ,
         success: function (result) 
            CheckIfInvoiceFound(result);
         ,
         async: true,
         processData: false
      );

【讨论】：

在此重要的是要注意，您对 javascript 代码所做的更改之一是参数名称不在引号中。而不是"Invoice Number": 它的InvoiceNumber:，我假设这是你问题的一部分。

@Mattygabe 这真的不重要。

什么时候使用 JSON.stringify 和 JSON.Encode？我似乎只有在 MVC4 中使用带有模型绑定器的 JSON.Encode 运气。

这是如何工作的？ 'myController' 在您的示例中仅出现一次