ASP.NET AJAX UI

Re: Nested UpdatePanel causes parent to post back?

bass4g0d — Thu, 21 Aug 2008 14:22:48 GMT

When an UpdatePanel updates (also if done using javascript to trigger, see the last reply on this post http://forums.asp.net/p/1001221/1973919.aspx#1973919) you must always render all the dynamically added controls. If your need to persist some values you can use css hidden textbox's to store those values. During the update textbox text property persists.

RE RIpping my hair out and going crazy

batFINGER — Wed, 20 Feb 2008 09:37:40 GMT

Haven't uploaded code here but I have something similar..

A pair of nested updatepanels. What reeeely sheets me is there seems to be no rhyme or reason or any way of debugging what is going wrong. My outer up has a modalpopup in it with a simple comment box. The inner has a repeater control of comments. THe comments can be edited and whallah up jumps the box create edit delete work fine... but wait after a couple of times,,,, even to the extent of working for "ages" it all goes terribly wrong the okbutton.. starts being a link off to a url which is my query strng ontop of a query string even which stuffs up my url rewriting and links etc... it just does nothing ... wont delete wont add and worst of all starts not passing variables around.

The site is http://edenschoice.com.au and the product and recipe pages have the comment control on them. I use the subsonic DAL for my data from sql..

Been up too long so I will get back to this and will post my best working code, it's a horrible circle I am going around in here should do some versioning.

But my problem is similar by the looks of it.Albeit 2 years odd later.

Re: Nested UpdatePanel causes parent to post back?

shoaibbinaslam — Wed, 09 Aug 2006 14:27:45 GMT

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UsersManagement.ascx.cs"
Inherits="Thomson.Website.Admin.UsersControls.Admin_UserControls_UsersManagement" %>
<atlas:ScriptManager ID="TheScriptManager" EnablePartialRendering="true" runat="server" />
<atlas:UpdatePanel ID="UpdatePanel1" Mode="conditional" runat="server">
<ContentTemplate>
<table width="100%" class="tabledata" cellpadding="3" cellspacing="1">
<asp:Panel ID="pnlDisplay" runat="server">
<tr class="row1">
<td align="center" colspan="2">
<asp:GridView ID="dgUsers" runat="server" AutoGenerateColumns="False" Width="100%">
<AlternatingRowStyle Height="25px" CssClass="row2" />
<AlternatingRowStyle Height="25px" CssClass="row2" HorizontalAlign="Center" />
<RowStyle Height="25px" CssClass="row1" HorizontalAlign="Center" />
<HeaderStyle Height="25px" CssClass="fieldHeadings"></HeaderStyle>
<Columns>
<asp:BoundField DataField="FirstName" SortExpression="FirstName" HeaderText="First Name" />
<asp:BoundField DataField="LastName" SortExpression="LastName" HeaderText="Last Name" />
<asp:TemplateField HeaderText="Select One">
<ItemTemplate>
<input name="RowSelector" type="radio" value='<%# Eval("ItemId") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr class="row1">
<td colspan="2" align="right">
<asp:ImageButton ID="btnAdd" runat="server" OnClick="btnAdd_Click" />
<asp:ImageButton ID="btnEdit" runat="server" OnClick="btnEdit_Click" />
<asp:ImageButton ID="btnDelete" runat="server" OnClick="btnDelete_Click" />

</td>
</tr>
</asp:Panel>
<asp:Panel ID="pnlForm" runat="server">
<tr class="row1">
<td align="right" style="width: 208px">
First Name</td>
<td align="left">
<asp:TextBox ID="txtFirstName" CssClass="input" runat="server" Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtFirstName"
ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="row2">
<td align="right" style="height: 30px">
Last Name</td>
<td align="left" style="height: 30px">
<asp:TextBox ID="txtLastName" CssClass="input" runat="server" Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtLastName"
ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="row1">
<td>
</td>
<td align="left">
 
<asp:ImageButton ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" />
<asp:ImageButton ID="btnUpdate" runat="server" OnClick="btnUpdate_Click" />
<asp:ImageButton ID="btnCancel" runat="server" OnClick="btnCancel_Click" />
</td>
</tr>
</asp:Panel>
</table>
</ContentTemplate>
</atlas:UpdatePanel>
i m unable to Vildate the Vildator..in second panel.. it cause post back i need some solutions for it .

Re: Nested UpdatePanel causes parent to post back?

NinjaFish — Fri, 04 Aug 2006 15:49:04 GMT

I'd appreciate an answer on the original question as well. This is the one major weakness I've found with Atlas so far -- fine-grained control of AJAX-updated areas is difficult, if not impossible in some cases, because of this behavior.

Re: Nested UpdatePanel causes parent to post back?

philcrosby — Thu, 03 Aug 2006 19:35:44 GMT

Totally hijacked.

But maybe a solution to your problem helps solve my problem, and then you're doing this thread a service!

Re: Nested UpdatePanel causes parent to post back?

leemhenson — Thu, 03 Aug 2006 18:30:04 GMT

Ok, I just got this to work but I'm not entirely sure of the reasons underpinning my problem. I've moved the PopupControlExtender inside the outer updatepanel, but moved the panel it pops up outside of that updatepanel. Next, I've added a standard asp:Button into the inner updatepanel and set it's UseSubmitBehaviour=false. With breakpoints on both button's Click handlers, I tried clicking both buttons. The image button never hit it's breakpoint, instead reloading panel and hiding the popup. The standard button hit it's breakpoint, reloaded and maintained the popup.

Viewing the page source shows the only difference in the two onclick handlers is the final postbackoption parameter: clientSubmit. The standard button has it set to true, the image button has it set to false. Looking in DoPostBackWithOptions shows that only those with clientSubmit == true call __doPostBack.

So, is it not possible to use ImageButtons in conjunction with a PopupControlExtender in this way?

Incidentally, apologies to the original poster for what has become a bit of a thread hijack. >:)

