Использование нескольких элементов управления всплывающего окна (VB)

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

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

Расширение PopupControl в наборе средств управления AJAX позволяет легко активировать всплывающее окно при активации любого другого элемента управления. Также можно использовать несколько всплывающих элементов управления на одной странице.

Обзор

Расширение PopupControl в наборе средств управления AJAX позволяет легко активировать всплывающее окно при активации любого другого элемента управления. Также можно использовать несколько всплывающих элементов управления на одной странице.

Шаги

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

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

Затем добавьте панель, которая служит всплывающей кнопкой. В текущем сценарии панель содержит Calendar элемент управления. Чтобы избежать обновлений страницы, вызванных постбэками календаря, панель помещается в элемент управления UpdatePanel.

<asp:Panel ID="pnlCalendar" runat="server">
 <asp:UpdatePanel ID="up1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="c1" runat="server" />
 </ContentTemplate>
 </asp:UpdatePanel>
</asp:Panel>

Страница также содержит два текстовых поля. Для каждого текстового поля всплывающее окно календаря должно отображаться после активации текстового поля.

<div>
 Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
 Return date: <asp:TextBox ID="tbReturn" runat="server" />
</div>

Теперь расширьте каждое из двух текстовых полей с помощью PopupControlExtender. Атрибут TargetControlID предоставляет идентификатор элемента управления, привязанного к расширительу. Атрибут PopupControlID содержит идентификатор всплывающей панели. В этом случае оба расширения показывают одну и ту же панель, но возможны разные панели.

<ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
 TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
<ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
 TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />

Теперь каждый раз, когда вы щелкаете в текстовом поле, календарь отображается под полем, что позволяет выбрать дату. (Получение выбранной даты обратно в текстовые поля будет описано в другом руководстве.)

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