在UpdatePanel中TreeView加载完成后隐藏Div

你遇到的核心问题是UpdatePanel的局部异步回发不会触发整页的document加载事件，所以你原来写的$(document).load或者$(document).ready只会在页面首次加载时执行，而不会在用户点击触发UpdatePanel刷新后再次运行，导致Loading Div一直显示。

下面给你两个可靠的解决方案，适配Telerik RadTreeView和UpdatePanel的场景：

方案1：利用RadTreeView的客户端加载完成事件 #

RadTreeView自带OnClientLoad事件，这个事件会在控件完全绑定数据并渲染完成后触发，正好适合用来隐藏Loading Div：

1. 先给RadTreeView添加OnClientLoad属性：

<telerik:RadTreeView ID="RadTreeView1" runat="server" 
    Height="100%" 
    CssClass="noScroll" 
    CausesValidation="false" 
    EnableViewState="true" 
    OnNodeClick="RadTreeView1_NodeClick" 
    OnNodeDataBound="RadTreeView1_NodeDataBound"
    OnClientLoad="onTreeLoaded"> <!-- 添加这个事件绑定 -->
</telerik:RadTreeView>

2. 然后修改JavaScript代码，实现事件处理函数：

function onTreeLoaded(sender, args) {
    const loadDiv = document.getElementById("loadDIV");
    if (loadDiv) {
        // 用display:none完全隐藏元素（不占用页面空间），比visibility:hidden体验更好
        loadDiv.style.display = "none";
    }
}

方案2：监听UpdatePanel的异步回发完成事件 #

如果你的场景中还有其他控件会触发UpdatePanel刷新，或者想统一处理回发完成动作，可以使用ASP.NET的PageRequestManager监听endRequest事件：

// 页面加载时注册监听
$(function() {
    const prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function(sender, args) {
        // 异步回发完成后隐藏Loading Div
        const loadDiv = document.getElementById("loadDIV");
        if (loadDiv) {
            loadDiv.style.display = "none";
        }
    });
});

为什么原来的代码不生效？ #

• $(document).load()是已废弃的写法，且仅在整页所有资源加载完成时触发一次，UpdatePanel的局部刷新不会触发它。
• $(document).ready()同样只在页面首次加载完成时执行，异步回发后不会重新运行。

另外要注意：如果Loading Div在UpdatePanel内部，异步回发时它会被重新渲染，所以确保隐藏逻辑能在每次回发完成后执行到。

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