Easily refresh an UpdatePanel, using JavaScript
AJAX, ASP.NET, JavaScript, UI By Dave Ward on July 13th, 2007I’ve noticed a lot of discussion lately regarding methods to refresh an UpdatePanel via client script. This is very easy on the server side, of course. You can just call UpdatePanel.Update(). However, on the client side, the most common solutions I’ve been seeing just don’t feel right.
Many will advise you to use a hidden button control inside the UpdatePanel, manipulated via button.click(), to trigger a partial postback of the UpdatePanel. While it does work, I never have been able to get past the kludgey nature of that solution.
Finding a better way
To find a better solution, we’ll need a demonstration UpdatePanel to experiment with:
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <div id="Container"> <asp:UpdatePanel runat="server" ID="UpdatePanel1" OnLoad="UpdatePanel1_Load"> <ContentTemplate> <asp:Label runat="server" ID="Label1" /> </ContentTemplate> </asp:UpdatePanel>
protected void UpdatePanel1_Load(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); }
That’s a slightly modified version of the standard UpdatePanel DateTime example. Instead of the more commonly used Button_Click trigger, notice that the UpdatePanel’s OnLoad event is handled in code-behind.
Anytime UpdatePanel1 is loaded or reloaded in a postback, Label1 will be updated to reflect the current date and time.
Never fear, __doPostBack() is here
Luckily, there’s an easy method for triggering a postback targeted at the UpdatePanel: __doPostBack().
As long as the event target of a __doPostBack() call is an async trigger of an UpdatePanel, the ASP.NET AJAX framework will intercept the postback and fire a partial postback instead. For purposes of demonstration, I’m going to add that to the OnClick event of the container div:
<div id="Container" onclick="__doPostBack('UpdatePanel1', '');">
Now, clicking anywhere in the UpdatePanel will trigger a partial postback, targeting the UpdatePanel. Since partial postbacks follow the full page lifecycle, this will fire UpdatePanel1_Load and update the Label’s text.
A word on _doPostBack
You may have noticed that there is also an ASP.NET AJAX specific method of the PageRequestManager named _doPostBack. While it works much like __doPostBack, as long as the ASP.NET AJAX client framework is present, you should not call it directly.
The original __doPostBack method performs identically, but is more robust since it gracefully degrades to full postbacks when the ASP.NET AJAX framework isn’t available. It’s also unlikely that __doPostBack will disappear in future versions of ASP.NET, while it’s less assured that the ASP.NET AJAX framework will remain unchanged.
Similar posts
What do you think? Your comments are welcomed.
I appreciate all of your comments, questions, and other feedback, but please try to stay on topic. If you have a question unrelated to this post, I recommend posting on the ASP.NET forums or Stack Overflow instead.
If you're replying to an existing comment, please use the threading feature. To do this, click the "Reply to this comment" link underneath the comment you're replying to.

