Handling Postbacks from A Popup Control Without an UpdatePanel (C#)
The PopupControl extender in the AJAX Control Toolkit offers an easy way to trigger a popup when any other control is activated. When a postback occurs in such a panel and there are several panels on the page it is hard to determine which panel has been clicked.
Overview
The PopupControl extender in the AJAX Control Toolkit offers an easy way to trigger a popup when any other control is activated. When a postback occurs in such a panel and there are several panels on the page it is hard to determine which panel has been clicked.
Steps
When using a PopupControl with a postback, but without having an UpdatePanel on the page, the Control Toolkit does not offer a way to determine which client element has triggered the popup which in turn caused the postback. However a small trick provides a workaround for this scenario.
First of all, here is the basic setup: two text boxes which both trigger the same popup, a calendar. Two PopupControlExtenders bring text boxes and popup together.
[!code-aspxMain]
1: <form id="form1" runat="server">
2: <asp:ScriptManager ID="asm" runat="server" />
3: <div>
4: Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
5: Return date: <asp:TextBox ID="tbReturn" runat="server" />
6: </div>
7: <asp:Panel ID="pnlCalendar" runat="server">
8: <asp:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
9: </asp:Panel>
10: <ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
11: TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
12: <ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
13: TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />
14: </form>
The basic idea is to add a hidden form field in the <form> element that holds the text box which launched the popup:
[!code-aspxMain]
1: <input type="hidden" id="tbHidden" runat="server" />
When the page is loaded, JavaScript code adds an event handler to both text boxes: Whenever the user clicks on a text box, its name is written into the hidden form field:
[!code-htmlMain]
1: <script type="text/javascript">
2: function pageLoad()
3: {
4: $get("tbDeparture").onclick = saveTextBox;
5: $get("tbReturn").onclick = saveTextBox;
6: }
7: function saveTextBox()
8: {
9: $get("tbHidden").value = this.id;
10: }
11: </script>
In the server-side code, the value of the hidden field must be read. Since hidden form fields are trivial to manipulate, a whitelist approach to validate the hidden value is required. Once the correct text box has been identified, the date from the calendar is written into it.
[!code-aspxMain]
1: <script runat="server">
2: protected void c1_SelectionChanged(object sender, EventArgs e)
3: {
4: string id = tbHidden.Value;
5: if (id == "tbDeparture" || id == "tbReturn")
6: {
7: TextBox tb = (TextBox)FindControl(id);
8: tb.Text = (sender as Calendar).SelectedDate.ToShortDateString();
9: }
10: }
11: </script>
The Calendar appears when the user clicks into the textbox (Click to view full-size image)
Clicking on a date puts it in the textbox (Click to view full-size image)
)
|
|