ASPDotNet 一、开始学习 ASP.NET 和 jQuery

一、开始学习 ASP.NET 和 jQuery

在本章中，我们将介绍以下食谱:

jQuery 下载:jQuery.com
理解 jQuery 的 CDN
使用 NuGet 包管理器下载 jQuery
将 jQuery 添加到空 ASP 中.NET web 项目使用一个脚本块
将 jQuery 添加到空 ASP 中。 . NET web 项目使用 ScriptManager 控件
将 jQuery 添加到 ASP。网主页
将 jQuery 编程添加到 web 表单
理解默认 Web 应用模板中的 jQuery 引用
在一个 web 项目中使用 jQuery 的 Hello World
在 ASP 中绑定 jQuery.NET MVC
使用 CDN 在 MVC 中加载 jQuery
Hello World 用 ASP。使用 jQuery 实现 asp.net MVC
在 Visual Studio 中调试 jQuery 代码

简介

作为一个网页开发者，你经常需要在你的网站中包含一些功能，这使得用 JavaScript 编写客户端脚本是不可避免的。让客户端脚本为所有浏览器产生相同的响应一直是一个挑战。 jQuery 可以帮助您克服这个困难。从本质上讲，jQuery 是一个强大的 JavaScript 库，可以在所有浏览器上工作，比如 Internet Explorer (IE)、Firefox、Safari、Chrome、Opera、iOS 和 Android。它消除了开发人员为了在不同平台上维护他们的客户机脚本所面临的痛苦。

jQuery 之所以流行，不仅因为支持跨浏览器，还因为它包含了开发人员可以插入和播放的特性。它改变了开发人员编写客户机脚本的方式。除了减少需要编写的代码量之外，它还提供了遍历 DOM、事件处理、构建动画和 AJAX 等特性。

本章讨论如何获取库和其他支持文件。它的目标是涵盖在 ASP 中包含和使用 jQuery 的不同方面.NET 4.6 web 应用项目，如 web 表单和 mvc。

注意事项

本书基于 Visual Studio 2015 和 jQuery 2.1.4。这些脚本已经在 Internet Explorer 11.0.96、Mozilla Firefox 38.0.1 和谷歌 Chrome 47.0.2526 中进行了测试。

如果您熟悉下载 jQuery 并将其包含在您的 ASP。。NET 应用，你可以跳过这一章，继续学习第 2 章，中使用 jQuery 选择器和 ASP 操作控件的方法.NET 控件。

从 jQuery 下载

本食谱解释了如何在您的系统上下载 jQuery 以及，以及要使用的版本/版本和所需的支持文件。

准备

下载 jQuery 的步骤如下:

Launch any web browser and enter the URL http://www.jquery.com to access the jQuery home page:
Click on the Download jQuery button (highlighted in the preceding screenshot) on the right-hand side of the page. This opens up the download page with a list of available files, as shown in the following screenshot:

怎么做……

在撰写本文时，jQuery 有两个主要版本:

版本 1. x
版本 2. x

虽然两个主要版本的Application Programming Interface(API)是相同的，但区别在于对某些浏览器的支持。的 2。 x 行不支持旧的浏览器，如 IE 6、7 和 8，而 1。 X 行继续提供这种支持。因此，如果您应用的终端用户不使用旧浏览器，您可以下载 2。 x 版本。

jQuery 库由单个 JavaScript(.js)文件组成，可以以以下格式下载:

未压缩格式:在开发环境或调试代码时使用。
压缩格式:这是在生产(即发布)环境中使用。它是紧凑的和使用低带宽。它通常被称为缩小版。

要下载该文件，只需右键单击所需的版本 1。 x 或 2。 X，以及所需的格式:未压缩或压缩。将文件保存在您选择的位置，如下图所示:

How to do it…

注意以下 jQuery 库的命名约定:

| |

未压缩的

压缩

| | --- | --- | --- | | 版本 1。 x | jquery - 1. x.x.js | jquery - 1. x.x.min.js | | 版本 2 x | jquery - 2. x.x.js | jquery - 2. x.x.min.js |

压缩(缩小)版本与未压缩版本明显不同，因为有.min.js扩展名。缩小后的文件使用代码优化技术，例如删除空白和注释，以及将变量名减少到一个字符。这个版本很难阅读，所以在调试时首选未压缩版本。

在下载页面上，还有一个扩展名为.min.map的地图文件。有时，当生产环境中出现了需要进行故障排除的错误时，使用缩小的文件进行调试可能会很困难。映射文件简化了这个过程。它将压缩文件映射回其未构建状态，以便在调试期间，体验与使用未压缩版本类似。

参见 also…

了解 jQuery 的 CDN配方。

了解 jQuery 的 CDN

内容分发网络(CDN)通过大型分布式系统为用户提供内容。使用 CDN 的优点是提高了性能。当使用 CDN 检索 jQuery 库时，如果之前下载过文件，将不会重新下载。这可以帮助您提高响应时间。

怎么做……

以下 cdn 可用于 jQuery 文件:

jQuery 的 CDN 由 MaxCDN 提供
谷歌的 CDN
微软的 CDN
CDNJS CDN 的
jsDelivr CDN 的

