This tutorial was created with Visual Studio .NET 2008, but can still be recreated with 2005. Microsoft's ASP.NET AJAX Extensions for 2005 can be downloaded at this link.
In this tutorial, we will look at how we can nest UpdatePanels. You can nest as many UpdatePanels as you want- there is no limit. In this example, we will be creating two UpdatePanels and nesting one in the other. One will display a person from a database, that is selected from a DropDownMenu, the nested UpdatePanel will display the current time, so we can see when it is updated.
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
The first thing we will do is create a sample database - or if you have your own, you can use that. For this example, we will be using one table with a few names and cities as our data. We will need a ScriptManager, a DropDownList, a SqlDataSource, and our UpdatePanel to begin with:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManage1" runat="server" />
<asp:DropDownList ID="ddlNames" runat="server"
DataSourceID="SqlDataSource1" DataValueField="id"
DataTextField="name" AutoPostBack="true" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [tblPeople]" />
<br /><br />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlNames" />
</Triggers>
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel> |
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
We have set our DropDownList to be populated by our SqlDatSource so that the names are displayed from our database, which allows the user to select. Notice that we also set the UpdateMode of our UpdatePanel to Conditional as to only allow it to reload when the DropDownList is selected, which is identified with the trigger we added.
Next, we will add a FormView Control into the ContentTemplate of the UpdatePanel, and another UpdatePanel - this one will display the time:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManage1" runat="server" />
<asp:DropDownList ID="ddlNames" runat="server"
DataSourceID="SqlDataSource1" DataValueField="id"
DataTextField="name" AutoPostBack="true" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [tblPeople]" />
<br /><br />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlNames" />
</Triggers>
<ContentTemplate>
<asp:FormView ID="FormView1" runat="server"
Width="271px">
<ItemTemplate>
<fieldset>
<legend>Person</legend>
Name: <%# Eval("name") %><br />
City: <%# Eval("city") %>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="butUpdateTime" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="butUpdateTime" runat="server" Text="Refresh Time" /><br />
Current Time: <%= DateTime.Now.ToString("T") %>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</ItemTemplate>
</asp:FormView>
</ContentTemplate>
</asp:UpdatePanel> |
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.
We now have added the FormView Control to display the selected person to the user, but currently won't do this as it does not know which person we select as yet. Notice that we have a button in the second UpdatePanel to refresh the current time. This is to demonstrate that we can reload just the nested UpdatePanel, using the trigger we hijack the attempt at postback, and instead, just reload the UpdatePanel.
To let the FormView know which item from the DropDown we select, we will add another SqlDataSource for it to look up the data:
| <asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [tblPeople] WHERE id=@id">
<SelectParameters>
<asp:ControlParameter Name="id" ControlID="ddlNames" />
</SelectParameters>
</asp:SqlDataSource> |
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!
We add this after the FormView, and set the FormView's DataSourceID to the SqlDataSource we just created. The SqlDataSource will select from the database, the record that we selected from the DropDownList. We have all this functionality, and no code-behind - Our ASPX page looks like this:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManage1" runat="server" />
<asp:DropDownList ID="ddlNames" runat="server"
DataSourceID="SqlDataSource1" DataValueField="id"
DataTextField="name" AutoPostBack="true" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [tblPeople]" />
<br /><br />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlNames" />
</Triggers>
<ContentTemplate>
<asp:FormView ID="FormView1" DataSourceID="SqlDataSource2" runat="server"
Width="271px">
<ItemTemplate>
<fieldset>
<legend>Person</legend>
Name: <%# Eval("name") %><br />
City: <%# Eval("city") %>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="butUpdateTime" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="butUpdateTime" runat="server" Text="Refresh Time" /><br />
Current Time: <%= DateTime.Now.ToString("T") %>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</ItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [tblPeople] WHERE id=@id">
<SelectParameters>
<asp:ControlParameter Name="id" ControlID="ddlNames" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel> |
We should now have a fully-functional AJAX Web Application - one that utilizes nested UpdatePanels effectively.
