Aggiornare un UpdatePanel manualmente utilizzando JavaScript o jQuery

Question

È possibile aggiornare manualmente un UpdatePanel utilizzando JavaScript o jQuery?

Quello che ho è un TextBox nella parte superiore della mia pagina. Quando un utente lascia quel TextBox, voglio eseguire un codice server (aggiungerà un record al mio database), quindi in fondo alla pagina ho un UpdatePanel che verrà aggiornato. L'UpdatePanel ha un GridView che avrà una voce per il record aggiunto)

Answer 1

Basta chiamare questo javascript funzione. Qui UpdatePanel1 è ID del UpdatePanel

<script type="text/javascript"> 

      var UpdatePanel1 = '<%=UpdatePanel1.ClientID%>'; 

      function ShowItems() 
      { 
       if (UpdatePanel1 != null) 
       { 
        __doPostBack(UpdatePanel1, ''); 
       } 
      }  

     </script> 

Answer 2

Penso che ho avuto la mia risposta ... hanno per creare un pulsante nascosto nel UpdatePanel quindi chiamare

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

Answer 3

Beh, nel mio caso la risposta è stata l'uso del UniqueID. ClientID non ha funzionato.

__doPostBack("<%=btnTest.UniqueID %>", ""); 

Questo funziona perfettamente. Non chiedermi il perché.

Answer 4

Crea funzione per async postback:

function __doPostBackAsync(eventName, eventArgs) { 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 

     if (!Array.contains(prm._asyncPostBackControlIDs, eventName)) { 
      prm._asyncPostBackControlIDs.push(eventName); 
     } 

     if (!Array.contains(prm._asyncPostBackControlClientIDs, eventName)) { 
      prm._asyncPostBackControlClientIDs.push(eventName); 
     } 

     __doPostBack(eventName, eventArgs); 
    } 

chiamare questa funzione in cui è necessario (in evento click, evento load, ...):

__doPostBackAsync("UpdatePanel1", ""); 

Nel codebehind controllo Page_Load postback asincrono e aggiornamento UpdatePanel desiderata:

if (scriptManager.IsInAsyncPostBack) 
{ 
     if (Request["__EVENTTARGET"] == UpdatePanel1.ID) 
     { 
     ... 

     //Do update 
     UpdatePanel1.Update(); 
     } 
} 

Answer 5

ASPX:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_OnLoad" > ... 

CodeBehind:

protected void UpdatePanel1_OnLoad(object sender, EventArgs e) 
{ 
    var rawArguments = Page.Request["__EVENTARGUMENT"]; 
    if(rawArguments != null) 
    { 
     var arguments = HttpUtility.ParseQueryString(rawArguments); 

     switch (arguments["EventName"]) 
     { 
      case "Event1": 
       var parameter1Value = arguments["parameter1"]; 
       var parameter2Value = arguments["parameter2"]; 
       break; 
     } 
    } 
} 

Javascript:

function updatePanelPartialPostback(updatepanelId, eventName, parameters) { 
    var parametersParsed = "EventName=" + eventName + "&"; 

    for (var propertyName in parameters) { 
     parametersParsed += propertyName + '=' + parameters[propertyName] + '&'; 
    } 

    __doPostBack(updatepanelId, parametersParsed); 
} 


updatePanelPartialPostback('<%= UpdatePanel1.ClientID %>', 'Event1', { parameter1: 'value1', parameter2: 'value2' }); 

Answer 6

Hai solo bisogno chiamare cambiamento() sulla strega di controllo si ha attivato nel vostro UpdatePanel.

Ad esempio:

<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1" ChildrenAsTriggers="True"> 
    <ContentTemplate> 
     <asp:DropDownList ID="ddl" runat="server" Visible="true" AutoPostBack="true" CssClass='someClass' /> 
    </ContentTemplate> 
    <Triggers> 
    <asp:AsyncPostBackTrigger ControlID="ddl" EventName="SelectedIndexChanged" /> 
    </Triggers> 
    </asp:UpdatePanel 


<script>   
    $(".someClass").change(); 
</script> 

Answer 7

questo funziona per me:

<asp:UpdatePanel id="pnl" UpdateMode="Conditional" runat="server"> 
<contentemplate> 
    <div>...your content...</div> 
    <div style="display: none; line-height: 0pt;"> 
     <asp:Button id="btnUpdate" runat="server" UseSubmitBehavior="false" /> 
    </div> 
</contentemplate> 
</asp:UpdatePanel> 

JavaScript:

function doUpdate() 
{ 
    var btn = document.getElementById("<%#= btnUpdate.ClientID %>"); 
    if(btn != null) { btn.click(); } 
} 

Answer 8

Anche se una vecchia questione, credo che merita la menzione di una soluzione in più .

Se non si desidera fare affidamento su pulsanti nascosti o illusorio __doPostBack, è disponibile l'opzione "ClientScript.GetPostBackEventReference", come descritto in questa pagina (allo stesso modo un po 'vecchia, ma ancora grande):

http://www.4guysfromrolla.com/articles/033110-1.aspx

In breve, se l'UpdatePanel è dichiarato così:

<asp:UpdatePanel ID="MyUpdatePanel" runat="server">...</UpdatePanel> 

poi in JavaScript è possibile chiamare lo script che viene generato da questo codice latoserver:

ClientScript.GetPostBackEventReference(MyUpdatePanel, "") 

Quindi nel tuo pagina aspx si potrebbe avere qualcosa di simile:

function MyJavaScriptFunction(){ 
    doSomeStuff(); 
    <%=ClientScript.GetPostBackEventReference(MyUpdatePanel, "")%> 
} 

Il codice tra <% e%> verrà sostituito con una chiamata reale javascript quando la pagina viene analizzato, in modo da poter dare un'occhiata a esso visualizzando il sorgente codice della pagina nel tuo browser.

Potrebbe non essere più semplice delle altre risposte, ma lo preferisco in quanto non introduce elementi aggiuntivi e __doPostBack sembra un hack. :-)