Обработка обратных передач из ModalPopup (VB)

по Кристиан Венз

Скачать код или скачать PDF

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

Обзор

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

Шаги

Чтобы активировать функциональные возможности 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

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

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

модальное всплывающее окно вызывает обратную передачу

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