jQuery是一款容易上手的JavaScript库任何Web开发平台都可以使用它跟ASPNET MVC框架的结合尤为引人瞩目James Estes曾在InfoQ上发表过一篇文章名为jQuery正在靠版及jQuery UI赢得人心谈到了jQuery最近的一次发布并介绍了很多杰出的特性
藉由ASPNET MVC内置的扩展性开发人员便可以使用第三方库例如jQuery在使用ASPNET Webforms的时候如果使用jQuery而不是ASPNET AJAX难度会比较大
刚开始撰写本文的时候ASPNET MVC的版本是Preview 有些在Preview 中使用的技术可能无法在早期版本中正常工作Preview 可以在CodePlex上下载
初步配置
我不打算把它写成一篇完整的jQuery指南只是简单给出几个跟ASPNET MVC一起使用这款JavaScript库的示例Chad Myers有一篇很精彩的指南包括了如何上手
首先要保证你有ASPNET MVC所以请先从CodePlex上下载安装(注意你需要运行Visual Studio 才能使用ASPNET MVC框架)
ASPNET MVC框架装好以后就应该已经创建好了一个新的ASPNET MVC Web Application工程
下一步下载jQuery下载Packed或者是Minified版本然后放到上面那个工程的Content目录下
添加一个对Content目录下jQuery文件的引用
简单示例
Ryan Lanciaux写过一篇很优秀的文章名为jQuery和ASPNET MVC框架其中列出了很多在ASPNET MVC框架中使用jQuery的关键因素Ryan在文章中进行了详细阐述
首先要做的就是创建一个ASPNET MVC(Preview )工程在Home controller下面创建一个新的view和一个controller action然后把下面几行字加到view中
This is red textthis is blueand this is green
右键点击Controllers文件夹选择Add New Item然后选择MVC Controller类任务完成下一步是创建一个Controller Action
接下来我们需要创建一个Controller Action它可以从Model中返回色素值而且我们不希望重载页面我们希望使用Ajax很幸运在MVC框架中我们可以使用JsonResult类型来完成这一点
public JsonResult RGBColors(){ ColorsRGB color = new ColorsRGB(); return Json(color);}
下一步创建一个类用来表示model中的颜色
namespace Colors{ public class RGB { public string Red = #FF″; public string Green = #FF″; public string Blue = #FF; }}
最后一步用一些jQuery代码把一切组装在一起
$(document)ready(function()
{ $getJSON(/Home/RGBColors
{}
function(data)
{ $(red)css(color dataRed); $(blue)css(color dataBlue);
$(green)css(color dataGreen); });});
Ryan指出了一处重要的地方注意jQuery代码是在我们的controller上调用JSON方法如果我们重载页面它就会得到model中定义的色素值完全无痛它很简单但在Web上使用的时候却可以千变万化
上面这个例子简单演示了如何使用JSONRyan和他的兄弟Joel写了一个Theme Generator Tool里面有完整的应用另外敬请留意在撰写本文的过程中微软已经发布了ASPNET MVC框架的Preview 版本
