跟ASP.NET MVC一起使用jQuery

作者 Robert Bazinet译者李剑发布于 2008年9月2日下午8时1分

社区: .NET
主题: .NET框架,; JavaScript
标签: ASP.NET MVC,; jQuery

最近人们对微软的ASP.NET MVC框架投入了越来越多的关注。ASP.NET MVC功能强大、灵活，除了框架内包含的库之外，开发人员还可以使用其他库，jQuery这款流行的JavaScript框架自然也不例外。

jQuery是一款容易上手的JavaScript库，任何Web开发平台都可以使用，它跟ASP.NET MVC框架的结合尤为引人瞩目。James Estes曾在InfoQ上发表过一篇文章，名为jQuery正在靠1.2版及jQuery UI赢得人心，谈到了jQuery最近的一次发布，并介绍了很多杰出的特性。

藉由ASP.NET MVC内置的扩展性，开发人员便可以使用第三方库，例如jQuery。在使用ASP.NET Webforms的时候，如果使用jQuery而不是ASP.NET AJAX，难度会比较大。

刚开始撰写本文的时候，ASP.NET MVC的版本是Preview 4，有些在Preview 4中使用的技术可能无法在早期版本中正常工作。Preview 4可以在CodePlex上下载。

初步配置

我不打算把它写成一篇完整的jQuery指南，只是简单给出几个跟ASP.NET MVC一起使用这款JavaScript库的示例。Chad Myers有一篇很精彩的指南，包括了如何上手。

首先要保证你有ASP.NET MVC，所以请先从CodePlex上下载安装（注意：你需要运行Visual Studio 2008才能使用ASP.NET MVC框架）。
ASP.NET MVC框架装好以后，就应该已经创建好了一个新的ASP.NET MVC Web Application工程。
下一步，下载jQuery，下载Packed或者是Minified版本，然后放到上面那个工程的Content目录下。
添加一个对Content目录下jQuery文件的引用。

简单示例

Ryan Lanciaux写过一篇很优秀的文章，名为jQuery和ASP.NET MVC框架，其中列出了很多在ASP.NET MVC框架中使用jQuery的关键因素。Ryan在文章中进行了详细阐述：

首先要做的就是创建一个ASP.NET MVC（Preview 4）工程，在Home controller下面创建一个新的view和一个controller action，然后把下面几行字加到view中。
This is red text,this is blueand this is green 

右键点击Controllers文件夹，选择“Add New Item”，然后选择MVC Controller类，任务完成。下一步是创建一个Controller Action：

接下来，我们需要创建一个Controller Action，它可以从Model中返回色素值。而且我们不希望重载页面，我们希望使用Ajax。很幸运，在MVC框架中我们可以使用JsonResult类型来完成这一点。
public JsonResult RGBColors()
{
Colors.RGB color = new Colors.RGB();
return Json(color);
} 

下一步，创建一个类，用来表示model中的颜色：

namespace Colors{
public class RGB
{
public string Red = “#FF0000″;
public string Green = “#00FF00″;
public string Blue = “#0000FF”;
}
}

最后一步，用一些jQuery代码把一切组装在一起：

$(document).ready(function() {
$.getJSON(“/Home/RGBColors”,
{},
function(data){
$(“.red”).css(“color”, data.Red);
$(“.blue”).css(“color”, data.Blue);
$(“.green”).css(“color”, data.Green);
});
});

Ryan指出了一处重要的地方：

注意，jQuery代码是在我们的controller上调用JSON方法。如果我们重载页面，它就会得到model中定义的色素值。完全无痛。它很简单，但在Web上使用的时候却可以千变万化。

上面这个例子简单演示了如何使用JSON，Ryan和他的兄弟Joel写了一个Theme Generator Tool，里面有完整的应用。另外敬请留意，在撰写本文的过程中，微软已经发布了ASP.NET MVC框架的Preview 5版本。

原文地址：http://www.infoq.com/cn/news/2008/08/jquery-aspnetmvc

查看英文原文：Using jQuery with ASP.NET MVC

转载于:https://www.cnblogs.com/lxinxuan/archive/2008/09/05/1284894.html