Let start with a classical example – Web developer works under application which has a Web page with two drop-down lists. The first one contains all the cities in the country, and the second one contains the bank branches locations in the selected city. Web developer needs to populate the second drop-down list with the correct locations each time the item selected in the first one is changed.
The following snippet shows the markup required to create the drop-down lists:
<asp:DropDownList runat=”server” ID=”Cities” AutoPostBack=”true”
asp:ListItem value=”” Text=”[Select a Location]” />
<asp:DropDownList ID=”BankBranches” runat=”server”
The AutoPostBack property of the Cities list is set to true so that when the user changes the selected item, the page is automatically posted to the server and the event SelectedIndexChanged is raised. In the event handler (Cities_Changed), Web developer retrieves the selected City and then load the bank branches locations.
The VB.NET code needed to populate the second drop-down list is the following:
Public Partial Class BankEntities
Public Property Customers() As ObjectSet(Of Customer)
Public Property Acounts() As ObjectSet(Of Acount)
Public Property Cities() As ObjectSet(Of City)
Public Property BranchLocations() As ObjectSet(Of BranchLocation)
Public Property Products() As ObjectSet(Of Product)
Protected Sub Cities_Changed(sender as Object, e As EventArgs)
Using bne = New BankEntities()
Dim code As Integer = Convert.ToInt32(Cities.SelectedValue);
BranchLocations.DataSource = bne.BranchLocations.Where(Function(t) t.CityCode = code);
Web developer needs to update the bank branches locations in the second drop-down list without causing a full PostBack of the page each time the city is changed.
At the base of partial rendering is the UpdatePanel control. It’s the server control that delimits an area. UpdatePanel is pretty simple to use; it has a ContentTemplate property that contains the HTML of the area. The next snippet shows how UpdatePanel is used:
<asp:ScriptManager Id=”sm” runat=”server” />
<asp:DropDownList runat=”server” ID=”Cities” … ></asp:DropDownList>
<asp:DropDownList ID=”BankBranches” … ></asp:DropDownList>
network (CDN), and so on.
The markup changes slightly, and the server code doesn’t change at all. With just this small change in the markup, Web developer’s enabled Ajax behavior. Using the update panel is a great choice when Web developer wants to do things fast and when he/she has to add Ajax behavior to existing applications. But it does pose some problems, especially with performance.