Web Forms与AJAX整合实战从零开始学习如何在不放弃Web Forms便利性的同时引入AJAX提升用户体验

威震华夏关云长 · 发表于 2025-9-23 01:40:17

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

引言

Web Forms作为ASP.NET框架的一部分，自2002年发布以来一直是Web开发的重要工具。它提供了事件驱动的编程模型、丰富的服务器控件和状态管理功能，使得开发人员可以快速构建复杂的Web应用程序。然而，传统的Web Forms应用依赖于完整的页面回发（postback），这会导致整个页面刷新，影响用户体验。

AJAX（Asynchronous JavaScript and XML）技术的出现改变了这一局面，它允许Web应用在不重新加载整个页面的情况下，与服务器进行异步通信并更新部分页面内容。将Web Forms与AJAX整合，可以兼顾Web Forms的开发便利性和AJAX的用户体验优势，是提升传统Web应用性能和用户体验的有效途径。

本文将从基础概念出发，逐步深入地介绍如何在Web Forms应用中引入AJAX技术，通过详细的代码示例和实践指导，帮助开发者在不放弃Web Forms便利性的同时，显著提升用户体验。

1. Web Forms基础回顾

1.1 Web Forms的工作原理

Web Forms是基于服务器端的Web应用框架，其核心思想是将Web开发抽象为类似Windows Forms的事件驱动模型。在Web Forms中：

• 页面生命周期包括初始化、加载视图状态、处理回发数据、加载页面、处理事件、呈现HTML等阶段
• 服务器控件在服务器端处理用户交互，并生成相应的HTML
• ViewState机制用于在页面回发之间保持控件状态

下面是一个简单的Web Forms页面示例：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormsAjaxDemo._Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web Forms 示例</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblMessage" runat="server" Text="请输入您的姓名："></asp:Label>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" />
<br />
<asp:Label ID="lblResult" runat="server"></asp:Label>
</div>
</form>
</body>
</html>

复制代码

对应的后台代码：

using System;
namespace WebFormsAjaxDemo
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 页面首次加载时执行的代码
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
// 按钮点击事件处理
if (!string.IsNullOrEmpty(txtName.Text))
{
lblResult.Text = $"您好, {txtName.Text}! 欢迎使用Web Forms。";
}
else
{
lblResult.Text = "请输入您的姓名。";
}
}
}
}

复制代码

1.2 Web Forms的优势与局限

1. 快速开发：丰富的服务器控件和事件驱动模型大大提高了开发效率
2. 状态管理：ViewState和控件状态自动管理，简化了状态保持的复杂性
3. 熟悉度：对于有Windows Forms开发经验的程序员来说，学习曲线较平缓
4. 抽象层次：隐藏了HTTP和HTML的复杂性，开发者可以专注于业务逻辑

1. 页面回发：每次用户交互都导致整个页面刷新，影响用户体验
2. 页面大小：ViewState可能导致页面体积增大，影响加载速度
3. 控制力：对生成的HTML和JavaScript的控制有限
4. 测试困难：由于事件驱动和页面生命周期的复杂性，单元测试较为困难

2. AJAX基础概念

2.1 什么是AJAX

AJAX（Asynchronous JavaScript and XML）是一种创建交互式Web应用的技术组合，它允许Web应用在不重新加载整个页面的情况下，与服务器进行异步通信并更新部分页面内容。尽管名称中包含XML，但AJAX可以处理任何格式的数据，包括JSON、HTML和纯文本。

AJAX的核心技术包括：

• JavaScript：用于创建异步请求和处理响应
• XMLHttpRequest对象：用于在后台与服务器交换数据
• DOM（Document Object Model）：用于动态更新页面内容
• CSS：用于样式化和动画效果

2.2 AJAX的优势

1. 提升用户体验：无需整页刷新，操作更加流畅
2. 减少带宽使用：只传输必要的数据，而不是整个页面
3. 提高响应速度：异步处理不会阻塞用户界面
4. 丰富的交互性：可以实现类似桌面应用的交互体验

2.3 基本的AJAX实现

下面是一个使用原生JavaScript实现AJAX请求的简单示例：

<!DOCTYPE html>
<html>
<head>
<title>原生AJAX示例</title>
<script type="text/javascript">
function loadContent() {
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', 'api/data', true);
// 设置回调函数处理响应
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // 请求完成
if (xhr.status === 200) { // 请求成功
document.getElementById('result').innerHTML = xhr.responseText;
} else {
document.getElementById('result').innerHTML = 'Error: ' + xhr.status;
}
}
};
// 发送请求
xhr.send();
}
</script>
</head>
<body>
<button onclick="loadContent()">加载数据</button>
<div id="result"></div>
</body>
</html>

复制代码

3. Web Forms与AJAX整合的必要性

3.1 传统Web Forms的痛点

在传统的Web Forms应用中，每次用户交互（如点击按钮、选择下拉列表等）都会触发一次完整的页面回发。这导致：

1. 页面闪烁：整个页面重新加载，用户会看到明显的闪烁
2. 滚动位置丢失：页面刷新后，用户需要重新滚动到之前的位置
3. 带宽浪费：即使只需要更新页面的一小部分，也要传输整个页面的HTML
4. 用户体验差：操作响应慢，无法提供流畅的交互体验

3.2 AJAX带来的改进

通过在Web Forms中引入AJAX，可以解决上述问题：

1. 部分页面更新：只更新需要变更的部分，而不是整个页面
2. 无闪烁体验：页面不会完全刷新，避免了闪烁现象
3. 保持状态：页面滚动位置和表单输入内容得以保留
4. 异步操作：用户可以在等待服务器响应的同时继续与页面交互

3.3 整合的价值

将Web Forms与AJAX整合，可以兼顾两者的优势：

• 保留Web Forms的快速开发能力和丰富的服务器控件
• 引入AJAX的流畅用户体验和高效数据传输
• 逐步改进现有Web Forms应用，无需完全重写
• 降低学习成本，对于熟悉Web Forms的开发者来说更容易上手

4. 在Web Forms中实现AJAX的方法

4.1 使用ASP.NET AJAX框架

