68、书店 Web 应用程序中间层开发与 ASP.NET Ajax 优化-优快云博客

本文链接：https://blog.youkuaiyun.com/milk5/article/details/155417827

书店 Web 应用程序中间层开发与 ASP.NET Ajax 优化

1. 传统 Web 应用与 Ajax 应用的区别

在 Web 应用开发中，传统 Web 应用和 Ajax 应用有着显著的不同。传统 Web 应用在用户与页面交互时，会进行全页面刷新。以用户注册表单为例，其交互流程如下：
1. 用户填写表单字段，然后提交表单。
2. 浏览器向服务器发送请求，服务器接收并处理该请求。
3. 服务器生成包含完整页面的响应并发送给浏览器。
4. 浏览器加载新页面，此时浏览器窗口会暂时变为空白。

在这个过程中，用户必须等待服务器响应并重新加载整个页面，在服务器处理同步请求时，用户无法与网页进行交互。频繁的长时间等待，使得一些用户将万维网戏称为“世界等待网”。这种模式最初是为超文本文档网络设计的，随着 Web 发展成为全面的应用平台，它的性能表现变得“卡顿”，用户开始要求更具响应性的模式。

而 Ajax 应用在客户端和服务器之间添加了一层来管理两者之间的通信。当用户与页面交互时，客户端向服务器请求信息，请求会被 ASP.NET Ajax 控件拦截并作为异步请求发送到服务器。用户可以在服务器处理请求的同时继续与客户端浏览器中的应用程序进行交互。其他用户交互可能会导致向服务器发送更多请求。一旦服务器响应原始请求，发出请求的 ASP.NET Ajax 控件会调用客户端函数来处理服务器返回的数据，这个函数被称为回调函数，它使用部分页面更新来在现有网页中显示数据，而无需重新加载整个页面。这种部分页面更新使 Web 应用程序更具响应性，感觉更像桌面应用程序。

下面是传统 Web 应用和 Ajax 应用交互流程的对比图：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    A(用户填写表单):::process --> B(浏览器发送请求):::process
    B --> C(服务器处理请求):::process
    C --> D(服务器生成响应):::process
    D --> E(浏览器加载新页面):::process

传统 Web 应用交互流程

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    F(用户交互):::process --> G(客户端请求信息):::process
    G --> H(Ajax 控件拦截并异步发送请求):::process
    H --> I(服务器处理请求):::process
    I --> J(服务器响应请求):::process
    J --> K(回调函数处理数据):::process
    K --> L(部分页面更新):::process

Ajax 应用交互流程

2. 测试书店 Web 应用程序

在测试书店 Web 应用程序时，我们可以按照以下步骤进行：
1. 运行应用程序 ：选择“调试”>“开始调试”来运行 Web 应用程序。从列表框中选择一个书名，页面会重新加载，并在列表框下方显示该书的封面图像。点击“查看信息”按钮，“BookInformation.aspx”页面会加载并显示书籍信息。如果在点击“查看信息”按钮时没有选择书名，“RequiredFieldValidator”会提示用户“请选择一本书”。
2. 关闭应用程序 ：点击浏览器的关闭框来关闭正在运行的应用程序。

在与应用程序交互时，我们会注意到每次从“bookTitlesListBox”中选择一本书时，浏览器都会重新加载“Books.aspx”页面。虽然这样简单的页面通常可以在较短的等待时间内加载完成，但一个 ASPX 页面往往包含大量内容，下载和在浏览器中渲染这些内容可能需要时间。接下来，我们将学习如何使用 ASP.NET Ajax 来提高页面性能，只加载页面中发生变化的部分。

3. 使用 ASP.NET Ajax 增强“Books.aspx”页面