为了将 jQuery 包含在一个网页上，可以使用相应 CDN 的 URL，这样文件就可以直接从 CDN 提供，而不是使用本地副本。下表总结了 jQuery 文件各自的 CDN url:

CDN

URL

| | --- | --- | | jQuery 的 CDN | 版本 2.x:http://code.jquery.com/jquery-2.x.x.js``http://code.jquery.com/jquery-2.x.x.min.js版本 1.xhttp://code.jquery.com/jquery-1.x.x.js``http://code.jquery.com/jquery-1.x.x.min.js | | The 谷歌 CDN | 版本 2.x:https://ajax.googleapis.com/ajax/libs/jquery/2.x.x/jquery.js``https://ajax.googleapis.com/ajax/libs/jquery/2.x.x/jquery.min.js版本 1.xhttps://ajax.googleapis.com/ajax/libs/jquery/1.x.x/jquery.js``https://ajax.googleapis.com/ajax/libs/jquery/1.x.x/jquery.min.js | | Microsoft CDN | 版本 2.x:http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.x.x.js``http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.x.x.min.js``http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.x.x.min.map版本 1.xhttp://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.x.x.js``http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.x.x.min.js``http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.x.x.min.map | | CDNJS CDN | 版本 2.x:https://cdnjs.cloudflare.com/ajax/libs/jquery/2.x.x/jquery.js``https://cdnjs.cloudflare.com/ajax/libs/jquery/2.x.x/jquery.min.js``https://cdnjs.cloudflare.com/ajax/libs/jquery/2.x.x/jquery.min.map版本 1.xhttps://cdnjs.cloudflare.com/ajax/libs/jquery/1.x.x/jquery.js``https://cdnjs.cloudflare.com/ajax/libs/jquery/1.x.x/jquery.min.js``https://cdnjs.cloudflare.com/ajax/libs/jquery/1.x.x/jquery.min.map | | jsdeliverr CDN | 版本 2.x:https://cdn.jsdelivr.net/jquery/2.x.x/jquery.js``https://cdn.jsdelivr.net/jquery/2.x.x/jquery.min.js``https://cdn.jsdelivr.net/jquery/2.x.x/jquery.min.map版本 1.xhttps://cdn.jsdelivr.net/jquery/1.x.x/jquery.js``https://cdn.jsdelivr.net/jquery/1.x.x/jquery.min.js``https://cdn.jsdelivr.net/jquery/1.x.x/jquery.min.map |

为新版本使用 cdn

注意，当启动 jQuery 库的新版本时，cdn 可能没有最新的文件，因为第三方通常需要几天的时间来更新它们的文件。对于新版本，在下载之前一定要检查可用的版本。

How it works…

cdn 由位于全球战略位置的数据中心中的服务器组成。当客户端从 CDN 请求资源时，地理上最接近客户端的服务器处理该请求。这些服务器也被称为边缘服务器。除此之外，边缘服务器有缓存机制来服务各种资产。所有这些都可以帮助您提高客户端的响应时间。

参见 also

使用 NuGet 包管理器下载 jQuery配方

使用 NuGet 包管理器下载 jQuery

NuGet 是一个可以在 Visual Studio 中使用的软件包管理器。它简化了安装和升级包的过程。这个食谱演示了如何使用 NuGet 下载 jQuery 库。

准备

要为一个特定的项目启动 NuGet，请访问Tools|NuGet Package Manager|Manage NuGet Packages for Solution… 如下截图所示:

Getting ready

或者，在Solution Explorer选项卡中右键单击项目，选择管理 NuGet 包。

怎么做……

使用 NuGet Manager 下载 jQuery 的步骤如下:

In the NuGet Package Manager, as shown in the following screenshot, select the jQuery package from the left-hand side panel. In the right-hand side panel, select the Version that you would like to use in your web project from the drop-down menu. Click on the Install button:

提示

在 NuGet 中搜索包

如果在左侧面板中看不到 jQuery，你需要在 NuGet Manager 屏幕左上角的搜索框中键入jQuery来搜索它。
在提示确认时单击OK，以便对解决方案进行必要的更改。

How it works…

NuGet 包管理器在Scripts文件夹中下载所选版本的 jQuery。删除Scripts文件夹中存在的任何其他版本。 Scripts文件夹将如下截图所示:

How it works…

NuGet 下载的文件如下(版本号以后可能会有变化):

jquery-2.1.4.intellisense.js
调试版本:jquery-2.1.4.js
发布版本:jquery-2.1.4.min.js
map 文件:jquery-2.1.4.min。地图

参见 also

下载 jQuery from jQuery.comrecipe

在空 ASP 中添加 jQuery.NET web 项目使用一个脚本块

创建 ASP.NET 4 .6 Web 应用，Visual Studio 提供了各种现成的模板，如 Empty、Web Forms、MVC、WebAPI 等等。此菜谱将使用 Empty 模板，该模板为开发人员提供一个空项目结构，该结构仅包含web.config文件。

提示

下载示例代码

