UpdatePanel inside a Repeater - update all rows - asp.net

I'm trying to speed up my Repeater so that not as much HTML has to be resent via the AJAX UpdatePanel on each call.
So here's what I have (a very much simplified version):
<asp:Repeater ID="rptContactSteps" runat="server">
<ItemTemplate>
<p>Script:<br /><%#mobjSDIT.FormatText(Eval("script"))%></p>
<p>Notes:<br /><%#mobjSDIT.FormatText(Eval("notes"))%></p>
<asp:UpdatePanel ID="upStep" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rptContactSteps" EventName="ItemCommand" />
</Triggers>
<ContentTemplate>
<p>Contact/Step Notes:<br /><%#mobjSDIT.FormatText(Eval("contact_step_notes"))%></p>
<asp:ImageButton ID="btnSaveAndCompleteLastStep" runat="server" ImageUrl="~/images/content/buttons/save-and-complete-button.png" CommandArgument='<%#Eval("step_contact_tie_id")%>' />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
So, when I click 'btnSaveAndCompleteLastStep' I want all the UpdatePanel in 'rptContactSteps' to update. Having the UpdatePanel inside the ItemTemplate should help prevent having to re-load the html/text that populates the Eval("script") & Eval("notes"), since the value of these variables could be very large and over a 3G connection this could be very costly (in time & money).
I though by adding the async trigger it'd work as I have used this type of trigger before, but not when inside the Repeater. Currently the UpdatePanels aren't getting updated at all, except from the one from which the button was pressed.
Any ideas anyone?

They aren't getting updated except by the one that is called because the update mode is set to conditional, and by default the ChildrenAsTriggers is set to true. So if you want them all to update when one of them is changed, then you will need to find each of the update panels in each of the repeater items and call .Update() on the update panel, or you can change the update mode to "Always", or just wrap your repeater in an update panel instead of wrapping just the items.
Does that make sense? If not I can expand.

That behavior sounds ok to me because postback from within an updatepanel will not update anything outside of it by default.
One way you can try is on your btnSaveAndCompleteLastStep click , find each updatepanel in the repeater items and call Update() on it.

Related

Postback in UpdatePanel

I have made a ToolBar usercontrol in a update panel. All buttons should work client side except a print button. I want to make this use the original postback.
ScriptManager.GetCurrent(Me).RegisterAsyncPostBackControl(Toolbar2.PrintButton)
However the button still doesn't refresh the page...
Any ideas?
You must set AutoPostBack to true? of the PrintButton that you have created
Rather than using the script manager to register a control as asynchronous, instead set the button as a trigger on the update panel itself, which you also can do via code.
HTH.
When you use RegisterAsyncPostBackControl you must also manually refresh the update panel using the Update() method.
http://geekswithblogs.net/lszk/archive/2011/08/08/playing-with-update-panels.aspx
You can use the Triggers property of the UpdatePanel to register actions that trigger a full postback.
Add a PostBackTrigger object to that property, containig the ControlID of the control which needs to trigger a full postback.
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
...
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="myFullPostBackControlID" />
</Triggers>
</asp:UpdatePanel>

Handling updatepanels that are "chained" together in asp.net?

Much like when you are looking for support on a website or whatever, you choose Product from the first listbox (say, Hard Disk), which triggers and populates a second listbox with more options (say, "Solid State", "SATA"), and so on...
The problem I am having is that when you select something from the second listbox that should populate the third one, the postback triggers the first listbox too, which then repopulates the 2nd one back to its default value.
Eg.
[Dropdown 1] (contains A B C D E)
[DropDown 2] (A in dropdown 1 has options X Y Z)
[Dropdown 3] ...
If you choose A, then dropdown 2 populates with XYZ. You choose Z, and it should update dropdown3, but the postback also triggers dropdown 1 again, which replaces Dropdown 2's contents and resets the value back to X.
I am looking for an elegent solution. I had one that said only repopulate dropdown 2 if dropdown 1 has changed, but it means keeping track of what dropdown 1 was before the page posted back.
Each dropdown is in an updatepanel and set to autopostback=true, and each updatepanel has the previous listbox in its triggers.
First Check if the second TextBox isn't a trigger to the first UpdatePanel, if it is then remove it from the first update panel's Triggers Collection.
Here's the Key Concept:
If you have two separate tags you should place a trigger tag in the second update panel and insert a AsyncPostBackTrigger with the controlID of the first dropdownlist, here's a simple example:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="TxtBox1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="TxtBox2" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TxtBox1" />
</Triggers>
</asp:UpdatePanel>
I would simply put all the drop downs in the same update panel. It might not be as efficient, but it will probably bee good enough and certainly require less lines of code.
Why don't you try AjaxControl Toolkit CascadingDropDown. It seems to suit your needs.
Also, this will improve performance, as postback won't be sending all page information (as does with update panel).
I figured it out - I can use ScriptManager1.AsyncPostBackSourceElementID to check what caused the trigger, and make it refresh only for postback and the first dropdown box.
Maybe I'm thinking too simplified, but why wouldn't you just be handling all these events ... as events? Populate DDL1 only on initial Page_Load. Populate DDL2 only on DDL1.SelectedIndexChanged. Populate DDL3 only on DDL2.SelectedIndexChanged...

