[asp.net mvc 奇淫巧技] 04 - 你真的会用Action的模型绑定吗?

在QQ群或者一些程序的交流平台,经常会有人问:我怎么传一个数组在Action中接收、我传的数组为什么Action的model中接收不到、或者我在ajax的data中设置了一些数组,为什么后台还是接收不了、还有一些怎么传送一个复杂的对象或者Action怎么接收一个复杂的对象等等这些问题。或者有些人遇到复杂的对象或者数组直接就传送个json字符串,然后在Action中把json字符串转成model对象,当然这也是一种做法,但也许不是最优的做法。

一、需求

按照如图的数据格式,传入到Action,用一个UserInfo Model接收,需求非常简单。

分析后我们可以看到,其中爱好是个字符串的数组,用户包含一个公司对象,然后所包含的公司对象中又有个电话数组,用户又包含数组对象,所以我们的Model应该是:

public class UserInfo
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string[] Bobbys { get; set; }
    public Company Company { get; set; }
    public Star[] Star { get; set; }
}
public class Company
{
    public string Name { get; set; }
    public string Address { get; set; }
    public string[] Tel { get; set; }
}

public class Star
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Movie { get; set; }
}

二、表单提交扫盲与验证

我们在提交表单时不管是post还是get提交,我们所提交的数据大部分都是键值对的格式,并不会直接传入个json对象至后台,最多也只会传入个字符串的json,这个也许是受ajax data设置的误导,很多人都会认为可以直接设置json对象提交至后台,也许格式简单的Model可以接收到,但是复杂一点的,比如其中包含数组的等,即使json的格式和Model的格式一致,Model并不会接收到前台的提交的数组数据,这个也是我文章刚开始所提的一个问题。

为了验证我说的ajax提交json格式的数据,我们做一下验证。

Action:

[HttpPost]
public ActionResult Index(UserInfo user)
{
    return Json(user);
}

Ajax:

$.ajax({
    url: "/",
    type: "post",
    data: {
        "name": "Emrys",
        "age": "26",
        "bobbys": ["足球", "电影"],
        "company": {
            "name": "上海xxxxxx公司",
            "address": "上海徐汇区xxxx路",
            "tel": [
                "021-88888881",
                "021-88888882",
                "021-88888883",
                "021-88888884"
            ]
        },
        "star": [
            { "name": "成龙", "age": "63", "movie": "十二生肖" },
            { "name": "刘亦菲", "age": "18", "movie": "功夫之王" },
            { "name": "胡歌", "age": "24", "movie": "琅琊榜" }
        ]
    },
    success: function (r) {
        console.log(r);
    }
});

这个是我们经常提交的data数据格式,如果我们后台的model格式即使和data的数据格式一模一样,也只有name一项可以正常接收到数据,其他的所有数据都将接收不到,至于为什么。我们看一下jquery给我们转成的键值对的格式就应该知道了,我们从chrome或者火狐的调试工具的network中可以看到提交的格式。

其中数组的格式为:xxxxxx[]的格式,对象中的对象格式为xxxx[yyyyy]格式,我没有探究为什么是这个格式,也许是其他的语言需要这样的格式,php,jsp或者其他的语言吧,但asp.net mvc很明显不需要这样的格式。

后面是毁三观的验证,结果结果竟然全都能用Model接收到数据,接收到了,接收到,接收,接,了,我。。。。。。。。。突然感觉有一百个那个什么飞过啊。。。。。。。。。。

我一度怀疑自己,难道之前做了几年mvc的开发的模型绑定理解错了,之前开发用jquery的ajax转成的格式是不能接收到数据的啊,那是为什么为什么啊。经过探索测试发现,我之前也没有理解错,原来是版本的问题。我测试是用的mvc5做的测试,mvc5可能对jquery ajax转成的格式做了优化,但是mvc5之前的版本是不可以的,这个是重点

那也就是说,如果你用的mvc5做的开发,反而简单了很多,可以直接在ajax的data设置json格式的数据,复杂的,数组都可以,也许微软开发人员也发现了这个问题,在mvc5解决了,我并没有去研究源码的区别,总之呢,mvc5是可以的。那mvc5以前的版本就会遇到我说的那个问题了。

三、模型绑定分析

博客模拟的表单已经可以包含网站开发过程中遇到的大部分的表单格式了,包含一些数组、对象等等。

从以前的开发的mvc项目中,发现了一些模型绑定的规律,区别在于数组和对象中的对象。

下面的图片是手动转成键值对的值,mvc5之前的版本可以适用的格式,当然mvc5也是可以识别的,或者说这个格式是所有的mvc版本都可以适用的格式。

下图是两种格式的对比图

关于其中的规则,自己总结吧,应该很简单了。

有人会问,手动拼的格式应该怎么拼呢,这里经常用的有两种格式。

1、直接拼接字符串

$.ajax({
    url: "/",
    type: "post",
    data: "name=Emrys&age=26&bobbys[0]=足球&star[0].movie=琅琊榜",
    success: function (r) {
        console.log(r);
    }
});

2、javascript对象

var data1 = { name: "Emrys" };
data1.age = 26;
data1["bobbys[0]"] = "足球";
data1["star[0].movie"] = "琅琊榜"; 

$.ajax({
    url: "/",
    type: "post",
    data: data1,
    success: function (r) {
        console.log("xxxxxxxxxxxxxx");
        console.log(r);
    }
});

用户可以根据情况选择不同的拼接方式。

四、总结

