Nested ajax UpdatePanels wont clear texbox content after postback? - asp.net

Question

I have a two UpdatePanels one UpdatePanel contains the Grid and the other contains data entry. When a user click on a ImageButton within the GridView it will then show to ModalPopupExtender and display the second UpdatePanel. When the user enters the data into the fields under the second UpdatePanel and if they Click the Button Report or Button Cancel I am Forcing the postback on both buttons. The problem is if the user goes back in and click on the different row on the page the data under the UpdatePanel2 is not Cleared all data remains from the first row clicked... I have tried UpdatePanel1.Update(), UpdatePanel2.Update() full page PostBack nothing works. The only thing that works is if I do Response.Redirect back to itself. But I am trying to avoid doing that and also trying to avoid clearing fields back to nothing with the .cs code. Wondering if there is a way to postback and clear all the fields under the UpdatePanel2. Thanks for your help in advance.
<asp:UpdatePanel ID="upGrid" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<span id="lblTab" runat="server" style=" font-weight:bold; font-size:larger">All Published Reports</span>
<br />
<asp:GridView
ID="gvReports"
runat="server"
CssClass="gridview"
RowStyle-CssClass="gridview_itm"
AlternatingRowStyle-CssClass="gridview_aitm"
HeaderStyle-CssClass="gridview_hdr"
PagerStyle-CssClass="gridview_pgr"
AutoGenerateColumns="False"
Width="100%" onrowcommand="gvReports_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:LinkButton ID="btnReport" runat="server" CommandName="Report" CommandArgument='<%#Eval("n_ReportFileName")%>' Text='<%#Eval("n_Name")%>' CausesValidation="false"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<%#Eval("n_Description")%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="ReportParameterPanel" BackgroundCssClass="modalBackground" DropShadow="True">
</asp:ModalPopupExtender>
<asp:Button ID="Button1" runat="server" Text="Button" style="visibility:hidden"/>
<asp:Panel ID="ReportParameterPanel" runat="server" Height="375px"
Width="700px" BackColor="#f4de90"
HorizontalAlign="Center" BorderColor="#666666" BorderStyle="Outset"
BorderWidth="5px">
<table style="height: 50px; width: 685px; text-align: left">
<span id="lblReportName" runat="server" style="font-weight:bold; font-size:larger"></span>
<tr>
<td align="left" style="padding-left: 5px; width: 335px;" valign="top">
<span id="StarDateStar" runat="server" style="color: Red">*Optional </span><span id="lblStartDate" runat="server">Start Date: </span>
<asp:TextBox ID="tbStartDate" runat="server"></asp:TextBox>
<asp:ImageButton ID="imgCalendar" runat="server" ImageUrl="~/App_Themes/Sugar2006/images/Calendar_scheduleHS.png" ImageAlign="Middle" />
<asp:CalendarExtender ID="ceStartDate" runat="server" TargetControlID ="tbStartDate" PopupButtonID="imgCalendar" />
<asp:MaskedEditExtender ID="mexStartDate" runat="server"
TargetControlID="tbStartDate"
Mask="99/99/9999"
MaskType="Date"
MessageValidatorTip="true"
OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError" />
<br />
<asp:MaskedEditValidator ID="mevStartDate" runat="server"
ControlToValidate="tbStartDate"
ControlExtender="mexStartDate"
Display="Dynamic"
InvalidValueMessage="This date is invalid!" Font-Bold="True"
ForeColor="#D50000" ValidationGroup="vgMyGroup" />
</td>
<td align="left" style="padding-right: 5px; padding-bottom: 5px; width: 350px;" valign="top">
<span id="EndDateStar" runat="server" style="color: Red">*Optional </span><span id="lblEndDate" runat="server">End Date: </span>
<asp:TextBox ID="tbEndDate" runat="server"></asp:TextBox>
<asp:ImageButton ID="imgCalendar2" runat="server" ImageUrl="~/App_Themes/Sugar2006/images/Calendar_scheduleHS.png" ImageAlign="Middle" />
<asp:CalendarExtender ID="ceEndDate" runat="server" TargetControlID ="tbEndDate" PopupButtonID="imgCalendar2" />
<asp:MaskedEditExtender ID="mexEndDate" runat="server"
TargetControlID="tbEndDate"
Mask="99/99/9999"
MaskType="Date"
MessageValidatorTip="true"
OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError" />
<br />
<asp:MaskedEditValidator ID="mevEndDate" runat="server"
ControlToValidate="tbEndDate"
ControlExtender="mexEndDate"
Display="Dynamic"
InvalidValueMessage="This date is invalid!" Font-Bold="True"
ForeColor="#D50000"
ValidationGroup="vgMyGroup" />
</td>
</tr>
</table>
<table style="height: 25px; width: 685px; text-align: left">
<tr>
<td align="left" style="padding-left: 5px; width: 335px;" valign="top">
<span id="lblOperator" runat="server">Operator:</span>
<asp:DropDownList ID="Parameters" runat="server" style="margin-left: 73px">
<asp:ListItem Selected="True"><</asp:ListItem>
<asp:ListItem>></asp:ListItem>
<asp:ListItem>=</asp:ListItem>
<asp:ListItem>Completed</asp:ListItem>
<asp:ListItem>Not Completed</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
<asp:RadioButtonList ID="GroupingList" runat="server" Height="25px"
RepeatDirection="Horizontal"
AutoPostBack="true" onselectedindexchanged="GroupingList_SelectedIndexChanged"
CausesValidation="true" ValidationGroup="vgMyGroup" />
<table style="height: 25px; width: 685px; text-align: left">
<tr id="rowEntitySelectionLabels" runat="server">
<td style="padding-left: 3px; height: 16px; width: 300px;">
<asp:Label ID="GroupItemInputLabel" runat="server" />
</td>
<td style="height: 16px; width: 48px;">
</td>
<td style="height: 16px; width: 300px;">
<asp:Label ID="GroupItemsListInputLabel" runat="server" />
</td>
</tr>
<tr id="rowEntitySelections" runat="server">
<td valign="top" style="padding-left: 3px; height: 100px; width: 300px;">
<asp:ListBox ID="GroupItemInput" runat="server" Width="300px" Height="150px"
SelectionMode="multiple" BackColor="White" ForeColor="Black" />
</td>
<td align="center" valign="top" style="height: 100px; width: 50px;">
<br />
<asp:ImageButton ID="btnAddItem"
ImageUrl="~/App_Themes/Sugar2006/images/Actions-arrow-right-icon.png" runat="server"
OnClick="btnAddItem_Click" Height="18px" Width="25px"
ToolTip="Adds the Selected <Item>." CausesValidation="true" ValidationGroup="vgMyGroup" /><br />
<asp:ImageButton ID="btnAddAllItems"
ImageUrl="~/App_Themes/Sugar2006/images/Actions-arrow-right-double-icon.png" runat="server"
OnClick="btnAddAllItems_Click" Height="18px" Width="25px"
ToolTip="Adds all of the <Items>." CausesValidation="true" ValidationGroup="vgMyGroup" /><br />
<br /><br />
<asp:ImageButton ID="btnRemoveItem"
ImageUrl="~/App_Themes/Sugar2006/images/Actions-arrow-left-icon.png" runat="server"
OnClick="btnRemoveItem_Click" Height="18px" Width="25px"
ToolTip="Removes the Selected <Item>." CausesValidation="true" ValidationGroup="vgMyGroup" /><br />
<asp:ImageButton ID="btnRemoveAllItems"
ImageUrl="~/App_Themes/Sugar2006/images/Actions-arrow-left-double-icon.png" runat="server"
OnClick="btnRemoveAllItems_Click" Height="18px" Width="25px"
ToolTip="Removes all of the <Items>." CausesValidation="true" ValidationGroup="vgMyGroup" />
</td>
<td valign="top" style="height: 100px; width: 300px;" id="TD1">
<asp:ListBox ID="GroupItemsList" runat="server" Width="300px" Height="150px"
SelectionMode="multiple" BackColor="White" ForeColor="Black" />
</td>
</tr>
</table>
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="btn" onclick="btnClose_Click" CausesValidation="false" />
<asp:Button ID="btnSend" runat="server" Text="Report" CssClass="btn" OnClick="btnSend_Click" Enabled="false" CausesValidation="true" ValidationGroup="vgMyGroup" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSend" />
<asp:PostBackTrigger ControlID="btnClose" />
</Triggers>
</asp:UpdatePanel>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Answer 1

Try setting the UpdatePanel.UpdateMode Property to Conditional
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<!-- other stuff -->
</asp:UpdatePanel>
The child update panel will only refresh its children, not its parent, if the update mode is not set to conditional.
And here are a few more ways of updating update panels:
http://lisazhou.wordpress.com/2008/01/07/update-panel-different-ways-of-triggering-udates/