This tutorial will use Multiple Popup Controls to populate a textbox in ASP.NET 3.5 AJAX Web App. C#
In this tutorial we will use two PopupControl extender’s from the AJAX Control Toolkit which offers an easy way to trigger a popup if any other control gets activated.
Here is a snapshot of the Popup Control extender:
Need help with Windows Dedicated Hosting? Try Server Intellect I'm a happy customer!
To start, open Visual Studio 2008. File > New > Web Site > ASP.NET Web site and name it MultPopupCntrl or whatever you would like.
From the Design View of the default.aspx page, locate the Microsoft AJAX extensions tab of the toolbox and double-click the ScriptManager. Then from the same tab double-click the UpdatePanel as well.
Now drag two Textboxes over to the page within the UpdatePanel. Name the first textbox txtBegin, and the second txtEnd. As soon as you are done setting the textbox properties, type in “Begin Date” and “End Date” in front of each corresponding textbox.
<div class="style1">
Begin Date:
<asp:TextBox ID="txtBegin" runat="server">
</asp:TextBox>
End Date:
<asp:TextBox ID="txtEnd" runat="server">
</asp:TextBox> </div> |
Next, from the toolbox drag over a Panel control and place it inside of the UpdatePanel and name it pCal. Within the Panel control you just implemented drag and drop a Calendar control inside of it and name it cal.
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:Panel ID="pCal" runat="server">
<asp:Calendar ID="cal" OnSelectionChanged="cal_SelectionChanged" runat="server" Style="text-align: center"> </asp:Calendar>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel> |
Highlight the every control on the page and center, justify them. The Design View should look like this:
Switch to your source view.
Within the calendar tag, add an OnSelectionChanged element.
| <asp:Calendar ID="cal" OnSelectionChanged="cal_SelectionChanged" runat="server" Style="text-align: center"> </asp:Calendar> |
Then locate the AJAX Toolkit and drag over two PopupControlExtender’s below and outside the UpdatePanel. Then add a TargetControlID and assign it the value txtBegin and txtEnd respectively. This allows the calendar control to place the value selected by the user inside of the specific textbox.
Next, add a PopupControlID for each PopupControlExtender and pass it the value pCal of the Calendar controlID. In this case you can position it at the Bottom.
| <asp:PopupControlExtender ID="PopupCntrlEx1" TargetControlID="txtBegin" PopupControlID="pCal" Position="Bottom" runat="server" /> <asp:PopupControlExtender ID="PopupCntrlEx2" TargetControlID="txtEnd" PopupControlID="pCal" Position="Bottom" runat="server" /> |
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
The TargetControlID attribute provides the ID of the control tied to the extender. The PopupControlID attribute contains the ID of the popup panel. For this instance, both extenders show the same panel, but both panels are possible as well.
Save and Run. Now whenever you click within a text field, a calendar will appear, allowing you to select a date.
Next we need to add some logic to the code behind in order to populate the correct dates for the correct textbox. This is the reason that we added the OnSelectionChanged to the calendar control. Switch to your default.aspx.cs page and add this logic to the cal¬_OnSelectionChanged() event.
protected void cal_SelectionChanged(object sender, EventArgs e)
{
if (txtBegin.Text == "")
{
txtBegin.Text = cal.SelectedDate.ToShortDateString();
}
else
{
txtEnd.Text = cal.SelectedDate.ToShortDateString();
}
} |
The PopupControl is an ASP.NET AJAX extender that can be added to any control in order to open a popwindow that displays additional content, including ASP.NET server controls, HTML elements, etc. In this case, we made the popup window interactive within an ASP.NET AJAX UpdatePanel, this way it could be able to perform complex server-based processing (includeing postbacks) without affecting the rest of the page.
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
