如何在UpdatePanel刷新后保持文本选中状态

我来给你捋捋这个问题的核心：当Timer触发UpdatePanel异步刷新时，UpdatePanel里的DOM元素会被重新渲染，原来的选中状态是绑定在旧的DOM节点上的，新节点一替换，选中状态自然就没了。所以咱们的思路就是刷新前先把选中的位置记下来，刷新完成后再重新选中对应的文本。

下面是具体的实现步骤和代码：

1. 完善服务器端代码 #

先把你提供的代码补全，确保Timer和UpdatePanel的配置正确：

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick"></asp:Timer>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
        <ContentTemplate>
            <!-- 给div设置固定ID，方便JS获取 -->
            <div id="targetDiv" runat="server">Hello world</div>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

2. 编写客户端JavaScript逻辑 #

利用ASP.NET AJAX的PageRequestManager事件，在刷新前后分别记录和恢复选中状态：

// 全局变量保存选中的范围信息
var savedSelection = null;
// 目标div的ID，和上面服务器端的ID对应
var targetDivId = 'targetDiv';

// 监听UpdatePanel开始异步请求的事件——此时记录选中状态
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args) {
    const targetDiv = document.getElementById(targetDivId);
    if (!targetDiv) return;

    const selection = window.getSelection();
    // 检查选中的内容是否在目标div内部
    if (selection.rangeCount > 0 && targetDiv.contains(selection.anchorNode)) {
        const range = selection.getRangeAt(0);
        // 记录相对于目标div文本节点的起始和结束偏移量
        savedSelection = {
            startOffset: range.startOffset,
            endOffset: range.endOffset
        };
    } else {
        // 如果选中的不是目标div里的内容，就清空记录
        savedSelection = null;
    }
});

// 监听UpdatePanel异步请求结束的事件——此时恢复选中状态
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {
    const targetDiv = document.getElementById(targetDivId);
    if (!targetDiv || !savedSelection) return;

    // 加个短暂延迟，确保UpdatePanel的DOM已经完全更新完成
    setTimeout(() => {
        const selection = window.getSelection();
        const range = document.createRange();
        // 假设目标div只有一个文本节点（就是你的"Hello world"），如果有多个节点需要调整逻辑
        const textNode = targetDiv.firstChild;
        
        if (textNode) {
            range.setStart(textNode, savedSelection.startOffset);
            range.setEnd(textNode, savedSelection.endOffset);
            // 先清除现有选中，再添加我们的范围
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }, 100);
});

一些注意事项 #

• 如果你的div里面有多个子元素（比如多个文本节点或嵌套标签），上面的基础逻辑就不够用了，需要额外记录选中节点的层级路径，再在恢复时找到对应的节点。不过针对你当前的"Hello world"单文本节点场景，上面的代码完全够用。
• 延迟时间（100ms）可以根据实际页面复杂度调整，确保DOM更新完成后再执行恢复逻辑。
• 要确保页面已经正确加载了ASP.NET AJAX的脚本，也就是必须有ScriptManager控件，这你已经配置了，没问题。

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