All UpdatePanels posting back at the same time - asp.net

I have a C# .net 4.0 website project with a fairly complicated filtered search page on it. There are multiple UpdatePanels that are added within a Repeater. When one UpdatePanel does a postback - all the other UpdatePanels also postback at the same time.
This becomes a problem because there can be lots and lots of UpdatePanels dependent on the number of items the user chooses to view. I know UpdatePanels are not ideal - I didn't write this but have to try and fix it quickly!
There is LandingPage that holds an UpdatePanel with a Repeater control inside. Within the repeater is a user control called Article. The Article control contains some HTML and a second user control called Save. The Save control has an UpdatePanel too.
The problem I have is that only the first btnSave event gets raised. So if I click "btnSave" it works but all subsequent button click events do not fire.
I have also noticed that ALL instances of the UpdatePanel in the Save control postback at the same time - is this normal?
So a simplified view of the page is like so:
LandingPage.aspx
<asp:UpdatePanel ID="pnl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Repeater ID="resultsRep" runat="server">
<ItemTemplate>
<uc:Article id="Article1" runat="server" />
</ItemTemplate>
</asp:Repeater>
<asp:Button id="btnLoadMore" runat="server" Text="Load More" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLoadMore" EventName="Click" />
</Triggers>
<asp:UpdatePanel>
Custom User Control "Article"
<asp:PlaceHolder ID="ArticlePanel" runat="server">
<!-- Assorted HTML stuff here -->
<uc:Save id="Save1" runat="server" />
</asp:PlaceHolder>
Custom User Control "Save"
<asp:UpdatePanel ID="ctl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
<ContentTemplate>
<asp:LinkButton ID="btnSave" runat="server" OnClick="btnSave_Click" CausesValidation="False" Text="Save" />
</ContentTemplate>
</asp:UpdatePanel>
Thanks in advance as always.
EDIT
After further investigation, using Firebug console I found that the subsequent postbacks don't occur because the following error is thrown:
505|error|500|Invalid postback or callback argument.
Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%# Page EnableEventValidation="true" %> in a page.
For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.
If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.|
So it seems somehow I am posting back something dodgy?

The problem was down to the use of nested UpdatePanels. I don't know where the error itself actually comes from but after trial and error I figured out that the parent UpdatePanel wasn't configured properly.
The parent UpdatePanel should have been like so :
<asp:UpdatePanel ID="pnl" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
The difference being UpdateMode="Always" and ChildrenAsTriggers="true". The UpdateMode tells the parent UpdatePanel to refresh when any of the children reload. The ChildrenAsTriggers attribute allows child UpdatePanels to cause the refresh of the parent.
So now it works - mostly. I still have the issue of every single UpdatePanels posting back everytime. Its really inefficient but I can't seem to stop it.

Related

trigger an async postback for an update panel from a repeater control

