2010-07-02 8 views
10

sto chiamando una funzione di jQuery dopo aver inserito un record di database ...Chiamare una funzione jQuery dal codice dietro in asp.net non sembra funzionare

ScriptManager.RegisterClientScriptBlock(LbOk, typeof(LinkButton), "json", 
          "topBar('Successfully Inserted');", true); 

ho incluso nel mio pagina master per l'esecuzione di funzione di jQuery dopo un postback,

<script type="text/javascript"> 
    function load() { 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     } 
    function EndRequestHandler() 
     { 
      topBar(message); 
    } 


function topBar(message) { 
    alert(a); 
    var alert = $('<div id="alert">' + message + '</div>'); 
    $(document.body).append(alert); 
    var $alert = $('#alert'); 
    if ($alert.length) { 
     var alerttimer = window.setTimeout(function() { 
      $alert.trigger('click'); 
     }, 5000); 
     $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function() { 
      window.clearTimeout(alerttimer); 
      $alert.animate({ height: '0' }, 200); 
     }); 
    } 
} 
    </script> 

<body onload="load();"> 

Ma non sembra funzionare ... Ogni suggerimento ..

+0

È l'avviso (a) essere chiamato, o niente del tutto? –

+0

@La segnalazione di allarme è arrivata, ma le istruzioni riportate di seguito non vengono eseguite – bala3569

+0

provare a utilizzare nomi di variabili diversi per "avviso" e "$ avviso". Non sono sicuro, ma sarei cauto nel ridefinire la funzione di avviso nativo. Non è una buona pratica di codifica, almeno. –

risposta

3

Supponendo che il code-behind è in esecuzione durante un aggiornamento UpdatePanel, potrebbe ther E una cattiva interazione tra il tuo gestore EndRequest e la tua registrazione code-behind? topbar() dovrebbe essere sempre chiamato due volte, una volta con il messaggio "inserito correttamente" e poi una volta con un parametro definito in EndRequest (a meno che non si definisce la variabile messaggio da qualche parte che non possiamo vedere qui).

Inoltre, tenere presente che $('#alert') può restituire più di un articolo. Se topBar() viene chiamato più di una volta, probabilmente è il caso.

ne dite di fare qualcosa di simile, per cominciare, a mitigare tale effetto collaterale non intenzionale:

function topBar(message) { 
    var $alert = $('<div/>'); 

    $alert.text(message); 

    $alert.click(function() { 
    $(this).slideUp(200); 
    }); 

    $(body).append($alert); 

    // Doesn't hurt anything to re-slideUp it if it's already 
    // hidden, and that keeps this simple. 
    setTimeout(function() { $alert.slideUp(200) }, 5000); 
} 

questo non risolve il problema della EndRequest e registro * Scrittura sia in esecuzione topbar(), ma che dovrebbe impediscigli di entrare in conflitto in modo da poter vedere meglio cosa sta succedendo.

Provalo e facci sapere se questo cambia le cose.

+0

Cosa è successo quando non ha funzionato? Niente di niente? Sei sicuro che non ci sia stato un errore JavaScript o un errore sul lato server durante il postback asincrono (che avrebbe impedito a Register * Script di emettere il suo payload)? Se si utilizza Firebug per impostare un punto di interruzione nella funzione topBar(), la funzione viene inserita quando non funziona correttamente? –

3

Con Chrome e Firefox, l'unico problema riscontrato era lo var alert con lo stesso nome della chiamata alert().

function topBar(message) { 
     alert(message); 
     var alertDiv = $('<div id="alert">' + message + '</div>'); 
     $(document.body).append(alertDiv); 
     var $alert = $('#alert'); 

E 'possibile che il tag body non viene caricato al momento dello script in esecuzione, il che significherebbe che il riferimento $(document.body) sarebbe vuoto - che jQuery sarebbe fallire in modo silenzioso per aggiungere il div attenti a. In entrambi i casi, non fa mai male per avvolgere le chiamate in un evento $(document).ready:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "json", 
         "$(document).ready(function() { topBar('Successfully Inserted');});", true); 
4

Ecco un esempio di lavoro completo:

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" %> 
<script type="text/C#" runat="server"> 
    protected void BtnUpdate_Click(object sender, EventArgs e) 
    { 
     // when the button is clicked invoke the topBar function 
     // Notice the HtmlEncode to make sure you are properly escaping strings 
     ScriptManager.RegisterStartupScript(
      this, 
      GetType(), 
      "key", 
      string.Format(
       "topBar({0});", 
       Server.HtmlEncode("Successfully Inserted") 
      ), 
      true 
     ); 
    }  
</script> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function topBar(message) { 
      var alert = $('<div id="alert">' + message + '</div>'); 
      $(document.body).append(alert); 
      var $alert = $('#alert'); 
      if ($alert.length) { 
       var alerttimer = window.setTimeout(function() { 
        $alert.trigger('click'); 
       }, 5000); 
       $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function() { 
        window.clearTimeout(alerttimer); 
        $alert.animate({ height: '0' }, 200); 
       }); 
      } 
     } 
    </script> 
</head> 
<body> 
    <form id="Form1" runat="server"> 

    <asp:ScriptManager ID="scm" runat="server" /> 

    <asp:UpdatePanel ID="up" runat="server"> 
     <ContentTemplate> 
      <!-- 
       You could have some other server side controls 
       that get updated here 
      --> 
     </ContentTemplate> 
     <Triggers> 
      <asp:AsyncPostBackTrigger 
       ControlID="BtnUpdate" 
       EventName="Click" 
      /> 
     </Triggers> 
    </asp:UpdatePanel> 

    <asp:LinkButton 
     ID="BtnUpdate" 
     runat="server" 
     Text="Update" 
     OnClick="BtnUpdate_Click" 
    /> 

    </form> 
</body> 
</html> 
+0

Confermato il funzionamento. Il mio codice chiama UnFreezeScreen(). 'ScriptManager.RegisterStartupScript (BTN_Submit, BTN_Submit.GetType()," chiave "," UnFreezeScreen(); ", True)' –

+0

Grazie per questa soluzione, ma se posso sapere come posso farlo funzionare con più azioni e utilizzando i messaggi casi inviati dal codice? se hai tempo aggiorna gentilmente o jsFiddle un piccolo esempio ... grazie – hsobhy

3

Questo non risponde direttamente alla tua domanda, ma è più destinato a passare su un'altra tecnica per chiamare i metodi di pagina senza utilizzare i pannelli di aggiornamento, ma direttamente da jQuery.

Basta decorare la vostra metodo di pagina (nella classe parziale del codebehind) in questo modo (deve essere statico):

[WebMethod] 
[ScriptMethod(ResponseFormat=ResponseFormat.Json, XmlSerializeString=true)] 
public static bool UpdateDatabase(string param1 , string param2) 
{ 
    // perform the database logic here... 

    return true; 
} 

Quindi, è possibile chiamare questo metodo giusta pagina dal metodo $ .ajax di jQuery:

$("#somebutton").click(function() { 

    $.ajax({ 
    type: "POST", 
    url: "PageName.aspx/UpdateDatabase", 
    data: "{ param1: 'somevalue', param2: 'somevalue' }", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function(data) { 
     if (data.d) { 
     topBar("success!"); 
     } else { 
     topBar("fail"); 
     } 
    } 
    }); 

}); 

È molto semplice e molto più pulito che tenta di registrare gli script. Non è necessario creare nemmeno un servizio web.

Questo è un grande articolo:

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Problemi correlati