当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 跟ASP.NET MVC一起使用jQuery

ASP.NET
Asp.net 时间操作基类(支持短日期,长日期,时间差)
asp.net 获取机器硬件信息(cpu频率、磁盘可用空间、内存容量等)
asp.net 数据库备份还原(sqlserver+access)
Asp.Net 数据操作类(附通用数据基类)
Asp.net 弹出对话框基类(输出alet警告框)
Asp.net 文件上传类(取得文件后缀名,保存文件,加入文字水印)
Asp.net Socket客户端(远程发送和接收数据)
Asp.net 字符串操作基类(安全,替换,分解等)
Asp.Net数据输出到EXCEL表格中
asp.net Gridview里添加汇总行
asp.net UpdatePanel的简单用法
asp.net ajaxControlToolkit FilteredTextBoxExtender的简单用法
this connector is disabled错误的解决方法
sql事务应用积累
asp.net Page.Controls对象(找到所有服务器控件)
在asp.NET中字符串替换的五种方法
ASP.NET缓存方法分析和实践示例代码
asp.net 在DNN模块开发中遇到的resx怪问题
ASP.NET State service状态服务的问题解决方法
asp.net 结合mysql存储过程进行分页代码

跟ASP.NET MVC一起使用jQuery


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-14   浏览: 282 ::
收藏到网摘: n/a

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

首先要保证你有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版本。