2011-06-21 27 views
6

estoy tratando de tener dos cosas suceden cuando haga clic en un botón en una página ASP.NET:Actualizando etiqueta ASP.NET después de clic de botón, utilizando UpdatePanel

  1. cambiar el texto de un ASP: Etiqueta .
  2. Deshabilitar el botón.

He investigado mucho sobre esto, pero he tenido dificultades para hacerlo.

Para # 1, pensé que esto debería funcionar, pero no es así:

<%@ Page Language="VB" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<script runat="server"> 


    Protected Sub BtnSubmit_Click(sender As Object, e As System.EventArgs) 
     Label1.Text = "Working..." 

     System.Threading.Thread.Sleep(5000) 

     Label1.Text = "Done." 

    End Sub 
</script> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Test Page</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <ajaxToolkit:ToolkitScriptManager runat="server" /> 
    <div> 
     <asp:ListBox runat="server" Height="100px" /> 
     <br /> 
     <asp:UpdatePanel runat="server"> 
      <Triggers> 
       <asp:AsyncPostBackTrigger ControlID="BtnSubmit" EventName="Click" /> 
      </Triggers> 
      <ContentTemplate> 
       <asp:Label ID="Label1" runat="server" Text="Press the button" /> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
     <br /> 
     <asp:Button runat="server" ID="BtnSubmit" OnClick="BtnSubmit_Click" Text="Submit Me!" /> 
    </div> 
    </form> 
</body> 
</html> 

el mensaje "Trabajo ..." nunca se muestra.

En cuanto a # 2, añadí esto al botón (no recuerdo donde lo encontré):

OnClientClick="this.disabled = true; this.value = 'Working...';" 
      UseSubmitBehavior="false" 

Eso tuvo el efecto deseado de desactivar el botón y cambiando su texto (valor), pero no fue posible volver a cambiarlo utilizando las propiedades Texto y Habilitado.

Respuesta

0

ASP no descarga el resultado al navegador mientras se trabaja incluso si se utiliza un UpdatePanel. Se terminará la jobb (incluyendo el sueño) antes de enjuagar.

Se puede utilizar un UpdateProgress para mostrar el "trabajo .." texto.

<asp:UpdateProgress> 

Esto mostrará su contenido mientras el UpdatePanel está funcionando. Una vez que el UpdatePanel está terminado, el contenido desaparecerá.

lo que necesita en ClickEvent que es:

Label1.Text = "Done." 
btnSubmit.Enabled = false 

Esto mostrará el texto Dado y desactivar el botón. Y dile a UpdateProgress que desaparezca.

-1

En primer lugar, "trabajar" nunca aparece porque el valor final de la etiqueta en el momento de la devolución es "Hecho". Piense en lo que está sucediendo aquí: haga clic en el botón que causa una devolución posterior al servidor. Procesa el post-back que incluye ejecutar el código de clic del botón, el resultado del cual luego se envía de vuelta al navegador. Su texto de "trabajo" nunca regresa por el cable.

no estoy claro en lo que estamos tratando de lograr con el código del lado del cliente, pero que haga lo que usted describe estás almsot no del lado del servidor:

Protected Sub BtnSubmit_Click(sender As Object, e As System.EventArgs) 
    Label1.Text = "Done." 
    btnSubmit.Enabled = false 
End Sub 

también, pero el botón dentro de las etiquetas de la plantilla del panel de actualización para que participe en ajax-postback.

0

mensaje El trabajo no se muestra porque se está ejecutando la secuencia de comandos en el servidor, que no responde al cliente hasta que las salidas de los métodos.

ASP.NET AJAX ha incorporado un control para mostrar mensajes como este, mientras que el UpdatePanel está esperando en el servidor.

Salida del control UpdateProgress:

<asp:UpdateProgress runat="server" id="progress" ><ProgressTemplate>Working...</ProgressTemplate></asp:UpdateProgress> 

puede deshabilitar el botón estableciendo la propiedad Enabled en false en el método del lado del servidor.

BtnSubmit.Enabled = false 
+0

Perfecto. Estoy un poco avergonzado de que no haya encontrado esto. Gracias a ti y a todos los demás por tu tiempo. – rht341

0

@ 1: Nunca verá el mensaje "Trabajando" cuando detuvo el hilo ... Cada mensaje se mostrará cuando su proceso haya "finalizado".

@ 2: codificó ClientSide deshabilitar el botón, no hay ningún código para volver a activar el botón

hth

5

acabo de encontrar una solución en MSDN (http://msdn.microsoft.com/en-us/library/bb386518.aspx) añadido algo de código y eliminar algunos. . las partes innecesarias

<%@ Page Language="C#" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<script runat="server"> 
protected void btnDoWork_Click(object sender, EventArgs e) 
{ 
    /// do something long lasting 
    System.Threading.Thread.Sleep(3000); 
} 
</script> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title></title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 

    <script language="javascript" type="text/javascript"> 
    <!-- 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_initializeRequest(InitializeRequest); 
    prm.add_endRequest(EndRequest); 
    var postBackElement; 
    function InitializeRequest(sender, args) { 
     if (prm.get_isInAsyncPostBack()) { 
      args.set_cancel(true); 
     } 
     postBackElement = args.get_postBackElement(); 
     if (postBackElement.id == 'btnDoWork') { 
      $get('btnDoWork').value = 'Working ...'; 
      $get('btnDoWork').disabled = true; 
     } 
    } 
    function EndRequest(sender, args) { 
     if (postBackElement.id == 'btnDoWork') { 
      $get('btnDoWork').value = 'Done!'; 
      $get('btnDoWork').disabled = false; 
     } 
    } 
    // --> 
    </script> 

    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <asp:Label ID="Label1" runat="server" Text="Hello World!"></asp:Label><br /> 
     </ContentTemplate> 
     <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="btnDoWork" /> 
     </Triggers> 
    </asp:UpdatePanel> 
    <asp:Button ID="btnDoWork" runat="server" Text="Start!" OnClick="btnDoWork_Click" /> 
</div> 
</form> 
</body> 
</html> 

Lo que básicamente hace, es que se registre algún eventHandler para Initialize_ y End_Request - en los que desactivas y habilitas tu botón!

HTH

+0

Gracias señor, justo lo que quería. – rht341

+0

puede considerar marcar esta pregunta como respondida - THX por adelantado: D –

Cuestiones relacionadas