ASP.NET postback with JavaScript - Stack Overflow

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I have several small div s which are utilizing jQuery draggable. These div s are placed in an UpdatePanel , and on dragstop I use the _doPostBack() JavaScript function, where I extract necessary information from the page's form.
My problem is that when I call this function, the whole page is re-loaded, but I only want the update panel to be re-loaded.
<form id="form1" runat="server">
    <asp:LinkButton ID="LinkButton1" runat="server" /> <%-- included to force __doPostBack javascript function to be rendered --%>
    <input type="button" id="Button45" name="Button45" onclick="javascript:__doPostBack('ButtonA','')" value="clicking this will run ButtonA.Click Event Handler" /><br /><br />
    <input type="button" id="Button46" name="Button46" onclick="javascript:__doPostBack('ButtonB','')" value="clicking this will run ButtonB.Click Event Handler" /><br /><br />
    <asp:Button runat="server" ID="ButtonA" ClientIDMode="Static" Text="ButtonA" /><br /><br />
    <asp:Button runat="server" ID="ButtonB" ClientIDMode="Static" Text="ButtonB" />
</form>
Entire Contents of the Page's Code-Behind Class
Private Sub ButtonA_Click(sender As Object, e As System.EventArgs) Handles ButtonA.Click
    Response.Write("You ran the ButtonA click event")
End Sub
Private Sub ButtonB_Click(sender As Object, e As System.EventArgs) Handles ButtonB.Click
    Response.Write("You ran the ButtonB click event")
End Sub
The LinkButton is included to ensure that the __doPostBack javascript function is rendered to the client. Simply having Button controls will not cause this __doPostBack function to be rendered. This function will be rendered by virtue of having a variety of controls on most ASP.NET pages, so an empty link button is typically not needed
What's going on?
Two input controls are rendered to the client:
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
__EVENTTARGET receives argument 1 of __doPostBack
__EVENTARGUMENT receives argument 2 of __doPostBack
The __doPostBack function is rendered out like this:
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
As you can see, it assigns the values to the hidden inputs.
When the form submits / postback occurs:
If you provided the UniqueID of the Server-Control Button whose button-click-handler you want to run (javascript:__doPostBack('ButtonB',''), then the button click handler for that button will be run.
What if I don't want to run a click handler, but want to do something else instead?
You can pass whatever you want as arguments to __doPostBack
You can then analyze the hidden input values and run specific code accordingly:
If Request.Form("__EVENTTARGET") = "DoSomethingElse" Then
    Response.Write("Do Something else") 
End If
Other Notes
What if I don't know the ID of the control whose click handler I want to run?
If it is not acceptable to set ClientIDMode="Static", then you can do something like this: __doPostBack('<%= myclientid.UniqueID %>', ''). 
Or: __doPostBack('<%= MYBUTTON.UniqueID %>','')
This will inject the unique id of the control into the javascript, should you wish it
                This is one of the best explanations I have ever come across for __doPostBack().. +10 for this !
– Gurucharan Balakuntla Maheshku
                Dec 7, 2012 at 7:12
                @BrianWebster, Many thanks for your detailed post. Could I suggest anyone who is still with ASP.NET 3.5 and below using C# instead of VB.NET changes the last two lines in the .aspx file to as followings?  <asp:Button runat="server" ID="ButtonA" Text="ButtonA" OnClick = "ButtonA_Click"/><br /> <br />   <asp:Button runat="server" ID="ButtonB" Text="ButtonB" OnClick = "ButtonB_Click" />
– yangli.liy
                Feb 13, 2013 at 10:35
                This is a very helpful solution.  If you are using master pages, the id of the buttons gets a bit obfuscated.  See user489998's answer below for help getting the correct id for the postback.
– DCastenholz
                Jun 19, 2014 at 16:41
                @BrianWebster It is truly rare for someone to be able to provide a complete solution to someone's problem AND supply appropriate alternatives to potential deviations.
– GoldBishop
                Feb 2, 2017 at 22:29
Per Phairoh:  Use this in the Page/Component just in case the panel name changes
<script type="text/javascript">
     //must be global to be called by ExternalInterface
         function JSFunction() {
             __doPostBack('<%= myUpdatePanel.ClientID  %>', '');
     </script>
Using __doPostBack directly is sooooo the 2000s. Anybody coding WebForms in 2018 uses GetPostBackEventReference
(More seriously though, adding this as an answer for completeness. Using the __doPostBack directly is bad practice (single underscore prefix typically indicates a private member and double indicates a more universal private member), though it probably won't change or become obsolete at this point. We have a fully supported mechanism in ClientScriptManager.GetPostBackEventReference.)
Assuming your btnRefresh is inside our UpdatePanel and causes a postback, you can use GetPostBackEventReference like this (inspiration):
function RefreshGrid() {
    <%= ClientScript.GetPostBackEventReference(btnRefresh, String.Empty) %>;
                This works very well. In my situation, I can declare the Target AJAX controls to be refreshed when btnRefresh is clicked in the HTML markup. By using this, it made it extremely simple to implement this with support for AJAX.
– DanielG
                Apr 20, 2018 at 21:25
While Phairoh's solution seems theoretically sound, I have also found another solution to this problem. By passing the UpdatePanels id as a paramater (event target) for the doPostBack function the update panel will post back but not the entire page.
__doPostBack('myUpdatePanelId','')
*note: second parameter is for addition event args
hope this helps someone! 
EDIT: so it seems this same piece of advice was given above as i was typing :)
                This will work, and I have done something similar in an application, but it is really not a good idea and I hate that I had to do it when I did.  If your update panel's name ever changes, it breaks.  If you ever put this inside a user control, it breaks.  If you add a masterpage, it breaks.  Yes it works, but it's quite fragile.  At the very least, please use the ClientId property of your update panel instead of the static string.
– phairoh
                Aug 20, 2009 at 14:43
If anyone's having trouble with this (as I was), you can get the postback code for a button by adding the UseSubmitBehavior="false" attribute to it. If you examine the rendered source of the button, you'll see the exact javascript you need to execute. In my case it was using the name of the button rather than the id.
Have you tried passing the Update panel's client id to the __doPostBack function?  My team has done this to refresh an update panel and as far as I know it worked.
__doPostBack(UpdatePanelClientID, '**Some String**');
First, don't use update panels.  They are the second most evil thing that Microsoft has ever created for the web developer.
Second, if you must use update panels, try setting the UpdateMode property to Conditional.  Then add a trigger to an Asp:Hidden control that you add to the page.  Assign the change event as the trigger.  In your dragstop event, change the value of the hidden control.
This is untested, but the theory seems sound...  If this does not work, you could try the same thing with an asp:button, just set the  style on it and use the click event instead of the change event.
                Can you provide some explanation what makes UpdatePanels so evil thing? If it is so, I would like to read some reasons why and when not to use them. So far I haven't stumbled upon any crucial problems with UpdatePanels.
– Jan Kukacka
                Jan 28, 2015 at 17:03
                @JanKukacka They're a poor abstraction of AJAX. The skills you learn in writing update panels don't directly translate to being able to properly utilize AJAX in anything outside of ASP.NET Web Forms. UpdatePanels are difficult to debug. And if you have ViewState on, a large amount of data is transferred to/from the server needlessly, making it bandwidth intensive. Learning proper AJAX (perhaps with some lightweight abstraction layer such as jQuery) is a far better solution when you need to talk to the server without performing a postback.
– mason
                Sep 28, 2015 at 18:59
                A question. When a div is dragged the _doPostBack is invoked by you or automatically by ASP.NET?
– Alex Rodrigues
                Aug 20, 2009 at 12:55
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.