ASP.NET AJAX框架（原代号为”Atlas”）是微软专门为ASP.NET设计的AJAX解决方案，它提供了与Web Forms深度集成的AJAX功能。

在Visual Studio中创建Web Forms项目时，ASP.NET AJAX通常已经包含在内。如果没有，可以通过NuGet包管理器安装：

Install-Package Microsoft.AspNet.ScriptManager.WebForms

复制代码

ScriptManager是ASP.NET AJAX的核心控件，它负责管理客户端脚本库、注册Web服务和处理部分页面更新。每个使用AJAX功能的页面只能包含一个ScriptManager控件。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxDemo.aspx.cs" Inherits="WebFormsAjaxDemo.AjaxDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET AJAX 示例</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<h2>ASP.NET AJAX 演示</h2>
</div>
</form>
</body>
</html>

复制代码

UpdatePanel是ASP.NET AJAX中最常用的控件，它允许在不刷新整个页面的情况下更新页面的一部分。使用UpdatePanel，可以将现有的Web Forms控件包装起来，使它们支持部分页面更新。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server" Text="点击按钮获取当前时间"></asp:Label>
<br />
<asp:Button ID="btnGetTime" runat="server" Text="获取时间" OnClick="btnGetTime_Click" />
</ContentTemplate>
</asp:UpdatePanel>

复制代码

对应的后台代码：

protected void btnGetTime_Click(object sender, EventArgs e)
{
lblTime.Text = "当前时间是: " + DateTime.Now.ToString();
}

复制代码

在这个例子中，当用户点击”获取时间”按钮时，只有UpdatePanel内的内容会被更新，而不是整个页面。

UpdateProgress控件用于在异步更新过程中显示加载状态，提升用户体验。

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="loading">
<img src="Images/loading.gif" alt="加载中..." />
<p>正在处理，请稍候...</p>
</div>
</ProgressTemplate>
</asp:UpdateProgress>

复制代码

对应的CSS样式：

.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1000;
}
.loading img {
width: 50px;
height: 50px;
}
.loading p {
margin-top: 10px;
font-size: 16px;
color: #333;
}

复制代码

Timer控件允许在指定的时间间隔内触发部分页面更新，适用于需要定期刷新数据的场景。

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="lblServerTime" runat="server"></asp:Label>
<asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>

复制代码

对应的后台代码：

protected void Timer1_Tick(object sender, EventArgs e)
{
lblServerTime.Text = "服务器时间: " + DateTime.Now.ToString();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
lblServerTime.Text = "服务器时间: " + DateTime.Now.ToString();
}
}

复制代码

4.2 使用jQuery AJAX

虽然ASP.NET AJAX框架提供了与Web Forms深度集成的解决方案，但许多开发者更喜欢使用jQuery这样的JavaScript库来实现AJAX功能，因为它更灵活、更轻量，并且有更广泛的社区支持。

首先，需要在页面中引入jQuery库。可以通过CDN或本地文件引入：

<head runat="server">
<title>jQuery AJAX 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

复制代码

在Web Forms的后台代码中，可以创建静态的WebMethod方法，这些方法可以通过AJAX直接调用。

using System.Web.Services;
public partial class jQueryAjaxDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 页面加载代码
}
[WebMethod]
public static string GetServerTime()
{
return DateTime.Now.ToString();
}
[WebMethod]
public static string CalculateSum(int num1, int num2)
{
return (num1 + num2).ToString();
}
[WebMethod]
public static object GetProductInfo(int productId)
{
// 模拟从数据库获取产品信息
var products = new[]
{
new { Id = 1, Name = "笔记本电脑", Price = 5999.00m, Stock = 50 },
new { Id = 2, Name = "智能手机", Price = 3999.00m, Stock = 100 },
new { Id = 3, Name = "平板电脑", Price = 2999.00m, Stock = 30 }
};
var product = products.FirstOrDefault(p => p.Id == productId);
if (product == null)
{
return new { Success = false, Message = "产品不存在" };
}
return new { Success = true, Data = product };
}
}

复制代码

