首页 > 代码库 > 【Asp.net入门3-01】使用jQuery-创建示例项目
【Asp.net入门3-01】使用jQuery-创建示例项目
过去，浏览器除了显示HTML外，很少具有其他功能。因此，早期的Web应用程序需要依赖服务 器端代码来响应用户交互并执行数据操作。Web应用程序的交互依赖HTML表单元素和浏览器向服务 器发送数据的功能实现。 随着Web浏览器技术的不断发展，Web应用程序领域也发生了巨变。现代浏览器复杂而且功能强 大，提供了各种用于客户端JavaScript编程的API。如今，纯粹由服务器端代码构成的Web应用程序已 经很少见了，因此，客户端技术对于创建优秀的Web应用程序至关重要。 最常用的浏览器API为DOM API，使用该API可对文档对象模型（DOM）执行操作。对DOM所做 的更改将在向用户显示的HTML中反映出来。因此，任何希望提供客户端功能的Web应用程序都会在 一定程度上使用DOM API。遗憾的是，DOM API不太好用——它极其繁琐而且结构不合理；此外，不 同浏览器之间在应用DOM API方面也存在一些奇怪的问题及实现差异。 使用JavaScript DOM操作库对DOM API进行包装，可以使DOM API更易于使用。其中一个最常用 的库就是jQuery，Microsoft的ASP.NET Framework中已采用了该库。本章将简单介绍jQuery的基本功能。
注意 本章不会深入介绍jQuery，因为jQuery这个主题本身就可以写一本书了。如果你希望详细了解jQuery，可以参考"从零开始学习jQuery (一) 开天辟地入门篇"(地址：http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html），请参阅《精通jQuery》一书(下载地址：http://pan.baidu.com/s/1kVRR7qZ），或访问jquery.com网站。创建示例项目
为了演示jQuery的用法，使用ASP.NET Empty Web Application 模板新建一个Visual Studio项目 UsingjQuery。这里将使用Web窗体生成HTML，并使用jQuery对其执行操作。本章中的大多数示例都 将使用一个简单的静态HTML文件，我们希望强调的是，Web窗体与jQuery能够和谐共存。在项目中 添加一个新Web窗体Default.aspx，该文件的内容如代码清单4-1所示。
代码清单4-1 Default.aspx Web窗体的内容
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UsingjQuery.Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Summits</title> <link rel="stylesheet" href="Styles.css" /></head><body> <h2>Summits</h2> <table id="peaksTable"> <thead><tr><th class="name">Name</th><th>Height (m)</th></tr></thead> <tbody id="tableBody"> <tr><td class="name">Everest</td><td class="height">8848</td></tr> <tr><td class="name">Aconcagua</td><td class="height">6962</td></tr> <tr><td class="name">McKinley</td><td class="height">6194</td></tr> <tr><td class="name">Kilimanjaro</td><td class="height">5895</td></tr> <tr><td class="name">K2</td><td class="height">8611</td></tr> </tbody> </table> <input type="button" value="Delete" /></body></html>
这个Web窗体中并没有代码片段，这里希望使用静态HTML来演示基本的jQuery功能。没有更改 Visual Studio创建的Default.aspx.cs代码隐藏文件。
注意，Default.aspx文件中使用link元素导入了名为Styles.css的CSS样式表，该文件的内容如代码 清单4-2所示。
代码清单4-2 Styles.css文件的内容
button { margin-top: 5px;}table, td, th { border: thin solid black; border-collapse: collapse; padding: 5px; background-color: lemonchiffon; text-align: left; margin: 10px 0;}.highlight { border: thick solid red; padding: 2px; background-color: lightgray; font-size: larger;}
从Visual Studio的Debug菜单中选择Start Debugging，即可在浏览器中查看HTML和CSS，如图4-1所示
在示例项目中添加jQuery
Visual Studio集成了NuGet程序包管理器，该管理器可轻松下载并安装常用的程序包，包括jQuery等 JavaScript库。NuGet负责管理程序包之间的依赖关系，能够快速、高效地升级到所需的最新版本的程序包。 从Visual Studio的Project菜单中选择Manage NuGet Packages（管理NuGet程序包），此时将显示 NuGet窗口。在左侧窗格中选择Online（联机）类别，然后在窗口右上角的搜索框中键入jQuery。NuGet 将列出jQuery以及其他许多名称中包含jQuery的程序包。找到主要的jQuery库，然后单击Install（安装） 按钮，如图4-2所示。NuGet将下载并安装最新版本的jQuery库。
NuGet将在项目中创建一个Scripts文件夹（这是Web窗体存储JavaScript文件的惯常做法），并在该文件 夹中添加3个新文件，如图4-3所示。你看到的文件可能会有所不同，因为NuGet会安装最新版本的jQuery。
jquery-1.8.2.js文件是jQuery库的调试版本，它包含易读的函数和变量名，以及经过格式化以便破 译（调试客户端代码的一个重要方式）的代码。jquery-1.8.2.min.js文件是jQuery库的微缩版本，将在 最终的应用程序中部署。微缩文件更小，所有格式和有意义的名称都被删除，因此难以跟踪问题。 本章将使用该文件的调试版本，第8章将介绍如何使用“捆绑”功能来优化JavaScript文件的用法， 以及如何自动在调试和微缩版本之间切换。第三个文件jquery-1.8.2.intellisense.js提供了一些信息，便 于让Visual Studio自动执行在Web窗体文件中的jQuery函数。稍后将介绍这方面的内容。
在Web窗体中添加jQuery
我们需要在Default.aspx文件中添加两个script元素才能使用jQuery。一个script元素导入jQuery 库，另一个元素定义或导入利用jQuery的代码。本章将使用Scripts文件夹中的另一个Default.js脚本文 件来定义代码。上面提到的两个script元素如代码清单4-3所示。
代码清单4-3 在Default.aspx文件中添加script元素
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UsingjQuery.Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Summits</title> <link rel="stylesheet" href="Styles.css" /> <script src="/Scripts/jquery-1.8.2.js"></script> <script src="/Scripts/Default.js"></script></head><body> <h2>Summits</h2> <table id="peaksTable"> <thead><tr><th class="name">Name</th><th>Height (m)</th></tr></thead> <tbody id="tableBody"> <tr><td class="name">Everest</td><td class="height">8848</td></tr> <tr><td class="name">Aconcagua</td><td class="height">6962</td></tr> <tr><td class="name">McKinley</td><td class="height">6194</td></tr> <tr><td class="name">Kilimanjaro</td><td class="height">5895</td></tr> <tr><td class="name">K2</td><td class="height">8611</td></tr> </tbody> </table> <input type="button" value="Delete" /></body></html>
右键单击Scripts文件夹，然后从弹出式菜单中选择Add→JavaScript File（JavaScript文件），将 Default.js文件添加到项目中。将项名称设置为Default，然后单击OK按钮创建该文件。
提示：与编写静态HTML页面时一样，在Web窗体中添加JavaScript文件的顺序非常重要。Default.js文件将调用由jQuery定义的函数，因此，必须确保jquery-1.8.2.js的script元素出现在Default.js的script元素之前。Default.js文件一开始仅在JavaScript文件中添加一行代码，如代码清单4-4所示。
从Solution Explorer的Scripts文件夹拖动jquery-1.8.2.js项，然后将其放置到Default.js文件的代码编辑器上，从而创建了这一行代码。其中的reference元素允许Visual Studio为jQuery代码提供代码完成支持。这段代码将被自动注释，因为它不是有效的JavaScript代码（即便如此，Visual Studio仍会找到 并处理该代码）。
【Asp.net入门3-01】使用jQuery-创建示例项目