Event issue with ASP.net Update Panel

I am completely stumped on this and would really appreciate any help.
I am working on a user control that is situated inside of an update panel. There is a button on the form which loads some data. This is working correctly.
There is also a drop-down box to filter the data. Changing this does initiate a post back, however nothing happens. The drop-down box goes back to it's default value the OnSelectedIndexChanged function is never called.
I've put break points in page_prerender and page_preload and both are being hit the post back is definitely occuring. Breakpoints withing the dropdownGroup_changed function are never hit.
Removing the update panel solves the problem, however it breaks the rest of the page so I can't use that for anything other than testing.
I've also verified that there is nothing in my prerender / page load that is resetting the page's state.
Here is the update panel code:
<asp:UpdatePanel ID="UpdatePanel6" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" >
<ContentTemplate>
<ucControlName:ControlName ID="ControlName1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Here is the drop-down in question - It is located inside of the user control
<asp:DropDownList ID="dropdownGroup" runat="server" Visible="false" AutoPostBack="true" OnSelectedIndexChanged="dropdownGroup_changed"></asp:DropDownList>
It is of course visible and databound by the point in the code where the issue is occuring
A bit more info-
added Both a hard coded dropdown (To rule out a stupid databinding issue) and a textbox to the same control. I have the same issue.
It appears that the event isn't triggering because the values are never changing as far as .net is concerned. I've checked the control during page_init and page_load - the value is always the same.
The fact that the button works but the other controls don't makes me think that there is a view state issue here somewhere but I can't quite ferret out what is causing it. Viewstate is enabled for the page and the panel- don't know if anything else could be overriding / corrupting it.
Did i mention that I hate update panels with a passion? because I hate update panels with a passion.
I suggest checking the 'Value' property for each 'ListItem' in the 'DropDownList' control. If they are all the same even if the 'Text' properties are different, then the 'OnSelectedIndexChanged' will not fire at all since ASP.NET cannot tell if anything has changed (See this related question for more info.)
This was the real cause of my problem even though I, too, had a 'UserControl' with a 'DropDownList' inside an 'UpdatePanel' and the 'AutoPostBack' was firing as expected. I thought the UpdatePanel was the culprit but it was not the case. Each of the items in my DropDownList had the same underlying value of "10" even though they had distinct 'Text' values. I changed them to each have a unique value which then allowed for the OnSelectedIndexChanged event to fire thus fixing the problem.
Two answers for the price of one:
Are you calling DataBind() in your Page_Load? If you do that on a PostBack, you will lose events. Replace the call with the following:
if (!IsPostBack) {
DataBind();
}
If your DropDownList is outside your UpdatePanel, you need to add a Trigger as follows:
<asp:UpdatePanel ID="UpdatePanel6" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="dropdownGroup" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<ucControlName:ControlName ID="ControlName1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Have you tried UpdatePanel.Update (); after your databind.

Trigger an update of the UpdatePanel by a control that is in different ContentPlaceHolder

I have a page with two ContentPlaceHolders. One has a DropDown and another UpdatePanel with content.
How can I trigger update to the UpdatePanel by the DropDown's selectedItemChanged event when they are in different ContentPlaceholders?
The following would not work since UpdatePanel1 doesn't know about DropDown1:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
Some content that needs to be updated here...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDown1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
One way is to make an ajax page method that would be called by javascript on the page when DropDown's item is selected. Then in code behind, inside that page method, call UpdatePanel1.Update().
Is there an easier alternative?
From http://msdn.microsoft.com/en-us/library/system.web.ui.asyncpostbacktrigger.aspx
The control that the
AsyncPostBackTrigger references must
be in the same naming container as
the update panel for which it is a
trigger. Triggers that are based on
controls in other naming containers
are not supported.
The workaround is to use the UniqueID of the control that the
trigger is referencing. Unfortunately the UniqueID isn't qualified
until the control has been added to its parent (and its parent
has been added to its parent, all the way up the control tree).
In your code behind, try:
UpdatePanel1.Triggers.Add(new AsyncPostBackTrigger()
{
ControlID = DropDown1.UniqueID,
EventName = "SelectedIndexChanged", // this may be optional
});
In the code-behind file, you should be able to do:
ScriptManager.RegisterAsyncPostBackControl(dropdown1);
You can enforce update any of page UpdatePanels by call updatePanel1.Update() method on server side.
For example during update updatePanel1 on button1.Click call updatePanel2.Update() and both panels will be updated.

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