Обработка обратных вызовов из всплывающего окна без UpdatePanel (C#)

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

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

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

Обзор

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

Шаги

При использовании PopupControl с вызовом обратного действия, но без UpdatePanel на странице, в наборе управления не предлагается способ определить, какой клиентский элемент активировал всплывающее окно, что, в свою очередь, вызвало вызов обратного действия. Однако небольшой трюк обеспечивает обходной путь для этого сценария.

Во-первых, ниже представлена базовая настройка: два текстовых поля, которые оба запускают одно и то же всплывающее окно — календарь. Два PopupControlExtenders объединяют текстовые поля и всплывающее окно вместе.

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
 Return date: <asp:TextBox ID="tbReturn" runat="server" />
 </div>
 <asp:Panel ID="pnlCalendar" runat="server">
 <asp:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
 </asp:Panel>
 <ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
 TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
 <ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
 TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />
</form>

Основная идея заключается в добавлении скрытого поля формы в <form> элемент, в котором содержится текстовое поле, которое запустило всплывающее окно:

<input type="hidden" id="tbHidden" runat="server" />

При загрузке страницы код JavaScript добавляет обработчик событий в оба текстовых поля: когда пользователь щелкает текстовое поле, его имя записывается в скрытое поле формы:

<script type="text/javascript">
 function pageLoad()
 {
 $get("tbDeparture").onclick = saveTextBox;
 $get("tbReturn").onclick = saveTextBox;
 }
 function saveTextBox()
 {
 $get("tbHidden").value = this.id;
 }
</script>

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

<script runat="server">
 protected void c1_SelectionChanged(object sender, EventArgs e)
 {
 string id = tbHidden.Value;
 if (id == "tbDeparture" || id == "tbReturn")
 {
 TextBox tb = (TextBox)FindControl(id);
 tb.Text = (sender as Calendar).SelectedDate.ToShortDateString();
 }
 }
</script>

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

Щелчок по дате помещает ее в текстовое поле

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