Re: Nested UpdatePanel causes parent to post back?

leemhenson — Thu, 03 Aug 2006 15:01:48 GMT

Incidentally, I have tried it with the following section both inside the updatepanel and outside of it.

<asp:Panel ID="contactSearchPanel" runat="server" CssClass="popupPanel">
    <cc:ContactSearch ID="contactSearch" runat="server" />
</asp:Panel>

Re: Nested UpdatePanel causes parent to post back?

leemhenson — Thu, 03 Aug 2006 14:57:53 GMT

This has bitten me today too. Slightly different scenario to the one above, as I'm using the PopupControlExtender from the Control Toolkit.

I have a standard aspx page, which contains several ascx's (each of which contains an updatepanel). The following is indicative of one of these ascx's:

<%@ Control Language="C#" AutoEventWireup="false" CodeBehind="Contacts.ascx.cs" Inherits="blah.Contacts" %>
<%@ Register Src="~/a_path/Search.ascx" TagPrefix="cc" TagName="ContactSearch" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<atlas:UpdatePanel ID="updatePanel" runat="server" Mode="Conditional">
    <ContentTemplate>
        <asp:TextBox ID="existingContactName" runat="server" ReadOnly="true" />
        <asp:ImageButton ID="submit" runat="server" 
            CssClass="button"
            ImageUrl="~/a_path/submit.gif" 
        />        
    </ContentTemplate>
    <Triggers>
        <atlas:ControlEventTrigger ControlID="submit" EventName="Click" />
    </Triggers>
</atlas:UpdatePanel>
<asp:Panel ID="contactSearchPanel" runat="server" CssClass="popupPanel">
    <cc:ContactSearch ID="contactSearch" runat="server" />
</asp:Panel>
<atlasToolkit:PopupControlExtender ID="selectExistingContactPopupExtender" runat="server">
    <atlasToolkit:PopupControlProperties 
        TargetControlID="existingContactName"
        PopupControlID="contactSearchPanel"
        Position="Bottom"
    />
</atlasToolkit:PopupControlExtender>

Ok, the ascx contained within the panel "contactSearchPanel" looks roughly like:

<%@ Control Language="C#" AutoEventWireup="false" CodeBehind="Search.ascx.cs" Inherits="blah.Search" %>
<atlas:UpdatePanel ID="updatePanel" runat="server" Mode="Conditional">
    <ContentTemplate>
        <asp:TextBox ID="firstName" runat="server" />
        <asp:ImageButton ID="search" runat="server" 
            ImageUrl="~/a_path/submit.gif" 
        />            
        <asp:Panel ID="resultsPanel" runat="server" Visible="false">
            <p><asp:Literal ID="resultsText" runat="server" /></p>
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <atlas:ControlEventTrigger ControlID="search" EventName="Click" />
    </Triggers>
</atlas:UpdatePanel>

When I click on the textbox in the outer ascx, the popup panel appears as expected. However, when I click the button inside the popup panel, instead of making the "results" panel visible, the outer ascx's update panel refreshes which causes the popup panel to disappear. Therefore you can't do anything in your popup panel that requires a postback, as it will be lost.

This is with the July CTP.

Nested UpdatePanel causes parent to post back?

philcrosby — Thu, 03 Aug 2006 09:20:15 GMT

Been playing with UpdatePanels all day, and after reading Rick Strahl's post here-

http://west-wind.com/weblog/posts/4642.aspx

I'm under the impression that a control in a nested UpdatePanel will cause the top level UpdatePanel to refresh (thus refreshing both UpdatePanels) because any events on that control act as an "implicit" trigger. Is that correct?

I've been trying to wire something like this up-

UserControl

Parent UpdatePanel

"Show" button

ASP:Panel

Dynamically added UserControls, each with UpdatePanels

When the Show button is clicked, the ASP:Panel becomes visible and starts adding UserControls to itself dynamically, based on some back-end logic.

Each of the dynamically added controls (henceforth: UserControls) have their own Atlas-enabled buttons and links, so they have UpdatePanels too. Currently when I click on a link in one of the UserControls, the entire contents of the ASP:Panel disappear, as if it's being re-rendered. All of my dynamically-added controls disappear, and none of their click events are caught in the debugger.

I'm assuming what's happening here is that controls that reside in nested update panels are causing the parent UpdatePanel to post back because they're firing "implicit" triggers. Is there a way for my UserControls to operate autonomously and not mess with the ASP:Panel that contains them?

If not, what strategy should I be pursuing here? If I have to re-render the entire ASP:Panel every time an event happens on one of the (possibly many) UserControls, that means I'll have to recreate the UserControls, which take a bit of effort to create. I'll also have to preserve some kind of view state to recreate them. I'm somewhat new to ASP.NET and that sounds intimidating. I'd rather never refresh the top leve UserControl and ASP:Panel if I can avoid it, and let each of the dynamically-added UserControls fire and handle their own events asynchronously.

Am I on the right track?

Thanks

-Phil Crosby