跟 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 有一篇很精彩的指南，包括了如何上手。

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

简单示例

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

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

<pre id="b6kk29"><span id="b6kk30">This is red text,</span><p><span id="b6kk32">this is blue</span><span id="b6kk34">and this is green</span> </p>

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

接下来，我们需要创建一个 Controller Action，它可以从 Model 中返回色素值。而且我们不希望重载页面，我们希望使用 Ajax。很幸运，在 MVC 框架中我们可以使用 JsonResult 类型来完成这一点。

<pre id="b6kk38">public JsonResult RGBColors()<br id="b6kk39"></br>{<br id="b6kk40"></br> Colors.RGB color = new Colors.RGB();<br id="b6kk41"></br> return Json(color);<br id="b6kk42"></br>}

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

<pre id="b6kk45">namespace Colors{<br id="b6kk46"></br> public class RGB<br id="b6kk47"></br> {<br id="b6kk48"></br> public string Red = “#FF0000″;<br id="b6kk49"></br> public string Green = “#00FF00″;<br id="b6kk50"></br> public string Blue = “#0000FF”;<br id="b6kk51"></br> }<br id="b6kk52"></br>}

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

<pre id="b6kk55">$(document).ready(function() {<br id="b6kk56"></br> $.getJSON(“/Home/RGBColors”,<br id="b6kk57"></br> {},<br id="b6kk58"></br> function(data){<br id="b6kk59"></br> $(“.red”).css(“color”, data.Red);<br id="b6kk60"></br> $(“.blue”).css(“color”, data.Blue);<br id="b6kk61"></br> $(“.green”).css(“color”, data.Green);<br id="b6kk62"></br> });<br id="b6kk63"></br>});

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

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

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

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