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

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

Скачать код или скачать PDFDownload Code or Download PDF

Элемент управления ModalPopup в наборе средств AJAX Control Toolkit предоставляет простой способ создания модального всплывающего окна с помощью клиентских средств.The ModalPopup control in the AJAX Control Toolkit offers a simple way to create a modal popup using client-side means. При создании обратной передачи во всплывающем окне необходимо соблюдать особое внимание.Special care must be taken when a postback is created from within the popup.

ОбзорOverview

Элемент управления ModalPopup в наборе средств AJAX Control Toolkit предоставляет простой способ создания модального всплывающего окна с помощью клиентских средств.The ModalPopup control in the AJAX Control Toolkit offers a simple way to create a modal popup using client-side means. При создании обратной передачи во всплывающем окне необходимо соблюдать особое внимание.Special care must be taken when a postback is created from within the popup.

ШагиSteps

Чтобы активировать функциональные возможности ASP.NET AJAX и набора элементов управления, элемент управления ScriptManager должен быть размещен в любом месте страницы (но в элементе <form>):In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <form> element):

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

Затем добавьте панель, которая выступает в качестве модального всплывающего окна.Next, add a panel which serves as the modal popup. Здесь пользователь может ввести имя и адрес электронной почты.There, the user can enter a name and an email address. Кнопка используется для закрытия всплывающего окна и сохранения данных.A button is used to close the popup and save the information. Обратите внимание, что атрибут OnClick задан таким образом, что при нажатии на эту кнопку происходит обратная передача:Note that the OnClick attribute is set so that a postback occurs when this button is clicked:

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

Сама страница состоит из двух меток для одних и тех же сведений: имя и адрес электронной почты.The page itself consists of two labels for exactly the same information: name and email address. Кнопка используется для запуска модального всплывающего окна:A button is used to trigger the modal popup:

<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.In order to make the popup appear, add the ModalPopupExtender control. Задайте атрибуту PopupControlID идентификатор панели и TargetControlID ИДЕНТИФИКАТОРу кнопки:Set the PopupControlID attribute to the panel's ID and TargetControlID to the button's ID:

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

Теперь при нажатии кнопки Save в модальном всплывающем окне выполняется метод SaveData() на стороне сервера.Now whenever the Save button within the modal popup is clicked, the server-side SaveData() method is executed. Там можно сохранить введенные данные в хранилище данных.There, you could save the entered data in a data store. В целях простоты новые данные просто выводятся в метке:For the sake of simplicity, the new data is just output in the label:

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 в модальном всплывающем окне должны быть заполнены текущим именем и сообщением электронной почты.Also, the textbox controls within the modal popup should be filled with the current name and email. Однако это необходимо только в том случае, если обратная передача не выполняется.However this is only necessary when no postback occurs. При наличии обратной передачи функция ViewState ASP.NET автоматически заполняет текстовые поля соответствующими значениями.If there is a postback, the ASP.NET viewstate feature will automatically fill the textboxes with the appropriate values.

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

модальное всплывающее окно вызывает обратную передачуThe modal popup causes a postback

Модальное всплывающее окно вызывает обратную передачу (щелкните, чтобы просмотреть изображение с полным размером)The modal popup causes a postback (Click to view full-size image)