Обработка операций обратной передачи из элемента управления Popup без использования элемента управления 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>

Календарь отображается, когда пользователь щелкает текстовое поле

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

Если щелкнуть дату, она помещется в текстовое поле

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