2010-07-02 19 views
10

Estoy llamando a una función jQuery después de insertar un registro en la base de datos ...Llamar a una función jQuery de código subyacente en asp.net no parece trabajar

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

He incluido esto en mi página maestra para la ejecución de la función jQuery después de una devolución de datos,

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

Pero no parece funcionar ... Cualquier sugerencia ..

+0

¿Es la alerta (a) ser llamado, o nada en absoluto? –

+0

@Dave llegó la alerta, pero las instrucciones a continuación no se ejecutan – bala3569

+0

intente utilizar diferentes nombres de variable para "alerta" y "$ alerta". No estoy seguro, pero desconfiaría de redefinir la función de alerta nativa. No es una buena práctica de codificación, al menos. –

Respuesta

3

Suponiendo que el código subyacente se está ejecutando durante una actualización UpdatePanel, podría Ther ¿Hay una mala interacción entre su controlador EndRequest y su registro de código subyacente? topBar() debería recibirse dos veces, una con el mensaje "Insertado correctamente" y otra vez con un parámetro no definido en EndRequest (a menos que la variable de mensaje esté definida en algún lugar que no podamos ver aquí).

También tenga en cuenta que $('#alert') puede devolver más de un artículo. Si se llama a topBar() más de una vez, ese es probablemente el caso.

¿Qué hay de hacer algo como esto, para empezar, para mitigar este efecto secundario no deseado:

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

esto no soluciona el problema de EndRequest y Registro * Guión tanto la ejecución barra superior(), pero que en caso evite que entren en conflicto para que pueda ver mejor lo que está sucediendo.

Pruébalo y avísanos si eso cambia las cosas.

+0

¿Qué pasó cuando no funcionó? ¿Nada en absoluto? ¿Está seguro de que no hubo un error de JavaScript o un error en el servidor durante la devolución de datos asincrónica (lo que habría impedido que la secuencia de comandos Register * emita su carga útil)? Si usa Firebug para establecer un punto de interrupción en la función topBar(), ¿se está ingresando esa función cuando no funciona correctamente? –

3

Con Chrome y Firefox, el único problema que tuve fue que el var alert tenía el mismo nombre que la llamada alert().

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

Es posible que su etiqueta body no está cargado en el momento de la secuencia de comandos se ejecuta, lo que significa que la referencia $(document.body) estaría vacía - lo que sería en silencio jQuery dejar de añadir el div alerta a. De cualquier manera, nunca está de más para envolver sus llamadas en un $(document).ready evento:

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

Aquí está un ejemplo de trabajo 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

Trabajo confirmado. Mi código llama a UnFreezeScreen(). 'ScriptManager.RegisterStartupScript (BTN_Submit, BTN_Submit.GetType()," key "," UnFreezeScreen(); ", True)' –

+0

Gracias por esa solución pero si puedo saber cómo puedo hacer que funcione con múltiples acciones y utilizando mensajes casos enviados desde el código detrás? si tienes tiempo, amablemente actualiza o jsConsulta un pequeño ejemplo ... gracias – hsobhy

3

Esto no responde a su pregunta directamente, pero es más significado para pasar en otra técnica para llamar a métodos de página sin usar paneles de actualización, pero directamente desde jQuery.

Sólo decorar su método de página (en la clase parcial del código subyacente) de esta manera (que debe ser estática):

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

    return true; 
} 

A continuación, se puede llamar a este método la página derecha desde el método $ .ajax de 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"); 
     } 
    } 
    }); 

}); 

Es muy simple, y mucho más limpio que tratar de registrar scripts. No es necesario crear un servicio web tampoco.

Esto es un gran artículo:

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

Cuestiones relacionadas