当ASP.NETMVC邂逅jQuery.Ajax提交数组

当ASP.NET MVC 通过JQuery的Ajax 提交数组时，MVC的model binder机制就失效了。我们不得不在Controller里面编写自定义代码，将Request提交的数据转换成需要的数据类型。这个过程往往枯燥乏味。下面以某项目的实际例子来演示如何解决这个问题，提供一个通用的解决方案。 

需求描述

当用户更改了配置，需要Ajax提交到服务器。

前端代码:

 
 
 
 
    
  
  
  
  
  1. var items = [];  
    2. 
  
  
  
  
  2. $("input:checked").each(function () {  
    3. 
  
  
  
  
  3.     items.push($(this).val());  
    4. 
  
  
  
  
  4. });  
    5. 
  
  
  
  
  5. $.ajax({  
    6. 
  
  
  
  
  6.     type: 'post',  
    7. 
  
  
  
  
  7.     url: 'Configure/Status',  
    8. 
  
  
  
  
  8.     data: { answers: items }  
    9. 
  
  
  
  
  9. }); 
    10.

后端代码:

 
 
 
 
    
  
  
  
  
  1. public enum AnswerStatus  
    2. 
  
  
  
  
  2. {  
    3. 
  
  
  
  
  3.         Correct = 1,  
    4. 
  
  
  
  
  4.         Incorrect = 2,  
    5. 
  
  
  
  
  5.         Unanswered = 3 
    6. 
  
  
  
  
  6. }  
    7. 
  
  
  
  
  7. [HttpPost]  
    8. 
  
  
  
  
  8. public ActionResult Status(IList answers)  
    9. 
  
  
  
  
  9. {  
    10. 
  
  
  
  
  10.      ….  
    11. 
  
  
  
  
  11. } 
    12.

这里的answers始终为null. 神器fiddler出场，发现用JQuery.Ajax 提交Array的数据，提交的时候始终会在名称后面加上”[]”， 问题就出在这里。

根据发现的结果修改代码：

 
 
 
 
    
  
  
  
  
  1. [HttpPost]  
    2. 
  
  
  
  
  2. public ActionResult Status(IList answers)  
    3. 
  
  
  
  
  3. {  
    4. 
  
  
  
  
  4.     answers = Request.Form.GetValues(“answers[]”).Select(d => d.ToEnum(AnswerStatus.Unanswered).ToList();  
    5. 
  
  
  
  
  5. } 
    6.

虽然这样能够通过解决我的问题，但每次提交Array都要这样手工解析request，视乎一夜回到石器时代了。其实我们马上会想到MVC 的Mode Binder。

尝试进行***次重构：

 
 
 
 
    
  
  
  
  
  1. public class AnswerModelBinder : IModelBinder  
    2. 
  
  
  
  
  2. {  
    3. 
  
  
  
  
  3.     public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)  
    4. 
  
  
  
  
  4.     {  
    5. 
  
  
  
  
  5.         return controllerContext.RequestContext.HttpContext.Request.Form.GetValues(“answers[]”).Select(d => d.ToEnum(AnswerStatus.Unanswered).ToList();      
    6. 
  
  
  
  
  6.     }  
    7. 
  
  
  
  
  7. } 
    8.

硬编码味道太重，换个类型又得重写，工作量跟之前比还视乎增加了，只是Controller变得优雅了。这种浪费青春又耗电的做法还是不符合要求。

进行第二次重构 ： DefaultModelBinder 出场

***的DefaultModelBinder，能够绑定任何类型，可惜就是client传过来的name后面多加了”[]”，导致DefaultModelBinder无法准确解析。那我们能不能欺骗DefaultModelBInder呢？

查看ModelBindingContext发现有一个ModelName属性，感觉有点像要绑定的参数的名称，调试跟踪发现ModelName确实就是参数的名称，那我们修改ModelName让他跟client传过来的name保持一致是否就能够充分发挥DefaultModelBinder。于是动手创建一个JQAjaxModelBinder

并继承自DefaultModelBinder：

 
 
 
 
    
  
  
  
  
  1. public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)  
    2. 
  
  
  
  
  2. {  
    3. 
  
  
  
  
  3.     if(bindingContext.ModelType.IsEnumerable())  
    4. 
  
  
  
  
  4.     {  
    5. 
  
  
  
  
  5.         var key = bindingContext.ModelName + "[]";  
    6. 
  
  
  
  
  6.         var valueResult = bindingContext.ValueProvider.GetValue(key);  
    7. 
  
  
  
  
  7.         if(valueResult != null && !string.IsNullOrEmpty(valueResult.AttemptedValue))  
    8. 
  
  
  
  
  8.         {  
    9. 
  
  
  
  
  9.              bindingContext.ModelName = key;  
    10. 
  
  
  
  
  10.          }  
    11. 
  
  
  
  
  11.     }  
    12. 
  
  
  
  
  12.     return base.BindModel(controllerContext, bindingContext);  
    13. 
  
  
  
  
  13. }//如何使用自定义ModelBinder。该方法是Controller里面的Action  
    14. 
  
  
  
  
  14. public ActionResult Status([ModelBinder(typeof(ModelBinder.JQAjaxModelBinder))] IList answers)  
    15. 
  
  
  
  
  15. {  
    16. 
  
  
  
  
  16.     …          
    17. 
  
  
  
  
  17. }  
    18.

这时，Controller里面的Status （Action）方法已经能够正确得到前端传来的数据。并且还是强类型的。当然很多程序员都是懒惰的，笔者也是这其中一份子。笔者连Parameter前面的参数（[ModelBinder(typeof(ModelBinder.JQAjaxModelBinder))]）都不想写，那我们直接在ModelBinders里面注册吧。其实注册的时候也有点麻烦，必须设定Type，我那能提前知道有那些类型啊。干脆将JQAjaxModelBinder设置成默认的ModerBinder，一劳永逸，再也没有烦心事情了。

ModelBinder不同注册方法

通过在Action方法的参数前面添加ModelBinder标签，上文则是采用的这种方法。

数据类型上面添加ModelBinder标签

 
 
 
 
    
  
  
  
  
  1. [ModelBinder(typeof(ModelBinder.JQAjaxModelBinder))]  
    2. 
  
  
  
  
  2. Public class User  
    3. 
  
  
  
  
  3. {  
    4. 
  
  
  
  
  4. } 
    5.

通过ModelBinders注册

 
 
 
 
    
  
  
  
  
  1. ModelBinders.Binders.Add(typeof(User), new ModelBinder.JQAjaxModelBinder()); 
    2.

设置默认的ModerBinder

 
 
 
 
    
  
  
  
  
  1. ModelBinders.Binders.DefaultBinder = new ModelBinder.JQAjaxModelBinder(); 
    2.

后记： 当我们在开发的时候，经常做重复的事情，当一件事情重复多次后，我们就需要停下来认真思考，能不能将这些事情抽象出来，做一个通用的解决方案呢？一劳永逸的解决这些问题。

当前标题：当ASP.NETMVC邂逅jQuery.Ajax提交数组
转载源于：http://www.hantingmc.com/qtweb/news7/313207.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站营销知识

分类信息网

成都VI设计　　 　网站改版　　 　康明斯发电机　　 　定制网站设计　　 　成都名片印刷　　 　vi形象设计　　 　抖音代运营　　 　成都logo设计公司　　 　教育网站设计方案　　 　APP定制开发　　 　成都app软件开发公司　　 　钢筋机械设备　　 　雷运建站　　 　软文推广公司　　 　成都服装定制　　 　一带一路　　 　成都微信小程序开发　　 　云主机　　 　木包装箱　　 　成都网站维护