Partial postback with Javascript

Question

I couldn't find something similar in SO.

In ASP.NET, is there any way that on cue I can cause a partial postback with Javascript in an UpdatePanel?
I tried __doPostBack() but it does a full postback.
I can trick it with a dummy button and fire click() then handle the partial postback that way, but I want a more graceful way than trickery.

Thanks.

Edit: I found this disturbedbuddha.wordpress.com/2007/11/26/… but I can't get it to work =(
I would love for this method to work; it's perfect for me! So far what I can do using this last method is gain reference to the timer. With the timer initially disabled, starting the timer doesn't seem to cause a postback. However, without Ajax, if I simply have the timer enabled initially, it posts back at intervals just fine; why can't the Ajax call cause it?

Culmination

i've done this is the past. how? the dummy way. :) hidden button, make it a async trigger, then fire the click event. i would love to know a better way as well. the problem is the updatepanel needs a trigger, by a control which is 'postback-able' (button, ddl, etc). – Panic

Answer 1

You can use an AsyncPostBackTrigger with the UpdatePanel to do this. Because you need something that can fire an event, using a button is fairly simple and when hidden works nicely.

If this is your markup:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
    <ContentTemplate>
        <!-- Contents... -->
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ReloadThePanel" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:Button ID="ReloadThePanel" runat="server" style="display:none;" />

When you want the panel to be updated, you just need to call:

__doPostBack('<%=ReloadThePanel.ClientID %>', null);

This will make ASP.NET think that ReloadThePanel was clicked and the JavaScript auto-generated due to the trigger will handle the rest.

EDIT

You can do a pure JavaScript update of the UpdatePanel without any triggers or hidden buttons. You just need to invoke __doPostBack with the client-side ID as the first argument.

__doPostBack('<%=UpdatePanel1.ClientID %>', null);

Macy

Can I ask you this then? I just want to know the benefit of this. If I omit the <Triggers> section, and in Javascript I simply trigger the click event of the button, won't that do the same effect? Why use the <Triggers> section? – Culmination

If you omit the Triggers section and just "click" the button, it will post back the entire page. If you specify triggers, ASP.NET will generate JavaScript to "catch" the click and do the update via AJAX rather than a whole page submission. – Macy

But isn't that how Ajax already works? That's why I'm confused about it. If I actually show a button within an update panel, and actually click it, wouldn't it post back just that section? Why is the specific click-triggering via Javascript not caught like a real click? – Culmination

If you have a button inside an UpdatePanel, clicking it will post back just that section (I just confirmed this with a quick experiment). That button can be clicked by any means and have the UpdatePanel update. However, triggers allows a button, including those not in the UpdatePanel, to trigger the panel's update. – Macy

The edit is incorrect. It will post back the whole page. – Cowherb

Answer 2

I used @MatthewJacobs' answer but I found that the call to __doPostBack caused a runtime exception on IE11. I found that the call to __doPostBack can be replaced by the following JavaScript call, which worked on both browsers I tested (IE11 and Chrome 52).

Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack(
    [ '<%=UpdatePanel1.ClientID %>' ], '<%=UpdatePanel1.ClientID %>', null
);

See Sys.WebForms.PageRequestManager.beginAsyncPostBack Method for more details.

Ridglea

This solution works but UpdatePanel1_Load event must be defined in code behind. Bear in mind this event fires multiple times. – Indeclinable

Answer 3

The solution that worked for me

ASPX

<script>
  function myfunc(){
    __doPostBack('<%=UpdatePanel2.ClientID%>', "");
  }
</script>

<asp:UpdatePanel ID="UpdatePanel2" runat="server" OnLoad="UpdatePanel1_Load">       
</asp:UpdatePanel>

.cs

protected void UpdatePanel1_Load(object sender, EventArgs e)
{
   if (IsPostBack)
   {
      //your code
   }        
}

Dieterich