您可以从您的帐户http://www.packtpub.com下载本书的示例代码文件。如果你在其他地方购买了这本书，你可以访问 http://www.packtpub.com/support 并注册，让文件直接通过电子邮件发给你。

准备

以下是使用空模板创建项目的步骤:

Create a new project in Visual Studio by going to File | New | Project..., as shown in the following screenshot:

提示

网站还是网络项目?

除了创建一个新项目，你还可以创建一个新网站。与项目不同，网站不包含用于跟踪应用中的单个文件的集合项目文件。要创建一个网站，请到File|New|Web Site… 。这将启动New Website对话框，其中包含可用模板列表。选择ASP.NET 空网站模板。
This will launch the New Project dialog box, as shown in the following screenshot. From the left-hand side panel, select your desired programming language, Visual C# or Visual Basic, and then, select ASP.NET Web Application from the middle panel:
在name字段中输入WebApplication1(或任何合适的名称)。点击浏览按钮到想要保存应用的位置。点击OK上的。
This will launch the Select a template dialog box, as shown in the following screenshot:
From ASP.NET 4.6 Templates, select Empty, and click on OK. Visual Studio will create an empty project in the Solution Explorer tab, as shown in the following screenshot:

注意事项

在其余的菜谱中，当被要求使用 Empty 模板创建 Web Application 项目时，请遵循本节中列出的步骤。

怎么做……

下面是使用脚本块包含 jQuery 的步骤:

JavaScript files are usually placed in a folder named Scripts in the web application. So, in the Solution Explorer tab, right-click on the project and go to Add | New Folder from the menu:
Rename the folder to Scripts. Now, right-click on the Scripts folder, and go to Add | Existing Item... as shown in the following screenshot:
Now, browse to the location where you have saved the downloaded copy of the jQuery files (refer to the Downloading jQuery from jQuery.com recipe), and click on OK. It is recommended that you add both the uncompressed and compressed versions. The Scripts folder will be updated, as shown in the following screenshot:
Next, create a new web form in the project by right-clicking on the project and navigating to Add | New Item.... From the dialog box, select Web Form, and enter a suitable name for the web form, such as Default.aspx:
To use jQuery on the web form, simply drag and drop the required jQuery file, that is, uncompressed or compressed on the web form. Or alternatively, include the following <script> tag in the <head> element:

对于开发模式，代码如下:

<script src="Scripts/jquery-2.1.4.js"></script>

对于发布模式，代码如下:

<script src="Scripts/jquery-2.1.4.min.js"></script>

参见 also

从 jQuery.comrecipe 下载 jQuery【T4

在空 ASP 中添加 jQuery.NET web 项目使用 ScriptManager 控件

使用脚本块将 jQuery 添加到 web 表单中有一些缺点。如果应用升级到使用 jQuery 的最新版本，那么所有带有<script>标签的 web 表单都需要更改。其次，从开发环境中的未压缩版本切换到发布环境中的压缩版本应该手动处理，因此很容易出错。使用 ASP.NETScriptManager控件可以帮助您克服这个问题。它也可以直接从 CDN 加载 jQuery，而不是使用本地副本。

准备

创建一个新的ASP。按照中列出的步骤将 jQuery 添加到空的 ASP. NET Web 应用项目中使用空的模板.NET web 项目使用脚本块配方。将项目命名为WebApplication2(或任何其他合适的名称)。
按照前面配方中的步骤将 jQuery 库(未压缩和压缩格式)添加到Scripts文件夹中。
按照以下步骤向项目中添加一个新的 web 表单。

怎么做……

下面是将 jQuery 添加到 ASP 的步骤.NET web 项目使用ScriptManager控件:

以Design模式打开网页表单。
启动工具箱。这可以通过两种方式来实现。从页面顶部的File菜单中，转到View|Toolbox。或者，使用快捷键Ctrl+Alt+X。
Go to Toolbox | AJAX Extensions, and drag and drop the ScriptManager control onto the form:
Right-click on the project in the Solution Explorer tab, and go to Add | New Item.... From the dialog box, select Global Application Class. This will add the Global.asax file to the project:

注意事项

Global.asax文件是一个可选文件，它驻留在应用的根目录中，响应应用和会话级别的事件，例如启动和结束应用或会话。
Open the Global.asax file and include the following namespace at the top of the page:

对于 VB，代码如下:

Imports System.Web.UI

对于 c#，代码如下:

using System.Web.UI;
In the Application_Start event in the Global.asax file, add the following code to create a script that maps to jQuery:

对于 VB，代码如下:

Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs) ScriptManager.ScriptResourceMapping.AddDefinition("jquery", New ScriptResourceDefinition() With { .Path = "~/Scripts/jquery-2.1.4.min.js", .DebugPath = "~/Scripts/jquery-2.1.4.js", .CdnPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js", .CdnDebugPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js", .CdnSupportsSecureConnection = True, .LoadSuccessExpression = "window.jQuery"}) End Sub

对于 c#，代码如下:

