Обработка обратной передачи данных из всплывающего элемента управления с использованием UpdatePanel (C#)

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

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

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

Обзор

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

Шаги

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

• Элемент ScriptManager управления, чтобы набор средств управления AJAX ASP.NET работал
• Два TextBox элемента управления, которые вызовут всплывающее окно
• Элемент Panel управления, который будет использоваться как всплывающее окно
• На панели элемент управления Calendar встроен в элемент управления UpdatePanel.
• Два PopupControlExtender управляющих элемента, назначающих панель текстовым полям

<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:UpdatePanel ID="up1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="c1" runat="server" 
 OnSelectionChanged="c1_SelectionChanged" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </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>

Обратите внимание, что OnSelectionChangedCalendar атрибут элемента управления задан. Поэтому, когда пользователь выбирает дату в календаре, происходит обратная связь и выполняется метод c1_SelectionChanged() на стороне сервера. В этом методе текущая дата должна быть извлечена и записана обратно в текстовое поле.

Синтаксис для этого выглядит следующим образом: во-первых, необходимо создать прокси-объект для PopupControlExtender страницы. Набор средств управления AJAX ASP.NET предлагает GetProxyForCurrentPopup() метод. Объект, возвращаемый этим методом, поддерживает Commit() метод, который отправляет значение обратно в элемент управления, который активировал всплывающее окно (а не элемент управления, активировавший вызов метода!). Следующий код предоставляет выбранную дату в качестве аргумента Commit() для метода, что приводит к написанию выбранной даты обратно в текстовое поле:

<script runat="server">
 protected void c1_SelectionChanged(object sender, EventArgs e)
 {
 PopupControlExtender pce = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page);
 pce.Commit((sender as Calendar).SelectedDate.ToShortDateString());
 }
</script>

Теперь, когда вы щелкаете дату календаря, выбранная дата отображается в связанном текстовом поле, создавая элемент управления выбора дат, который в настоящее время можно найти на многих веб-сайтах.

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

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

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