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对话框，这意味着我将继续以前的开发人员确实做到了），但两者都可以正常工作，但是在内容和用户控件中使用它们时，我遇到了两个问题：

应在内容或用户控件之前加载脚本
某些内容不能很好地与它们配合使用（这肯定是先前开发人员的项目问题）。

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

这是我的操作方式：

我将模态模板放入母版中：

<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"/>

然后，从后面的主代码中，我使用已经在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类而不会出现问题，我在后面的代码中要做的就是这样：

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

我希望这会有所帮助。

如何使用div作为通知

1 个答案: