【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仍会找到并处理该代码）。