数字化转型浪潮中,金融行业如何破局?获取学习视频 了解详情
写点什么

跟 ASP.NET MVC 一起使用 jQuery

  • 2008 年 9 月 02 日
  • 本文字数:1703 字

    阅读完需:约 6 分钟

最近人们对微软的 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 中。

<pre id="b6kk29"><span id="b6kk30">This is red text,</span><p><span id="b6kk32">this is blue</span><span id="b6kk34">and this is green</span> </p>

右键点击 Controllers 文件夹,选择“Add New Item”,然后选择 MVC Controller 类,任务完成。下一步是创建一个 Controller Action:

接下来,我们需要创建一个 Controller Action,它可以从 Model 中返回色素值。而且我们不希望重载页面,我们希望使用 Ajax。很幸运,在 MVC 框架中我们可以使用 JsonResult 类型来完成这一点。

<pre id="b6kk38">public JsonResult RGBColors()<br id="b6kk39"></br>{<br id="b6kk40"></br> Colors.RGB color = new Colors.RGB();<br id="b6kk41"></br> return Json(color);<br id="b6kk42"></br>}

下一步,创建一个类,用来表示 model 中的颜色:

<pre id="b6kk45">namespace Colors{<br id="b6kk46"></br> public class RGB<br id="b6kk47"></br> {<br id="b6kk48"></br> public string Red = “#FF0000″;<br id="b6kk49"></br> public string Green = “#00FF00″;<br id="b6kk50"></br> public string Blue = “#0000FF”;<br id="b6kk51"></br> }<br id="b6kk52"></br>}

最后一步,用一些 jQuery 代码把一切组装在一起:

<pre id="b6kk55">$(document).ready(function() {<br id="b6kk56"></br> $.getJSON(“/Home/RGBColors”,<br id="b6kk57"></br> {},<br id="b6kk58"></br> function(data){<br id="b6kk59"></br> $(“.red”).css(“color”, data.Red);<br id="b6kk60"></br> $(“.blue”).css(“color”, data.Blue);<br id="b6kk61"></br> $(“.green”).css(“color”, data.Green);<br id="b6kk62"></br> });<br id="b6kk63"></br>});

Ryan 指出了一处重要的地方:

注意,jQuery 代码是在我们的 controller 上调用 JSON 方法。如果我们重载页面,它就会得到 model 中定义的色素值。完全无痛。它很简单,但在 Web 上使用的时候却可以千变万化。

上面这个例子简单演示了如何使用 JSON,Ryan 和他的兄弟 Joel 写了一个 Theme Generator Tool ,里面有完整的应用。另外敬请留意,在撰写本文的过程中,微软已经发布了 ASP.NET MVC 框架的 Preview 5 版本。

查看英文原文 Using jQuery with ASP.NET MVC

2008 年 9 月 02 日 20:015272
用户头像

发布了 197 篇内容, 共 48.0 次阅读, 收获喜欢 17 次。

关注

评论

发布
暂无评论
发现更多内容

像用户一样测试:打破知识的诅咒

QualityFocus

测试 软件质量 可用性 用户体验

为什么要TDD(测试驱动开发)

sherlockq

敏捷开发 TDD 极限编程

高空立体云防控系统搭建,智能化平安小区建设方案

t13823115967

平安小区 智慧平安社区建设

计算机网络简述

lee

计算机网络 网络协议 网络

从MongoID的生成讨论分布式唯一ID生成方案

行如风

雪花算法 分布式ID 全局唯一ID 流星算法

英特尔力邀150家产业大咖推动Evo严苛认证,打造PC界的奥斯卡

新闻科技资讯

anonymous匿名者场外交易系统APP软件开发

系统开发

九环智能合约开发

V19927655815

APP开发

如何基于 SDK 快速开发一款IoT App 控制智能灯(iOS 版)

IoT云工坊

ios App 物联网 IoT sdk

重学JS | 数组遍历的7种方法及兼容性处理(polyfill)

梁龙先森

大前端 编程语言

什么是浮点数?

Kaito

计算机基础 浮点数

智慧仓储管理系统,是否能解决购物狂欢节后新一轮爆仓危机?

一只数据鲸鱼

物联网 数据可视化 智慧物流 智慧仓储

抢先体验全新升级版Eternal Wallet!

Geek_c610c0

数字货币 数字货币钱包开发

为什么说rollup比webpack更适合打包库

fengxianqi

大前端 Rollup webpack

直播中不可缺少的一环-rtmp直播推流

anyRTC开发者

音视频 WebRTC CDN RTC RTMP

云视频技术领军人赵加雨:如何提升在线教育课堂互动体验

拍乐云Pano

音视频 在线教育 RTC 互动课堂 白板

星域母子币系统软件开发|星域母子币APP开发

系统开发

没能进入大数据领域

escray

面试 面经

扒开 SqlSession 的外衣

田维常

mybatis

生产环境全链路压测建设历程 21:某快递 A 股上市公司的生产压测案例之基于测试流量的混沌工程(故障演练)

数列科技杨德华

全链路压测 七日更

深入浅出 ZooKeeper

vivo互联网技术

zookeeper 分布式 ZAB

人工智能不过尔尔,基于Python3深度学习库Keras/TensorFlow打造属于自己的聊天机器人(ChatRobot)

刘悦的技术博客

人工智能 tensorflow chatbot 聊天机器人 keras

快速接入 | 从 0 到 1 构建语音聊天室

拍乐云Pano

音视频 RTC 实时语音 语音聊天室 语聊房

移动生态盘点与HMS生态解析

华章IT

华为 Android Studio 移动开发 HMS

英特尔赵宏:从硬件创新到平台突破,PC的未来非常值得期待

新闻科技资讯

从一个模糊词查询需求的处理方案讨论到一种极速匹配方案的实现

行如风

模糊匹配 双数组trie树 ahocorasick ac自动机 黑名单过滤

重磅|中国PostgreSQL分会与腾讯云战略合作协议签订

PostgreSQLChina

数据库 postgresql 软件 开源社区

盘点 2020 | 10 天开发前台系统技术系列

老魚

CSS 大前端 全栈 js 盘点2020

应急指挥中心平台搭建,移动可视化指挥解决方案

t13823115967

可视化数据分析搭建 应急指挥

“一键上链”技术大牛教你快速构建链上应用

“一键上链”技术大牛教你快速构建链上应用

跟ASP.NET MVC一起使用jQuery_.NET_Robert Bazinet_InfoQ精选文章