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

时间:2010-11-07 23:08:18

标签: asp.net-mvc ajax json

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

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

我的意图是:

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

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

问题是:

  • 如果action方法属于HttpPost属性,则不会调用控制器Action方法(即使AJAX调用类型设置为'POST')。
  • 如果动作方法是使用HttpGet分配的,则参数的属性值为null
  • ReadObject方法抛出错误:“期望元素'root'来自命名空间''..遇到'无',名称'命名空间'”。

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

客户端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);  
  }  

3 个答案:

答案 0 :(得分:37)

以下是我如何使用它。

关键点是: 我需要使用与视图关联的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
      });

答案 1 :(得分:4)

blog post直接解决了您的问题。

它使用一种技术而无需额外的JSON客户端库。它引入了一个非常简单的jQuery插件,可以帮助你完成这个技巧。

答案 2 :(得分:0)

您使用的是哪个版本的asp.net mvc?将json对象发布到强类型控制器操作刚刚添加到ASP.NET MVC 3 Beta 1中。This文章解释了使用asp.net mvc 2的模型绑定器的解决方法以及它在MVC 3中如何工作的信息。