asp.net ajax update panel confusion - asp.net

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

Related

ASP Update Panel

I implemented an update panel with a treeview control inside. The treeview control will cause a postback via Javascript which leads to the OnNodeChecked being triggered.
I have wrapped this in an UpdatePanel control, but I still get the blinking effect on my page. I also have a scriptManager implemented in the page. Does anyone know what I can do to avoid the flicker?
<asp:UpdatePanel ID="updateTreeViewPanel" runat="server"
ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<asp:TreeView ID="tv_WLG" runat="server"
OnTreeNodeCheckChanged="tv_WLG_TreeNodeCheckChanged"
OnSelectedNodeChanged="tv_WLG_SelectedNodeChanged"
onclick="javascript:postBackByObject(event)"
ShowCheckBoxes="All">
</asp:TreeView>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
I would recomend adding a trigger...
<asp:UpdatePanel>
<ContentTemplate>
...your existing code
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tv_WLG" />
</Triggers>
</asp:UpdatePanel>
The clientside script you're targeting may occur outside the scope of the update panel however. You might try handleing your click event in the codebehind instead.
What you can do is add an onload event to the updatepanel and trigger that using __doPostback() like so. Then whenever the click event fires you can handle it in the onload event of the updatepanel
<asp:UpdatePanel ID="updateTreeViewPanel" runat="server"
ChildrenAsTriggers="true" OnLoad="UpdatePanel_Load" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<asp:TreeView ID="tv_WLG" runat="server"
OnTreeNodeCheckChanged="tv_WLG_TreeNodeCheckChanged"
OnSelectedNodeChanged="tv_WLG_SelectedNodeChanged"
onclick="__doPostback('updateTreeViewPanel', '');"
ShowCheckBoxes="All">
</asp:TreeView>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
The reason your current method isn't working is because the postback object needs to be an object that is being handled by the update panel. Calling doPostback() with the update panel as the object will trigger the partial postback.

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.

ASP.Net UpdatePanel doesn't do PostBack

I have an ASP.Net page with a long, time-consuming function. I want it to show the "LOADING" word while computing, and show the results when it's done. Here's the code:
<asp:UpdatePanel UpdateMode="Always" runat="server" ID="upanel1">
<ContentTemplate>
<asp:Button ID="btnGetInfo" runat="server" Text="Lekérés" OnClick="btnGetInfo_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnGetInfo" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="upanel1">
<ProgressTemplate>
<div>
LOADING</div>
</ProgressTemplate>
</asp:UpdateProgress>
It's almost working(I can see "LOADING" and after the btnGetInfo_Click function ended, "LOADING" disapperrs). I just need a PostBack when it's done.
I've found some similar problem, but the solutions didn't help me.
Thank You for the answers!
What is occurring when you click btnGetInfo is a partial page postback, which refreshes content inside the UpdatePanel ContentTemplate. The reason your GridView is not updating when you call DataBind() is because it is not inside the UpdatePanel ContentTemplate.
Triggering a full-page postback defeats the purpose of an UpdatePanel. I recommend that you put your GridView inside the ContentTemplate to fix the problem.

Partial page refresh using an UpdatePanel

I have a page associated with master page. I need to implement the Ajax(basically wanted to to do partial page refresh).
In this page I have grid and paging buttons(first/previous/last/next), dropdowns and also search.
So all these updates the grid.
Right now I have below code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
under
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Here is the html like grid/buttons/search after ContentTemplate tag starts
So finally the page has left menu/footer/header and contents
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
But this is still refreshing the page.
I am a little confused as to you have and what you want.
It sounds like you have a Content control with an UpdatePanel in it. Within the UpdatePanel ContentTemplate you have all your grid, buttons etc along with your menu.
You only need to have the controls that you want to do the refresh in your UpdatePanel ContentTemplate. All the other stuff you should have outside of the UpdatePanel. If you have any controls outside of the UpdatePanel that you need to trigger a refresh with setup a Trigger for each control in the UpdatePanel and tell it which event to trigger off of.
Example:
<asp:Button ID="btnTest" runat="server" Text="Test" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- only your content that needs refreshing goes here -->
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTest" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
In the above example the btnTest click event will cause the content of the UpdatePanel to refresh but the Button or anything outside of the UpdatePanel will not refresh. If the Trigger was not setup, the whole page would refresh. You don't need Trigger setup for controls within an UpdatePanel as all control events will be captured by the UpdatePanel for a refresh.
You can read up more on MSDN.

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