protected void Application_Start(object sender, EventArgs e) { ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition { Path = "~/Scripts/jquery-2.1.4.min.js", DebugPath = "~/Scripts/jquery-2.1.4.js", CdnPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js", CdnDebugPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js", CdnSupportsSecureConnection = true, LoadSuccessExpression = "window.jQuery" }); }
Open the Default.aspx web form in the Source mode. Add the following ScriptReference to the ScriptManager control:

<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Name="jquery" /> </Scripts> </asp:ScriptManager>

注意事项

当使用ScriptManager控件向 jQuery 库添加引用时，jQuery 代码应该放在ScriptManager控件之后，即在 jQuery 引用声明之后; 否则，页面将抛出错误。同样需要注意的是，ScriptManager控件应该驻留在<form>元素中。
将ScriptManager控件的EnableCdn属性设置为true，从 CDN 中检索 jQuery 文件。

How it works…

下面是 ScriptManager 控件的工作方式:

ScriptManager控件可以用来加载 JavaScript 文件，例如 jQuery 库。这可以通过在ScriptManager控件中添加ScriptReference到 jQuery 来实现，如下所示:
However, we require to define this mapping. This can be done in the Global.asax file using a ScriptResourceDefinition object, An exposes the following properties:

|
Property

|

Description

| | --- | --- | | Path | This is the path of script resources | | DebugPath | This is the development/debugging path of script resources | | CdnPath | This is from CDN script resources | | CdnDebugPath | This is the development/debugging path from CDN script resources | | CdnSupportsSecureConnection | This indicates that when accessing a page using a secure connection, Whether to use HTTPS mode search resources | | LoadSuccessExpression | This is a JavaScript expression that is used to check whether the JavaScript file has been successfully loaded. |
在Global.asax中定义的ScriptResourceDefinition对象命名为jquery。控件使用相同的名称在 web 表单上加载引用。
In the development/debug mode, the script is served from DebugPath while in the release mode, it is served from Path.

提示

在开发/调试和发布模式下运行

要在开发/调试模式下运行应用，将web.config中的<compilation>元素的debug属性设置为true，如下所示:

<system.web> <compilation debug="true"/> ….. </system.web>

当debug属性设置为false时，应用将以发布模式运行。
如果EnableCdn设置为true，则脚本从 CDN 路径提供，即在开发/调试模式下从CdnDebugPath提供，在发布模式下从CdnPath提供。
The LoadSuccessExpression property renders an inline script to load the library from the local path in the event of a CDN failure. By right-clicking on the web page and viewing the source, note that the ScriptManager control adds a fall back mechanism when the CDN is unavailable and files are served locally instead:

参见 also

将 jQuery 添加到空 ASP. php 中.NET web 项目使用一个脚本块配方

在 asp.net 中添加 jQuery。网主页

母版页用于在网站中实现统一的外观和感觉。它们在所有内容页面上保持一致的布局。在母版页中包含 jQuery 可以确保所有使用母版页的内容页在默认情况下也包含这个库。本食谱将演示如何做到这一点。

注意事项

母版页是一个 ASP。带有.Master扩展名的。NET 文件。它在布局的顶部有一个@Master指令，而不是在普通的.aspx页面中的@Page指令。

准备

创建一个新的ASP。按照中列出的步骤将 jQuery 添加到空的 ASP. NET Web 应用项目中使用空的模板.NET web 项目使用脚本块配方。将项目命名为WebApplicationWithMaster(或任何其他合适的名称)。
按照前面配方中的步骤将 jQuery 库(未压缩和压缩格式)添加到Scripts文件夹中。
In the Solution Explorer tab, right-click on the project, and go to Add | New Item.... This will launch a dialog box, as shown in the following screenshot. From the dialog box, select Web Forms Master Page. Name the Master Page Default.Master, and click on Add:
To add a web form—that is, a content page—to the project, right-click on the project in the Solution Explorer tab again, and navigate to Add | New Item.... From the dialog box, this time select Web Form with Master Page, as shown in the following screenshot. Name the web form Default.aspx, and click on Add:
This will launch a dialog box so that you can select the Master Page. From the dialog box, as shown in the following screenshot, select the Master Page to be associated with the content page, and click on OK:

怎么做……

将 jQuery 集成到 asp.net 中.NET 主页，遵循这些步骤:

Open the Default.Master Master Page in the Source mode, and add a reference to the jQuery library using either the <script> block (refer to the Adding jQuery to an empty ASP.NET web project using a script block recipe) or the ScriptManager control (refer to the Adding jQuery to an empty ASP.NET web project using the ScriptManager control recipe), as shown in the following screenshot:

注意事项

当使用<script>块时，jQuery引用最好放在<head>元素中。

当使用ScriptManager控件时，该控件最好放在ContentPlaceHolder之前的<form>元素中，然后将 jQuery 代码添加到内容页面中。 Global.asax文件也应该更新，以便添加所需的ScriptResourceDefinition，，如向空 ASP 中添加 jQuery 所述.NET web 项目使用 ScriptManager 控件配方。
所需的 jQuery 代码现在可以添加到Default.aspxweb 表单中的ContentPlaceHolder(与ID = "ContentPlaceHolder1"一起)中。

How it works…

