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

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中。

This is red text,
this is blue
and 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版本。

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

• 更早的 >