调用PUT API更新数据状态时如何在等待响应期间展示加载页

实现方案 #

你当前写的是服务端事件代码，无法在服务端执行API请求的过程中向前端输出加载状态——因为Web Forms的按钮点击触发的是整页回发流程，前端会等待服务端返回完整响应才会更新页面，所以加载状态需要在触发回发的前端环节提前实现，具体步骤如下：

步骤1：添加前端加载遮罩（默认隐藏） #

在页面的.aspx文件中加入加载层的样式和DOM结构：

<style>
/* 加载遮罩样式 */
.loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
}
</style>

<!-- 加载层DOM -->
<div class="loading-mask" id="loadingMask">
    <div>正在批量更新数据，请稍候...</div>
</div>

步骤2：给批量更新按钮绑定前端点击事件 #

找到你的更新按钮控件，添加OnClientClick属性，点击时先显示加载遮罩再执行服务端回发：

<asp:Button ID="btnUpdateSelectedItem" runat="server" 
            Text="批量更新选中状态" 
            OnClick="btnUpdateSelectedItem_Click" 
            OnClientClick="document.getElementById('loadingMask').style.display = 'flex'" />

如果按钮点击有前端校验逻辑，也可以把显示遮罩的逻辑写在校验通过之后。

步骤3：异常场景隐藏加载层（可选） #

如果请求出错触发前端alert，需要在报错后把加载层隐藏，修改你现有服务端的报错脚本即可：

ScriptManager.RegisterClientScriptBlock(this, GetType(), "alertMessage", 
    @"document.getElementById('loadingMask').style.display = 'none';
    alert('Unexpected error happened, please contact system administrator.');", true);

其他可选方案 #

如果你确实需要单独的加载页，可以在点击按钮时先跳转到一个显示加载状态的中间页，在中间页的服务端执行API更新逻辑，执行完成后再跳转回列表页，不过这种方案体验不如当前页遮罩流畅，不推荐。

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