Обработка обратных вызовов в ModalPopup (VB)

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

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

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

Обзор

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

Шаги

Чтобы активировать функциональные возможности ASP.NET AJAX и набора средств управления, ScriptManager элемент управления должен быть помещен в любое место на странице (но в элементе <form> ):

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

Затем добавьте панель, которая выступает в качестве модального всплывающего окна. Там пользователь может ввести имя и адрес электронной почты. Кнопка используется для закрытия всплывающего окна и сохранения сведений. Обратите внимание, что атрибут задается таким образом, OnClick чтобы при нажатии этой кнопки произошла обратная обратная связь:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 Name: <asp:TextBox ID="tbName" runat="server" /><br/>
 Email: <asp:TextBox ID="tbEmail" runat="server" /><br/>
 <asp:Button ID="OKButton" runat="server" Text="Save"OnClick="SaveData" />
</asp:Panel>

Сама страница состоит из двух меток для точно такой же информации: имя и адрес электронной почты. Кнопка используется для активации модального всплывающего окна:

<div>
 Contact Information:
 <asp:Label ID="lblName" runat="server" Text="AJAX Fanatic"/><br />
 <asp:Label ID="lblEmail" runat="server" Text="ajax@fanatic"/><br />
 <asp:Button ID="btn1" runat="server" Text="Edit"/>
</div>

Добавьте элемент управления ModalPopupExtender, чтобы появилось всплывающее окно. PopupControlID Задайте атрибут идентификатору панели и TargetControlID идентификатору кнопки:

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btn1" PopupControlID="ModalPanel" />

Теперь при клике на кнопку Save в модальном всплывающем окне выполняется метод SaveData() на серверной стороне. Там можно сохранить введенные данные в хранилище данных. Для простоты новые данные просто отображаются на метке.

Protected Sub SaveData(ByVal sender As Object, ByVal e As EventArgs)
 lblName.Text = HttpUtility.HtmlEncode(tbName.Text)
 lblEmail.Text = HttpUtility.HtmlEncode(tbEmail.Text)
End Sub

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

Sub Page_Load()
 If Not Page.IsPostBack Then
 tbName.Text = lblName.Text
 tbEmail.Text = lblEmail.Text
 End If
End Sub

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