在前端页面中，可以使用jQuery的AJAX方法调用后台的WebMethod：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryAjaxDemo.aspx.cs" Inherits="WebFormsAjaxDemo.jQueryAjaxDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery AJAX 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.section {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
.result {
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 3px;
}
.loading {
display: none;
color: #666;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
input[type="text"], input[type="number"] {
padding: 8px;
width: 100px;
border: 1px solid #ddd;
border-radius: 3px;
}
select {
padding: 8px;
border: 1px solid #ddd;
border-radius: 3px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1>jQuery AJAX 与 Web Forms 整合示例</h1>
<div class="section">
<h2>获取服务器时间</h2>
<button id="btnGetTime">获取时间</button>
<div class="loading" id="loadingTime">加载中...</div>
<div class="result" id="resultTime"></div>
</div>
<div class="section">
<h2>计算两数之和</h2>
<input type="number" id="num1" placeholder="第一个数" />
<span>+</span>
<input type="number" id="num2" placeholder="第二个数" />
<button id="btnCalculate">计算</button>
<div class="loading" id="loadingCalculate">计算中...</div>
<div class="result" id="resultCalculate"></div>
</div>
<div class="section">
<h2>获取产品信息</h2>
<select id="productSelect">
<option value="1">笔记本电脑</option>
<option value="2">智能手机</option>
<option value="3">平板电脑</option>
</select>
<button id="btnGetProduct">获取产品信息</button>
<div class="loading" id="loadingProduct">加载中...</div>
<div class="result" id="resultProduct"></div>
</div>
</form>
<script>
$(document).ready(function() {
// 获取服务器时间
$("#btnGetTime").click(function() {
$("#loadingTime").show();
$("#resultTime").html("");
$.ajax({
type: "POST",
url: "jQueryAjaxDemo.aspx/GetServerTime",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
$("#resultTime").html("服务器时间: " + response.d);
$("#loadingTime").hide();
},
error: function(xhr, status, error) {
$("#resultTime").html("错误: " + error);
$("#loadingTime").hide();
}
});
});
// 计算两数之和
$("#btnCalculate").click(function() {
var num1 = $("#num1").val();
var num2 = $("#num2").val();
if (num1 === "" || num2 === "") {
$("#resultCalculate").html("请输入两个数字");
return;
}
$("#loadingCalculate").show();
$("#resultCalculate").html("");
$.ajax({
type: "POST",
url: "jQueryAjaxDemo.aspx/CalculateSum",
data: JSON.stringify({ num1: parseInt(num1), num2: parseInt(num2) }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
$("#resultCalculate").html("计算结果: " + num1 + " + " + num2 + " = " + response.d);
$("#loadingCalculate").hide();
},
error: function(xhr, status, error) {
$("#resultCalculate").html("错误: " + error);
$("#loadingCalculate").hide();
}
});
});
// 获取产品信息
$("#btnGetProduct").click(function() {
var productId = $("#productSelect").val();
$("#loadingProduct").show();
$("#resultProduct").html("");
$.ajax({
type: "POST",
url: "jQueryAjaxDemo.aspx/GetProductInfo",
data: JSON.stringify({ productId: parseInt(productId) }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var result = response.d;
if (result.Success) {
var product = result.Data;
var productInfo = "<strong>" + product.Name + "</strong><br>";
productInfo += "价格: ¥" + product.Price.toFixed(2) + "<br>";
productInfo += "库存: " + product.Stock + " 件";
$("#resultProduct").html(productInfo);
} else {
$("#resultProduct").html(result.Message);
}
$("#loadingProduct").hide();
},
error: function(xhr, status, error) {
$("#resultProduct").html("错误: " + error);
$("#loadingProduct").hide();
}
});
});
});
</script>
</body>
</html>

复制代码

4.3 使用PageMethods

PageMethods是ASP.NET AJAX提供的一种简化方式，允许直接从客户端JavaScript调用服务器端方法，无需创建Web服务。

首先，需要在ScriptManager控件中启用PageMethods：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

复制代码

在后台代码中，创建公共静态方法并标记为[WebMethod]：

using System.Web.Services;
public partial class PageMethodsDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 页面加载代码
}
[WebMethod]
public static string GetGreeting(string name)
{
return $"你好, {name}! 欢迎使用PageMethods。";
}
[WebMethod]
public static string GetCurrentWeather(string city)
{
// 模拟天气数据
var weatherData = new System.Collections.Generic.Dictionary<string, string>
{
{ "北京", "晴天, 25°C" },
{ "上海", "多云, 28°C" },
{ "广州", "小雨, 30°C" },
{ "深圳", "晴天, 32°C" }
};
if (weatherData.ContainsKey(city))
{
return $"{city}的天气: {weatherData[city]}";
}
else
{
return $"抱歉, 没有找到{city}的天气信息。";
}
}
}

复制代码

