如何使用 div 作为通知

Question

我正在考虑通知。我们总是向用户显示带有 JavaScript 的消息。 html div 标签、updatepanel 和 ascx 文件或/和动态类呢？

我们能否将 asp:panel 隐藏在母版页中（比如说在母版页中导入的 notification.ascx 文件），如果有问题，通过启用 asp:panel 并添加动态控件和消息以某种方式通知用户。

这可能吗？我想想象我们可以在不使用 javascript 的情况下显示通知。

我想像这样的 notification.ascx：

<asp:Panel runat="server" ID="panel_message" Visible="false">
    <asp:UpdatePanel runat="server" ID="updatep_message">
        <div id="message" runat="server">This is dynamic message</div> //Dynamically created divs.
    </asp:UpdatePanel>
</asp:Panel>

Answer 1

嗯，我以前有过这样的经历，并且我尝试在一个正在进行的项目中使用 Bootstrap Modal 和 jQuery Dialog，这意味着我正在继续以前的开发人员做过），大部分都工作得很好，但是在内容和用户控件中使用它们时我遇到了两个问题：

1. 脚本应在内容或用户控件之前加载
2. 有些内容不能很好地配合他们（这肯定是以前开发者的项目问题）。

之前的开发者使用 jQuery Dialog，他在所有用户控件、内容中复制和粘贴相同的 JS 脚本。他的工作真是一团糟。所以，我试图重新设计它，但结果并不好。尝试使用 Bootstrap 创建一个新的通知，它可以工作，但仍然有一些控件和内容超出了覆盖范围，这迫使我从头部而不是正文加载脚本。然后，一切顺利。但是这里的问题是从头部加载的脚本，这会延迟页面加载。因此，我尝试了 AJAX 控制工具包，这解决了我的问题以及在标题中加载的脚本（我已将它们移回正文的末尾）。

这是我的做法：

我把模态模板放在master里面：

<asp:Panel ID="Dialog" class="ajaxDialog" runat="server" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
                <h5 class="modal-title"><asp:Label ID="PopupTitle" CssClass="modal-title" runat="server" /></h5>
      </div>
      <div class="modal-body"><asp:Label ID="PopupMessage" runat="server" /></div>
        <div class="modal-footer">
            <asp:Button ID="OkBtn" CssClass="btn btn-success" runat="server" Text="OK"  />
            <asp:Button ID="CancelBtn" CssClass="btn btn-success" runat="server" Text="Cancel"  />
        </div>
    </div>
  </div>
</div>
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="Notification" runat="server" BackgroundCssClass="popupBackground" PopupControlID="Dialog" TargetControlID="pupBtn" OkControlID="OkBtn"   />

<asp:Button ID="pupBtn" ClientIDMode="Static" runat="server" style="display: none" data-toggle="modal" data-target="#Dialog"/>

然后从 Master 代码隐藏中，我使用我已经在 Dialog 中设置的标签和按钮为 Dialog 创建了可重用的公共方法：

    public void Notification(string title, string message)
    {
        PopupTitle.Text = title;
        PopupMessage.Text = message;
        OkBtn.Text = "OK";
        CancelBtn.Visible = false;
        Notification.Show();
    }

从上面的代码可以看出，我只是从代码隐藏中控制它，然后我只是创建多个方法来添加更多选项，这里有几个：

public void Notification(string title, string message, string buttonText, string onClientClick) { ... }
public void Notification(string title, string message, string okButtonText, string okButtonOnClientClick, string cancelButtonText, string cancelButtonOnClientClick) { ... }

在那之后，我刚刚为通知创建了一个共享静态类，静态类使用它们，这里是一些静态方法（给你一个想法）：

public class NotificationBase
{
    // Simple 
    public NotificationBase(Page page, string title, string message)
    {
        (page.Master as SiteMaster).Notification(title, message);
    }

    // With JS OnClick event. (OK button)
    public void NotificationBase(Page page, string title, string message, string buttonText, string onClientClick)
    {
        (page.Master as SiteMaster).Notification(title, message, buttonText, onClientClick);
    }

    // With JS OnClick event. (OK & Canncel buttons)
    public void NotificationBase(Page page, string title, string message, string okButtonText, string okButtonOnClientClick, string cancelButtonText, string cancelButtonOnClientClick)
    {
        (page.Master as SiteMaster).Notification(title, message, okButtonText, okButtonOnClientClick, cancelButtonText, cancelButtonOnClientClick);
    }
}


public static class Notification
{
    public static void Success(Page page) => new NotificationBase(page, "Success", "The transaction has been updated successfully.");

    public static void Failure(Page webpage, string strMassege) => new NotificationBase(webpage, "Failed", strMassege);

    public static void AccessDenied(Page page) => new NotificationBase(page, "Access Denied", "You don't have permissions.", "Back", "redirect('/home');"); //redirect is just simple window.location in JS.
}

现在，我可以在任何页面中毫无问题地使用通知类，我在后面的代码中要做的就是这样：

Notification.AccessDenied(this); // this, is the page instance.

我希望这会有所帮助。