Partial postback with Javascript Partial postback with Javascript javascript javascript

Partial postback with Javascript


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);


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.


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   }        }