Refresh the UpdatePanel using JavaScript Code

(It's the post I wrote one year ago in my previous blog which has been cancelled now.)

Lots of customers asked me that how to refresh the UpdatePanel - it actually is to raise an async postback using JavaScript code. The feature is quite important in some scenarios but unfortunately, ASP.NET AJAX does not give any native support, so we should find work arounds to do that.

An UpdatePanel will be refreshed if the user clicks the specific control in the page and the control is the trigger that raises the async postback. The straightest thought of raising an async postback is to simulate a button's clicking. There're several kinds of buttons in ASP.NET (we use the concept in ASP.NET rather than the concept in HTML since the server side konws ASP.NET better). They are Button, LinkButton, ImageButton, etc. Let's just look at the LinkButton control since it will shows the things we need. (I use an master page here to show the effect of NamingContainer.):

<!-- Declarative code in ASPX page -->
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>

<!-- The html generated in client side -->
<a id="ctl00_Main_LinkButton1" href="javascript:__doPostBack('ctl00$Main$LinkButton1','')">
    LinkButton
</a>

A LinkButton on server side generates an anchor tag on the page. The way to submit the form when click the anchor is to execute the JavaScript method "__doPostBack". Please note that it's really simple for us to simulate that. The only thing we should pay attention to is the first parameter passed to the method. What's that?

An experience ASP.NET programmer will easily figure out that a string separated by dollar signs ($) is most likely the UniqueID of the control, which is used to indicate the control at server-side, and then the proper event will be raised, etc. So, if we are going to simulate the postback raised by the LinkButton, its UniqueID shoud be write to clint side for further use.

I'm going to show you a demo here to tell the way discussed above. At first, we should build a page with an UpdatePanel and a invisible LinkButton in it. Please note that we set the style of the LinkButton to "display:none" rather than set its Visibile property to false, otherwise the LinkButton won't be rendered on the page, which will cause an exception when postback:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <%= DateTime.Now %>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:LinkButton ID="LinkButton1" runat="server" style="display:none;">
    LinkButton
</asp:LinkButton>

Secondly, write the following code to the page. You can find that we should write the UniqueID of the LinkButton to the client:

function raiseAsyncPostback()
{
     __doPostBack("<%= this.LinkButton1.UniqueID %>", "");
}

The last thing to do is to make the LinkButton raising an async postback, so add the code to the code behind file:

ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.LinkButton1);

Now we can simply call the raiseAsyncPostBack method defined in the page when we want to raise an async postback using JavaScript code. Both the client and server will think the LinkButton is clicked. The client side will raise an async postback and the server will fire the Click event of the LinkButton. If we want to refresh some UpdatePanels when we execute the JavaScirpt method, we can just assign the LinkButton to the UpdatePanels as an AsyncPostBackTrigger.

23 Comments

  • thanks for this Jeff, ive been musing over different ways to accomplish this in the last few days.
    this is a nice and simple solution

  • I tried it but not working. I had the following problem.
    I have an update panel and i have added a asp button outside the update panel. The button had a server side click event as well. But when i saw the HTML generated in client side it is showing some thing like ""

    Note that it is not showing the _doPostBack method as mention in the above article. How can i get the asynchronous call in this situation

  • I am using .net 3.5 version.

  • if reference to my question about FireFox not working, I found that if I include a value in the 2nd argument for the __doPostBack function, then firefox works, but if the eventArgument is blank, firefox does a full postback.

  • Is there a clean working solution for firefox as well?

  • how can refresh the master page using javascript

  • Please find below my code lines:



































    i am using it in a user control which attached in master page to display FX rates, this making entire page to do postback, what i need is to refresh only this control without effecting entire page, any idea?

  • as i mentioned above just i need to refresh this user control after adding this to master page, becasue i am facing problem in entire page refreshing... please if anyone of you aware how to resolve this???

  • Hi Rahan,
    do you got any solution on your problem?
    i also facing same problem, i want to just update user control, but it reloading whole page..

    please let me know.
    Suyog Kale,
    +919767654573, Pune India

  • I have 2 page controls using setInterval and some JS to scroll some text. Upon completion of the scrolling I use the code from this site to fire a server side hidden button event to update the scrolling text. Everything works fine EXCEPT when both scrolling areas finish at the same or roughly the same time and both try to call the wired up event (each has its own button event) at the same time. Only 1 server-side event gets fired (verified by breakpoints). If the calls are offset and do not happen at the same time, no problem both fire ok. It is only when they both fire at the same time or even roughly the same time. I experimented with using timers to offset the calls, and made some other work-arounds to offset the calls as a temporary resolution.

    However, I would like a definitive explanation as to why if the doPostBack() call is made simultaneously with another doPostBack() call, why does only 1 of the server side events get fired? Is there a better work around?

    Thanks!

  • I think I found an explination of this exact issue best described on the following site:
    http://technicalsideofarati.blogspot.com/2007/04/simultaneous-calls-to-server-from.html

    It seems the root technical cause is the SessionState which makes sense; session state takes a reader/writer lock and blocks concurrent requests from the same user (same session).
    http://odetocode.com/Blogs/scott/archive/2006/05/20/3648.aspx

    If anybody would like to speak up on a good way of determining if a post back is in process and how to delay the second call enough time to let the 1st one complete, please let me know.

  • if you're having issues with something still not posting back, try using the following code within your update panel. It was mentioned in Jeffrey's post, but you may have missed it:






    Thanks,
    J

  • Perfect solution 10x for your post

  • take mine

  • i need a help J
    i have a Dhtml Popup inside a upate panel and i m using java script to close that popup when popup open it set's the back ground color by another java script but when i close it using close one java script it doesn't reset the color of background i applied the code in jawa script but not working with update panel if i don't use update panel it is working fine but there is a need of update panel in my page so can any body help me out ????

  • ┼čaka gibisiniz amk.

  • Very Nice!!! Thanks a lot (",)

  • This is great. Simple and it works. Just what I needed.

  • Really Amazing .................Simple but Great Effort

  • Hi Jeffrey, thanks for a great trick!
    I'm deffenetly going to use that again in the future.

  • r7sgqH Thanks for sharing, this is a fantastic blog article. Really Cool.

  • lKXjDk Thanks for sharing, this is a fantastic blog.Thanks Again. Much obliged.

  • It is appropriate time to make some plans for the long run and it is time
    to be happy. I've learn this put up and if I could I desire to counsel you few attention-grabbing issues or tips. Maybe you can write next articles referring to this article. I desire to learn more issues about it!

Comments have been disabled for this content.