ASP.NET MVC3 技术(五) JSON 数据的传递

转载 2011年10月28日 15:20:55
 

今天微软发布了 ASP.NET MVC 3正式版,ASP.NET MVC 3 中的大多数知识点本站已经做过说明。ASP.NET MVC 3 中默认支持对 JSON 数据的接收,今天就让我们看看 JSON 数据的绑定。使用时会用到一点 jQuery 的知识,相信对经常访问本站的朋友来说并不难理解。

ASP.NET MVC 3 中内置了对 JSON 的绑定支持,使得接收从客户端传递过来的 JSON 格式的数据变得非常简单。本篇还是以 Android 博客项目中的留言小功能来简单的说明一下具体的使用方法。先看看 Razor 视图引擎下的 HTML代码,这块主要用来显示留言的数据列表:

<div>
    <script id="userTemplate" type="text/html">
    <div><a href="${Website}">${UserName}</a> Says: ${Content}</div>
    </script>
    <div id="Contact"></div>
    <input type="button" id="create" value="Create" />
</div>

当我们点击 Create 按钮时提交留言(这里为了简单,留言内容固定了),执行 jQuery Ajax 传递 JSON 格式数据,如下:

$("#create").click(function () {
    var contact = {
        UserName: "I love jQuery",
        Website: "http://www.google.com",
        Content: "Nice to meet you."
    };

    $.ajax({
        url: "/Contact",
        type: "POST",
        data: contact,
        dataType: "json",
        success: function (req) {
            $("#userTemplate").render(req).appendTo("#Contact");
        }
    });
});

如果你是纯 ASP.NET 开发者,没有接触过 jQuery ,那么我要强烈的建议你赶快学习 jQuery ,jQuery 在 ASP.NET MVC 3 中起着非常重要的作用,它会越来越流行。现在,你可以参考下 jQuery学习大总结(五)jQuery Ajax。这样将留言内容以JSON 结构通过 POST 方式向后台提交,ASP.NET MVC 3 Controller 中接收代码如下:

[HttpPost]
public ActionResult Index(Contact contact)
{
    if (ModelState.IsValid)
    {
        android.Contact.AddObject(contact);
        android.SaveChanges();
    }
    var contacts = from c in android.Contact
                    where c.IsValid == 1
                    select c;
    return Json(contacts);
}

这里没有什么新知识,如果你没有看过前边 ASP.NET MVC 3 中的添加、修改、删除操作,你可以参考下 ASP.NET MVC3 实例(六) 增加、修改和删除操作(一),接收 JSON 结果如下图所示:

ASP.NET MVC 3 接收 JSON 数据

可见,Index()方法中,接收强类型的 Contact 对象作为参数,ASP.NET MVC 3 能够在服务器端自动绑定 JSON 格式的数据到 .NET Contact 类型,ASP.NET MVC 3 添加操作中我们已经介绍过了这种自动绑定。可见,在 ASP.NET MVC 3 中实体数据的赋值变得非常简单,有了 Contact 对象后我们进行了保存操作,这里不再多说,到这我想大家已经了解到 ASP.NET MVC 3 中接收 JSON 的方便性了。程序最后使用Json()方法,它返回了一个JSON 结构的对象,在Google Chrome 中结果如下:

ASP.NET MVC 3 返回 JSON 结构 1

ASP.NET MVC 3 返回 JSON 结构 2

如果你对使用 Google Chrome 调试 js 还不熟悉的话,可以参考下 Google Chrome 调试 js 入门,当然你也可以使用 FireFox 的 Firebug 来调试。最后 jQuery 程序中使用微软的 jQuery Templates 插件来将 JSON 格式的留言数据显示出来,使得我们没必要再进行对返回结果的遍历显示。关于 jQuery Templates 你可以参考下微软 jQuery Templates插件的使用jQuery插件-微软 jQuery Templates。最后的结果如下:

ASP.NET MVC 3 执行结果

至此我们清楚的看到,在 ASP.NET MVC 3 中对于 JSON 数据的接收变得非常智能,同时使用 jQuery Templates 插件使得绑定 JSON 数据变得非常简单。如果你还看过本站中的 jQuery插件-微软 jQuery Data Linking ,你会发现使用它也会使项目中的代码简洁和易于维护。当然本篇举的例子非常简单,相信你能使用ASP.NET MVC 3 高效地做出真正实用的项目。

ASP.NET MVC3如何用JQuery传递数组(集合)类型参数给JsonResult Action

ASP.NET MVC3如何用JQuery传递数组(集合)类型参数给JsonResult Action Edi_Wang 2012-10-16 星期二 22:00 ...
  • niewq
  • niewq
  • 2013年12月29日 23:42
  • 2780

asp.net MVC接收前端传递的复杂json对象的简单处理方法

有时候,我们需要从页面传递一组数据到后台,但同时又需要传递几个独立的参数,这种情况很伤脑筋。 网上有各种各样的说法和办法,但都不好用,或没有说到关键的地方。 还有的建议传字符串后台格式化或解析,也...
  • foren_whb
  • foren_whb
  • 2017年12月25日 15:49
  • 115

MVC 中获取Json数据

@{ ViewBag.Title = "json示例项目"; } @Scripts.Render("~/bundles/jquery") json示例项目View GetJsonDa...
  • smartsmile2012
  • smartsmile2012
  • 2016年06月29日 17:11
  • 1775

C#获取post请求的json字符串

引言:抛出问题             公司让为ITSM移动端写接口,现在遇到这么一个问题,移动端通过post请求给发送一个json串,怎么在后天获取呢?由于必须将后台程序发布到外网才能进行测...
  • u013037201
  • u013037201
  • 2016年05月13日 20:13
  • 3094

Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)

可同时参见这篇文章  asp.net webapi下json传值方式 纠缠了我几天的一个问题,简单摘抄整理下,希望对大家有帮助。 网络上大量使用json格式传递数据,json传递数据比较轻量,而用...
  • jjkliu
  • jjkliu
  • 2014年02月11日 11:08
  • 14494

解决ASP.NET MVC(post数据)Json请求太大,无法反序列化

这个问题出现的场景并不是很多,当你向服务端异步(ajax)post数据非常大的情况下(比如做权限管理的时候给某个角色分配权限那么就可能会出现,我所遇到的就是该角色大概200个模块每个模块平均2个功能-...
  • zy0421911
  • zy0421911
  • 2017年02月03日 15:33
  • 1733

用httpPost对JSON发送和接收的例子

HTTPPost发送JSON: private static final String APPLICATION_JSON = "application/json";          pri...
  • z69183787
  • z69183787
  • 2016年04月06日 11:00
  • 5240

.net 提取 json 数据

.net 提取 json 数据. HttpHelper.cs using System; using System.Collections.Generic; using System.Linq; u...
  • yan309271291
  • yan309271291
  • 2015年04月13日 16:38
  • 670

ASP.NET MVC 4 中的JSON数据交互

前台Ajax请求很多时候需要从后台获取JSON格式数据,一般有以下方式:   拼接字符串 return Content("{\"id\":\"1\",\"name\":\"A\"}"...
  • jiangfei009003
  • jiangfei009003
  • 2014年08月06日 10:21
  • 903

Asp.net MVC中传递ViewData数据不能正确传递的问题

再次经历MVC中两个DropDownList中一个通过ViewData或ViewBag传递数据自动选择出现问题的情况,也就是数据没有被正确传递,debug 了4 hours,妈的,怎么调试怎么没有错误...
  • hack8
  • hack8
  • 2015年11月12日 00:14
  • 1314
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET MVC3 技术(五) JSON 数据的传递
举报原因:
原因补充:

(最多只允许输入30个字)