Comments
It is a nice one to do.
Thanks. I was looking for something just like this!
So setting the ID of the UpdatePanel to “up1″ and then calling __doPostBack(’up1′, ”) should do the trick? Doesn’t seem to work for me.
Oops, sorry.
My IDs were mismatched from trying to shorten parts of the code for better display here. Just make sure you’re calling __doPostBack() on the ID of an UpdatePanel that has an OnLoad handler set.
Did you ever figure out what was wrong?
It was just that I used “up1″ in one place and “UpdatePanel1″ in another, originally. Now that I edited them to be consistent in the example, it should work fine.
I don’t understand how this is less “kludgey?” It seems you’ve replaced the hidden button with a div. Not only that you may have introduced an unwanted side effect. If you have multiple updatepanels on the page and another updatepanel gets triggered to update your other updatepanel’s load function would run. It won’t update the screen, but if you have a session or viewstate value being changed in the load function that value will be changed. You can always test to see if the __EVENTTARGET is the correct updatepanel and only execute the code if it is, but that gets you nowhere if you’re trying for an elegant solution. It would be best if they just built in an updatepanel refresh from the client side.
The div and onclick are just for purposes of demonstration. People are often asking for a method to trigger the UpdatePanel through client script. Whatever their particular needs are, they obviously didn’t have an applicable button or they wouldn’t have asked to begin with. This is for them.
In real use, there would be no div onclick, nor the kludge button that others recommend. __doPostBack is a cleaner, more direct way.
There is no side effect introduced. If you have multiple UpdatePanels on the page, you would want to have those set to a Conditional UpdateMode, so there wouldn’t be any overlap. Only the panel targeted by __doPostBack’s __EVENTTARGET would execute its OnLoad.
OnLoad is going to run either way — on any postback. It’s just the usual load event of any control.
prm._doPostBack is the same as __doPostBack because __doPostBack is assigned to a delegate that invokes prm._doPostBack. Essentially, request manager overwrites the existing method.
But yes, __doPostBack has the advantage of working whether partial rendering is enabled or not. You definitely shouldn’t call prm._doPostBack — not only is there no reason to, but it’s private by the underscore convention (nothing is truly private in javascript of course, but the underscore basically means ‘dont touch this’). Ok, technically __doPostBack is private (*2* underscores, scarey!) too, but with how it’s used these days it may as well be public. Much safer bet.
Thanks for the clarification about the difference between the two methods. That’s good information.
I’m getting a javascript error ‘Object doesn’t support this method or property’
I have the below
Protected Sub UpdatePanel2_Unload(ByVal sender As Object, ByVal e As System.EventArgs) Handles UpdatePanel2.Unload
and I tried the Load but no joy
javascript
var prm = Sys.WebForms.PageRequestManager.getInstance();
//alert(prm); does create an Object
prm._dopostback(’UpdatePanel2′,”);
any ideas
A couple things.
First, JavaScript is case sensitive. So, _dopostback isn’t the same thing as _doPostBack.
Second, use the double underscore method instead of the PageRequestManager’s. __doPostBack(’UpdatePanel2, ”) should work. You’ll need to switch back to using the OnLoad handler for the UpdatePanel though.
This only work for regular web page..
When i apply on the content page, it will cause a a regular post back.
On more complex pages, try using __doPostBack(’< %= UpdatePanel1.ClientID %>‘, ”) instead. If you use a DOM inspector to look at the rendered page, your UpdatePanel1’s ID is probably something more complex due to the nesting. Using .ClientID should resolve the correct rendered ID.
Good call Dave!
I wouldn’t have thought of that until the 11th hour.
Thanks for this article - this was exactly what I was looking for.
I wish to add that apart from being ugly the button.click() method is not supported in Firefox according to my testing.
Unfortunatly __doPostBack(”,”); kills my IE 7 consistently. It´s a shame because it works so nicely in FireFox 2.x.
Do you have an example page I could take a look at? __doPostBack() definitely works in IE7 (otherwise ASP.NET wouldn’t), and I’ve tested this in it.
Ok, just to keep you updated: IE7 Developer Toolbar caused this issue. After deinstaling at IE stopped crashing.
Is anyone able to provide some real examples of why you need to refresh an update panel from the client side please.
Jason
I found it pretty handy when writing Display data updates in real-time with AJAX
Another excellent solution!!
Thanks Dave
i’m using this with a custom web control, it works fine but if i place it in an ajax update panel it fires a full postback,(i’m using onclick=’_DopostbackWithOptions…)
does anybody experience this?
I haven’t tried this technique with __DoPostBackWithOptions(). My advice would be to double check that the event target you specify is an async postback trigger.
Hi, I’m also using a WebControl, the __doPostBack works fine but the problem is… when I click a Button the UpdatePanel reloads first then executing the code behind the button. Is there a way to reverse the process? for instance execute the code behind the button first then firing the postback on the UpdatePanel? Thanks
Check the event target in your UpdatePanel’s OnLoad and only execute it if the event target is your UpdatePanel. Think of it like a !IsPostBack conditional for your UpdatePanel OnLoad.
Hi, Thanks for the quick reply, The problem of my application is that it doesn’t partial post back when I log on my application (Login.ascx)
I managed to solve my problem by adding a hidden field to my webcontrol and use the setTimeout() function in Javascript to post a partial update on my UpdatePanel ex. __doPostBack(”);
But using this script, is I have to depend onthe setTimeout function of javascript. Is there a better workarounds regarding this problem?
What you need to do is use the UpdatePanel’s PreRender event instead of the Load event. That will fire after the Button’s click event handler.
Sorry for the late response. I hope this helps.
Great solution, thanks! I used it for triggering a partial update on a page to execute a long lasting data call right after the page has been loaded. It works fine by registering a “__doPostBack(…” via ClientScript.RegisterStartupScript in the Page_Load handler. The only mandatory thing for it to work is to use an UpdatePanel.ClientID especially if your code is in a WebUser control or you use a Master Page.
That’s a good point about the ClientID. I omitted that to keep the example as simple as possible, but it’s definitely an issue on more complex pages.
Another option is to call __doPostBack(’< %= UpdatePanel1.ClientID %>‘, ”)
My problem is refreshing an updatepanel that lies
inside a contentTemplate of a databound ajax accordion.
How can I access a specific updatepanel inside
that accordion (I cant get the ID of that panel)?
One way to do that is to write out a JavaScript array of ClientIDs to the client when you databind your accordion. Then, it’s easy to find the ClientID of the nth accordion’s UpdatePanel.
Could you be more specific (code)
I know how to do it in c# code behind
but Im not femiliar with somthing like ondatabound
in javascript
thanks in advance
Assuming you have a Repeater named “Repeater1″ with an UpdatePanel named “up” in each RepeaterItem, this would generate a JavaScript array of the ClientIDs of those UpdatePanels.
Then, if you wanted to refresh the nth UpdatePanel, you would use __doPostBack(RepeaterUpdatePanels[n], ”)
You should be able to do the same with an accordion. Just make sure to watch your page life cycle and do it after the accordion is databound.
Hi!, I hope someone can help me about this. Is it possible to have 3 UpdatePanels, the details are 1 (MainUpdatePanel) under that are two (UpdatePanel A & B). On UpdatePanel “A” I’ve put a webcontrol on it and has a button “Confirm” Now the question is it possible to the main update panel to be refreshed if we clicked the confirm button? thanks. so far no good here.
This probably isn’t the best place to find general help. The ASP.NET AJAX forum is a good place to ask questions.
That said, I believe your MainUpdatePanel should automatically update as a result of one of its children raising an event (unless you set its ChildrenAsTriggers property to false).
Hi Dave,
Sorry about that, but here’s another question about javascript. Is it possible to use Page.ClientScript.RegisterStartupScript() ? if how, Im using this but cannot trigger the dopostback. If I view source the page. I cannot see the script I’ve inserted via registerstartupscript
If you want to register it during a partial postback, use ScriptManager.RegisterStartupScript().
I have following code in aspx page. window.onload = loadUserControls;
var prm = Sys.WebForms.PageRequestManager.getInstance();
function loadUserControls()
{
__doPostBack(”, ”);
}
in code behing on unload event i have following code
protected void up1_unload(object sender, EventArgs e)
{
ph1.Controls.Clear();
Control cntrl = (UserControl) Page.LoadControl(”control1.ascx”);
if(cntrl != null)
ph1.Controls.Add(cntrl);
}
But it does not work. help/
Make sure your UpdatePanel’s declaration wires up your unload event handler, like:
Also, you need to target the UpdatePanel with your __doPostBack call. Change it to this:
Finally, you’ll want to enclose up1_unload’s code in an IsPostBack block of some sort. Otherwise, it will populate that PlaceHolder on initial load anyway, since UpdatePanel.Unload is going to run on every request.
I have another post that goes into some details about those page life cycle issues with UpdatePanels, that may help.
Dave,
i have exactly done what you have said in the post. Now i load the user control only if its postback which is raised by __doPostBack(”, ”);
when i put the break point, it goes inside the code like this:
BUT, I don’t see any thing in the placeholder. the only thing i have in control1.ascx user control is “this is test user control”. why is this. please help if possible.
Dave,
I am thinking that the reason I don’t see anything is because we are doing it on Unload event? when i put the same code in Load Event, It displays the content from the user control.
That’s probably it. I’d suggest putting it in the PreRender event, if that fits your page’s overall design.
I am not sure where to out it. its working on both Load and PreRender, where would you suggest?
why its not working on UnLoad?
My idea here is I want to load the page first and load the user controls so that user won’t see any blank screen since sometime user control might require some time to load.
would you have any idea.
Either Load or PreRender will probably work about the same for that. I typically use PreRender for something like that, so my code can respond to control events accordingly (since Load fires before control events like Click, Command, SelectedIndexChanged, etc).
Hi,
This technique is not working when we have master pages. It is doing a regular postback but not AJAX style postback. Is there any way to get this work. Any help is greatly appreciated.
- RJ
It will work in a master page scenario. Make sure that your target ID is correct. Master/content pages tend to leave your controls with interesting ClientIDs. Try using:
Substituting the ID of the UpdatePanel you want to target, for “UpdatePanel1″.
You saved my day. Appreciate your tip.
Thanks
Hello, has anyone done this:
MasterPage has a Web User Control called Cart.
Cart has a update panel.
The Product page uses the MasterPage and also has it’s own update panel.
After the user clicks a button on the product page (inside a update panel) how do I trigger and update on the Cart update panel?
You don’t need to use this technique to handle that. You can just call the cart update panel’s Update() method from your button’s event handler.
It’s a little more complicated than that when the update panel is on a different control and page.
You’d just need to expose your cart control’s UpdatePanel’s Update() method in a public method. Then, you should be able to call it from any scope you need.
If you want the cart control to update on every operation, you could put its data binding code in PreRender instead of Load. PreRender runs later than a button’s Click event handler, so the cart would automatically be updated after the button did its work.
I agree with RJ. I tried to implement the but still I get a full postback . Pls help..Tnx
See my reply to RJ’s comment.
Dave,
Nice and easy…Man, I was looking for this and thought it was going to be something dreadful. But it’s one line of code in my Javascript function.
My application, in case some are interested, is refreshing the UpdatePanel when the user resizes the browser window. I call the __doPostBack() from the Javascript function that handles the onresize event. It works great now!
Thanks,
Tony
I really like this method over the hidden field in the update panel. That being said is there a way to pass information to the server utilizing this method? I’ve got a list of links and depending on which is clicked I need to send a different value to the server. I’d like to just pass the information up as part of the postback, but don’t necessarily want to have to do it with a hidden field.
If you pass a parameter in the second argument of __doPostBack, it’s available on the server side in Request["__eventargument"].
So, say you refresh the UpdatePanel with __doPostBack(’UpdatePanel1′, ‘Foo’) on the client side. In your UpdatePanel1_Load event handler, Request["__eventargument"] == “Foo”.
Awesome thanks for the help! Your idea is far and away the best method for causing the UpdatePanel to refresh from the client.
I just switched my hidden button solution to your approach. The hidden button worked fine in IE and Safari, but for some reson not in Firefox. Your approach now works fine in all browsers.
I can’t seem to get this working, experiencing the same as RJ and Barkowski, getting full postback. Looking at your reply I guess you are missing the ‘#>’ in your reply to RJ? (although this still doesn’t seem to help me) Any more ideas?
If __doPostBack causes a full postback, it’s always going to be the case that your UpdatePanel doesn’t have an AsyncPostBackTrigger matching the __EVENTTARGET that you’re specifying as the first argument to __doPostBack. Typically, that’s due to the ClientID of a control rendering different than how you expect.
A quick litmus test is to do a view source and make sure that’s not the case.
Also, if you’re using FireBug, you can call __doPostBack at the console to debug much faster than updating code and retesting.
Hi,
It seems the method does NOT work with GridView server cotnrol in .NET. On my page, I let a user click on an HTML Div element to trigger postback of an UpdatePanel. So, the wrapped Label control and Griview control contents should changed. But, only the Label.Text is changed and showed, but the GridView control is NOT seen.
Here is my code:
Hove to show GridView Customers
And code-behind:
protected DataTable GetCustomersData()
{
DataTable dt = new DataTable();
if (Session["CustomersData"] != null)
{
dt = (DataTable)Session["CustomersData"];
}
else
{
dt = DataBiz.GetCustomers();
Session["CustomersData"] = dt;
}
return dt;
}
///////////////////////////////////////////////////////////// JS client script triggers Ajax /////////////////
protected void UpdatePanel2_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
lblShowUpdatePanelID.Text = ((System.Web.UI.Control)(sender)).ClientID;
grvCustomers.DataSource = GetCustomersData();
grvCustomers.DataBind();
}
}
Any idea? Thank you in advance.
I can verify that it works against a GridView like that. I have production code working in roughly that same manner.
Have you tried setting a breakpoint in your UpdatePanel2_Load handler and verifying that GetCustomersData() is returning what you expect?
Also, double check for any later events that might be firing afterward and rebinding the GridView with empty data.
Dave,
I set a break point at GetCustomersData(), and I do see the data set return from that method.
By the way, what do you mean “Also, double check for any later events that might be firing afterward and rebinding the GridView with empty data.
“?
What events do I need to check after “protected void UpdatePanel2_Load(object sender, EventArgs e)”?
Thank you.
Since partial postbacks still run the full page life cycle, any event handler like Page_OnPreRender could be interfering with the final output.
Dave,
So, I have to move my code from event-handler
protected void UpdatePanel2_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
lblShowUpdatePanelID.Text = ((System.Web.UI.Control)(sender)).ClientID;
grvCustomers.DataSource = GetCustomersData();
grvCustomers.DataBind();
}
}
to event-handler
Page_OnPreRender() … ???
In that case event-handler “UpdatePanel2_Load()” is useless to fill data for my gridview???
Thank you for your help.
No, what I’m saying is that UpdatePanel2_Load isn’t the only event handler that will run when you __doPostBack(’UpdatePanel2′, ”). If you have anything running in the normal page life cycle (like Page_Load, Page_PreRender, etc), it’s still going to execute in a partial postback, just like it would in a full postback.
This sounds like it’s a page life cycle issue, unrelated to what specifically is happening in UpdatePanel2_Load.
Without seeing the rest of your code, it’s a shot in the dark, but you might try using UpdatePanel2’s PreRender event instead of its Load event. That’s going to put your databinding farther down the life cycle, possibly after what’s causing your trouble now (though, you’d still want to solve the underlying issue, to avoid double data access/binding).
Dave,
I placed all of my codes on MS Ajax forum iste. For some reason, I cannot paste my HTML markup in here.
Thank for your looking at it.
Dave,
Thank you very much.
You would look at the codes over MS forum site. But never mind.
2 have 2 gridviews and 2 update panels on my page.
I found the problem and the codes work now. VS 2005 is totally SILENT about 2 different GridViews who use the same page changing event handler in HTML markup declarative part.
The problem is: in the HTMK markup page, for GridView grvCustomers2, I FORGOT to use its event OnPageIndexChanging as the SAME as event handler for GridView grvCustomers1.
I should have used a separate event handler for grvCustomers2.
I even dot not need to use Page_PreRender() because the problem does not come from there.
Dave this is a great solution.
However I have a small question. Is it possible to control the behavior of the update panels within a single page. In my case there is one update panel in my page and within the content template I’ve binded 4 user controls. In the main page there are 4 buttons where on the click of a button the update panel will be displaying one user control.(This is kind of a virtual tab control, where the 4 buttons are tabs and the Update panel is the content holder; please note i’m not allowed to use the ajax control toolkit which limits the use of the ajax tabcontrol)
However this has reduced the performance of the page. takes more time as all user controls are loaded each and every time the buttons are clicked.
Is there a way in which I can load the specific user control instead of all the user controls.
Basically I tried using 4 different update panels to hold the 4 different user controls. Still each time the page is posted back, all the update panels are updated resulting in reloading all the controls with regardless the need.
Can you please specify a way in which I can achieve this (i only want to load the specific update panel with a user control; not all user controls at once).
First, if these buttons can be server controls, it might make more sense to avoid __doPostBack. You could set those buttons as AsyncPostbackTriggers of the UpdatePanel and write code in their event handlers to load only the corresponding user control.
If you do need to use __doPostBack for other reasons, the key is to use the __eventargument parameter and check that on the server side. For example, call __doPostBack(’UpdatePanel1′, ‘Tab1′) on the client side. Then in UpdatePanel1_Load, have a conditional or switch statement checking Request["__eventargument"] and loading the appropriate user control.
Hope that helps.
Thanks for the reply,
All the button are server controls and I’ve added the buttons as AsyncPostbackTriggers of the main UpdatePanel. Ofcourse I’m able to load only the corresponding user control.
However at the time of debugging using some break points I noticed that the code execution flow also goes through the load event of all the user controls.
Is this a nomal behavior (coz say if there are 4 tabs and I just want to access the very first tab; instead of the load event of that user control it also goes through the load event of rest of the three user controls. Finally ofcourse I get only the first tab selected and displayed in the page. I want to know if I can stop the load operation of the other three tabs until I make a selection of one of those tabs)
If I’ve understood any concept wrong please correct. (BTW: the page takes nearly 6-8 seconds to load. Although I use the update progress gif image, it won’t show up until the page is fully loaded. At the time of subsequent tab clicks the UpdateProgress can be seen in action).
Do you think this is something to do with Ajax, or something to do with HTTP requst. Coz I have no way of showing the end user something related to a UpdateProgress control for that initial 5-8 seconds.
waiting for your respose. Thanks in advance.
Previous comment was added by myself. Waiting for a reply.
Thanks
That is the expected behavior. Your entire page runs through its page life cycle, even in partial postbacks.
If I were you, I would only execute that code in the Button_Click handlers, and not in the controls’ OnLoad handlers. That way only the “tab” being requested would need to run through its initialization.
If you’d like me to take a look at the specific issue, email me a copy of the ASPX and code behind.
This was a great start to resolving some of the preformance problems that I have on the site that I working on. However, it does not seem to work in FireFox (2.0.0.9). How can this be used to convince FireFox to do an async postback.
In detail, I have a master page that has the ScriptManager on it. On a content page, is the containing div. I dynamically add a number of user controls that have the UpdatePanels on them. I am emitting the ControlID of the UpdatePanel to refresh back to the content page that is doing the __doPostBack on the UpdatePanel needing refreshing. Works prefect in IE, but FireFox does not do the update.
Thanks for your help.
David
Try emitting the UpdatePanel’s ClientID instead of ControlID.
I meant that I was emitting the ClientID, but typed ControlID, sorry.
I would look at the rendered source, copy that emitted ClientID, and then test it at the console in FireBug. Usually, a little trial and error at the FireBug console is the quickest way to find out what’s going on.
Hi there,
nice solution. I ran into problemns using an UpdatePanel set to UpdateMode=”Conditional” (need this cause i need ChildrenAsTriggers=”false”).
If set like this the script manager won’t do a partial postback for the update panel. Are there any solutions to this problem?
By the way, people may want to render the postback call through the ClientScriptManager:
ClientScript.GetPostBackEventReference(UpdatePanelXYZ,”")
Much nicer i think, and solves many master page related problems (notice that in the render proces it uses the panels name, not the client id).
__doPostBack will still trigger a partial postback when UpdateMode is conditional and ChildrenAsTriggers is false. However, when ChildrenAsTriggers is set to false, you’ll need to call .Update() in your UpdatePanel’s event handler to make the UpdatePanel actually render its updated contents.
Hope that helps.
I have tried all of these options and have not had success with any of these. I will illustrate the problem and the particular scenario I am trying to address.
We have a page containing a user control. The user control contains a ScriptManager, immediately followed by a different user control containing an UpdatePanel, and a second UpdatePanel that is filled with dynamically generated content. What we want to happen is the two UpdatePanels to be able to update independently as a result of a client-side JavaScript call.
The reason we are doing this is that we never want the page to have to be reloaded. The nested user control containing an UpdatePanel has to do a validation process of the users machine using an ActiveX control that requires at least one server post-back and occurs without user interaction. Then, the second UpdatePanel uses the results of that process from a client-side JavaScript. We want the process to execute once the first time the page loads and be able to be manually triggered it if necessary later in the process. The second UpdatePanel is executing steps of a workflow, sometimes requiring user interaction and sometimes not.
The solution should not be to add a control that will trigger a server side event because that is not practical for the steps that have no user interaction.
The problem is that no matter what we try we cannot get the two UpdatePanels to refresh without the other being refreshed also. Essentially we need to know what the caveats are for UpdatePanel so that we know where the two panels have to be hosted and where the ScriptManager needs to be hosted. Some of the methods that we have attempted and modifications to the structure that we have tried already are:
1. Adding EnablePartialRendering=�true� to the ScriptManager
2. Adding UpdateMode=�Conditional� to the UpdatePanels
3. Moving the ScriptManager to the hosting .aspx page
4. Moving the ScriptManager AND the nested user control to the hosting .aspx page
5. Using _doPostBack (from the PageRequestManager) vs. __doPostBack to trigger
6. Trying to manually filter out the post-backs based on __EVENTTARGET
7. Adding ChildrenAsTriggers=�true� in case our lack of triggers mattered
8. Using ID, ClientID and UpdatePanel.ClientID as the doPostBack argument
Obviously our scenario is not directly supported since we have to manually call the client-side post-back method, but can this be done and if so how?
Would greatly appreciate if you could provide any help with this.
Thanks
Kiran
If you want nested UpdatePaenels to operate independently, you need to set both to Conditional UpdateMode and set ChildrenAsTriggers to false on the outer UpdatePanel.
Is the ActiveX control what’s causing trouble? How does it trigger its postback? That’s probably going to be the tricky part.
Thanks for this post! I have been looking for a way to update an AJAX Accordion control within a Callback framework. This worked great (almost).
In my Accordion control I have some tags with JavaScript on-click methods. These are notbeing handled correctly b/c the page is not being updated with the html. Any ideas?
I’m not sure if I understand.
Are the onclick handlers not being re-wired after the refresh, or are they malfunctioning?
Thanks a lot!! I Found what i need!
Ah this really helped me out! I dont know if this was said before cause i dont have time to read all posts but if you use ctl00_ContentPlaceHolder1_UpdatePanel1 you can update an updatepanel in a content place holder (when using masterpage)
Dylan
Joining this discussion very late.
I am still getting full post backs when I call __doPostBack.
When you said that the page will run through it’s full life cycle do you mean that the Page_Load and Page_PreRender and so forth are still going to fire? If so, then I’m not sure I see the point. If they shouldn’t be firing then I still have a problem. I’m sure I’m passing the correct id in as a parameter to __doPostBack.
It seems like this was working until I added a second UpdatePanel to my page, although I never verified that.
Also, wasn’t clear about what you meant when you sad, “If __doPostBack causes a full postback, it’s always going to be the case that your UpdatePanel doesn’t have an AsyncPostBackTrigger matching the __EVENTTARGET that you’re specifying as the first argument to __doPostBack.” Were you just referring again to the ID vs ClientID problem that shows up with Master Pages?
Thanks so much.
That’s right.
Everything fires, just as if you triggered a full postback (Page_Load, Page_PreRender, etc). That’s how all partial postbacks work, whether triggered with __doPostBack or by interaction with a control (e.g. clicking a Button that’s an AsyncPostBackTrigger of the UpdatePanel).
To avoid that (and it’s worth avoiding when possible), you have to avoid UpdatePanels and partial postbacks. The better alternative is to use web service calls or page method calls instead.
Thanks for the info. That at least explains the problems I’m having.
I do have an unusual set of circumstances in that, exactly per your example, I need to trigger off the onclick event of a div tag and I need to to communicate with only one method on the server without going through the page life-cycle.
I suppose it’s a trade-off, by making AJAX very easy to use, Microsoft has severely limited it by forcing things like AsyncPostBackTrigger controls. It’s all fine if you need to create a popup calendar, but if you need to do something out of the mold it ends up being far more complicated than if you had just coded the solution yourself using Javascript and XmlHttpRequest. I could easily do what I’m trying to do that way, but I’ve been instructed to use the Microsoft framework.
I suppose I’ll have to use the original method that your method seeks to replace - create a hidden control trigger and initiate a click() event client-side. Yuck!
Again, thanks for the info and thanks for letting me vent a little.
Assume that you have an UpdatePanel1 and are handling its Load event (like in the example). If the Load event handler checks the __eventargument, you can call certain functionality from the client side:
Now, if I were to call __doPostBack(’UpdatePanel1′, ‘UpdateTime’) on the client side, it would trigger a partial postback and update the label.
Is that basically what you’re after?
Yes, I think that will do it. Thanks!
I have a page that has 2 user controls and calls a javascript function that calls __doPostback() twice in succession. Both controls are in their own update panel. The page is does not update correctly and it appears that their is a lifecycle issue. If I add a javascript setTimeout on the second __doPostback, the page is updated correctly. Is there a better solution?
If you use two __doPostBacks in succession, it will trigger them both, but only the second one’s partial postback will complete (the first will be canceled immediately).
If you want to update the two controls sequentially, you could put the second __doPostBack in an EndRequest handler.
If you want to update them simultaneously, consider using UpdatePanel.Update() from the server side handler, after you’ve used __doPostBack to raise the postback.
I’m having an issue where i’m doing a async partial page postback yet the update panel is not rendering with the new data. The update panel contains a user control that has a grid view in it.
When debugging I follow the events (tried UpdatePanel.PreRender & Load events) all the way to the user control databinding the data to the grid view and I even put a label control to display the time. However the grid view and the time label are not updated in the rendering yet in debugger it shows that the label is being updated and that the grid view has new results. I’ve tried both the __doPostBack and asp:Button but both never reload the update panel with the new info. What am I missing?
It sounds like your Label and GridView aren’t inside the UpdatePanel(s) being refreshed in that request.
I’d suggest posting with code, on the ASP.NET forums.
Hi Dave,
This solution seems interesting but I can’t get it to work. I have posted the question on asp.net forum as well, but no answer yet.
I hope you can shed some light on my problem.
Here’s my scenario:
1. The Page has checkbox selection list and a submit button. The selected checkbox items are saved in session.
2. The UpdatePanel has a gridview with the button submit click event as the trigger.
On clicking the submit button, only the Grid gets populated - as expected.
But when the user navigates to the page again, the expected behavior is to load everything except the GridView. And then trigger the GridView load asynchronously
I am not able to do this successfully. I am leaning more towards the __doPostBack option rather than artificially causing the button click event. Reason being, I have to use partial page load patter in multiple pages across the app. And not all pages have buttons.
Any help is greatly appreciated! Here’s the link to my question:
http://forums.asp.net/t/1252524.aspx
thanks
hpdotnet
My Update Panel contain a Grid view containing alphabets A- Z. Also there is a datalist which gets binded on click of an alphabet in gridview(Record with that starting letter is displayed in datalist). I want the alphabet selected to be displayed in a different color. I have done that. But since the panel gets refreshed, the color appears and after few sec disappears(after completing databound). Plzz help me on this
Hi Dave,
I have a master page and a content page.On Page load in javascript i want to have 2 separate ajax calls to load master page as well as the content page.
Which would be the best option to do? My master page and content page ajax calls are no way related to each other.
If I use 2 update panels, both update panels send response back at the same time.
Usage of PageMethods is good but when there are controls like repeater, javascript coding for repeater would be very difficult.
Can you please suggest an approach to be taken here?
Regards,
Shilpa
Use UpdateMode Conditional, if you want only one panel to update at a time.
Hi Dave,
If i set Update Panel as “Conditional” then what would be the trigger for the Update Panels?
On Page load they would both get fired together.
You can check __EVENTTARGET to determine if a postback is targeted at a particular UpdatePanel (assuming you’re using __doPostBack to trigger it).
Good stuff, thanks. I especially appreciate the tip about Request[�__eventargument�] to pass info from the client side.
also you can use
Page.ClientScript.GetPostBackEventReference(Container, action, true)
it’s generate __doPostBack
Regards from Russia
Hi Dave,
I am new to the ‘UpdatePanel’. I would like to know your opinion on using UpdatePanel for the scenario