在前端页面中，可以使用PageMethods对象调用服务器端方法：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageMethodsDemo.aspx.cs" Inherits="WebFormsAjaxDemo.PageMethodsDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>PageMethods 示例</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.section {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
.result {
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 3px;
}
.loading {
display: none;
color: #666;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
input[type="text"] {
padding: 8px;
width: 200px;
border: 1px solid #ddd;
border-radius: 3px;
}
select {
padding: 8px;
border: 1px solid #ddd;
border-radius: 3px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<h1>PageMethods 与 Web Forms 整合示例</h1>
<div class="section">
<h2>获取问候语</h2>
<input type="text" id="txtName" placeholder="请输入您的姓名" />
<button id="btnGetGreeting">获取问候语</button>
<div class="loading" id="loadingGreeting">处理中...</div>
<div class="result" id="resultGreeting"></div>
</div>
<div class="section">
<h2>获取天气信息</h2>
<select id="citySelect">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<button id="btnGetWeather">获取天气</button>
<div class="loading" id="loadingWeather">查询中...</div>
<div class="result" id="resultWeather"></div>
</div>
</form>
<script>
// 获取问候语
document.getElementById("btnGetGreeting").onclick = function() {
var name = document.getElementById("txtName").value;
if (name === "") {
document.getElementById("resultGreeting").innerHTML = "请输入您的姓名";
return;
}
document.getElementById("loadingGreeting").style.display = "block";
document.getElementById("resultGreeting").innerHTML = "";
// 调用PageMethod
PageMethods.GetGreeting(name, function(result) {
document.getElementById("resultGreeting").innerHTML = result;
document.getElementById("loadingGreeting").style.display = "none";
}, function(error) {
document.getElementById("resultGreeting").innerHTML = "错误: " + error.get_message();
document.getElementById("loadingGreeting").style.display = "none";
});
};
// 获取天气信息
document.getElementById("btnGetWeather").onclick = function() {
var city = document.getElementById("citySelect").value;
document.getElementById("loadingWeather").style.display = "block";
document.getElementById("resultWeather").innerHTML = "";
// 调用PageMethod
PageMethods.GetCurrentWeather(city, function(result) {
document.getElementById("resultWeather").innerHTML = result;
document.getElementById("loadingWeather").style.display = "none";
}, function(error) {
document.getElementById("resultWeather").innerHTML = "错误: " + error.get_message();
document.getElementById("loadingWeather").style.display = "none";
});
};
</script>
</body>
</html>

复制代码

5. 实战案例：构建一个AJAX增强的Web Forms应用

5.1 项目概述

让我们构建一个简单的产品管理应用，该应用将展示如何在不放弃Web Forms便利性的同时，通过AJAX技术提升用户体验。这个应用将包括以下功能：

1. 产品列表展示
2. 产品搜索
3. 产品详情查看
4. 产品添加和编辑

5.2 创建项目

在Visual Studio中创建一个新的ASP.NET Web Forms应用：

1. 打开Visual Studio
2. 选择”文件” > “新建” > “项目”
3. 选择”ASP.NET Web 应用程序”
4. 命名为”ProductManagement”
5. 选择”Web Forms”模板并创建项目

5.3 设计数据模型

首先，创建一个简单的产品模型类：

// Models/Product.cs
using System;
namespace ProductManagement.Models
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
public int Stock { get; set; }
public string Category { get; set; }
public DateTime CreatedDate { get; set; }
}
}

复制代码

5.4 创建数据访问层

创建一个简单的产品数据访问类，用于模拟数据库操作：

// DAL/ProductRepository.cs
using System;
using System.Collections.Generic;
using System.Linq;
using ProductManagement.Models;
namespace ProductManagement.DAL
{
public class ProductRepository
{
private static List<Product> _products;
private static int _nextId = 1;
static ProductRepository()
{
// 初始化一些示例产品
_products = new List<Product>
{
new Product
{
Id = _nextId++,
Name = "笔记本电脑",
Description = "高性能笔记本电脑，适合办公和娱乐",
Price = 5999.00m,
Stock = 50,
Category = "电脑",
CreatedDate = DateTime.Now.AddDays(-30)
},
new Product
{
Id = _nextId++,
Name = "智能手机",
Description = "最新款智能手机，拍照效果极佳",
Price = 3999.00m,
Stock = 100,
Category = "手机",
CreatedDate = DateTime.Now.AddDays(-20)
},
new Product
{
Id = _nextId++,
Name = "平板电脑",
Description = "轻薄便携的平板电脑，阅读和娱乐的理想选择",
Price = 2999.00m,
Stock = 30,
Category = "电脑",
CreatedDate = DateTime.Now.AddDays(-15)
},
new Product
{
Id = _nextId++,
Name = "无线耳机",
Description = "高品质无线蓝牙耳机，降噪效果出色",
Price = 899.00m,
Stock = 200,
Category = "配件",
CreatedDate = DateTime.Now.AddDays(-10)
},
new Product
{
Id = _nextId++,
Name = "智能手表",
Description = "多功能智能手表，健康监测和运动追踪",
Price = 1299.00m,
Stock = 75,
Category = "配件",
CreatedDate = DateTime.Now.AddDays(-5)
}
};
}
public List<Product> GetAllProducts()
{
return _products.OrderBy(p => p.Id).ToList();
}
public Product GetProductById(int id)
{
return _products.FirstOrDefault(p => p.Id == id);
}
public List<Product> SearchProducts(string keyword, string category)
{
var query = _products.AsQueryable();
if (!string.IsNullOrEmpty(keyword))
{
query = query.Where(p =>
p.Name.Contains(keyword) ||
p.Description.Contains(keyword));
}
if (!string.IsNullOrEmpty(category) && category != "全部")
{
query = query.Where(p => p.Category == category);
}
return query.OrderBy(p => p.Id).ToList();
}
public Product AddProduct(Product product)
{
product.Id = _nextId++;
product.CreatedDate = DateTime.Now;
_products.Add(product);
return product;
}
public bool UpdateProduct(Product product)
{
var existingProduct = _products.FirstOrDefault(p => p.Id == product.Id);
if (existingProduct != null)
{
existingProduct.Name = product.Name;
existingProduct.Description = product.Description;
existingProduct.Price = product.Price;
existingProduct.Stock = product.Stock;
existingProduct.Category = product.Category;
return true;
}
return false;
}
public bool DeleteProduct(int id)
{
var product = _products.FirstOrDefault(p => p.Id == id);
if (product != null)
{
_products.Remove(product);
return true;
}
return false;
}
public List<string> GetCategories()
{
return _products.Select(p => p.Category).Distinct().OrderBy(c => c).ToList();
}
}
}

复制代码

5.5 创建产品列表页面

创建一个产品列表页面，使用AJAX技术实现搜索和分页功能：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductList.aspx.cs" Inherits="ProductManagement.ProductList" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品列表</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
<style>
.product-card {
transition: transform 0.3s;
height: 100%;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.product-image {
height: 200px;
object-fit: cover;
}
.product-price {
color: #e44d26;
font-weight: bold;
font-size: 1.2em;
}
.search-panel {
background-color: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
.loading {
text-align: center;
padding: 20px;
}
.no-products {
text-align: center;
padding: 40px;
color: #6c757d;
}
.pagination {
justify-content: center;
}
.product-actions {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
<Services>
<asp:ServiceReference Path="Services/ProductService.asmx" />
</Services>
</asp:ScriptManager>
<div class="container">
<h1 class="my-4">产品列表</h1>
<div class="search-panel">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="txtKeyword">关键词</label>
<asp:TextBox ID="txtKeyword" runat="server" CssClass="form-control" placeholder="输入产品名称或描述"></asp:TextBox>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ddlCategory">分类</label>
<asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-control">
<asp:ListItem Text="全部" Value=""></asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label> </label>
<div>
<asp:Button ID="btnSearch" runat="server" Text="搜索" CssClass="btn btn-primary btn-block" OnClientClick="searchProducts(); return false;" />
</div>
</div>
</div>
</div>
</div>
<div class="row" id="productList">
</div>
<div class="loading" id="loadingIndicator" style="display: none;">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">加载中...</span>
</div>
<p>正在加载产品数据...</p>
</div>
<div class="no-products" id="noProductsMessage" style="display: none;">
<h3>没有找到匹配的产品</h3>
<p>请尝试使用其他关键词或分类进行搜索</p>
</div>
<nav aria-label="Page navigation" id="paginationContainer" style="display: none;">
<ul class="pagination" id="pagination">
</ul>
</nav>
<div class="text-center mt-4">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#addProductModal">
<i class="fas fa-plus"></i> 添加新产品
</button>
</div>
</div>
<div class="modal fade" id="productDetailModal" tabindex="-1" role="dialog" aria-labelledby="productDetailModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="productDetailModalLabel">产品详情</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="productDetailContent">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="btnEditProduct">编辑产品</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addProductModal" tabindex="-1" role="dialog" aria-labelledby="addProductModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addProductModalLabel">添加新产品</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txtAddName">产品名称</label>
<input type="text" class="form-control" id="txtAddName" />
</div>
<div class="form-group">
<label for="txtAddDescription">产品描述</label>
<textarea class="form-control" id="txtAddDescription" rows="3"></textarea>
</div>
<div class="form-group">
<label for="txtAddPrice">价格</label>
<input type="number" class="form-control" id="txtAddPrice" step="0.01" />
</div>
<div class="form-group">
<label for="txtAddStock">库存</label>
<input type="number" class="form-control" id="txtAddStock" />
</div>
<div class="form-group">
<label for="txtAddCategory">分类</label>
<input type="text" class="form-control" id="txtAddCategory" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="btnSaveProduct">保存</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="editProductModal" tabindex="-1" role="dialog" aria-labelledby="editProductModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editProductModalLabel">编辑产品</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" id="txtEditId" />
<div class="form-group">
<label for="txtEditName">产品名称</label>
<input type="text" class="form-control" id="txtEditName" />
</div>
<div class="form-group">
<label for="txtEditDescription">产品描述</label>
<textarea class="form-control" id="txtEditDescription" rows="3"></textarea>
</div>
<div class="form-group">
<label for="txtEditPrice">价格</label>
<input type="number" class="form-control" id="txtEditPrice" step="0.01" />
</div>
<div class="form-group">
<label for="txtEditStock">库存</label>
<input type="number" class="form-control" id="txtEditStock" />
</div>
<div class="form-group">
<label for="txtEditCategory">分类</label>
<input type="text" class="form-control" id="txtEditCategory" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" id="btnDeleteProduct">删除</button>
<button type="button" class="btn btn-primary" id="btnUpdateProduct">更新</button>
</div>
</div>
</div>
</div>
</form>
<script src="Scripts/jquery-3.6.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script src="Scripts/fontawesome-all.min.js"></script>
<script>
// 全局变量
var currentPage = 1;
var pageSize = 6;
var totalPages = 0;
var currentKeyword = "";
var currentCategory = "";
var currentProductId = 0;
// 页面加载完成后执行
$(document).ready(function() {
// 加载分类
loadCategories();
// 加载产品列表
searchProducts();
// 绑定保存产品按钮事件
$("#btnSaveProduct").click(function() {
saveProduct();
});
// 绑定更新产品按钮事件
$("#btnUpdateProduct").click(function() {
updateProduct();
});
// 绑定删除产品按钮事件
$("#btnDeleteProduct").click(function() {
if (confirm("确定要删除这个产品吗？")) {
deleteProduct();
}
});
// 绑定编辑产品按钮事件
$("#btnEditProduct").click(function() {
// 关闭详情模态框
$("#productDetailModal").modal("hide");
// 打开编辑模态框
$("#editProductModal").modal("show");
});
});
// 加载分类
function loadCategories() {
$.ajax({
type: "POST",
url: "Services/ProductService.asmx/GetCategories",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var categories = response.d;
var ddlCategory = $("#ddlCategory");
// 清空现有选项（除了"全部"）
ddlCategory.find("option:not(:first)").remove();
// 添加分类选项
for (var i = 0; i < categories.length; i++) {
ddlCategory.append($("<option></option>").val(categories[i]).text(categories[i]));
}
},
error: function(xhr, status, error) {
console.error("加载分类失败: " + error);
}
});
}
// 搜索产品
function searchProducts(page) {
// 显示加载指示器
$("#loadingIndicator").show();
$("#productList").hide();
$("#noProductsMessage").hide();
$("#paginationContainer").hide();
// 设置当前页码
if (page) {
currentPage = page;
} else {
currentPage = 1;
}
// 获取搜索条件
currentKeyword = $("#txtKeyword").val();
currentCategory = $("#ddlCategory").val();
// 调用Web服务搜索产品
$.ajax({
type: "POST",
url: "Services/ProductService.asmx/SearchProducts",
data: JSON.stringify({
keyword: currentKeyword,
category: currentCategory,
page: currentPage,
pageSize: pageSize
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var result = response.d;
// 隐藏加载指示器
$("#loadingIndicator").hide();
if (result.Products.length > 0) {
// 显示产品列表
displayProducts(result.Products);
$("#productList").show();
// 更新分页信息
totalPages = result.TotalPages;
updatePagination(currentPage, totalPages);
$("#paginationContainer").show();
} else {
// 显示无产品消息
$("#noProductsMessage").show();
}
},
error: function(xhr, status, error) {
// 隐藏加载指示器
$("#loadingIndicator").hide();
// 显示错误消息
$("#productList").html("<div class='alert alert-danger'>加载产品失败: " + error + "</div>");
$("#productList").show();
}
});
}
// 显示产品列表
function displayProducts(products) {
var productList = $("#productList");
productList.empty();
for (var i = 0; i < products.length; i++) {
var product = products[i];
var productCard = $("<div class='col-md-4 mb-4'></div>");
var cardContent = "<div class='card product-card'>" +
"<img src='https://picsum.photos/seed/product" + product.Id + "/400/200.jpg' class='card-img-top product-image' alt='" + product.Name + "'>" +
"<div class='card-body'>" +
"<h5 class='card-title'>" + product.Name + "</h5>" +
"<p class='card-text'>" + product.Description.substring(0, 50) + "...</p>" +
"<p class='product-price'>¥" + product.Price.toFixed(2) + "</p>" +
"<div class='product-actions'>" +
"<button class='btn btn-sm btn-outline-primary' onclick='showProductDetail(" + product.Id + ")'>详情</button>" +
"<span class='text-muted'>库存: " + product.Stock + "</span>" +
"</div>" +
"</div>" +
"</div>";
productCard.append(cardContent);
productList.append(productCard);
}
}
// 更新分页控件
function updatePagination(currentPage, totalPages) {
var pagination = $("#pagination");
pagination.empty();
// 上一页按钮
var prevDisabled = currentPage === 1 ? "disabled" : "";
pagination.append("<li class='page-item " + prevDisabled + "'><a class='page-link' href='#' onclick='searchProducts(" + (currentPage - 1) + "); return false;'>上一页</a></li>");
// 页码按钮
var startPage = Math.max(1, currentPage - 2);
var endPage = Math.min(totalPages, startPage + 4);
if (endPage - startPage < 4) {
startPage = Math.max(1, endPage - 4);
}
if (startPage > 1) {
pagination.append("<li class='page-item'><a class='page-link' href='#' onclick='searchProducts(1); return false;'>1</a></li>");
if (startPage > 2) {
pagination.append("<li class='page-item disabled'><a class='page-link' href='#'>...</a></li>");
}
}
for (var i = startPage; i <= endPage; i++) {
var active = i === currentPage ? "active" : "";
pagination.append("<li class='page-item " + active + "'><a class='page-link' href='#' onclick='searchProducts(" + i + "); return false;'>" + i + "</a></li>");
}
if (endPage < totalPages) {
if (endPage < totalPages - 1) {
pagination.append("<li class='page-item disabled'><a class='page-link' href='#'>...</a></li>");
}
pagination.append("<li class='page-item'><a class='page-link' href='#' onclick='searchProducts(" + totalPages + "); return false;'>" + totalPages + "</a></li>");
}
// 下一页按钮
var nextDisabled = currentPage === totalPages ? "disabled" : "";
pagination.append("<li class='page-item " + nextDisabled + "'><a class='page-link' href='#' onclick='searchProducts(" + (currentPage + 1) + "); return false;'>下一页</a></li>");
}
// 显示产品详情
function showProductDetail(productId) {
currentProductId = productId;
// 调用Web服务获取产品详情
$.ajax({
type: "POST",
url: "Services/ProductService.asmx/GetProductById",
data: JSON.stringify({ id: productId }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var product = response.d;
var detailContent = "<div class='row'>" +
"<div class='col-md-6'>" +
"<img src='https://picsum.photos/seed/product" + product.Id + "/600/400.jpg' class='img-fluid' alt='" + product.Name + "'>" +
"</div>" +
"<div class='col-md-6'>" +
"<h3>" + product.Name + "</h3>" +
"<p class='text-muted'>分类: " + product.Category + "</p>" +
"<p class='product-price'>¥" + product.Price.toFixed(2) + "</p>" +
"<p><strong>库存:</strong> " + product.Stock + " 件</p>" +
"<p><strong>添加日期:</strong> " + new Date(product.CreatedDate).toLocaleDateString() + "</p>" +
"<h5>产品描述</h5>" +
"<p>" + product.Description + "</p>" +
"</div>" +
"</div>";
$("#productDetailContent").html(detailContent);
$("#productDetailModal").modal("show");
},
error: function(xhr, status, error) {
$("#productDetailContent").html("<div class='alert alert-danger'>加载产品详情失败: " + error + "</div>");
$("#productDetailModal").modal("show");
}
});
}
// 保存新产品
function saveProduct() {
var product = {
Name: $("#txtAddName").val(),
Description: $("#txtAddDescription").val(),
Price: parseFloat($("#txtAddPrice").val()),
Stock: parseInt($("#txtAddStock").val()),
Category: $("#txtAddCategory").val()
};
// 验证输入
if (!product.Name || !product.Description || isNaN(product.Price) || isNaN(product.Stock) || !product.Category) {
alert("请填写所有必填字段");
return;
}
// 调用Web服务保存产品
$.ajax({
type: "POST",
url: "Services/ProductService.asmx/AddProduct",
data: JSON.stringify({ product: product }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
// 关闭模态框
$("#addProductModal").modal("hide");
// 清空表单
$("#txtAddName").val("");
$("#txtAddDescription").val("");
$("#txtAddPrice").val("");
$("#txtAddStock").val("");
$("#txtAddCategory").val("");
// 刷新产品列表
searchProducts();
// 显示成功消息
alert("产品添加成功");
},
error: function(xhr, status, error) {
alert("添加产品失败: " + error);
}
});
}
// 更新产品
function updateProduct() {
var product = {
Id: parseInt($("#txtEditId").val()),
Name: $("#txtEditName").val(),
Description: $("#txtEditDescription").val(),
Price: parseFloat($("#txtEditPrice").val()),
Stock: parseInt($("#txtEditStock").val()),
Category: $("#txtEditCategory").val()
};
// 验证输入
if (!product.Name || !product.Description || isNaN(product.Price) || isNaN(product.Stock) || !product.Category) {
alert("请填写所有必填字段");
return;
}
// 调用Web服务更新产品
$.ajax({
type: "POST",
url: "Services/ProductService.asmx/UpdateProduct",
data: JSON.stringify({ product: product }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var result = response.d;
if (result.Success) {
// 关闭模态框
$("#editProductModal").modal("hide");
// 刷新产品列表
searchProducts();
// 显示成功消息
alert("产品更新成功");
} else {
alert("更新产品失败: " + result.Message);
}
},
error: function(xhr, status, error) {
alert("更新产品失败: " + error);
}
});
}
// 删除产品
function deleteProduct() {
// 调用Web服务删除产品
$.ajax({
type: "POST",
url: "Services/ProductService.asmx/DeleteProduct",
data: JSON.stringify({ id: currentProductId }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var result = response.d;
if (result.Success) {
// 关闭模态框
$("#editProductModal").modal("hide");
// 刷新产品列表
searchProducts();
// 显示成功消息
alert("产品删除成功");
} else {
alert("删除产品失败: " + result.Message);
}
},
error: function(xhr, status, error) {
alert("删除产品失败: " + error);
}
});
}
// 当产品详情模态框关闭时，重置当前产品ID
$("#productDetailModal").on("hidden.bs.modal", function() {
currentProductId = 0;
});
// 当编辑产品模态框打开时，填充表单数据
$("#productDetailModal").on("hidden.bs.modal", function() {
if (currentProductId > 0) {
// 调用Web服务获取产品详情
$.ajax({
type: "POST",
url: "Services/ProductService.asmx/GetProductById",
data: JSON.stringify({ id: currentProductId }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var product = response.d;
$("#txtEditId").val(product.Id);
$("#txtEditName").val(product.Name);
$("#txtEditDescription").val(product.Description);
$("#txtEditPrice").val(product.Price);
$("#txtEditStock").val(product.Stock);
$("#txtEditCategory").val(product.Category);
},
error: function(xhr, status, error) {
alert("加载产品详情失败: " + error);
}
});
}
});
</script>
</body>
</html>

复制代码

5.6 创建Web服务

创建一个ASP.NET Web服务，用于处理AJAX请求：

// Services/ProductService.asmx.cs
using System;
using System.Web.Services;
using System.Collections.Generic;
using ProductManagement.Models;
using ProductManagement.DAL;
namespace ProductManagement.Services
{
/// <summary>
/// ProductService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class ProductService : System.Web.Services.WebService
{
private ProductRepository _repository = new ProductRepository();
[WebMethod]
public List<Product> GetAllProducts()
{
return _repository.GetAllProducts();
}
[WebMethod]
public Product GetProductById(int id)
{
return _repository.GetProductById(id);
}
[WebMethod]
public SearchResult SearchProducts(string keyword, string category, int page, int pageSize)
{
var products = _repository.SearchProducts(keyword, category);
var totalCount = products.Count;
var totalPages = (int)Math.Ceiling((double)totalCount / pageSize);
var pagedProducts = products
.Skip((page - 1) * pageSize)
.Take(pageSize)
.ToList();
return new SearchResult
{
Products = pagedProducts,
TotalCount = totalCount,
TotalPages = totalPages,
CurrentPage = page,
PageSize = pageSize
};
}
[WebMethod]
public Product AddProduct(Product product)
{
return _repository.AddProduct(product);
}
[WebMethod]
public OperationResult UpdateProduct(Product product)
{
bool success = _repository.UpdateProduct(product);
return new OperationResult
{
Success = success,
Message = success ? "产品更新成功" : "产品更新失败"
};
}
[WebMethod]
public OperationResult DeleteProduct(int id)
{
bool success = _repository.DeleteProduct(id);
return new OperationResult
{
Success = success,
Message = success ? "产品删除成功" : "产品删除失败"
};
}
[WebMethod]
public List<string> GetCategories()
{
return _repository.GetCategories();
}
}
public class SearchResult
{
public List<Product> Products { get; set; }
public int TotalCount { get; set; }
public int TotalPages { get; set; }
public int CurrentPage { get; set; }
public int PageSize { get; set; }
}
public class OperationResult
{
public bool Success { get; set; }
public string Message { get; set; }
}
}

复制代码

5.7 实现AJAX功能

在上面的产品列表页面中，我们已经实现了以下AJAX功能：

1. 产品搜索：用户可以输入关键词和选择分类进行搜索，搜索结果通过AJAX异步加载，无需整页刷新。
2. 分页功能：产品列表支持分页，点击分页按钮时，只更新产品列表部分，不刷新整个页面。
3. 产品详情：点击产品卡片的”详情”按钮，通过AJAX加载产品详细信息并在模态框中显示。
4. 产品管理：支持添加、编辑和删除产品，所有操作都通过AJAX异步完成，操作完成后自动刷新产品列表。

产品搜索：用户可以输入关键词和选择分类进行搜索，搜索结果通过AJAX异步加载，无需整页刷新。

分页功能：产品列表支持分页，点击分页按钮时，只更新产品列表部分，不刷新整个页面。

产品详情：点击产品卡片的”详情”按钮，通过AJAX加载产品详细信息并在模态框中显示。

产品管理：支持添加、编辑和删除产品，所有操作都通过AJAX异步完成，操作完成后自动刷新产品列表。

5.8 用户体验优化

为了进一步提升用户体验，我们还可以添加以下优化：

1. 加载指示器：在AJAX请求期间显示加载动画，让用户知道系统正在处理他们的请求。
2. 表单验证：在客户端添加表单验证，减少不必要的服务器请求。
3. 错误处理：添加友好的错误提示，帮助用户理解发生了什么问题。
4. 动画效果：添加平滑的过渡动画，使界面变化更加自然。
5. 响应式设计：确保应用在不同设备上都能良好显示。

加载指示器：在AJAX请求期间显示加载动画，让用户知道系统正在处理他们的请求。

表单验证：在客户端添加表单验证，减少不必要的服务器请求。

错误处理：添加友好的错误提示，帮助用户理解发生了什么问题。

动画效果：添加平滑的过渡动画，使界面变化更加自然。

响应式设计：确保应用在不同设备上都能良好显示。

6. 最佳实践和注意事项

6.1 性能优化

1. 减少页面大小：禁用不必要的ViewState使用ScriptManager的ScriptMode=“Release”属性压缩和合并JavaScript和CSS文件
2. 禁用不必要的ViewState
3. 使用ScriptManager的ScriptMode=“Release”属性
4. 压缩和合并JavaScript和CSS文件

• 禁用不必要的ViewState
• 使用ScriptManager的ScriptMode=“Release”属性
• 压缩和合并JavaScript和CSS文件

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release">
<CompositeScript>
<Scripts>
<asp:ScriptReference Path="Scripts/jquery-3.6.0.min.js" />
<asp:ScriptReference Path="Scripts/bootstrap.min.js" />
</Scripts>
</CompositeScript>
</asp:ScriptManager>

复制代码

1. 优化AJAX请求：减少AJAX请求的数据量使用GET请求获取数据，POST请求提交数据实现请求缓存和防抖动
2. 减少AJAX请求的数据量
3. 使用GET请求获取数据，POST请求提交数据
4. 实现请求缓存和防抖动

• 减少AJAX请求的数据量
• 使用GET请求获取数据，POST请求提交数据
• 实现请求缓存和防抖动

// 防抖动函数
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
// 使用防抖动优化搜索输入
$("#txtKeyword").on("input", debounce(function() {
searchProducts();
}, 300));

复制代码

1. 服务器端优化：实现数据缓存使用分页减少数据传输量优化数据库查询
2. 实现数据缓存
3. 使用分页减少数据传输量
4. 优化数据库查询

• 实现数据缓存
• 使用分页减少数据传输量
• 优化数据库查询

// 使用缓存优化分类数据
[WebMethod]
public List<string> GetCategories()
{
string cacheKey = "ProductCategories";
if (HttpContext.Current.Cache[cacheKey] == null)
{
var categories = _repository.GetCategories();
HttpContext.Current.Cache.Insert(cacheKey, categories, null,
DateTime.Now.AddHours(1), System.Web.Caching.Cache.NoSlidingExpiration);
return categories;
}
return (List<string>)HttpContext.Current.Cache[cacheKey];
}

复制代码

6.2 安全考虑

1. 防止跨站脚本攻击（XSS）：对用户输入进行验证和编码使用ASP.NET的请求验证功能
2. 对用户输入进行验证和编码
3. 使用ASP.NET的请求验证功能

• 对用户输入进行验证和编码
• 使用ASP.NET的请求验证功能

// 在Web.config中启用请求验证
<configuration>
<system.web>
<pages validateRequest="true" />
<httpRuntime requestValidationMode="4.5" />
</system.web>
</configuration>

复制代码

1. 防止跨站请求伪造（CSRF）：使用ASP.NET的AntiForgeryToken实现请求来源验证
2. 使用ASP.NET的AntiForgeryToken
3. 实现请求来源验证

• 使用ASP.NET的AntiForgeryToken
• 实现请求来源验证

// 在页面中添加AntiForgeryToken
<%@ Register Assembly="System.Web.Helpers, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.Helpers" TagPrefix="asp" %>
<asp:AntiForgeryToken ID="antiForgeryToken" runat="server" />

复制代码

// 在AJAX请求中包含AntiForgeryToken
function getAntiForgeryToken() {
var token = $("input[name='__RequestVerificationToken']").val();
return { __RequestVerificationToken: token };
}
$.ajax({
type: "POST",
url: "Services/ProductService.asmx/AddProduct",
data: JSON.stringify({
__RequestVerificationToken: getAntiForgeryToken().__RequestVerificationToken,
product: product
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
// 处理响应
}
});

复制代码

1. 防止SQL注入：使用参数化查询使用ORM框架
2. 使用参数化查询
3. 使用ORM框架

• 使用参数化查询
• 使用ORM框架

// 使用参数化查询
public List<Product> SearchProducts(string keyword, string category)
{
var query = "SELECT * FROM Products WHERE 1=1";
var parameters = new List<SqlParameter>();
if (!string.IsNullOrEmpty(keyword))
{
query += " AND (Name LIKE @keyword OR Description LIKE @keyword)";
parameters.Add(new SqlParameter("@keyword", "%" + keyword + "%"));
}
if (!string.IsNullOrEmpty(category))
{
query += " AND Category = @category";
parameters.Add(new SqlParameter("@category", category));
}
// 执行查询并返回结果
// ...
}

复制代码

6.3 可维护性考虑

1. 代码组织：分离关注点（UI、业务逻辑、数据访问）使用一致的命名约定添加适当的注释
2. 分离关注点（UI、业务逻辑、数据访问）
3. 使用一致的命名约定
4. 添加适当的注释
5. 错误处理：实现全局错误处理记录错误日志提供友好的错误消息
6. 实现全局错误处理
7. 记录错误日志
8. 提供友好的错误消息

代码组织：

• 分离关注点（UI、业务逻辑、数据访问）
• 使用一致的命名约定
• 添加适当的注释

错误处理：

• 实现全局错误处理
• 记录错误日志
• 提供友好的错误消息

// 全局AJAX错误处理
$(document).ajaxError(function(event, jqXHR, settings, thrownError) {
console.error("AJAX错误:", thrownError);
// 显示友好的错误消息
if (jqXHR.status === 404) {
alert("请求的资源不存在");
} else if (jqXHR.status === 500) {
alert("服务器内部错误，请稍后再试");
} else {
alert("发生错误: " + thrownError);
}
});

复制代码

1. 测试：编写单元测试进行集成测试执行用户界面测试
2. 编写单元测试
3. 进行集成测试
4. 执行用户界面测试

• 编写单元测试
• 进行集成测试
• 执行用户界面测试

// 使用NUnit进行单元测试
[TestFixture]
public class ProductRepositoryTests
{
private ProductRepository _repository;
[SetUp]
public void Setup()
{
_repository = new ProductRepository();
}
[Test]
public void GetAllProducts_ShouldReturnAllProducts()
{
// Arrange
// Act
var products = _repository.GetAllProducts();
// Assert
Assert.IsNotNull(products);
Assert.IsTrue(products.Count > 0);
}
[Test]
public void GetProductById_WithValidId_ShouldReturnProduct()
{
// Arrange
int validId = 1;
// Act
var product = _repository.GetProductById(validId);
// Assert
Assert.IsNotNull(product);
Assert.AreEqual(validId, product.Id);
}
}

复制代码

7. 总结

本文详细介绍了如何在Web Forms应用中整合AJAX技术，以提升用户体验而不放弃Web Forms的便利性。我们从基础概念出发，逐步深入到实战案例，展示了多种实现AJAX的方法，包括使用ASP.NET AJAX框架、jQuery AJAX和PageMethods。

通过本文的学习，你应该能够：

1. 理解Web Forms和AJAX的基本概念和工作原理
2. 掌握在Web Forms中实现AJAX的多种方法
3. 能够构建一个完整的AJAX增强的Web Forms应用
4. 了解性能优化、安全考虑和可维护性方面的最佳实践

Web Forms与AJAX的整合不是一种非此即彼的选择，而是一种互补的策略。通过合理地使用AJAX技术，我们可以在保留Web Forms开发便利性的同时，显著提升用户体验，使传统Web应用焕发新的活力。

随着Web技术的不断发展，Web Forms可能不再是最新、最热门的技术，但对于许多现有应用和企业环境来说，它仍然是一个可靠、高效的选择。通过引入AJAX，我们可以延长这些应用的生命周期，为用户提供更好的体验，同时也为开发者提供更广阔的技术视野。

希望本文能够帮助你更好地理解和应用Web Forms与AJAX的整合技术，为你的项目带来实质性的改进。

	通知：关于部分勋章领取条件及购买价格调整的通知	05-18 21:22
	通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！	10-23 09:31

活动公告

Web Forms与AJAX整合实战从零开始学习如何在不放弃Web Forms便利性的同时引入AJAX提升用户体验

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

塔罗

立华奏

站长推荐 /1

友情链接

Tencent QQ