为了使用 ASP.NET Ajax 增强“Books.aspx”页面，我们可以按照以下步骤操作：
1. 添加 ScriptManager 控件 ：在每个启用 ASP.NET Ajax 的 Web 应用程序中，关键控件是“ScriptManager”，它管理启用异步 Ajax 功能的客户端脚本。每个页面只能有一个“ScriptManager”。从工具箱的“AJAX 扩展”选项卡中拖动“ScriptManager”，并将其放置在任何使用它管理的脚本的控件之前（即页面上任何 ASP.NET Ajax 控件之前）。这将生成相应的代码来创建“ScriptManager”控件。
2. 添加 UpdatePanel 控件 ：“UpdatePanel”控件通过隔离页面的一部分进行部分页面更新，从而消除全页面刷新。为了实现部分页面更新，从工具箱的“AJAX 扩展”选项卡中拖动“UpdatePanel”控件，并将其放置在“bookTitlesListBox”的左侧。将相关代码添加到“UpdatePanel”元素中，以创建其“ContentTemplate”，该模板包含向服务器发起异步请求的控件以及在“UpdatePanel”执行部分页面更新时应更新的控件。
3. 将页面内容放置在 UpdatePanel 中 ：将“bookTitlesListBox”、“linqDataSource”和“coverImage”控件的标签剪切并粘贴到“UpdatePanel”的“ContentTemplate”标签中。“bookTitlesListBox”发起异步请求，当“UpdatePanel”执行部分页面更新时，“coverImage”控件会被更新。当用户在列表框中选择一个项目时，请求会被“UpdatePanel”拦截并转换为异步请求。当收到服务器的响应时，“UpdatePanel”会执行部分页面更新，以显示所选书籍的封面图像。选择“文件”>“全部保存”来保存更改。
4. 测试增强后的“Books.aspx”页面 ：选择“调试”>“开始调试”来运行 Web 应用程序。从列表框中选择一个书名，书籍的封面图像会像以前一样显示在列表框下方。但此时，只有包含列表框、“LinqDataSource”和图像的浏览器区域会刷新，页面的其余部分不受影响。
5. 关闭应用程序 ：点击浏览器的关闭框来关闭正在运行的应用程序。
6. 关闭项目 ：选择“文件”>“关闭项目”来关闭项目。

以下是“Books.aspx.vb”和“BookInformation.aspx.vb”代码隐藏文件的完整代码：

