ASP.NET中点击LinkButton时loadingDiv无法显示的问题求助

你遇到的核心问题是：后端代码执行Response.Redirect时，会直接向客户端返回跳转响应，服务器根本不会把更新后的loadingDiv状态渲染到页面中返回给浏览器。不管你是设置Visible=true还是display:block，这些修改都不会被客户端接收到，自然看不到加载效果。

要实现“先显示加载动画，再跳转”的效果，必须用前端JavaScript控制加载显示，再执行跳转或后端逻辑，具体分两种场景：

场景1：按钮点击不需要执行复杂后端逻辑 #

直接用前端JS显示加载动画，再跳转页面：

1. 修改loadingDiv的初始状态（前端控制隐藏） #

<div id="loadingDiv" runat="server" style="display:none;">
    <div class="lds"><div></div><div></div><div></div></div>
</div>

2. 修改LinkButton，用OnClientClick触发前端函数，取消默认回发 #

<asp:LinkButton ID="btnNew" runat="server" CssClass="btnAgent2" Width="150px" 
    OnClientClick="showLoadingAndRedirect(); return false;">
    <span class='<%=Resources.Resource.LangParam2%>'><%=Resources.Resource.NewSuperSenior%></span>
</asp:LinkButton>

3. 添加JavaScript函数 #

<script type="text/javascript">
function showLoadingAndRedirect() {
    // 立即显示加载动画
    document.getElementById('<%= loadingDiv.ClientID %>').style.display = 'block';
    // 可选：添加短延迟，确保加载动画有足够时间渲染（根据你的动画时长调整）
    setTimeout(() => {
        window.location.href = '../_SH1/SSSet.aspx';
    }, 500);
}
</script>

场景2：按钮点击需要执行后端业务逻辑 #

如果必须先执行后端逻辑，再显示加载并跳转，需要用AJAX调用后端方法：

1. 前端修改LinkButton #

<asp:LinkButton ID="btnNew" runat="server" CssClass="btnAgent2" Width="150px" 
    OnClientClick="handleBtnClick(); return false;">
    <span class='<%=Resources.Resource.LangParam2%>'><%=Resources.Resource.NewSuperSenior%></span>
</asp:LinkButton>

2. 添加AJAX处理的JavaScript（用jQuery示例） #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function handleBtnClick() {
    // 先显示加载动画
    document.getElementById('<%= loadingDiv.ClientID %>').style.display = 'block';
    
    // AJAX调用后端业务逻辑
    $.ajax({
        type: "POST",
        url: '<%= ResolveUrl("~/当前页面路径.aspx/ExecuteBtnNewLogic") %>', // 替换为你的页面路径
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function() {
            // 逻辑执行成功后跳转
            window.location.href = '../_SH1/SSSet.aspx';
        },
        error: function(xhr, status, err) {
            // 处理错误，隐藏加载动画
            document.getElementById('<%= loadingDiv.ClientID %>').style.display = 'none';
            alert('操作失败：' + err);
        }
    });
}
</script>

3. 后端添加可被AJAX调用的方法 #

在你的页面后台代码中添加WebMethod：

using System.Web.Services;

[WebMethod]
public static void ExecuteBtnNewLogic()
{
    // 这里放原来btnNew_Click中的业务逻辑（去掉Response.Redirect）
}

后端的Response.Redirect会中断页面渲染流程，直接发送跳转指令，所以任何后端对页面元素的修改都无法传递到客户端。只有通过前端先操作DOM显示加载动画，再处理跳转或异步调用后端逻辑，才能实现你想要的效果。

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