如何在ASP.NET WebForms .NET 4.8中实现加载进度效果

下面提供两种和你Blazor逻辑一致的实现方案，都是异步加载数据时显示Loading...文本，加载完成后展示数据：

方案一：使用UpdatePanel + UpdateProgress（服务器端异步回发） #

利用WebForms内置的AJAX控件快速实现无刷新异步加载，自动关联加载状态显示：

ASPX页面代码 #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmployeeDirectory.aspx.cs" Inherits="WebFormsDemo.EmployeeDirectory" %>
<%@ Register Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Employee Directory</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
        
        <!-- 加载状态提示 -->
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <h3>Loading...</h3>
            </ProgressTemplate>
        </asp:UpdateProgress>

        <h1>Employee Directory</h1>

        <!-- 包裹需要异步刷新的内容 -->
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Repeater ID="rptEmployees" runat="server">
                    <ItemTemplate>
                        <h3><%# Eval("FirstName") %> <%# Eval("LastName") %></h3>
                    </ItemTemplate>
                </asp:Repeater>
            </ContentTemplate>
            <Triggers>
                <!-- 页面加载时触发异步回发 -->
                <asp:AsyncPostBackTrigger ControlID="btnLoad" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>

        <!-- 自动触发加载的隐藏按钮 -->
        <asp:Button ID="btnLoad" runat="server" Text="Load Employees" OnClick="btnLoad_Click" Style="display:none;" />
    </form>

    <script>
        // 页面加载完成后自动触发数据加载，模拟Blazor的初始化逻辑
        window.onload = function() {
            document.getElementById('<%= btnLoad.ClientID %>').click();
        };
    </script>
</body>
</html>

后台代码（EmployeeDirectory.aspx.cs） #

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Web.UI;

namespace WebFormsDemo
{
    public partial class EmployeeDirectory : Page
    {
        protected async void btnLoad_Click(object sender, EventArgs e)
        {
            // 异步获取数据，对应Blazor中的GetEmployeesCacheAsync
            var employees = await SampleDataAccess.GetEmployeesCacheAsync();
            rptEmployees.DataSource = employees;
            rptEmployees.DataBind();
        }
    }

    // 模拟数据访问类
    public static class SampleDataAccess
    {
        public static async Task<List<EmployeeModel>> GetEmployeesCacheAsync()
        {
            // 模拟异步请求延迟
            await Task.Delay(2000);
            return new List<EmployeeModel>
            {
                new EmployeeModel { FirstName = "John", LastName = "Doe" },
                new EmployeeModel { FirstName = "Jane", LastName = "Smith" },
                new EmployeeModel { FirstName = "Bob", LastName = "Johnson" }
            };
        }
    }

    public class EmployeeModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

方案二：前端AJAX + WebMethod（纯异步前端控制） #

这种方式更贴近Blazor的异步逻辑，完全通过JavaScript控制加载状态和数据渲染：

ASPX页面代码 #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmployeeDirectoryAjax.aspx.cs" Inherits="WebFormsDemo.EmployeeDirectoryAjax" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Employee Directory</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 页面初始化时加载数据
            loadEmployees();
        });

        function loadEmployees() {
            // 显示加载状态，隐藏列表容器
            $('#loading').show();
            $('#employeeList').hide();

            // AJAX调用后台WebMethod
            $.ajax({
                type: "POST",
                url: "EmployeeDirectoryAjax.aspx/GetEmployeesCache",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    // 隐藏加载状态，渲染并显示数据
                    $('#loading').hide();
                    $('#employeeList').show();
                    
                    var html = '';
                    $.each(response.d, function(index, emp) {
                        html += `<h3>${emp.FirstName} ${emp.LastName}</h3>`;
                    });
                    $('#employeeList').html(html);
                },
                error: function() {
                    $('#loading').hide();
                    $('#employeeList').html('<h3>加载失败，请重试</h3>');
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Employee Directory</h1>

        <!-- 加载状态提示 -->
        <div id="loading" style="display:none;">
            <h3>Loading...</h3>
        </div>

        <!-- 员工列表容器 -->
        <div id="employeeList"></div>
    </form>
</body>
</html>

后台代码（EmployeeDirectoryAjax.aspx.cs） #

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Web.Services;

namespace WebFormsDemo
{
    public partial class EmployeeDirectoryAjax : System.Web.UI.Page
    {
        [WebMethod]
        public static async Task<List<EmployeeModel>> GetEmployeesCache()
        {
            // 模拟异步数据请求
            await Task.Delay(2000);
            return new List<EmployeeModel>
            {
                new EmployeeModel { FirstName = "John", LastName = "Doe" },
                new EmployeeModel { FirstName = "Jane", LastName = "Smith" },
                new EmployeeModel { FirstName = "Bob", LastName = "Johnson" }
            };
        }
    }

    public class EmployeeModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

方案说明 #

• 方案一适合传统WebForms开发，依赖内置控件，无需编写大量JS，快速实现需求。
• 方案二更灵活，完全由前端控制加载逻辑，和Blazor的异步模式更接近，适合需要自定义加载UI的场景。

内容的提问来源于stack exchange，提问作者Rod