' Books.aspx.vb
Partial Class Books
    Inherits System.Web.UI.Page

    ' handles the View Information Button's Click event
    Protected Sub informationButton_Click(ByVal sender As Object, _
                                          ByVal e As System.EventArgs) Handles informationButton.Click
        'create Session variable named productID
        Session("productID") = bookTitlesListBox.SelectedValue
        ' redirect to BookInformation.aspx page to display details
        Response.Redirect("BookInformation.aspx")
    End Sub ' informationButton_Click

    ' display the cover image of the selected book
    Protected Sub bookTitlesListBox_SelectedIndexChanged( _
        ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles bookTitlesListBox.SelectedIndexChanged
        ' create the DataContext for querying the database
        Dim db As New BookInformationDBDataContext()
        ' get the book cover's file name for the selected book
        Dim coverFile = _
            (From item In db.Products _
             Where item.ProductID = bookTitlesListBox.SelectedValue _
             Select item.Coverart).Single()
        coverImage.ImageUrl = "images/" & coverFile ' specify file name
        coverImage.Visible = True ' display image
    End Sub ' bookTitlesListBox_SelectedIndexChanged
End Class ' Books

' BookInformation.aspx.vb
Partial Class BookInformation
    Inherits System.Web.UI.Page

    ' Handles the Page's Load event
    Protected Sub Page_Load(ByVal sender As Object, _
                            ByVal e As System.EventArgs) Handles Me.Load
        ' create the DataContext for querying the database
        Dim db As New BookInformationDBDataContext()
        ' get the selected product ID from the Session object
        Dim productID As Integer = _
            Convert.ToInt32(Session("productID"))
        ' get the details of the selected book
        Dim selectedBook = _
            (From item In db.Products _
             Where item.ProductID = productID _
             Select item).Single()
        bookTitleLabel.Text = selectedBook.Title ' display title
        authorsLabel.Text = selectedBook.Authors ' display authors
        ' display cover
        bookImage.ImageUrl = "images/" & selectedBook.Coverart
    End Sub ' Page_Load

    ' invoked when book List Button is clicked
    Protected Sub bookListButton_Click(ByVal sender As Object, _
                                       ByVal e As System.EventArgs) Handles bookListButton.Click
        ' redirects to Books.aspx page
        Response.Redirect("Books.aspx")
    End Sub ' bookListButton_Click
End Class ' BookInformation

4. 相关知识点总结

以下是一些关键知识点的总结：
| 知识点 | 描述 |
| ---- | ---- |
| DataContext 对象 | 允许在 LINQ 查询中访问数据库表 |
| UpdatePanel 控件 | 允许仅刷新页面中指定的控件 |
| ScriptManager 控件 | 管理用于执行异步请求和部分页面更新的 ASP.NET Ajax 脚本 |

在开发过程中，我们还学习了如何使用 Session 项来维护 ASPX 页面之间的会话状态，以及如何使用 Response 类的 Redirect 方法将客户端浏览器重定向到其他网页。同时，我们掌握了一些技能，如访问代码隐藏文件、配置 LinqDataSource 检索的信息、创建和使用 Session 项、将客户端浏览器重定向到另一个网页以及使用 ASP.NET Ajax 控件进行部分页面更新等。

通过这些操作和学习，我们能够以较少的代码控制数据从信息层到客户端层的流动，完成三层书店 Web 应用程序的开发，并使用 ASP.NET Ajax UpdatePanel 进行部分页面更新，提升了 Web 应用程序的用户体验。

书店 Web 应用程序中间层开发与 ASP.NET Ajax 优化

5. 关键术语与概念

在开发书店 Web 应用程序过程中，涉及到许多重要的术语和概念，下面为你详细解释：
| 术语 | 解释 |
| ---- | ---- |
| ASP.NET Ajax | 用于启用 Ajax 功能的 ASP.NET Web 控件 |
| 异步请求 | 在后台执行的请求，用户可在服务器处理请求时继续与 Web 应用程序交互 |
| 回调函数 | 处理异步请求响应的客户端函数 |
| 代码隐藏文件 | 包含为 ASPX 页面提供功能的类的文件 |
| UpdatePanel 控件的 ContentTemplate 元素 | 包含发起异步请求的控件以及在 UpdatePanel 执行部分页面更新时要更新的控件 |
| 键值对 | 将值与相应的键关联，Session 对象存储键值对 |
| Page 类 | 定义 ASPX 页面的基本功能 |
| Page_Load 事件处理程序 | 在 ASPX 页面加载时执行 |
| 部分页面更新 | 刷新页面的一部分而不重新加载整个页面 |
| Response 类的 Redirect 方法 | 将客户端浏览器重定向到另一个网页 |
| Response 对象 | 提供响应客户端请求的方法 |
| ScriptManager 控件 | 管理启用异步 Ajax 功能的客户端脚本 |
| ListBox 类的 SelectedValue 属性 | 返回所选项目的值 |
| 会话状态 | ASP.NET 内置的支持，用于在整个浏览器会话中跟踪数据 |
| Session 对象 | 在多个网页之间维护，包含特定用户的键值对集合 |
| LINQ 查询的 Single 方法 | 从 LINQ 查询中返回单个对象而不是集合 |
| 同步请求 | 用户必须等待服务器处理请求并返回结果页面 |
| UpdatePanel 控件 | 执行其 ContentTemplate 中包含的控件的部分页面更新 |

6. 控件、事件、属性与方法

以下是开发过程中涉及的一些重要控件、事件、属性与方法：
| 控件/类 | 描述 | 事件 | 属性 | 方法 |
| ---- | ---- | ---- | ---- | ---- |
| ASPX 页面 | 用于放置控件以设计 GUI 的页面 | Load：在 ASPX 页面创建时引发 | - | - |
| Image | 在 ASPX 页面上显示图像的控件 | - | BorderStyle：指定图像边框的外观；BorderWidth：指定图像边框的宽度；ID：指定用于以编程方式访问 Image 控件的名称；ImageUrl：指定图像文件的位置 | - |
| ListBox | 允许用户查看并从列表中的多个项目中选择的控件 | SelectedIndexChanged：在 ListBox 中选择不同项目时引发 | CssStyle：指定定义控件外观的 CSS 样式；ID：指定用于以编程方式访问 ListBox 控件的名称；SelectedValue：返回 ListBox 中所选项目的值 | - |
| Response | 提供响应客户端的方法的类 | - | - | Redirect：将客户端浏览器重定向到指定位置 |
| ScriptManager | 管理启用异步 Ajax 功能的客户端脚本的控件 | - | - | - |
| UpdatePanel | 允许执行部分页面更新的控件 | - | ContentTemplate：包含发起异步请求的控件以及在 UpdatePanel 执行部分页面更新时要更新的控件 | - |

7. 选择题巩固知识

为了帮助你巩固所学知识，下面是一些选择题：
1. The Page_Load event handler .
A. redirects the client browser to different web pages
B. defines the functionality when a Button is clicked
C. executes when an ASPX page loads
D. defines the functionality when a web control is selected
2. The Redirect method of class Response .
A. refreshes the current web page
B. sends the client browser to a specified web page
C. responds to user input
D. responds to the click of a Button
3. Session items are used in the Bookstore web application because .
A. variables in ASP.NET web applications must be created as Session items
B. values need to be shared among web pages
C. Session items are simpler to create than instance variables
D. Both a and b
4. Session state is used for _ in ASP.NET.
A. tracking user - specific data
B. running an application
C. using a database
D. None of the above
5. The file extension for an ASPX code - behind file is .
A..asp
B..aspx
C..aspx.vb
D..code
6. The Response object is a predefined ASP.NET object that .
A. connects to a database
B. retrieves information from a database
C. creates web controls
D. provides methods for responding to client requests
7. The Redirect method of class Response takes a(n) _ as an argument.
A. URL
B. Integer value
C. Boolean value
D. DataContext object
8. The _ property specifies the image that an Image control displays.
A. ImageGIF
B. ImageURL
C. Image
D. Display
9. The Visual Basic file that contains the ASPX page’s corresponding class is called the .
A. ASPX file
B. code - behind file
C. class file
D. None of the above
10. Information can be maintained across web pages by adding a _ to the Session object.
A. key/value pair
B. number
C. database connection object
D. None of the above

答案：1. C；2. B；3. B；4. A；5. C；6. D；7. A；8. B；9. B；10. A

8. 拓展练习

除了开发书店 Web 应用程序，我们还可以通过一些拓展练习来进一步巩固所学知识。

8.1 电话簿 Web 应用程序

以下是定义电话簿 Web 应用程序中间层的步骤：
1. 打开 Web 应用程序 ：打开之前创建并继续开发的电话簿 Web 应用程序。
2. 创建“获取号码”按钮的 Click 事件处理程序 ：双击“获取号码”按钮以创建其 Click 事件处理程序。
3. 创建 Session 项 ：在 Click 事件处理程序中，创建一个键为“IDNumber”的 Session 项，用于存储所选条目的 ID 号。
4. 重定向到 PhoneNumber.aspx 页面 ：在 Click 事件处理程序中，使用 Redirect 方法将客户端浏览器重定向到“PhoneNumber.aspx”页面。
5. 定义 PhoneNumber.aspx 页面的 Page_Load 事件处理程序 ：创建一个名为“db”的 PhoneBookDBDataContext 对象，然后创建一个 LINQ 查询，从数据库中选择包含“IDNumber”会话项中 ID 号的单个条目。检索相应的电话号码，并将其分配给“phoneNumberLabel”的 Text 属性。
6. 创建“电话簿”按钮的 Click 事件处理程序 ：双击“电话簿”按钮以创建其 Click 事件处理程序。
7. 重定向到 PhoneBook.aspx 页面 ：在 Click 事件处理程序中，使用 Redirect 方法将客户端浏览器重定向到“PhoneBook.aspx”页面。
8. 运行 Web 应用程序 ：选择“调试”>“开始调试”来运行 Web 应用程序。选择一个条目并点击“获取号码”按钮，验证“PhoneNumber.aspx”页面上是否显示正确的号码。点击“电话簿”按钮返回“PhoneBook.aspx”页面。
9. 关闭 Web 应用程序 ：点击浏览器的关闭框来关闭正在运行的 Web 应用程序。
10. 关闭 IDE ：点击 Visual Web Developer IDE 的关闭框来关闭它。

以下是相应的 mermaid 流程图：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    A(打开应用程序):::process --> B(创建获取号码按钮事件处理程序):::process
    B --> C(创建 Session 项):::process
    C --> D(重定向到 PhoneNumber.aspx):::process
    D --> E(定义 PhoneNumber.aspx 页面加载事件处理程序):::process
    E --> F(创建电话簿按钮事件处理程序):::process
    F --> G(重定向到 PhoneBook.aspx):::process
    G --> H(运行应用程序):::process
    H --> I(关闭应用程序):::process
    I --> J(关闭 IDE):::process

8.2 美国州事实 Web 应用程序

定义美国州事实 Web 应用程序中间层的步骤如下：
1. 打开 Web 应用程序 ：打开之前创建并继续开发的美国州事实 Web 应用程序。
2. 复制 FlagImages 目录 ：将“C:\Examples\Tutorial31\Exercises\FlagImages”目录复制到项目的“USStateFacts”目录中。
3. 创建“查看事实”按钮的 Click 事件处理程序 ：双击“查看事实”按钮以创建其 Click 事件处理程序。
4. 创建 Session 项 ：在 Click 事件处理程序中，创建一个名为“StateID”的 Session 项，并将所选州的 StateID 分配给它。
5. 重定向到 StateFacts.aspx 页面 ：在 Click 事件处理程序中，使用 Redirect 方法将客户端浏览器重定向到“StateFacts.aspx”页面。
6. 定义 StateFacts.aspx 页面的 Page_Load 事件处理程序 ：创建一个名为“db”的 StateFactsDBDataContext 对象，然后创建一个 LINQ 查询，从数据库中选择包含“StateID”会话项中 StateID 的单个条目。检索相应的州名，并将其分配给“stateNameLabel”的 Text 属性。同时，检索相应旗帜图像的文件名，并将其分配给“flagImage”的 ImageURL 属性（需在文件名前加上“FlagImages\”）。
7. 创建“州列表”按钮的 Click 事件处理程序 ：双击“州列表”按钮以创建其 Click 事件处理程序。
8. 重定向到 States.aspx 页面 ：在 Click 事件处理程序中，使用 Redirect 方法将客户端浏览器重定向到“States.aspx”页面。
9. 在 DetailsView 中显示州事实 ：将“stateDetailsView”设置为数据绑定，连接到一个新的 LinqDataSource。配置 LinqDataSource 以从“StateFacts”数据库表中选择“Capital”、“Flower”、“Tree”和“Bird”字段。配置 LinqDataSource 的 Where 表达式，仅选择包含“StateID”会话项中存储的 StateID 值的数据库条目。编辑显示字段，使其按“Capital”、“Flower”、“Tree”和“Bird”的顺序显示。
10. 运行 Web 应用程序 ：选择“调试”>“开始调试”来运行 Web 应用程序。选择一个州并点击“查看事实”按钮，验证“StateFacts.aspx”页面上是否显示正确的信息。点击“州列表”按钮返回“States.aspx”页面。
11. 关闭 Web 应用程序 ：点击浏览器的关闭框来关闭正在运行的 Web 应用程序。
12. 关闭 IDE ：点击 Visual Web Developer IDE 的关闭框来关闭它。

以下是相应的 mermaid 流程图：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    A(打开应用程序):::process --> B(复制目录):::process
    B --> C(创建查看事实按钮事件处理程序):::process
    C --> D(创建 Session 项):::process
    D --> E(重定向到 StateFacts.aspx):::process
    E --> F(定义 StateFacts.aspx 页面加载事件处理程序):::process
    F --> G(创建州列表按钮事件处理程序):::process
    G --> H(重定向到 States.aspx):::process
    H --> I(配置 DetailsView):::process
    I --> J(运行应用程序):::process
    J --> K(关闭应用程序):::process
    K --> L(关闭 IDE):::process

通过这些练习，我们可以更加熟练地运用所学的 ASP.NET 知识，开发出功能更加丰富的 Web 应用程序。同时，我们也可以不断探索和尝试，进一步优化应用程序的性能和用户体验。