返回顶部
首页 > 资讯 > 精选 >当ASP.NET MVC邂逅jQuery.Ajax提交数组的示例分析
  • 478
分享到

当ASP.NET MVC邂逅jQuery.Ajax提交数组的示例分析

2023-06-17 09:06:26 478人浏览 安东尼
摘要

本篇文章给大家分享的是有关当asp.net mvc邂逅Jquery.ajax提交数组的示例分析,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。当ASP.net MVC 通过JQu

本篇文章给大家分享的是有关当asp.net mvc邂逅Jquery.ajax提交数组的示例分析,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

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

需求描述

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

当ASP.NET MVC邂逅jQuery.Ajax提交数组的示例分析

前端代码:

var items = [];  $("input:checked").each(function () {      items.push($(this).val());  });  $.ajax({      type: 'post',      url: 'Configure/Status',      data: { answers: items }  });

后端代码:

public enum AnswerStatus  {          Correct = 1,          Incorrect = 2,          Unanswered = 3 }  [HttpPost]  public ActionResult Status(IList<AnswerStatus> answers)  {       &hellip;.  }

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

当ASP.NET MVC邂逅jQuery.Ajax提交数组的示例分析

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

[HttpPost]  public ActionResult Status(IList<AnswerStatus> answers)  {      answers = Request.FORM.GetValues(“answers[]”).Select(d => d.ToEnum<AnswerStatus>(AnswerStatus.Unanswered).ToList();  }

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

尝试进行***次重构:

public class AnswerModelBinder : IModelBinder  {      public override object BindModel(ControllerContext controllerContext, ModelBindinGContext bindingContext)      {          return controllerContext.RequestContext.HttpContext.Request.Form.GetValues(“answers[]”).Select(d => d.ToEnum<AnswerStatus>(AnswerStatus.Unanswered).ToList();          }  }

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

进行第二次重构 : DefaultModelBinder 出场

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

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

并继承自DefaultModelBinder:

public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)  {      if(bindingContext.ModelType.IsEnumerable())      {          var key = bindingContext.ModelName + "[]";          var valueResult = bindingContext.ValueProvider.GetValue(key);          if(valueResult != null && !string.IsNullOrEmpty(valueResult.AttemptedValue))          {               bindingContext.ModelName = key;           }      }      return base.BindModel(controllerContext, bindingContext);  }//如何使用自定义ModelBinder。该方法是Controller里面的Action  public ActionResult Status([ModelBinder(typeof(ModelBinder.JQAjaxModelBinder))] IList<AnswerStatus> answers)  {      &hellip;          }

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

ModelBinder不同注册方法

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

数据类型上面添加ModelBinder标签

[ModelBinder(typeof(ModelBinder.JQAjaxModelBinder))]  Public class User  {  }

通过ModelBinders注册

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

设置默认的ModerBinder

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

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

以上就是当ASP.NET MVC邂逅jQuery.Ajax提交数组的示例分析,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。

--结束END--

本文标题: 当ASP.NET MVC邂逅jQuery.Ajax提交数组的示例分析

本文链接: https://lsjlt.com/news/288074.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 当ASP.NET MVC邂逅jQuery.Ajax提交数组的示例分析
    本篇文章给大家分享的是有关当ASP.NET MVC邂逅jQuery.Ajax提交数组的示例分析,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。当ASP.NET MVC 通过JQu...
    99+
    2023-06-17
  • angularjs中$http提交数据的示例分析
    小编给大家分享一下angularjs中$http提交数据的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前两天在搞自己的...
    99+
    2024-04-02
  • Ajax提交form表单的示例分析
    这篇文章给大家分享的是有关Ajax提交form表单的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。ajax (ajax开发) AJAX即“Asynchronous Jav...
    99+
    2024-04-02
  • ASP.Net Core MVC中服务注册和管道的示例分析
    这篇文章给大家分享的是有关ASP.Net Core MVC中服务注册和管道的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。DI容器呢, 依赖接口, 所以我们先新建一个接口, 就叫 IW...
    99+
    2023-06-29
  • vue组件表单数据回显验证及提交的示例分析
    这篇文章主要介绍vue组件表单数据回显验证及提交的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!最近项目需要到vue开发单页面,所以就研究一下表单数据的回显,验证及提交如何用...
    99+
    2024-04-02
  • Angular2中组件交互的示例分析
    这篇文章主要为大家展示了“Angular2中组件交互的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular2中组件交互的示例分析”这篇文章吧。1...
    99+
    2024-04-02
  • Angular中组件交互的示例分析
    这篇文章将为大家详细讲解有关Angular中组件交互的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Angular 组件交互组件交互: 组件通讯,让两个或多个组件之间共享信息。使用场景: 当某个功...
    99+
    2023-06-14
  • json格式中Ajax提交的示例分析
    这篇文章给大家分享的是有关json格式中Ajax提交的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。需要加入:com.springsource.org.apache.co...
    99+
    2024-04-02
  • Angular.js前台传list数组由后台spring MVC接收数组的示例分析
    这篇文章主要介绍了Angular.js前台传list数组由后台spring MVC接收数组的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解...
    99+
    2024-04-02
  • JS中表单提交验证的示例分析
    这篇文章将为大家详细讲解有关JS中表单提交验证的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证...
    99+
    2024-04-02
  • java数组的示例分析
    这篇文章给大家分享的是有关java数组的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。java数组1) 声明形式:type[] arrayName; 推荐方式type a...
    99+
    2024-04-02
  • vue表单提交防双/多击的示例分析
    这篇文章主要介绍vue表单提交防双/多击的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!先说下出现场景:测试这次比较极端(也有可能是测试又学会什么新知识了,哈哈),说是在点击...
    99+
    2024-04-02
  • js中数组的示例分析
    小编给大家分享一下js中数组的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!创建一个数组:// 字面量方式: ...
    99+
    2024-04-02
  • Shell中数组的示例分析
    这篇文章给大家分享的是有关Shell中数组的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Shell中数据类型不多,比如说字符串,数字类型,数组。数组是其中比较重要的一种,其重要应用场景,可以求数组长度,...
    99+
    2023-06-14
  • JavaScript中数组的示例分析
    这篇文章主要介绍JavaScript中数组的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!javascript是一种什么语言javascript是一种动态类型、弱类型的语言,基于对象和事件驱动并具有相对安全性...
    99+
    2023-06-14
  • Java中数组的示例分析
    小编给大家分享一下Java中数组的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!数组的定义数组是相同类型数据的有序集合数组描述的是相同类型的若干个数据,按...
    99+
    2023-06-20
  • ASP.NET中Web API参数绑定的示例分析
    这篇文章主要介绍了ASP.NET中Web API参数绑定的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。操作方法在WebAPI控制器中可以有一个或多个不同类...
    99+
    2023-06-29
  • ajax提交到java后台之后处理数据的示例分析
    这篇文章给大家分享的是有关ajax提交到java后台之后处理数据的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。环境:eclipse+struts要实现的效果:点击按钮提...
    99+
    2024-04-02
  • JS中from表单序列化提交的示例分析
    这篇文章主要介绍了JS中from表单序列化提交的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体代码如下所示:// --...
    99+
    2024-04-02
  • JavaScript数组方法的示例分析
    这篇文章将为大家详细讲解有关JavaScript数组方法的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。抛砖引玉在开始正式讲被我们忽略的一些数组方法之前,我还是想...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作