.NET MVC一起使用jQuery

作者:网络 来源:佚名 更新时间:2008-11-02 22:11:29 点击:

jquery是一款容易上手的javascript库,任何平台都可以使用,它跟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版本。