为何ASPX页面中使用async/await会导致UI冻结？

你遇到的核心问题是没理清ASP.NET Web Forms的服务器端事件模型和桌面应用（比如WPF）UI异步逻辑的本质区别：

1. 服务器端事件的本质：ASPX按钮的Click事件是在服务器端触发的，哪怕用了async/await，整个流程还是：

   • 客户端点击按钮，发起页面回发请求到服务器
   • 服务器执行btnFileUpload_Click方法：先设置btnFileUpload.Enabled = False，然后await Task.Delay(5000)（此时服务器线程会被释放，但请求仍处于挂起状态）
   • 延迟结束后，服务器再设置btnFileUpload.Enabled = True，生成新的HTML页面返回给客户端
   • 客户端收到响应后才会更新页面状态

   所以你在服务器端设置的禁用状态，要等到整个请求完成后才会传到客户端，这时候延迟已经结束，按钮又被设为启用了，自然看不到禁用效果；而且在服务器处理请求的5秒内，客户端浏览器一直在等待响应，页面处于不可交互状态，这就是你觉得UI阻塞的原因。

2. Task.Delay的作用：它确实是异步非阻塞的，但仅在服务器端有效——释放服务器线程处理其他请求，但对客户端页面的交互没有任何影响，因为客户端根本不知道服务器端的异步操作，只是在等待整个回发请求的结果。

要实现“点击按钮后立即禁用，任务完成后启用”的效果，必须把禁用/启用逻辑放在客户端，同时用AJAX发起异步请求处理服务器端任务，流程如下：

1. 用JavaScript在按钮点击时立即禁用按钮
2. 通过AJAX调用服务器端的异步方法（比如WebMethod）处理上传任务
3. AJAX请求完成（成功/失败）后，在客户端重新启用按钮

示例代码 #

服务器端（添加WebMethod） #

Imports System.Web.Services

Partial Class YourPage
    Inherits System.Web.UI.Page

    <WebMethod>
    Public Shared Async Function ProcessUpload() As Task(Of String)
        ' 替换为你的实际上传逻辑
        Await Task.Delay(5000)
        Return "上传完成"
    End Function
End Class

客户端（ASPX页面添加JavaScript） #

<asp:Button ID="btnFileUpload" runat="server" Text="上传" OnClientClick="return handleUpload();" />
<asp:Label ID="lblResponse" runat="server"></asp:Label>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function handleUpload() {
    var $btn = $('#<%= btnFileUpload.ClientID %>');
    var $lbl = $('#<%= lblResponse.ClientID %>');
    
    // 立即禁用按钮，更新提示
    $btn.prop('disabled', true);
    $lbl.text('处理中...');
    
    // 发起AJAX异步请求
    $.ajax({
        type: "POST",
        url: "<%= Page.ResolveUrl("~/YourPage.aspx/ProcessUpload") %>",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            $lbl.text(response.d);
        },
        error: function(xhr, status, error) {
            $lbl.text('上传失败：' + error);
        },
        complete: function() {
            // 无论成功失败，都重新启用按钮
            $btn.prop('disabled', false);
        }
    });
    
    // 返回false阻止默认的页面回发
    return false;
}
</script>

关键说明 #

• OnClientClick="return handleUpload();"：点击按钮时先执行客户端JavaScript，返回false阻止默认的页面回发，避免整个页面刷新等待
• 客户端用$.ajax发起异步请求，服务器端用[WebMethod]标记的静态方法处理任务，服务器端的异步操作不会阻塞客户端页面
• 在AJAX的complete回调中启用按钮，确保无论请求成功还是失败，按钮都会恢复可用状态

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