顺便分享一个技巧,就是当我们拿到一段json的时候,别急着在类中新建model,一个一个类,一个一个的属相敲,vs已经提供了一个很强大的工具,知道的可以忽略本段。

源码地址Github:https://github.com/Emrys5/Asp.MVC-04-ModelBinding

以上就是关于模型绑定的一些应用,本文原创,欢迎拍砖和推荐

系列课程

时间: 2024-10-07 05:27:32

[asp.net mvc 奇淫巧技] 04 - 你真的会用Action的模型绑定吗?的相关文章

[asp.net mvc 奇淫巧技] 06 - 也许你的项目同一个用户的请求都是同步的

一.感慨 很久前看到一篇博客中有句话大致的意思是:“asp.net 程序性能低下的主要原因是开发人员技术参差不齐”,当时看到这句话不以为然,然而时间过的越久接触的.net 开发人员越多就越认同这句话:特别最近发现非常一个成熟的项目中有些问题非常非常影响性能,最终影响的是用户体验,借此给大家分享一下关于asp.net中一个小小的点,但对项目有很大的性能提升:以前觉得自己接触的项目少小,然后接触的项目越多,越大就会越发现,同样的问题依旧存在: 二.先从最简单的asp.net mvc例子说起 1.Co

[asp.net mvc 奇淫巧技] 02 - 巧用Razor引擎在Action内生成Html代码

在web开发中经常会遇到在内部代码中获取Html,这些Html是需要和数据进行一起渲染.并不是直接把Html代码返回给客户端.这样的做法有很多应用场景,例如分页.Ajax一次性获取几段Html片段.生成邮件发送模板.生成Html静态页面等等.比较简单的或者容易想到的做法就是直接拼接Html,当然这肯定不是最合适的做法. 应用场景 1.在分页中,有一种做法是用ajax获取table的html代码和一些分页信息的Json var json = { "table": "<ta

[asp.net mvc 奇淫巧技] 03 - 枚举特性扩展解决枚举命名问题和支持HtmlHelper

一.需求 我们在开发中经常会遇到一些枚举,而且这些枚举类型可能会在表单中的下拉中,或者单选按钮中会用到等. 这样用是没问题的,但是用过的人都知道一个问题,就是枚举的命名问题,当然有很多人枚举直接中文命名,我是不推荐这种命名规则,因为实在不够友好. 那有没有可以不用中文命名,而且可以显示中文的方法呢.答案是肯定的. 二.特性解决枚举命名问题 那就是用特性解决命名问题,这样的话既可以枚举用英文命名,显示又可以是中文的,岂不两全其美. /// <summary> /// 性别 /// </su

【C#冷知识系列】(一)那些你知道或者不知道的奇淫巧技

引子 正如我在个人介绍中所写,我是一个仍然坚持.NET的头铁高级软件工程师,研究C#,.NET已经六年多,一直坚持认为自己的能力不足以教授别人,所以一直没有想法写博客.工作几年,内容涵盖了.NET框架下的各种软件的开发,WPF,WinForm,WebForm,ASP.NET,MVC5,开发的软件几乎涵盖了.NET家族的各个成员.让我下定决心写一系列C#高级开发文章的原因并不是因为某天早上起床突如其来的兴致勃勃的决定要将自己这些年积累的经验分享给大家,而是是因为公司前端的一句"快脱坑吧,你们做WP

ASP.NET Core 奇淫技巧之伪属性注入

原文:ASP.NET Core 奇淫技巧之伪属性注入 一.前言 开局先唠嗑一下,许久未曾更新博客,一直在调整自己的状态,去年是我的本命年,或许是应验了本命年的多灾多难,过得十分不顺,不论是生活上还是工作上.还好当我度过了所谓的本命年后,许多事情都在慢慢变好,我将会开始恢复更新博客,争取恢复到以前的速度上(因为工作比较忙,所以这个过程可能需要一段时间). 二.关于属性注入 说到属性注入,我们就不得不提一下 DI(Dependency Injection),即依赖注入,用过 ASP.NET Core

[javascript 实践篇]——那些你不知道的“奇淫巧技”

1. 空(null, undefined)验证 刚开始,我是比较蠢的验证(我还真是这样子验证的) if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; } 大哥教会了我这样子验证,你会惊叹一下的 let variable2 = variable1 || ''; 如果你不信,在谷歌浏览器开发者面板的控制台下试试! //值为null的例子 let vari

源码解析中看到的奇淫巧技

源码解析中看到的奇淫巧技 一. 数组重置 let arr = [123,123] arr.length // 2 arr.length = 0 arr // [] 当我们给数组的length 属性设置成 0 .那么数组就会被重置为空. (很神奇有木有 二. 数据类型判断 1. 判断是否为 undefined let isUndef = function(v) { return v === undefined || v === null } 2. 判断是否 不为空 let isDef = func

web.config的奇淫巧技

<connectionStrings configSource="db.config"/> 外部文件db.config: <connectionStrings> <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-WebApplication1-20140304225906;Inte

奇淫巧技之程序启动后在进程列表中隐藏密码等关键信息2

在上一篇总结中,在进程列表中隐藏密码是通过在main函数中做处理来隐藏的. 如下: 1 int _main(int argc, char* argv[], char** envp) { 2 3 省略中间一些代码内容 4 5 // hide password from ps output 6 7 for (int i = 0; i < (argc - 1); ++i) { 8 9 if (!strcmp(argv[i], "-p") || !strcmp(argv[i], &quo