InfoQ

新闻

跟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

没有回复

回复

独家内容

剖析短迭代

敏捷教练Dave Nicolette提出:我们应该如何设定迭代长度?是要根据发布周期的时间么?使用短迭代又有哪些好处?

应用JSF、Ajax和Seam开发Portlets(1/3)

本文主要讲述了如何用JBoss Portlet Container 和JBoss Portlet Bridge创建新项目,怎样配置一个JSF应用去使用JBoss Portlet Bridge,以及JBoss Portlet Bridge所具备的功能。

AtomServer:数据分发的发布动力(第二部分)

在这篇文章里,Bryon Jacob和Chris Berry将和我们继续探讨AtomServer,它是基于Apache Abdera的完整Atom存储实现。作者还创建了几个Atompub规范扩展,其中包括自动标记、批处理和Feeds聚合。

架构师(试刊第二期)

InfoQ中文站的电子杂志《架构师》试刊第二期出版了!相比于上期,我们在内容的选择安排和版式上都根据读者的意见重新做了修正。“细节决定成败”,我们希望基于InfoQ中文站的专业内容,《架构师》能逐渐成为大家喜欢的电子刊物!

一种正规的性能调优方法:基于等待的调优

在本文中,Steven Haines探讨了Web应用性能调优问题。该领域过去更像是一门艺术而不是一门科学。他提出了一种称为基于等待调优的方法,使整个调优过程更加可度量,也因此更具科学性。

Java程序员ActionScript 3入门

通常来说,改变技术路线时最艰难的部分是辨别语言语法之间的不同。这篇文章就为Java开发者提供了一份如何转向Flex基础语言ActionScript的指南。

浅谈如何创建Rails应用

本视频主要以财帮子为例,介绍了如何创建一个PV为百万级的Rails应用。其中包括:Rails应用的服务器架构、Rails Cache的优化、负载均衡的处理、Web服务器的调试、分布式解决方案、Open API的设计等等。

Alexandru Popescu谈InfoQ.com网站架构

InfoQ首席架构师Alexandru Popescu在采访中谈论了InfoQ架构、Webwork与DWR、Hibernate与JCR、Hibernate可扩展性、最新的InfoQ视频流系统和InfoQ的未来规划。