Update Panel within a Repeater Control


We all know Update Panels are used to make asynchronous post backs to server. But when we have some fairly sophisticated controls like GridView, Repeaters etc. the general tendency is to put these controls inside the update panel so on async post back (depending on the UpdateMode) we can refresh these controls. But what if there is a need only to update a single row or a control with in this grid view or repeater. In that case we can also put the update panel with in the GridView or Repeater. The following example demonstrates this behavior. In this example let’s assume you are an airport controller looking for status of various flights.  I have added the following code to simulate this scenario

</pre>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RptrUpdatePanel2.aspx.cs" Inherits="AJAXinAction_1.RptrUpdatePanel2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<h1>Get Flight Status</h1>

<div>

<asp:XmlDataSource ID="data" runat="server">

<Data>

<stocks>

<stock name="United Airlines" value="STOCK1" />

<stock name="JetBlue" value="STOCK2" />

<stock name="Delta" value="STOCK3" />

<stock name="South West" value="STOCK4" />

</stocks>

</Data>

</asp:XmlDataSource>

</div>

<div style="width: 340px; border: 1px solid gray; padding: 5px;">

<asp:Repeater ID="Stocks" runat="server" DataSourceID="data" DataMember="stock">

<ItemTemplate>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<asp:Label runat="server" ID="FlightName" Text='<%# Eval("name") %>' />

<asp:Button runat="server" ID="btnStatus" Text="Get Flight Status" OnClick="UpdateStock_Click" />

<asp:Label runat="server" ID="FlightStatus" Text="" />

</ContentTemplate>

</asp:UpdatePanel>

</ItemTemplate>

<SeparatorTemplate>

<hr style="border: 1px dashed gray;" />

</SeparatorTemplate>

</asp:Repeater>

</div>

</div>

</form>

</body>

</html>
<pre>

The Design of the Code looks as follows.092513_2138_UpdatePanel1.png

And I am hard coding some code to show different status for each button as follows


protected void UpdateStock_Click(object sender, EventArgs e)

{

Button b = (Button)sender;

Label flight = (Label)b.NamingContainer.FindControl("FlightName");

Label status = (Label)b.NamingContainer.FindControl("FlightStatus");

status.Text = LookupStockprice(flight.Text);

}

private string LookupStockprice(string name)

{

string status = "$0.00";

switch (name)

{

case "United Airlines":

status = "On Time";

break;

case "JetBlue":

status = "Delayed by 5 min";

break;

case "Delta":

status = "Left Just Now";

break;

case "South West":

status = "Arriving";

break;

}

return status;

}

If you observe the code above I am putting the Update Panel inside the repeater control and when I click the button in each row, only that row gets updated and not all the rows  as shown below.

092513_2138_UpdatePanel2.png

Hope this helps.

Advertisements
This entry was posted in .NET Framework. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s