如何使用 div 作为通知

Question

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

我们能否将 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

嗯，我以前也有过这种经历，试过用BootstrapModal和jQueryDialog 在一个正在进行的项目上，这意味着我将继续以前的开发人员所做的事情），两者大部分都工作得很好，但是在内容和用户控件中使用它们时我遇到了两个问题：

脚本应在内容或用户控件之前加载
有些内容与他们不兼容（这绝对是前开发者的项目问题）。

以前的开发人员使用的是 jQuery 对话框，他在所有用户控件和内容中复制并粘贴相同的 JS 脚本。他的工作真是一团糟。因此，我尝试对其进行返工，但没有 end-up 好。尝试使用 Bootstrap 创建一个新的通知并且成功了，但仍然有一些控件和内容是 out-of-coverage，这迫使我从头部而不是 body 加载脚本。然后，一切顺利。但这里的问题是脚本从头部加载，这会延迟页面加载。所以，我尝试了 AJAX Control Toolkit，这解决了我的问题以及 header 中加载的脚本（我已将它们移回末尾body）。

我是这样做的：

我把模态模板放在 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"/>

然后从大师 code-behind 那里，我使用我已经在对话框中设置的标签和按钮为对话框创建了可重用的 public 方法：

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

正如您从上面的代码中看到的，我只是从 code-behind 控制它，然后我只是创建多个方法来添加更多选项，这里有几个：

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) { ... }

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

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 class 而不会出现问题，我在后面的代码中所要做的就是像这样：

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

希望对您有所帮助。

如何使用 div 作为通知

how to use div as notification

c#

asp.net

webforms

ascx

class