Запуск модального всплывающего окна из кода сервера (C#)

Кристиан Венц

Скачать в формате PDF

Элемент управления ModalPopup в наборе средств управления AJAX предоставляет простой способ создания модального всплывающего окна с помощью клиентских средств. Однако для некоторых сценариев требуется, чтобы открытие модального всплывающего окна активировалось на стороне сервера.

Обзор

Элемент управления ModalPopup в наборе средств управления AJAX предоставляет простой способ создания модального всплывающего окна с помощью клиентских средств. Однако для некоторых сценариев требуется, чтобы открытие модального всплывающего окна активировалось на стороне сервера.

Шаги

Во-первых, веб-элемент управления ASP.NET Button необходим для демонстрации работы элемента управления ModalPopup. Добавьте такую кнопку в <элемент формы> на новой странице:

<asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />

Затем вам потребуется разметка для всплывающего окна, который вы хотите создать. Определите его как <asp:Panel> элемент управления и убедитесь, что он включает элемент управления Button. Элемент управления ModalPopup предоставляет функциональность для того, чтобы кнопка закрывала всплывающее окно; в противном случае нет простого способа его скрыть.

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

Затем добавьте элемент управления ModalPopup из набора средств AJAX ASP.NET на страницу. Задайте свойства для кнопки, которая загружает элемент управления, кнопки, которая скрывает его, и идентификатора самого всплывающего окна.

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlId="ClientButton" 
 PopupControlID="ModalPanel" OkControlID="OKButton" />

Как и все веб-страницы на основе ASP.NET AJAX; Диспетчер сценариев требуется для загрузки необходимых библиотек JavaScript для различных целевых браузеров:

<asp:ScriptManager ID="asm" runat="server" />

Запустите пример в браузере. При нажатии кнопки появится модальное всплывающее окно. Чтобы добиться того же эффекта с помощью кода на стороне сервера, требуется новая кнопка:

<asp:Button ID="ServerButton" runat="server" Text="Launch Modal Popup (Server)" 
 OnClick="ServerButton_Click" />

Как видно, нажатие кнопки создает постбэк и выполняет метод ServerButton_Click() на сервере. В этом методе выполняется функция JavaScript под названием launchModal(), точнее, функция будет выполнена после полной загрузки страницы.

<script runat="server">
 protected void ServerButton_Click(object sender, EventArgs e)
 {
 ClientScript.RegisterStartupScript(this.GetType(), "key", "launchModal();", true);
 }
</script>

Работа launchModal() состоит в отображении ModalPopup. Функция launchModal() выполняется после загрузки полной HTML-страницы. Однако в этот момент платформа AJAX ASP.NET еще не загружена. Поэтому функция просто устанавливает переменную, указывающую, что элемент управления ModalPopup должен быть показан позже:

<script type="text/javascript">
 var launch = false;
 function launchModal() 
 {
 launch = true;
 }

pageLoad() Функция JavaScript — это специальная функция, которая выполняется после полной загрузки ASP.NET AJAX. Поэтому мы добавим код в эту функцию, чтобы отобразить элемент управления ModalPopup, но только если launchModal() был вызван раньше.

function pageLoad() 
 {
 if (launch) 
 {
 $find("mpe").show();
 }
 }
</script>

Функция $find() ищет именованный элемент на странице и ожидает идентификатор на стороне сервера в качестве параметра. $find("mpe") возвращает клиентское представление управления ModalPopup; его show() метод позволяет всплывающему окну появляться.

Модальное всплывающее окно появляется при нажатии любого из кнопок (щелкните, чтобы просмотреть изображение полного размера)