I have two update panels (lets call them A and B). In A, I have a simple checkbox. AutoPostback set to true. When you check it (or uncheck it), it will enable/disable a simple dropdown within the same UpdatePanel.
UpdatePanel B has a long running process in it. It fires off a request for a dropdown to be created that takes nearly 2 minutes to construct. If I load the page and don't touch anything, the dropdown is constructed after about 2 minutes and renders perfectly. However, if during that two minutes I decide to check my checkbox (and cause a partial postback for panel A), updatepanel B never gets rendered. While debugging, I found that it is completing its retrieval successfully, but the actual panel never refreshes to show the control.
I have tried using UpdateMode = Conditional on panel B (to ensure it would not be disturbed by panel A) and it produces the same results. I have verified that B.Update() is being called also.
EDIT
Panel A:
<asp:UpdatePanel ID="upMailScrub" runat="server">
<ContentTemplate>
<asp:Button ID="btnAnalyzeLaunch" runat="server" onclick="btnAnalyzeLaunch_Click" Text="Analyze Launch" style="display: none" />
<table>
<tr>
<td><asp:CheckBox ID="cbxScrub" runat="server" Checked="true"
oncheckedchanged="cbxScrub_CheckedChanged" AutoPostBack="True" /></td><td><label for="cbxScrub">Scrub this campaign</label></td>
<td style="padding-left: 10px">
Vendor: <asp:DropDownList ID="ddlScrubVendor" runat="server">
<asp:ListItem Text="LexisNexis" Value="LexisNexis" />
</asp:DropDownList>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Panel B:
<asp:UpdatePanel ID="upDdlCampaigns" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAnalyzeLaunch" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:HiddenField id="hidAction" runat="server" />
<asp:Panel ID="pnlPleaseWait" runat="server"><img src="style/images/PleaseWait.gif" /> Please wait while the Five9 Campaigns are retrieved...</asp:Panel>
<asp:DropDownList ID="ddlCampaigns" Visible="false" runat="server" class="required"
AutoPostBack="True" OnSelectedIndexChanged="ddlCampaigns_SelectedIndexChanged" />
<asp:Button ID="btnRefreshDDL" runat="server" onclick="btnRefreshDDL_Click" style="display: none" />
</ContentTemplate>
</asp:UpdatePanel>
Any suggestions? Thanks.
You ask too much from UpdatePanel :)
UpdatePanel can not work with 2 parallel request that way. Consider to make some ajax call to get your results.
Why you may ask, one basic reason is that every page have only one viewstate. When you ask from the A or the B, UpdatePanel to send/get data, then the viewstate must change to a new viewstate. Now, when you ask a result from A, and before you end, you ask results from B, you going to get 2 different viewstate, and one of them is going to fail because in the middle time have change.
ViewState is not the only think, in every update panel click, the page post back all inputs post to page, both A and B inputs and all the rest inside the page, this is also a problem. Imaging this for example, you trigger A UpdatePanel with inputs A+B, and then before the A ends, you trigger B UpdatePanel with the same inputs. Now A, waits for results from A+B, the same and B, but in the middle time the A+B results from A is now different because B has change them - and fails.
Related
Working on an asp.net page I created a custom ajax web user control that displays the contents of a list value (which is loaded via database calls). The control includes "next" and "previous" buttons, as well as a couple text boxes. My initial version used a session variable (iterator) to keep track of where the user is while clicking the buttons and filling the text boxes with values from the List[].
In my next iteration, I need to be able to use this custom control, which will be presented many times in a table (or more probably grid), but I'm having trouble figuring out how to handle the iterator, since the session variable will obviously no longer work.
Does anyone have a suggested approach, or a recommended article?
I solved the problem by creating a second form on my user control that is segregated from the controls contained within the UpdatePanel. Before those controls are refreshed, the segregated control (a label in this case) is programmatically assigned a value and when the control Page_Load event fires it references the segregated label value to keep track of it's current position. I also had to move the ScriptManager out of my control and place it on the page(s) the control will be used on, since there will be several of these custom user controls on the page and only one ScriptManager is permitted per page.
<form id="NaviControl" >
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel ID="controlsPanel" runat="server" HorizontalAlign="Center" >
<asp:Panel ID="Panel1" runat="server" >
<asp:Button ID="btnLast" runat="server" Text="Previous" Height="25px" Width="75px" OnClick="btnLast_Click" />
<asp:TextBox ID="tbStatusCode" runat="server" ></asp:TextBox>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" HorizontalAlign="Center" >
<asp:TextBox ID="tbDescription" runat="server" ></asp:TextBox>
<asp:Button ID="btnNext" runat="server" Text="Next" Height="25px" Width="75px" OnClick="btnNext_Click" />
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<form>
<asp:Label ID="lblCounter" runat="server" visible="false" />
</form>
Hope some other nubs find this approach useful.
I'm using an ASP.NET Accordion control with lots of panes for a data entry form. Within several of the panes are some UpdatePanels, so that some controls within those panels can be enabled or disabled to prevent users from entering values into fields which are precluded by values they've entered elsewhere.
It all works fine, but for some reason, on about half of the occasions where an UpdatePanel postback is triggered (by a specified AsyncPostBack Trigger), the first pane of the Accordion momentarily expands and collapses. This gives that horrible 'flashing' experience you get when a page does a full postback, which is exactly what I'm trying to avoid by using UpdatePanels.
The problem doesn't seem to relate to the contents of the first pane - I tried completely deleting the first pane, so that the second pane became the first, and the same thing happens.
Anybody got any ideas why this is happening and how to fix it?
UPDATED WITH CODE
This is an example of one of the panels. Don't be too offended by the use of a table - it's an actual table, I'm not just using it for layout purposes!
<tr class="grouprow">
<td>Transportation</td>
<td><asp:RadioButtonList ID="rblTransportation" runat="server" RepeatDirection="Horizontal" SelectedValue='<%# Bind("AdmissionTransportation")%>' AutoPostBack="true"
OnSelectedIndexChanged="rblTransportation_SelectedIndexChanged" >
<asp:ListItem Text="Unknown" Value="" />
<asp:ListItem Text="Yes" Value="True" />
<asp:ListItem Text="No" Value="False" />
</asp:RadioButtonList></td><td></td>
</tr>
<tr class="grouprow">
<td>Transportation Duration</td>
<td><asp:UpdatePanel ID="updTransportationHours" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rblTransportation" EventName="selectedindexchanged" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtTransportationHours" runat="server" Text='<%# Bind("AdmissionTransportationHours")%>' CssClass="tinytextbox" />
<label class="unit">Hours</label>
<asp:RegularExpressionValidator ID="revTransportationHours" runat="server" ControlToValidate="txtTransportationHours" ValidationExpression="\d{1,3}(\.\d{1,2})?"
ValidationGroup="Past30Days" ErrorMessage="Invalid format for Transporation Duration. Please enter in format 'xxx.xx', e.g. '3.25'" Display="Dynamic"
CssClass="error" >*</asp:RegularExpressionValidator>
<asp:RangeValidator ID="rvTransportationDuration" runat="server" ControlToValidate="txtTransportationHours" CssClass="error" ValidationGroup="Past30Days" type="Double"
ErrorMessage="The Transportation Duration cannot be more than 100" MinimumValue="0" MaximumValue="100" >*</asp:RangeValidator>
</ContentTemplate>
</asp:UpdatePanel></td><td></td>
</tr>
I believe you need your rblTransportation RadioButtonList wrapped in an UpdatePanel as well.
Since that control isn't in an UpdatePanel, it causes a full postback.
The answer is gloriously simple, though I'm too tired to figure out why it works just now. I simply need to set ClientIDMode = AutoID on the RadioButtonLists and CheckBoxLists and they now trigger an asynchronous postback rather than a full one. They don't need to be within their own UpdatePanels either.
I got the answer from this SO question.
Can you try <asp:blablacontrol style="Display:none;"> </asp:control>
modalpanels has same problem and this codes solved my problem
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.
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
Basics:
I have a text box (txtDepositAmount) that people can
enter a deposit amount into and a
drop down (ddlSelectedTerm) that sets the terms.
Through these two values I calculate
the APY (lblCurrentApy).
Rules:
If only one of the values is selected I still want to do an update on the current APY label and clear it.
If either value changes I want to update the current APY and recalculate.
The problem:
As soon as I click away from the textbox and onto the drop down to select my term the drop down flashes and closes because the textbox TextChanged event was just fired.
I have to click on the drop down a second time to be able to select anything!
Do I need to change what event I'm looking at or do I need to move some of the controls outside of the UpdatePanel? Can this only happen if some of the business rules change? Should I just give up and go to javascript?
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table width="100%">
<tr>
<td align="left" style="width: 10%" class="LineAlign">
</td>
<td align="left" style="width: 40%" class="LineAlign">
<asp:Label ID="lblDollarSymbol" runat="server" Text="$"/>
<asp:TextBox ID="txtDepositAmount" runat="server"
AutoPostBack="true" TabIndex="1" MaxLength="14"
ontextchanged="txtDepositAmount_TextChanged"/>
</td>
<td align="left" style="width: 30%" class="LineAlign">
<asp:DropDownList ID="ddlSelectedTerm" runat="server"
AutoPostBack="true" TabIndex="2"
onselectedindexchanged="ddlSelectedTerm_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td align="center" style="width: 20%">
<asp:Label ID="lblCurrentApy" runat="server"/>
<asp:Label ID="lblPercentSymbol" runat="server" Text="%"/>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlSelectedTerm" />
<asp:AsyncPostBackTrigger ControlID="txtDepositAmount" />
</Triggers>
</asp:UpdatePanel>
autopostback="true" on your textbox is causing this, since both controls are reloaded after they leave the textbox. I doubt there is a way to avoid this as long as they are in the same UpdatePanel.
Maybe you could set focus to the dropdown list after the textbox-initiated postback, or you could probably make this work by putting the controls in separate UpdatePanels. But really it seems the wrong way to go about it. I would use javascript (and ajax if the logic is complicated) to update the APY. Or just add a "calculate" button...
(Edit)
Here's a slightly ugly hack to avoid ajax, three update panels and still be able to do your logic server side. I do not approve of this method but it is quick and dirty.
Put the Label control that contains the calculation results in an UpdatePanel. The input controls do not need to be in an UpdatePanel.
In the update panel (with the results) have a hidden submit button:
<asp:Button ID="DoCalculate" style="display:none;" UseSubmitBehavior="false"
runat="server" OnClick="Recalculate()" />
This should be the trigger for the UpdatePanel. Then have your two input controls click that button using javascript to cause a partial postback to the "results" panel. Here is the code to add this javascript for the dropdown, for example, in Page_Load:
ddSelectedTerm.Attributes.Add("onSelectedIndexChanged",
"document.getElementByID('" + DoCalculate.ClientID + "').Click()");
Then in put the C# code to do the calculation and update the label in the 2nd update panel in the "Recalculate()" method.
This should work, and give you better layout control and less code flow ugliness then using 3 update panels.
You can just use the Focus() in the server event. For example if you have txtBox1 and txtBox2 and want to have the focus in the box 2 after write something in box 1 and both of them inside an update panel.
Only go to the TextChange event of the box 1 and write txtBox2.Focus() and after the update of the panel the focus will be in the box 2. :)
Hope helps...
I ripped out the UpdatePanel and just did jquery. Screw Microsoft.