how to use div as notification

Question

I am thinking about notifications. We're always showing messages with JavaScript to the users. What about html div tag, updatepanel and ascx file or/and a dynamic class?

Can we hide asp:panel inside a masterpage (let's say notification.ascx file imported in masterpage) and if there is something wrong, somehow notify user via enabling asp:panel and adding dynamic controls and messages.

Is this possible? I want to imagine that we can show notifications without using javascript.

I was imagine notification.ascx like that:

<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

Well, I have had this experience before, and I've tried to use Bootstrap Modal and jQuery Dialog on an ongoing project, meaning I'm continuing what the previous developer did), both worked fine mostly, but I've faced two issues with them when using them inside contents and user controls :

1. The scripts should be loaded before the content or the user control
2. Some contents didn't work well with them (this is definitely project issue from the previous developer).

The previous developer was using jQuery Dialog, he was copy & paste the same JS script in all user controls, content. and his work was a real mess. So, I've tried to rework it and didn't end-up well. Tried to create a new notification using Bootstrap, and it worked, but still some controls and content were out-of-coverage, which forced me to load the scripts from the head instead of the body. Then, everything went fine. But the issue here is the scripts loading from the head, which delays the page load. So, I've tried AJAX Control Toolkit, this solved my issues along with the scripts loading in the header (I've moved them back to the end of body).

Here is how I did it :

I put the modal template inside the 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"/>

then from the Master code-behind, I've created reusable public methods for the Dialog using the labels and buttons that I've already setup inside the Dialog :

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

As you can see from the code above, I'm just controlling it from the code-behind, then I just create multiple methods to add more options here are a couple of them :

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

After that, I just created a shared static class for the notifications, the static class uses them, here is some of the static methods (to give you an idea) :

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

Now, I can use Notification class in any page without an issue, all I have to do in the code behind is something like this :

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

I hope this will help.