在运行应用时，当Default.aspx内容页面被加载时，来自 Master 页面的 HTML 标记将引用添加到 jQuery 库。这使得内容页可以使用 jQuery，因此任何 jQuery 代码都可以执行。

要检查 jQuery 引用是否已添加到页面中，请运行该项目并在浏览器中启动Default.aspx。右键单击浏览器窗口中的页面并选择查看源。 jQuery 引用将会在页面上看到，如下截图所示:

How it works…

参见 also

将 jQuery 添加到空 ASP. php 中。 . NET web 项目使用 ScriptManager 控件配方

通过编程方式将 jQuery 添加到 web 表单中

除了使用脚本块和ScriptManager控件将 jQuery 添加到 web 表单中之外，后台代码文件还可以发出所需的脚本代码。本食谱将演示如何做到这一点。

准备

创建一个 ASP。文件|新|项目|ASP. NET Web 应用项目 NET Web 应用。选择空的模板。将项目命名为WebApplicationWithPageLoad(或任何其他合适的名称)。
添加一个新的Web 表单到项目中，并将其命名为Default.aspx。
将 jQuery 库文件添加到Scripts文件夹中。
从解决方案资源管理器选项卡，导航到Default.aspx.vb(VB)或Default.aspx.cs(c#)，这是 web 表单的代码后置文件。打开这个文件。

怎么做……

在Default.aspx.vb的Page_Load事件处理程序中，使用RegisterClientScriptInclude方法在页面上生成一个脚本块，如下所示:

对于 VB，代码如下:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   Page.ClientScript.RegisterClientScriptInclude("jquery",   Page.ResolveUrl("~/Scripts/jquery-2.1.4.js"))
End Sub

对于 c#，代码如下:

protected void Page_Load(object sender, EventArgs e)
{
   Page.ClientScript.RegisterClientScriptInclude("jquery",   Page.ResolveUrl("~/Scripts/jquery-2.1.4.js"));
}

How it works…

RegisterClientScriptInclude方法需要两个参数:密钥和 URL。它在<form>元素中添加带有 jQuery 库路径的脚本块，如下面的截图所示。 Page.ResolveUrl方法用于返回一个相对于站点根目录的 URL:

How it works…

由于 jQuery 库添加到<form>元素,所有的 jQuery 代码应该写在<form>元素而不是<head>元素,最好是页面的末尾之前关闭<form>元素。

参见 also

将 jQuery 添加到空 ASP. php 中.NET web 项目使用一个脚本块配方

理解 web 应用默认模板中 jQuery 的引用

到目前为止，所有的示例都使用了空的模板来实现的 ASP.NET Web 应用项目。当使用一个非空的内置 web 应用模板时，asp.net.NET 使用ScriptManager控件在母版页中添加对 jQuery 库的引用。本食谱将指导您了解该映射的重要细节。

怎么做……

下面是创建 ASP 的步骤.NET web 应用使用默认的 web 应用模板:

创建一个新项目导航到文件|新|项目… 。在对话框中，选择ASP.NET Web 应用。将项目命名为DemoWebApplication(或其他合适的名称)，然后单击OK。
A new dialog box will be launched. Select Web Forms from the available templates. Note that the Web Forms checkbox is checked by selecting the Web Forms template (refer to the following screenshot) and click on OK as shown in the following screenshot:
Open the Site.Master Master Page in the Source mode, as shown in the following screenshot:
注意，添加到<form>元素的ScriptManager控件对 jQuery 的引用如下:

How it works…

当你按照之前的步骤，这是如何将 web 应用映射到 jQuery 库:

ScriptManager控件根据web.config:

<compilation debug="true"/>

中<compilation>元素的debug属性在开发版本和发布版本之间切换 jQuery 库。 2. 当debug属性为true时，使用未压缩版本。当debug为false时，使用缩小版。 3. The default template is shipped with the AspNet.ScriptManager.jQuery package. This package adds the following ScriptMappings to jQuery in the PreApplicationStart method of the application as follows:

对于 c#，代码如下:

string str = "2.4.1"; ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition { Path = "~/Scripts/jquery-" + str + ".min.js", DebugPath = "~/Scripts/jquery-" + str + ".js", CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".min.js", CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".js", CdnSupportsSecureConnection = true, LoadSuccessExpression = "window.jQuery" });

注意事项

默认的 Web Forms 模板添加了 Microsoft CDN URL，如前面的代码所示。
当ScriptManager控件的EnableCdn属性设置为true时，在发布模式和开发模式中分别使用CdnPath和CdnDebugPath来服务来自 Microsoft CDN 的脚本:

<asp:ScriptManager runat="server" EnableCdn="true">
However, if the CDN is down or if the application is offline, the ScriptManager control will include a fallback mechanism to serve the local copy of jQuery, as shown in the following screenshot:
To change the CDN to another, for example Google CDN, we need to change ScriptResourceMapping in the RegisterBundles method in BundleConfig, as shown in the following code. This module/class is located in the App_Start folder:

对于 VB，代码如下:

ScriptManager.ScriptResourceMapping.AddDefinition("jquery", New ScriptResourceDefinition() With { .Path = "~/Scripts/jquery-2.1.4.min.js", .DebugPath = "~/Scripts/jquery-2.1.4.js", .CdnPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js", .CdnDebugPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js", .CdnSupportsSecureConnection = True, .LoadSuccessExpression = "window.jQuery"})

对于 c#，代码如下:

ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition { Path = "~/Scripts/jquery-2.1.4.min.js", DebugPath = "~/Scripts/jquery-2.1.4.js", CdnPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js", CdnDebugPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js", CdnSupportsSecureConnection = true, LoadSuccessExpression = "window.jQuery" });
By running the page and viewing the source in the browser window, note that Microsoft CDN is replaced with Google CDN as required:
Open the Global.asax page to view the registration of bundles in the Application_Start event handler as follows:

对于 VB，代码如下:

BundleConfig.RegisterBundles(BundleTable.Bundles)

对于 c#，代码如下:

BundleConfig.RegisterBundles(BundleTable.Bundles);

参见 also

将 jQuery 添加到空 ASP. php 中。 . NET web 项目使用 ScriptManager 控件配方

在 web 项目中使用 jQuery 实现 Hello World

直到，所有的菜谱都已经演示了将 jQuery 库添加到网页的不同方法。这是使页面就绪 jquery 的第一步。在本教程中，让我们继续下一步:在一个脚本块中编写 jQuery 代码来操作 web 表单中的控件。通过在 web 表单上操作Label控件，我们将在 web 页面上显示一个简单的 Hello World 消息。

准备

通过File|New|project|ASP 创建一个 Web 应用项目.NET Web 应用。选择空模板。将项目命名为HelloWorld(或任何其他合适的名称)。
添加一个新的Web 表单到项目中。
将 jQuery 库文件添加到Scripts文件夹中。
使用你选择的任何方法在 web 表单上添加一个 jQuery 库的引用。
在Design模式中打开 web 窗体，通过导航到Toolbox|Standard控件，拖放Label控件。更改Label控件的属性如下:

怎么做……

如果一个 jQuery 引用被添加到<head>元素中，那么在<head>元素中包含下面的<script>块。否则，包含<form>元素，最好在<form>标签关闭之前:

<script type="text/javascript">
   $(document).ready(function () {
      var fontStyle = "Arial";
      var fontSize = 28;
      $("#<%=lblMessage.ClientID%>").css("font-family", fontStyle);
      $("#<%=lblMessage.ClientID%>").css("font-size", fontSize);
      $("#<%=lblMessage.ClientID%>").text("Hello World!!");
});
</script>

How it works…

下面是打印 Hello World 的步骤!! 在一个 web 项目中使用 jQuery:

在前面的 jQuery 代码中，$符号用于实例化jQuery对象。
当 DOM 准备好时，触发.ready()函数。它通常用于在页面上执行所需的 jQuery 代码。
控件可以从 jQuery 代码中通过 ASP 访问.NET 的ClientID属性和 jQuery 的#identifier选择器。
Using the .css() property of the jQuery object, the font style, size, and text of the Label control are manipulated so that the following output is displayed on running the application:

参见 also

Hello World 在 ASP 中的应用。 asp.net MVC 使用 jQuery配方

在 ASP 中绑定 jQuery.NET MVC

模型视图控制器(MVC)是一种设计模式，它将设计(模型)、表示(视图)和操作(控制器)分离开来。由于 Visual Studio 在开发人员中非常流行，它提供了用于创建 MVC 项目的现成模板。

与 web 表单类似，jQuery 可以通过<script>标签包含在 MVC 视图中。然而，在本例中，让我们看看为此目的使用绑定的情况。

绑定可以帮助减少浏览器发出的 HTTP 请求的数量。它允许样式表、JavaScript 或其他文件组合在一个称为 bundle 的单一文件中。这个合并的文件可以使用单个 HTTP 请求作为一个单元下载。

准备

Launch a new ASP.NET Web Application project in Visual Studio using the Empty template. Ensure that the MVC checkbox is checked, as shown in the following screenshot:
This will create a project with MVC folders. Right-click on the Controllers folder in the Solution Explorer tab, and go to Add | Controller... as shown in the following screenshot:
This will launch the Add Scaffold dialog box. Select MVC 5 Controller – Empty, and click on the Add button:
On being prompted to add a name for the controller, type HomeController and click on the Add button:
Next, open the HomeController in the source mode, and right-click on the Index action method, as shown in the following screenshot. Click on Add View... as shown in the following screenshot:
This will launch the Add View dialog box. From the Template field, select Empty (without model). Uncheck the Use a layout page option and click the Add button to continue:

注意事项

在其余的菜谱中，当被要求创建 MVC 应用时，按照前面提到的步骤 1 到 6 进行操作。
To use bundling, we need to install the ASP.NET Web Optimization package. This can be done from NuGet. From the File menu, launch NuGet by navigating to Project | Manage NuGet Packages. Select Microsoft.AspNet.Web.Optimization from the list of available packages. If the package is not visible, search for web.optimization, as shown in the following screenshot. Click on the Install button to download and install the latest version:
最后，在项目中创建一个Scripts文件夹，并在该文件夹中包含 jQuery 库文件。