I have an ASP.NET Repeater Control inside an UpdatePanel. I need to update another control when clicking in an ImageButton (inside of the Repeater template). The thing is that I can't get that to trigger.
The panel upPanelRotator is refreshed... which I don't want...I just want to call back to server to update another panel - which I'll control from the server.
Any ideas?
<asp:UpdatePanel ID="upPanelRotator" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptRotator" runat="server" OnItemCommand="rptRotator_ItemCommand">
<ItemTemplate>
<asp:ImageButton ID='imgBtn' runat="server" />
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgBtn" EventName="ItemCommand" />
</Triggers>
</asp:UpdatePanel>
You should be able to add an async postback trigger to the updatepanel you want to update. Set the control id of the repeater and the "ItemCommand" event as the event name... like this:
<asp:UpdatePanel ID="updatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="repeaterId" EventName="ItemCommand" />
</Triggers>
<ContentTemplate>
...
If PanelA has the trigger button, and you want to update PanelB, you would need to have the async postback trigger on the UpdatePanel surrounding PanelB. The problem is, you need to give the actual ID's of the buttons, which specifying imgButton like you have above won't work (because there could be many in the repeater, and async trigger requires one reference that it won't be able to find). To make this very simpe, wrap everything in the UpdatePanel, and that will make your life easier. Otherwise, you have to add the async postback triggers from code I believe.
I have right now similar situation, and I have do this so that I wrap control inside Repeater in another UpdatePanel, and I set AutoPostBack="true" of that control, and register
< asp:AsyncPostBackTrigger ControlID="imgBtn" EventName="Click"/ >
my only consideration on this is how will a such number of UpdatePanels reflect upon performance. I have small project with few DB entry's but for larger amounts of Data, I would test performance before and after such intervention.

Update Panel freezes on Postback

Have a AJAX UpdatePanel in a MasterPage file:
<asp:UpdatePanel ID="upnlTimer" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tmrCountdown" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="tmrCountdown" Enabled="false" runat="server" Interval="1000" />
<asp:Label ID="lblTimer" runat="server" Text="TEXT"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
When i goto debug everything works well, dont get the postback flash as the timer counts down.
But when the user makes a selection from a RadioButtonList, of course the SelectedIndexChange events fires off and the PostBack goes off as expected.
One problem i am having though is that the UpdatePanel with the Timer/Label is freezing, albeit fractions of a second, but over time it can increase the time-alloted for the test by up to a full minute (60 secs) pending on the number of questions being asked.
Question:
Is there a way to isolate the PostBack away from the Timer UpdatePanel from the Question List? Placed an UpdatePanel on the Content Page
Would it be better to place the ContentPlaceHolder, in MasterPage, within a UpdatePanel so that its postbacks are isolated from the Timer UpdatePanel?
If i isolate the CPH, as #2, I can still access the MasterPage file name as i am right now CType(me.Master, Main).Event?
Having a problem with the Content Page UpdatePanel, either conflicting or stopping, the MasterPage Timer UpdatePanel. How would i go about fixing this problem?
I think you are experiencing the annoying timeout of UpdatePanel.
I suggest you try to improve any code in the SelectedIndexChanged of your Radiobutton or try another approach without UpdatePanel.

Nested UpdatePanel causes parent to postback?

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.
EDIT: Instead of adding the controls dynamically, I added them to the markup(not a bad solution). So got rid of the controls disappearing problem, because now the controls are not added dynamically but instead exist in the markup. But still the parent UpdatePanel posting is a big performance hit, because all the UserControls are getting posted instead of one. How do I make only one UserControl postback? Also, I would like to know how to get rid of the problem of controls disappearing if added dynamically?
First off, keep in mind: UpdatePanels do not alter the lifecycle of a page.
All of the Control Tree (including the UpdatePanels) must be reconstructed just as with a Normal Postback Life-cycle.1 2 The UpdatePanels ensure that only a portion of the rendered (HTML) view is returned. Removing all UpdatePanels should result in the same behavior, except with a full postback. For instance, only the HTML representing a nested UpdatePanel (presumably because data changed) might be sent back in the XHR response.
To get "true" AJAX consider Page Methods. Alternatively, DevExpress (and perhaps Telerik and others?) offer their own form of "Callback Panels", which are similar to UpdatePanels, but can bypass parts of the life-cycle (and, as a result often do not support the ViewState model entirely or may introduce their own quirks).
While not understanding the above is the most likely reason for the controls "disappearing", here is my rule: Do Not Let [Nested] UpdatePanels Work "Automatically".
Edge cases with dynamic controls and nested UpdatePanels will be encountered. There might be a nice way to handle this, but I have failed on multiple different attempts.
Instead, for every update panel, run with:
UpdateMode="Conditional"
ChildrenAsTriggers="False"
With the "Conditional" UpdateMode, make sure to manually specify the Trigger control or call panel.Update() (although this hard-wires the Control) as required. Depending on needs ChildrenAsTriggers="True" might work as well. The big thing is that UpdateMode is not "Always" which is the default.
After switching to this approach, I have no problem -- well, almost none -- with nested UpdatePanels.
Happy coding!
1 If the page doesn't render correctly where Partial Rendering (in the ScriptManager) is disabled (e.g. all requests are full postbacks) then there is no reason to expect/believe it will work correctly with UpdatePanels.
2 There are times when it's warranted to "cheat" expensive recomputations in the control tree for controls that will not be re-rendered. However, I would consider these advanced cases that should only be done when performance analysis indicates there is a specific need.
I had a similar issue with a heavy ajax Gridview control, and a HTML page with multiple UpdatePanels, some nested, some not.
It took me over 3 weeks of trial and error, reading, testing, debugging and prototyping to finally resolve all the post backs and partial postbacks.
However I did notice a pattern, which worked for me.
Like the #user above's response, make sure your UpdatePanels are set Conditional and only specificy asp:PostBackTrigger on the final or decisive control that you want the page to do a full postback on. I always use asp:AsyncPostBackTrigger where ever possible.
So for example, if you're using UpdatePanels inside a GridView and you want a popup inside a cell of the gridview's row, then you need to use a nested UpdatePanel.
ie
<asp:TemplateField HeaderText="Actions & Communications">
<ItemTemplate>
<asp:UpdatePanel ID="upAction1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnActionOK" />
</Triggers>
<ContentTemplate>
...
...
<ajaxToolkit:ModalPopupExtender ID="ajaxMPE" runat="server"
BackgroundCssClass="modalBackground"
PopupControlID="upAction2"
TargetControlID="btnADDaction">
</ajaxToolkit:ModalPopupExtender>
<asp:UpdatePanel ID="upAction2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlACTION" runat="server" CssClass="pnlACTION">
<div id="divHDR">
<asp:Label ID="lblActionHdr" runat="server">** header **</asp:Label>
</div>
<div id="divBOD">
<table style="width: 98%; text-align:left">
<tr>
<td colspan="2">
Please enter action item:<br />
<asp:TextBox ID="txtAction" runat="server" ValidationGroup="vgAction" TextMode="MultiLine" Rows="3" Width="98%"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAction" runat="server" ControlToValidate="txtAction" ValidationGroup="vgAction"
ErrorMessage="* Required" SetFocusOnError="True"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td colspan="2">
Select staff assigned to this task:<br />
<asp:DropDownList ID="ddlActionStaff" runat="server" AppendDataBoundItems="true" ValidationGroup="vgAction" />
<asp:RequiredFieldValidator ID="rfvStaff" runat="server" ControlToValidate="ddlActionStaff" InitialValue="0" ValidationGroup="vgAction"
ErrorMessage="* Required" SetFocusOnError="True" Width="98%"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<asp:Button ID="btnActionOK" runat="server" Text="OK" OnClick="btnActionOK_Click" ValidationGroup="vgAction" CausesValidation="false" />
<asp:Button ID="btnActionCANCEL" runat="server" Text="CANCEL" OnClick="btnActionCANCEL_Click" ValidationGroup="vgAction" CausesValidation="false" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
<asp:SqlDataSource ID="sdsTETactions" runat="server" ConnectionString="<%$ ConnectionStrings:ATCNTV1ConnectionString %>"
...
...
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
Notice a few things here:
The ModalPopupExtender does not refer to the Ok and Cancel buttons. This is because I want them to trigger a partial postback to the server (code-behind)
The nested UpdatePanel (upAction2) is purely to force a partial postback on that panel only (pnlAction)! Therefore this forces the data validation triggers to work and keep the panel open if the user does not provide data in the requiredfield validators
The main UpdatePanel (upAction1) controls the entire lot and keeps all postbacks held within that panel only and NOT affecting the gridview (not shown entirely).
There is a great article here, which explains it better.
I hope this helps someone

asp.net ajax update panel confusion

Well, i have this in my master page
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release" />
And this in a usercontrol
<asp:UpdateProgress ID="updateProgress1" runat="server" AssociatedUpdatePanelID="CustomerListUpdatePanel" DisplayAfter="0" DynamicLayout="false">
<ProgressTemplate>
<asp:Literal ID="loadingLiteral" runat="server" Text="<%$resources:Label,Loading %>" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel id="CustomerListUpdatePanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:repeater id="CustomerListRepeater" runat="server">
Problem here is that when i press the SearchButton the update panel updates but the UpdateProgress does not show it self, even if it takes a few seconds.. [somewhat solved by Yuriy Rozhovetskiy].
Problem is that the child buttons inside the updatepanel do not cause a total postback, instead they only reload the update panel, so it seems ChildrenAsTriggers="false" does not work or im miss understanding it.
Im using AjaxControlToolkit 4.1.50731.0.
Edit: also the UpdateProgress seems to display it self if a button is pressed inside the update panel...
Associating an UpdateProgress with an UpdatePanel Control:
The AssociatedUpdatePanelID property has the following effect on
UpdateProgress control behavior:
When the AssociatedUpdatePanelID property is not set, the
UpdateProgress control is displayed for the following postbacks:
Postbacks that originate from inside any UpdatePanel control.
Postbacks that originate from controls that are asynchronous
triggers for any UpdatePanel control.
When the AssociatedUpdatePanelID property is set to an UpdatePanel
control ID, the UpdateProgress control is displayed for postbacks
that originate from inside the associated UpdatePanel control.
Not sure about #Problem 1.
Regarding #Problem 2... I think your understanding might not be correct.
http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.childrenastriggers.aspx

Why does the Update Panel do a full post back for custom control?

I have a rather complex custom control - the custom control has a couple of update panels in it.
I am trying to use the control like this inside of an update panel:
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="btn1" runat="server" Text="Sample Button" /> <asp:Label ID="lblTime" runat="server"></asp:Label>
<cc1:MyCustomControl ID="MyCustomControl1" runat="server" >
</cc1:MyCustomControl>
</ContentTemplate>
</asp:UpdatePanel>
When I click the button in the update panel, it does an async post back and there is no screen "flicker" When I click a button in my custom control the page flickers and does a full post back.
Inside the custom control, there are update panels that are trying to do full postbacks (based on triggers).
How can I make the page level UpdatePanel not do a full postback no matter what is going in inside of the custom control?
Have you thought about explicitly setting an asp:AsyncPostBackTrigger with the btn1 control in the up1 UpdatePanel control.
<asp:UpdatePanel ID="up1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btn1" runat="server" Text="Sample Button" />
<asp:Label ID="lblTime" runat="server"></asp:Label>
<cc1:MyCustomControl ID="MyCustomControl1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Edit: How you tried to explicitly call the Update method in the button's OnClick event for the Update Panel? This includes the Update panels embedded within the custom control.
Figured out the solution similar issue to this: How can I get an UpdatePanel to intercept a CompositeControl's DropDownList
Except my control causing the postback was in an updatepanel with a full postback trigger. I was able to pull that control out so it was not nested with in update panels and that resolved it.
I would first look if there is some other issue with the custom control causing the full page postback, as in any case what should be happening is that the whole update panel refreshes (still with ajax).
After that, just look at the Nesting UpdatePanel Controls section of this:
http://msdn.microsoft.com/en-us/library/bb398867.aspx#
Also make sure to have the ScriptManager control with the property EnablePartialRendering set to true.
On the UpdatePanel, set the property ChildrenAsTriggers="true". This tells the UpdatePanel to intercept all PostBack invocations that originate from inside the UpdatePanel.
You may want to also explore the UpdateMode property, which determines what kinds of events trigger an update. (By default, an UpdatePanel will refresh if any other panel on the screen gets refreshed. This threw me for awhile until I realized what was going on.)

Resources