Bootstrap5浮动标签在ASP.NET UpdatePanel内刷新后失效问题（C#）

UpdatePanel局部刷新后，Bootstrap浮动标签失效是因为组件初始化逻辑仅在页面首次加载时执行，新渲染的DOM元素不会自动触发初始化，导致标签一直停留在占位符状态。

修复步骤 #

1. 修正浮动标签结构
   先确保你的标签结构完全符合Bootstrap 5的规范，正确结构如下：

   <div class="form-floating">
     <asp:TextBox ID="txtProductCode" runat="server" CssClass="form-control" ReadOnly="true" ClientIDMode="Static"></asp:TextBox>
     <label for="txtProductCode">Product ID</label>
   </div>
   

   注意：

   • 输入框和标签必须嵌套在form-floating容器内
   • 标签的for属性要和TextBox的客户端ID匹配，添加ClientIDMode="Static"可避免ASP.NET自动修改控件ID

2. UpdatePanel刷新后重新初始化组件
   添加JavaScript代码监听UpdatePanel的结束请求事件，在局部刷新完成后重新触发浮动标签的初始化：

   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
     // 遍历所有浮动标签容器
     document.querySelectorAll('.form-floating').forEach(container => {
       const input = container.querySelector('.form-control');
       // 若输入框已有内容，手动触发input事件强制标签上浮
       if (input.value.trim()) {
         input.dispatchEvent(new Event('input'));
       }
       // 重新初始化Bootstrap浮动标签组件
       new bootstrap.FloatingLabel(container);
     });
   });
   

3. ReadOnly输入框的特殊处理
   由于你的TextBox设置了ReadOnly="true"，默认输入事件不会自动触发，上述代码中手动触发input事件，能确保Bootstrap检测到输入框内的内容，让标签正常上浮。

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