.NET MVC一起使用jQuery

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版本。

时间: 2025-01-23 23:08:35

.NET MVC一起使用jQuery的相关文章

ASP.NET MVC中使用jQuery时的浏览器缓存问题详解_实用技巧

介绍 尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持,还是有必要了解一下如何高效地使用http协议. 首先要做的事情是在服务器端支持HTTP GET,定义不同的URL输出不同的数据(MVC里对应的就是action).如果要使用同一个地址获取不同的数据,那就不对了,一个HTTP POST也不行因为POST不能被缓存.许多开发人员使用POST主要有2个原因:明确了数据不能被缓存,或者是避免JSON攻击(JSON返回数组的时候可以被入侵). 缓存解释 jQuery全局对象里的ajax

跟ASP.NET MVC一起使用jQuery

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,难

在MVC下利用JQUERY实现AJAX提交并实现AJAX.NET的UpdateProgress功能

在MVC下我们不能利用AJAX.NET控件,那么要实现UpdateProgress来显示进度怎么办,我们可以利用JQUERY来实现这个功能.顺便说一句JQuery将集成在下一版本的Visual Studio中,是MS AJAX FrameWork的一部分. 1.接着上一篇的XML Menu,我们先编辑Menu.XML,添加如下代码: <MenuItem Order="4" Action="Test" Controller="AJAXFORM"

Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件_实用技巧

0 ajaxFileUpload简介  ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:http://xiazai.jb51.net/201611/yuanma/ajaxfileupload(jb51.net).rar.  整个插件源码不到200行,实现非常简单,大致原理就是通过js动态创

一起谈.NET技术,跟ASP.NET MVC一起使用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一起使用这款Jav

分享16个javascript&amp;jQuery的MVC教程

日期:2011/12/19  来源:GBin1.com 2011即将过去我们将在几周后迎来新的一年. 这里我们将介绍10多个js和jQuery的MVC教程希望大家喜欢! jQuery MVC 1. AJAX - Spring MVC 3和jQuery的整合 这个教程中我们将使用jQuery的AJAX机制开发一个简单的Spring MVC3应用.我们将介绍如何使用jQuery.post()方法来处理post数据 2. Progressive Enhancement Techniques 如果你开发

jquery实现的tab切换效果

  以下是源代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>div

从零开始学习jQuery(一) 开天辟地入门篇

一.摘要 本系列文章将带您进入jQuery的精彩世界,其中有很多作者具体的使用经验和解决方案,即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇,主要是简单介绍jQuery,通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery. 二.前言 首先道个歉! "从零开始学习ASP.NET MVC"系列文章在即将介绍Filter时就没有更新了,原因就是最近我一直在研究和学习jQuery.看到本系列

从零开始学习jQuery (一)

一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery. 转载请注明子秋出品!博客园首发! 二.前言 首先道个歉! "从零开始学习ASP.NET MVC"系列文章在即将介绍Filter时就没有更新了, 原因就是