一步步学习ASP.NET MVC3 (9)——JsonReslt,JavaScript,@Ajax
请注明转载地址:http://www.cnblogs.com/arhat
在上一章中,我们讲述了ActionResult的三个子类,非别是EmptyResult,RediretResult和ContentResult。那么本章我们在讲几个ActionResult的子类。
JsonResult | 表示可以运用到AJAX程序中JSON结果 |
JavaScriptResult | 表示一个JavaScript对象 |
FileContentResult | 表示一个可以下载的、二进制内容的文件 |
FilePathResult | 表示一个可以下载的、指定路径的文件 |
首先就是JsonResult,从名字看,我们可以猜出,这个结果和Json是相关的,返回的类型是以Json格式的,所以一般这个用于Ajax请求,当然在Ajax请求的时候要设置服务器端返回的类型是json。下面我们通过一个案例来研究这个JsonResult。在这个案例中,我们使用了Jquery。首先我们新建一个项目“Com.ArHat.Web”。并添加一个HomeController控制器,同时在Models文件夹中添加一个类M_User.cs。代码如下:
M_User:
public class M_User
{ public string Name { get; set; } public int Age { get; set; } }
HomeController:
public ActionResult Index() { return View(); } public ActionResult AjaxUserInfo() { Models.M_User user = new Models.M_User() { Name="济公活佛",Age=}; return Json(user,JsonRequestBehavior.AllowGet); }
同时我们添加Index的视图文件Index.cshtml,内容如下:
@{ ViewBag.Title = "JsonResult"; } <script type="text/javascript"> function AjaxSearch() { $.get("/Home/AjaxUserInfo", null, function (data) { var html = "姓名:" + data.Name + ",年龄:" + data.Age; $("#result").html(html); }, "json"); } </script> <h2>这是JsonResult实例</h2> 请输入用户的名字:<input type="button" value="查询" onclick="AjaxSearch()" /> <div id="result" style="margin:10px"> </div>
我们在浏览器中预览一下,当点击查询按钮的时候,发现数据已经显示到div中了。我们来分一下上面的代码。
首先我们再视图文件中使用了$.get来发送一个异步的get请求,请求的Action是HomeController下的AjaxUserInfo。这一点没什么难度。主要在AjaxUserInfo这函数中,我们创建了一个对象M_User,最关键的一点事Controller提供的Json函数。这个函数返回的类型就是JsonResult。下面我们来看一下Json函数的定义:
protected internal JsonResult Json(object data); protected internal JsonResult Json(object data, JsonRequestBehavior behavior); protected internal JsonResult Json(object data, string contentType);
这个函数中,都必须提供参数”object data”。这个就是要把对象转换为json数据。比如M_User对象,有属性Name,Age.那么JsonResult就会把这个对象转为Json对象{Name:”xxx”,Age:YY}。
其中的第二个重载函数,提供了另外一个参数JsonRequestBehavior这个参数是说明请求Json的方式,默认情况下,如果是get请求,则是不允许的,如果要使异步的get请求起作用,则必须设置JsonRequestBehavior.AllowGet。可以猜测出,JsonRequestBehavior是个枚举类型了,还有一个枚举值是DenyGet(阻止Get,这个是默认值)。
所以我们在AjaxUserInfo中,使用了的第二个重载。那么我们来分析一下最后的结果。我们使用firefox浏览器,通过firebug来看看结果。
从上面的结果,我们可以看出和我们猜测的是一样的,JsonResult把对象自动转换为了json数据了。
下面我们来看看JavaScriptResult。现在我挺佩服微软的命名规则的,特别见名之意啊。从名字上看,返回的就是一个JavaScript对象。别看返回的事JavaScript对象,但是这个对象确是“纯文本”的哦!
现在我们改写一下Index函数,内容如下:
public ActionResult Index() { string js = "alert('sss')"; return JavaScript(js); }
我们打开预览一下结果:
发了什么问题呢?原来alert函数并没有执行,而是当做纯文本来输出了,这是怎么回事呢?原因是JavascriptResult要和Ajax一起使用,而这个Ajax和我们传统的Ajax有些不同,需要使用在Razor页面中使用@Ajax生成的链接或者是表单来调用,从一定程度上可以看成是“回发”,但这种回发是纯粹的Ajax。而且页面中调用的Ajax函数必须在本Controller中定义才可以。下面我们改写一下HomeController:
public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult AjaxUserInfo() { Models.M_User user = new Models.M_User() { Name="济公活佛",Age=}; return Json(user,JsonRequestBehavior.AllowGet); } public ActionResult JSResult() { string js = "alert('sss')"; return JavaScript(js); } }
同时我们需要改写_Layout.cshtml,在_Layout.cshtml中加上
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
只有加上了这个js,@Ajax才会起作用。下面我们改写一下Index.cshtml
@{ ViewBag.Title = "JsonResult"; } <script type="text/javascript"> function AjaxSearch() { $.get("/Home/AjaxUserInfo", null, function (data) { var html = "姓名:" + data.Name + ",年龄:" + data.Age; $("#result").html(html+","); }, "json"); } </script> <h2>这是JsonResult实例</h2> 请输入用户的名字:<input type="button" value="查询" onclick="AjaxSearch()" /> <div id="result" style="margin:10px"> </div> <br /> <a href="/Home/JSResult">这是JavaScriptResult——普通调用</a> <br /> <br /> @Ajax.ActionLink("这是JavaScriptResult——Ajax调用", "JSResult", new AjaxOptions())
在Index.cshtml中,我们加入了两个超链接,一个是普通的,一个是@Ajax生成的超链接。我们在浏览器中预览一下,分别点击这两个超链会发现,第一个是以另外一个页面显示内容,第二个是在本页面直接执行了javascript代码。同时我们查看一下源代码:
发现通过@Ajax生成的标签中多了几个data-*的属性,而且功能正常执行,我们会感觉比较奇怪,因为这是一种JavaScript的编写风格(和html5相关),这种风格称之为”Unobtrusive Javascript”。其实这种应用在Jquery EasyUI中经常用的到。需要注意的是,如果要使用@Ajax,那么在页面中必须导入
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
而且在页面中所调用的方法必须是在页面所对应的Controller中。
@Ajax.ActionLink("这是JavaScriptResult——Ajax调用", "JSResult", new AjaxOptions())。
大家会发现,上面的代码是在HomeController的Index方法所对应的视图中,那么“JSResult”这个方法必须在HomeController中。如果,我们现在再创建一个Controller为TestController,内容如下:
public ActionResult Index() { return JavaScript("alert('22222')"); }
同时我们改一下Home/Index方法对应的视图文件Index.cshtml
@Ajax.ActionLink("这是JavaScriptResult——Ajax调用", "/Test/Index", new AjaxOptions())
我们预览一下,发现请求失败哦。为什么呢?我们观察一下生成的源代码:
发现地址这么会是/Home/Test/Index呢?这一点就说明了这种Ajax方法必须是在视图对应的Controller中声明。所以这也就是我为什么称它为另一种的“回发”。只不过这种“回发”是Ajax形式的。比如,我们post提交一个记录后,需要返回一个说明,但是这个说明是cs生成的,那么就可以利用这种方法。
下面,我们来分析一下@Ajax辅助方法ActionLink(text,action, AjaxOptions)。
如果说,我们必须要调用TestController中的Index方法,怎么办呢?我们可以使用@Ajax.ActionLink的第二个重载函数:ActionLink(text,action, new object,AjaxOptions)。
就按上面的说法,我们要调用TestController中的Index方法,则我们可以这样写:
@Ajax.ActionLink("这是JavaScriptResult——Ajax调用", "Index",new {controller="Test"}, new AjaxOptions())
这个方法提提供了几个参数,第一个参数text:是要显示的文本,action是要调用的Ajax方法,第三个参数是action执行后把执行后的内容填入到AjaxOptions中。至于AjaxOptions的作用,我们会在后面讲解Ajax的时候专门进行讲解。
那么本章就到这里吧,下一章我们打算写其他的ActionResult的,但是由于这一章中出现了@Ajax的用法,那么我在下一章中老魏讲解一下@Ajax辅助方法吧!
一步步学习ASP.NET MVC3 (9)——JsonReslt,JavaScript,@Ajax的更多相关文章
- 一步步学习ASP.NET MVC3 章节总结
请注明转载地址:http://www.cnblogs.com/arhat 对于<一步步学习ASP.NET MVC3>系列工15章,那么为了方便大家能够快速的预览,老魏在这里为这个系列提供一 ...
- 一步步学习ASP.NET MVC3 (1)——基础知识
请注明转载地址:http://www.cnblogs.com/arhat 首先在这里我想声明一下,这个ASP.NET MVC3系列是我在授课过程中的一些经验,有什么不对的地方,请大家指出,我们共同的学 ...
- 一步步学习ASP.NET MVC3 (3)——Razor(1)
请注明转载地址:http://www.cnblogs.com/arhat 首先这个<一步步学习ASP.NET MVC3>前段时间有些忙,没有顾得上写文章,昨天呢写了3个和ASP.NET的相 ...
- 一步步学习ASP.NET MVC3 (12)——FileResult
请注明转载地址:http://www.cnblogs.com/arhat 忙了两天,本来老魏昨天就应该写出新的文章,但是由于昨天雨夹雪而且加上昨天晚上加了班,到家都没饭吃了,一看时间都9点了,什么饭店 ...
- 一步步学习ASP.NET MVC3 (2)——入门程序
请注明转载地址:http://www.cnblogs.com/arhat 在上一节中,我们只是简单的介绍了什么是MVC及MVC的运行原理.而本节呢,主要来实现下一ASP.NET MVC3的开发流程,并 ...
- 一步步学习ASP.NET MVC3 (14)——Route路由
请注明转载地址:http://www.cnblogs.com/arhat 由于今天是星期六,所以多写几篇,感觉前几天的忙碌没有及时发布文章,趁着周末老魏尽力的多写几篇文章.因为本系列基本上快结束了,所 ...
- 一步步学习ASP.NET MVC3 (5)——View从Action中获得数据
请注明转载地址:http://www.cnblogs.com/arhat 在上一章中,我们把Razor的模板技术给大家介绍了一下,当然模板中还有其他的知识点,这个以后我们还会继续讲解.本章我们主要讨论 ...
- 一步步学习ASP.NET MVC3 (6)——@helper,@functions
请注明转载地址:http://www.cnblogs.com/arhat 在前一章中,我们讲述了View如何从Action中获得数据,并显示出来,但随着需求的变化,我们可能要对View中显示的数据作出 ...
- 一步步学习ASP.NET MVC3 (7)——Controller,Action,ActionResult
请注明转载地址:http://www.cnblogs.com/arhat 前面几章我们讲解的都是关于View方面的知识,虽然还有很多关于View的知识没有讲,但是没关系,我们在后面使用到的时候在讲解, ...
随机推荐
- windows 7 共享,未授予用户在此计算机上的请求登录类型
刚刚重装了windows7,新下载的一个ghost版本,结果却不能共享,每次访问这台机器的共享都提示, 未授予用户在此计算机上的请求登录类型 这个情况好像是存在于win7访问win7,我用一台XP系统 ...
- 在android的spinner中,实现取VALUE值和TEXT值
为了实现在android的spinner实现取VALUE值和TEXT值,我尝试过好些办法,在网上查的资料,都是说修改适配器,刚开始我也是通过修改适配器的方法来做的,但是如果一个activity有多个s ...
- 【转】使用BBB的device tree和cape(重新整理版)
只要你想用BBB做哪怕一丁点涉及到硬件的东西,你就不可避免地要用到cape和device tree的知识.所以尽管它们看起来很陌生而且有点复杂,但还是得学.其实用起来不难的.下面我只讲使用时必须会的内 ...
- Apache配置虚拟主机后,不能访问localhost的问题
今天想试用一下php7,但是发现php7只支持Apache2.4版本,而我电脑上的Apache是2.2版本,为了想尝鲜,就必须去下载新的Apache2.4 php7和apache2.4安装整合以后,l ...
- Linux下Openssl的安装全过程
第一章 1.下载地址:http://www.openssl.org/source/ 下一个新版本的OpenSSL,我下的版本是:openssl-1.0.0e.tar.gz 可以通过#wget http ...
- docker 错误
docker search ubuntuGet http:///var/run/docker.sock/v1.20/images/search?term=ubuntu: dial unix /var/ ...
- mongodb用mongoose取到的对象不能增加属性
先定义了一个article的schema var mongoose = require('mongoose'); var Schema = mongoose.Schema; exports.schem ...
- 实现百度地图导航Demo的语音播报功能
上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...
- Spark技术内幕:Stage划分及提交源码分析
http://blog.csdn.net/anzhsoft/article/details/39859463 当触发一个RDD的action后,以count为例,调用关系如下: org.apache. ...
- date 命令
在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的工作带来诸多方便.1.命令格式: date [参数] ...