一步步学习ASP.NET MVC3 (9)——JsonReslt,JavaScript,@Ajax

请注明转载地址：http://www.cnblogs.com/arhat

在上一章中，我们讲述了ActionResult的三个子类，非别是EmptyResult,RediretResult和ContentResult。那么本章我们在讲几个ActionResult的子类。

首先就是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辅助方法吧！