как использовать div в качестве уведомления

Question

Я думаю об уведомлениях. Мы всегда показываем сообщения с JavaScript для пользователей. Как насчет html-тега div, панели обновления и файла ascx или / и динамического класса?

Можем ли мы скрыть панель asp: внутри главной страницы (скажем, файла Notification.ascx, импортированного на главной странице), и если что-то не так,каким-то образом уведомить пользователя, включив панель asp: и добавив динамические элементы управления и сообщения.

Возможно ли это? Я хочу представить, что мы можем показывать уведомления, не используя 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 Control Toolkit , это решило мои проблемы вместе с загрузкой скриптов в заголовке (я переместил их обратно в конец тела).

Вот как я это сделал:

Я поместил модальный шаблон в мастер:

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

, затем из мастер-кода, я создал многоразовыйпубличные методы для диалога, используя метки и кнопки, которые я уже настроил внутри диалога:

    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.

Надеюсь, это поможет.