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

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

Загрузить PDF-файл

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

Общие сведения

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

Этапы

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

• Элемент ScriptManager управления для работы набора элементов управления ASP.NET AJAX
• Два 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>

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

Синтаксис для этого выглядит следующим образом: во-первых, необходимо создать прокси-объект для на PopupControlExtender странице. Этот метод предоставляется GetProxyForCurrentPopup() в наборе средств управления ASP.NET AJAX. Объект, возвращаемый этим методом, поддерживает 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>

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

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

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

НазадВперед