怎么做……

遵循以下步骤将 jQuery 绑定到 ASP 中.NET MVC:

在 MVC 项目的App_Start文件夹中打开BundleConfig类。如果文件不存在，在App_Start文件夹中新建module(VB)/class(c#)，并将其命名为BundleConfig.vb/BundleConfig.cs。
In BundleConfig.vb/BundleConfig.cs, add a namespace to System.Web.Optimization at the top of the file:

对于 VB，代码如下:

Imports System.Web.Optimization

对于 c#，代码如下:

using System.Web.Optimization;
Register and configure a bundle for jQuery in the RegisterBundles method in BundleConfig as follows:

对于 VB，代码如下:

Public Module BundleConfig Public Sub RegisterBundles(ByVal bundles As BundleCollection) bundles.Add(New ScriptBundle("~/Scripts/jquery").Include( "~/Scripts/jquery-{version}.js")) End Sub End Module

对于 c#，代码如下:

public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/Scripts/jquery").Include( "~/Scripts/jquery-{version}.js")); } }
To enable bundling in the development mode (optional), add the following code to the RegisterBundles method:

对于 VB，代码如下:

BundleTable.EnableOptimizations = True

对于 c#，代码如下:

BundleTable.EnableOptimizations = true;
In the Global.asax file, include the namespace for System.Web.Optimization, as shown in step 2 mentioned previously. Then, register the bundle in the Application_Start method as follows:

对于 VB，代码如下:

BundleConfig.RegisterBundles(BundleTable.Bundles)

对于 c#，代码如下:

BundleConfig.RegisterBundles(BundleTable.Bundles);
Now, open the Index view and include the namespace for System.Web.Optimization, as shown in the following code:

对于 VB，代码如下:

@Imports System.Web.Optimization

对于 c#，代码如下:

@using System.Web.Optimization
接下来，在<head>元素中将 jQuery 脚本引用添加到视图中，如下所示:

注意事项

在调试模式下，通过将web.config文件中的<compilation>元素中的debug属性设置为true来禁用绑定。要在调试模式中覆盖此设置并启用绑定，请在RegisterBundles方法中将BundleTable类的EnableOptimizations属性设置为true。

除非EnableOptimizations被设置为true，或者debug属性被设置为false，否则文件将不会被绑定，并且将使用文件的调试版本而不是最小化版本。

How it works…

jQuery 在 ASP 中绑定.NET MVC 可以通过以下步骤完成:

用于捆绑 jQuery~/Scripts/jquery-{version}.js的通配符字符串包括开发和缩小版。智能感知使用的.vsdoc文件不包含在包中。
打开调试模式时，使用对应的调试版本。在发布模式中，最小化的版本捆绑在一起。
On running the view in a browser, the bundled file can be seen on viewing the source in the browser window, as shown in the following HTML markup:

参见 also

使用一个 CDN 在 MVC中加载 jQuery

使用 CDN 在 MVC 中加载 jQuery

由于在 web 应用中使用 CDN 的优势，bundle 也支持从 CDN 中直接加载文件。本菜谱将解释如何将 MVC 项目配置为使用 CDN。

准备

这个配方是前一个配方的的延续，在 ASP 中捆绑 jQuery.NET MVC。因此，遵循前面食谱中描述的所有步骤。

怎么做……

下面是在 MVC 中加载 jQuery 的步骤:

在BundleConfig模块/类中，修改RegisterBundles方法以将UseCdn属性设置为true，如步骤 2 中的代码片段所示。
Declare the required CDN path, and add a ScriptBundle with two parameters: the virtual path of the bundle and the CDN path, as follows:

对于 VB，代码如下:

Public Module BundleConfig Public Sub RegisterBundles(ByVal bundles As BundleCollection) bundles.UseCdn = True Dim cdnPath As String = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js" bundles.Add(New ScriptBundle("~/Scripts/jquery", cdnPath).Include("~/Scripts/jquery-{version}.js")) End Sub End Module

对于 c#，代码如下:

public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.UseCdn = true; string cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"; bundles.Add(new ScriptBundle("~/Scripts/jquery", cdnPath).Include("~/Scripts/jquery-{version}.js")); } }

How it works…

下面是使用 CDN 在 MVC 中加载 jQuery 的步骤:

通过设置UseCdn属性，可以从 CDN 服务绑定脚本。
在开发模式下，应用从本地Scripts文件夹中检索文件。发布模式下，使用 CDN 路径为捆绑的脚本提供服务。
但是，也有可能 CDN 出现故障。因此，需要一个回退机制，以便在这种场景中本地提供脚本。这可以通过在所需视图中添加以下<script>块来实现:

@Scripts.Render("~/Scripts/jquery") <script type="text/javascript"> if (typeof jQuery == 'undefined') { var e = document.createElement('script'); e.src = '@Url.Content("~/Scripts/jquery-2.4.1.js")'; e.type = 'text/javascript'; document.getElementsByTagName("head")[0].appendChild(e); } </script>

参见 also

Hello World 在 ASP 中的应用。 asp.net MVC 使用 jQuery配方

Hello World 使用 jQuery 实现 asp.net MVC

这个配方演示了如何编写一个简单的 jQuery 代码来在 ASP 中显示 Hello World。净 MVC 项目。

准备

使用在中创建的MyMvcApplication项目在 ASP 中绑定 jQuery.NET MVC配方。

怎么做……

下面是编写简单 jQuery 代码的步骤:

打开 Index 视图，并将以下标记添加到<body>元素:
在<head>元素中，包含以下 jQuery 代码:
右键单击 Index 视图，并选择view in Browser (Internet Explorer)。

How it works…

下面是用 ASP 打印 Hello World 的步骤。使用 jQuery 的 asp.net MVC:

符号用于实例化jQuery对象。
当 DOM 准备好时，触发.ready()函数。它通常用于在页面上执行所需的 jQuery 代码。
带有id = "divMessage",的 HTML<div>元素用于显示 Hello World 消息，可以使用 jQuery 的#identifier选择器来访问它的 ID——也就是说，使用#divMessage选择器。
Using the .css() property of the jQuery object, the font style, size, and text of the <div> element are manipulated so that the following output is displayed on running the application:

参见 also

bundle NET MVC配方

调试 Visual Studio 中的 jQuery 代码

调试对于在开发阶段解决代码中的 bug 是不可避免的。有时，bug 也会滑入生产中。 Visual Studio 支持开发人员以与服务器端代码相同的方式调试 JavaScript 代码。但是 Visual Studio 中存在一定的局限性，目前只能在 Internet Explorer 浏览器中进行调试。

准备

To enable debugging for a particular project, both the project properties and web.config must be updated. To update the project properties, right-click on the project in the Solution Explorer tab, and select Properties. Go to the Web tab, and select the ASP.NET checkbox in the Debuggers section, as shown in the following screenshot:
在web.config文件中，转到configuration/system.web/compilation元素。如果元素不存在，添加一个新节点。要开启调试，应该将<compilation>节点的debug属性设置为true，如下所示:

怎么做……

在 Visual Studio 中调试 jQuery 代码可以通过以下步骤完成:

The first step in debugging is to define breakpoints in the JavaScript code, where the execution will be halted so that variables, program flow, and so on can be inspected. To define breakpoints, just click on the left-hand side gray margin in the source code. Each breakpoint is represented by a small red circle, as shown in the following figure:
Press F5, or navigate to Debug | Start Debugging, to start running the application in the debug mode. The execution will stop at the first breakpoint that it comes across, as shown in the following screenshot:
要在运行时启动 Watch 窗口以观察变量的值，请转到Debug|Windows|Watch。这将显示窗口，如前面截图中所示的。
You will also be able to see a window showing the breakpoints by navigating to Debug | Windows | Breakpoints. The result is shown in the following screenshot:
要逐行跟踪代码，按F11或在每行导航到Debug|Step Into。要跳转到下一个断点，按F5。
按Shift+F5停止调试。

注意事项

确保在生产环境中启动应用之前关闭调试。启用了调试的应用的性能较慢，因为调试会生成额外的信息，使调试器能够显示变量的内容。它还向调用堆栈输出更多信息，这可能成为生产环境中的安全问题。

参见 also

在 web 项目中使用 jQuery 的Hello World

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/31271.html

数据知识

系统公告

开发文档

ASPDotNet查看更多书籍

《ASP.NET jQuery 秘籍》

ASPDotNet 一、开始学习 ASP.NET 和 jQuery

一、开始学习 ASP.NET 和 jQuery

简介

注意事项

从 jQuery 下载

准备

怎么做……

参见 also…

了解 jQuery 的 CDN

怎么做……

为新版本使用 cdn

How it works…

参见 also

使用 NuGet 包管理器下载 jQuery

准备

怎么做……

提示

How it works…

参见 also

在空 ASP 中添加 jQuery.NET web 项目使用一个脚本块

提示

准备

提示

注意事项

怎么做……

参见 also

在空 ASP 中添加 jQuery.NET web 项目使用 ScriptManager 控件

准备

怎么做……

注意事项

注意事项

How it works…

提示

参见 also

在 asp.net 中添加 jQuery。 网主页

注意事项

准备

怎么做……

注意事项

How it works…

参见 also

通过编程方式将 jQuery 添加到 web 表单中

准备

怎么做……

How it works…

参见 also

理解 web 应用默认模板中 jQuery 的引用

怎么做……

How it works…

注意事项

参见 also

在 web 项目中使用 jQuery 实现 Hello World

准备

怎么做……

How it works…

参见 also

在 ASP 中绑定 jQuery.NET MVC

准备

注意事项

怎么做……

注意事项

How it works…

参见 also

使用 CDN 在 MVC 中加载 jQuery

准备

怎么做……

How it works…

参见 also

Hello World 使用 jQuery 实现 asp.net MVC

准备

怎么做……

How it works…

参见 also

调试 Visual Studio 中的 jQuery 代码

准备

ASPDotNet 查看更多书籍

在 asp.net 中添加 jQuery。网主页