ASPX WebForm中UpdatePanel内Bootstrap Toast无法自动隐藏的解决方法

问题根源在于UpdatePanel局部刷新后，动态生成的Toast元素未被Bootstrap JavaScript初始化。Bootstrap默认仅在页面首次加载时初始化组件，局部刷新新增的DOM元素不会自动触发初始化，导致data-bs-autohide等属性失效。

以下是具体修复方案：

1. 修改前台页面（page.aspx） #

添加ScriptManager并注册UpdatePanel结束请求的监听脚本，用于在局部刷新后手动初始化Toast：

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <script type="text/javascript">
        // 监听UpdatePanel局部刷新完成事件
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
            // 初始化所有未被标记的Toast元素
            document.querySelectorAll('.toast:not(.toast-initialized)').forEach(function (toastEl) {
                toastEl.classList.add('toast-initialized');
                // 手动初始化Toast并配置自动隐藏
                const toast = new bootstrap.Toast(toastEl, {
                    autohide: true,
                    delay: 3000
                });
                toast.show();
            });
        });
    </script>
    <div class="container body-content pt-3 mb-3">
        <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="col-md-12">
                    <div runat="server" id="alertParent" class="toast-container position-fixed top-0 end-0 p-3">
                    </div>
                    <asp:Button ID="Button1" CssClass="btn btn-primary" CausesValidation="false" OnClick="Button1_Click" runat="server" Text="Show" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

2. 修改后台代码（page.aspx.cs） #

• 给每个Toast元素添加唯一ID，避免重复
• 将关闭按钮从<span>改为<button>（符合Bootstrap组件规范，确保关闭功能正常）
• 移除默认的hide类，由JS控制显示：

protected void ShowAlertMessage(string tstr, string Header = "")
{
    try
    {
        alertParent.Visible = true;
        alertParent.Style.Add("z-index", "3");

        var div = new HtmlGenericControl("div");
        // 生成唯一ID，避免DOM元素冲突
        div.ID = $"toast_{Guid.NewGuid():N}";
        div.Attributes["role"] = "alert";
        div.Attributes["aria-live"] = "assertive";
        div.Attributes["aria-atomic"] = "true";
        // 保留data属性，JS初始化时会自动读取
        div.Attributes["data-bs-autohide"] = "true";
        div.Attributes["data-bs-delay"] = "3000";

        var Child_div = new HtmlGenericControl("div");
        Child_div.Attributes["class"] = "toast-header";

        var Sub_Child_1 = new HtmlGenericControl("strong");
        Sub_Child_1.Attributes["class"] = "me-auto";
        Sub_Child_1.InnerHtml = string.IsNullOrEmpty(Header) ? "提示" : Header;

        // 关闭按钮改为button类型，符合Bootstrap规范
        var Sub_Child_2 = new HtmlGenericControl("button");
        Sub_Child_2.Attributes["type"] = "button";
        Sub_Child_2.Attributes["class"] = "btn-close";
        Sub_Child_2.Attributes["data-bs-dismiss"] = "toast";
        Sub_Child_2.Attributes["aria-label"] = "Close";

        Child_div.Controls.Add(Sub_Child_1);
        Child_div.Controls.Add(Sub_Child_2);

        var Child_div_2 = new HtmlGenericControl("div");
        Child_div_2.Attributes["class"] = "toast-body";

        div.Controls.Add(Child_div);
        div.Controls.Add(Child_div_2);

        if (string.IsNullOrEmpty(tstr))
            return;

        string[] words = tstr.Split('_');
        if (words.Length < 2)
            return;
        string sFlag = words[0];
        string smessage = words[1];
        
        // 设置Toast样式，移除hide类
        switch (sFlag)
        {
            case "warning":
                div.Attributes["class"] = "toast fade text-bg-warning";
                Child_div_2.InnerHtml = smessage;
                break;
            case "danger":
                div.Attributes["class"] = "toast fade text-bg-danger";
                Child_div_2.InnerHtml = smessage;
                break;
            case "success":
                div.Attributes["class"] = "toast fade text-bg-success";
                Child_div_2.InnerHtml = smessage;
                break;
            case "primary":
                div.Attributes["class"] = "toast fade text-bg-primary";
                Child_div_2.InnerHtml = smessage;
                break;
            case "info":
                div.Attributes["class"] = "toast fade text-bg-info";
                Child_div_2.InnerHtml = smessage;
                break;
            default:
                div.Attributes["class"] = "toast fade hide text-bg-info";
                Child_div_2.InnerHtml = "";
                alertParent.Visible = false;
                alertParent.Style.Add("z-index", "-1");
                return;
        }
        alertParent.Controls.Add(div);
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    ShowAlertMessage("success_My Message is here.");
}

关键说明 #

• 利用Sys.WebForms.PageRequestManager监听UpdatePanel的endRequest事件，确保每次局部刷新后都能初始化新生成的Toast元素
• 通过toast-initialized标记避免重复初始化同一元素
• 手动调用bootstrap.Toast的show()方法触发Toast显示，同时配置自动隐藏参数

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