一步步学习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=90};

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=90};

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辅助方法吧!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。