ASPX Webform Bootstrap Toast 自动隐藏在更新面板中不起作用

问题描述 投票：0回答：1

我只是使用 Bootstrap Toast 来显示警报消息。 但我遇到的问题是自动隐藏它们。

我尝试过使用和不使用

data-bs-autohide="true" data-bs-delay="3000"
，但没有成功。

棘手的部分是我在代码后面创建这个 toast 并将其附加到 aspx 页面控件。

我尝试了 HTML 中的静态代码，但仍然不起作用。

我相信这是由于

asp:UpdatePanel

这是我的代码。

如何让它自动隐藏？

page.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <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>

page.aspx.cs

protected void ShowAlertMessage(string tstr, string Header = "")
{
    try
    {
        //Header = string.IsNullOrEmpty(Header) ? "Error" : Header;

        alertParent.Visible = true;
        alertParent.Style.Add("z-index", "3");

        var div = new HtmlGenericControl("div");                
        div.Attributes["role"] = "alert";
        div.Attributes["aria-live"] = "assertive";
        div.Attributes["aria-atomic"] = "true";
        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 = Header;

        var Sub_Child_2 = new HtmlGenericControl("span");
        //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);

        string sFlag, smessage;
        if (tstr.Length == 0)
            return;

        string[] words = tstr.Split('_');
        sFlag = words[0];
        smessage = words[1];
        switch (sFlag)
        {
            case "warning":
                {
                    div.Attributes["class"] = "toast fade  text-bg-warning";
                    Child_div_2.InnerHtml = smessage;
                    break;
                }

            case "danger":
                {// REM error
                    div.Attributes["class"] = "toast fade text-bg-danger";
                    Child_div_2.InnerHtml = smessage;
                    break;
                }

            case "success":
                {// REM error
                    div.Attributes["class"] = "toast fade text-bg-success";
                    Child_div_2.InnerHtml = smessage;
                    break;
                }

            case "primary":
                {// REM error
                    div.Attributes["class"] = "toast fade text-bg-primary";
                    Child_div_2.InnerHtml = smessage;
                    break;
                }

            case "info":
                {// REM error
                    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");
                    break;
                }
        }
        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.");
}
c# asp.net webforms bootstrap-5 bootstrap-toast
1个回答
0
投票

Bootstrap Toast 必须首先初始化

如 Bootstrap 5 文档中所述，“出于性能原因选择加入 Toast，因此您必须自行初始化它们。”

要从后面的 ASPX C# 代码初始化新的 Toast，我们可以添加 ID 并使用 ScriptManager 调用 Bootstrap 方法。我们需要初始化 Toast 并显示它才能使自动隐藏正常工作。

C# 代码

div.ID = "toast-1";
var script = $"bootstrap.Toast.getOrCreateInstance(document.getElementById('{div.ID}')).show();";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", script, true);

完整演示

该演示已在 Visual Studio 中进行了测试。单击该按钮会像原始组件一样创建一个新的 Toast 组件。但是，它随后使用 ScriptManager 来初始化并显示 Toast。 Toast 显示 3 秒，然后自动隐藏。

// C# code Page.aspx.cs 

using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;

public partial class Page : System.Web.UI.Page
{
    protected void ShowAlertMessage(string tstr, string Header = "")
    {
        try
        {
            alertParent.Visible = true;
            alertParent.Style.Add("z-index", "3");

            var div = new HtmlGenericControl("div");
            div.Attributes["role"] = "alert";
            div.Attributes["aria-live"] = "assertive";
            div.Attributes["aria-atomic"] = "true";
            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 = Header;

            var Sub_Child_2 = new HtmlGenericControl("span");
            //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);

            string sFlag, smessage;
            if (tstr.Length == 0)
                return;

            string[] words = tstr.Split('_');
            sFlag = words[0];
            smessage = words[1];
            switch (sFlag)
            {
                case "warning":
                    {
                        div.Attributes["class"] = "toast fade text-bg-warning";
                        Child_div_2.InnerHtml = smessage;
                        break;
                    }

                case "danger":
                    {// REM error
                        div.Attributes["class"] = "toast fade text-bg-danger";
                        Child_div_2.InnerHtml = smessage;
                        break;
                    }

                case "success":
                    {// REM error
                        div.Attributes["class"] = "toast fade text-bg-success";
                        Child_div_2.InnerHtml = smessage;
                        break;
                    }

                case "primary":
                    {// REM error
                        div.Attributes["class"] = "toast fade text-bg-primary";
                        Child_div_2.InnerHtml = smessage;
                        break;
                    }

                case "info":
                    {// REM error
                        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");
                        break;
                    }
            }
            alertParent.Controls.Add(div);

            // NEW CODE 
            div.ID = "toast-1";
            var script = $"bootstrap.Toast.getOrCreateInstance(document.getElementById('{div.ID}')).show();";
            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", script, true);

        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }

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

<!-- Page.aspx -->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Page.aspx.cs" Inherits="Page" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>
<body>
    <form id="aspNet" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <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>
    </form>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.