Cómo actualizar una pantalla continuamente en ASP.NET para Ajax

Escrito por kevin lee | Traducido por juan guaresti
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo actualizar una pantalla continuamente en ASP.NET para Ajax
Haz felices a los visitantes al hacer que sus páginas se actualicen más rápido. (Comstock Images/Comstock/Getty Images)

Una vez que aprendas a realizar el procesamiento desencadenador asincrónico de Ajax, podrás hacer que tus páginas web ASP.net sean más interactivas y útiles. Microsoft Visual Studio contiene controles Ajax útiles que permiten que las páginas web actualicen sus datos sin comunicarse con el servidor web. Este tipo de comunicación asíncrona permite que los visitantes del sitio interactúen con los controles que muestran nuevos datos de forma instantánea. Crea un reloj digital, por ejemplo, mediante la actualización de una etiqueta a cada segundo. Después de configurar los controles de Ajax, sólo tienes que crear algunas líneas de código para actualizar los elementos en tus páginas web ASP.NET.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

    Creación de un desencadenador asincrónico

  1. 1

    Inicia Microsoft Visual Studio y abre uno de tus proyectos web ASP.NET C #. Localiza el formulario de inicio de tu proyecto en el "Explorador de soluciones" y haz doble clic sobre ese formulario para ver el código de marcado HTML.

  2. 2

    Pega el siguiente código dentro de la etiqueta <form>:

    <asp:ScriptManager ID="ScriptMgr1" runat="server" /> <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1000"> <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1000"> </asp:Timer>

    Este código crea el ScriptManager necesario para la comunicación. Además, crea un contador de tiempo que el formulario utilizará para actualizar los datos usando Ajax. Este temporizador hace clic cada 1.000 milisegundos debido a que "I" es el valor del atributo "Interval " (intervalo).

  3. 3

    Agrega el código que se muestra a continuación después del código que aparece en el ejemplo anterior:

    <asp:UpdatePanel runat="server" ID="update" UpdateMode="Conditional"> <ContentTemplate> <asp:label runat="server" /> ID="Label1" </ ContentTemplate>

    La etiqueta UpdatePanel crea un panel de actualización que contiene las partes de la página web que deseas actualizar de forma asíncrona. La etiqueta ContentTemplate alberga el contenido que deseas que aparezca en la sección del cuerpo de los formularios. En este ejemplo, la ContentTemplate contiene una etiqueta cuyo identificador es "Label1".

  4. 4

    Coloca el siguiente código debajo de la etiqueta de cierre </ ContentTemplate> que se muestra en el último paso:

    <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </ Triggers>

    </ asp: UpdatePanel>

    El control AsynPostBackTrigger hace posible un control, como tu temporizador, actualice otro control cuando se produce un evento de devolución de datos asincrónico. Cada vez que el temporizador haga clic, estará llamando a un método que realiza una acción.

    Incorporación de Coding Logic

  1. 1

    Haz clic en "Diseño" para ver el formulario en modo de diseño. Haz clic en el control "Timer1" que aparece y presiona "F4" para ver la ventana "Propiedades".

  2. 2

    Presiona el botón "Eventos" en la parte superior de la ventana, luego haz doble sobre el evento "Tick". Visual Studio abre una ventana de código y coloca el cursor dentro del método de evento de clic del temporizador.

  3. 3

    Pega el código que se muestra a continuación en ese método:

    Label1.Text DateTime.Now.ToLongTimeString = ();

    Esta instrucción cambia el texto de la etiqueta para que muestre la hora actual cada vez que se ejecute el método.

  4. 4

    Presiona "F5" para ejecutar el proyecto y ver el formulario en tu navegador. El tiempo de la etiqueta cambia a cada segundo mientras el temporizador proveca que la etiqueta actualice su texto.

Consejos y advertencias

  • En este ejemplo establece el valor del atributo "Tick" del temporizador en 1.000 milisegundos. Cambia este valor para aumentar o disminuir el tiempo entre las actualizaciones de Ajax.
  • En este ejemplo también se actualiza una simple etiqueta cuando se produce el evento Tick del temporizador. Si necesitas actualizar controles adicionales y el código, hazlo en el método de evento de clic del temporizador.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles