AJAX significa JavaScript y XML asincrónicos. Se trata de una tecnología multiplataforma que acelera los tiempos de respuesta. Los controles del servidor AJAX agregan script a la página, que el navegador ejecuta y procesa.
Sin embargo, al igual que otros controles de servidor ASP.NET, estos controles de servidor AJAX pueden tener métodos y controladores de eventos asociados, todos los cuales se manejan en el lado del servidor.
La caja de herramientas de control en Visual Studio IDE contiene un conjunto de componentes de control llamados 'AJAX'.
El control ScriptManager es el control más importante y debe estar presente en la página para que funcionen otros controles.
Tiene una sintaxis básica:
<asp:ScriptManager ID="ScriptManager1" runat="servidor"></asp:ScriptManager>
Si crea un 'sitio habilitado para Ajax' o agrega un 'formulario web AJAX' desde el cuadro de diálogo 'Agregar elemento', la página web formará y contendrá automáticamente el control del administrador de secuencias de comandos. El control ScriptManager se encarga de las secuencias de comandos del lado del cliente para todos los controles del lado del servidor.
El control UpdatePanel es un control contenedor y se deriva de la clase Control. Funciona como un contenedor para los controles secundarios que contiene y no tiene su propia interfaz. Cuando uno de sus controles activa un envío, UpdatePanel interviene para iniciar de forma asincrónica y actualizar parte de la página.
Por ejemplo, si un control de botón está dentro de un panel de actualización y se hace clic en él, solo se verán afectados los controles del panel de actualización y los controles de otras partes de la página no se verán afectados. Esto se denomina devolución de confirmación parcial o devolución de confirmación asincrónica.
Agregue un formulario web AJAX a su aplicación. Contiene el control del administrador de scripts predeterminado. Inserte un panel de actualización. Coloque un control de botón y una etiqueta dentro del control del panel de actualización. Coloque otro conjunto de botones y etiquetas fuera del panel.
La vista de diseño se ve así:
El archivo de recursos se ve así:
<form id="form1" runat="servidor"> <div> <asp:ScriptManager ID="ScriptManager1" runat="servidor" /> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="servidor" > <ContentTemplate> <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/> <br /> <br /> <asp:Label ID="lblpartial" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <p> </p> <p>Fuera del panel de actualización</p> < p> <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" /> </p> <asp:Label ID="lbltotal" runat="servidor"></asp:Label></form>
Todos los controles de botones tienen el mismo código para el controlador de tiempo:
string time = DateTime.Now.ToLongTimeString();lblpartial.Text = "Mostrando la hora desde el panel" + hora; lbltotal.Text = "Mostrando la hora desde fuera" + hora;
Observe que cuando se ejecuta la página, si se hace clic en el botón de devolución de envío total, se actualizarán todas las etiquetas con la hora de actualización, pero si se hace clic en el botón de devolución de envío parcial, solo actualizará las etiquetas en el panel de actualización.
| propiedad | describir |
|---|---|
| Los niños como desencadenantes | Esta propiedad indica si la devolución proviene de un control secundario, lo que hará que se actualice el panel de actualización. |
| Plantilla de contenido | Es la plantilla de contenido y define lo que aparece dentro del panel de actualización cuando aparece. |
| Contenedor de plantilla de contenido | Recupera un objeto contenedor de plantilla creado dinámicamente y se utiliza para agregar controles secundarios mediante programación. |
| Está en representación parcial | Indica si el panel se actualiza como parte de la devolución de confirmación parcial. |
| Modo de renderizado | Mostrar modo de renderizado. Los modos disponibles son Bloque e Inline. |
| Modo de actualización | Obtiene o establece el modo de representación determinando algunas condiciones. |
| Desencadenantes | Defina objetos desencadenantes de colección, cada uno correspondiente a un evento que hace que el panel se actualice automáticamente. |
La siguiente tabla muestra los métodos del control del panel de actualización:
| método | describir |
|---|---|
| Crear contenido plantilla contenedor | Se crea un objeto Control para que sirva como contenedor para los controles secundarios que definen el contenido del control UpdatePanel. |
| CrearColecciónControl | Devuelve una colección de todos los controles contenidos en el control UpdatePanel. |
| Inicializar | Inicializa la colección de activadores de control UpdatePanel si se está ejecutando un dibujo de página parcial. |
| Actualizar | Provoca que se actualice el contenido del control UpdatePanel. |
El comportamiento del panel de actualización depende de los valores de la propiedad UpdateMode y la propiedad ChildrenAsTriggers.
| método | describir | Influencia |
|---|---|---|
| Siempre | FALSO | Parámetro ilegal. |
| Siempre | Verdadero | UpdatePanel se actualiza si se actualiza toda la página o si regresa un control secundario encima de ella. |
| Condicional | FALSO | UpdatePanel se actualiza si se actualiza toda la página o si un control activado fuera de ella inicia una actualización. |
| Condicional | Verdadero | UpdatePanel se actualiza si se actualiza toda la página o si un control secundario encima regresa o un control activador externo inicia una actualización. |
El control UpdateProgress proporciona comentarios del navegador cuando se actualizan uno o más controles del panel de actualización. Por ejemplo, esperar una respuesta del servidor cuando un usuario inicia sesión o cuando realiza algún trabajo orientado a la base de datos.
Proporciona confirmación visual, como "Cargando página...", de que el trabajo se está procesando.
La sintaxis del control UpdateProgress es:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" > <ProgressTemplate> Cargando... </ProgressTemplate></asp:UpdateProgress>
El fragmento anterior muestra un mensaje simple con una etiqueta ProgressTemplate. Sin embargo, puede ser una imagen u otro control relacionado. El control UpdateProgress muestra cada devolución asincrónica a menos que se especifique como un panel de actualización independiente mediante la propiedad AssociatedUpdatePanelID.
La siguiente tabla muestra las propiedades del control de progreso de la actualización.
| propiedad | describir |
|---|---|
| ID del panel de actualización asociado | Obtiene y establece el ID del panel de actualización con el control al que está asociado este control. |
| Atributos | Obtiene y establece la propiedad de la hoja de estilos en cascada (CSS) del control UpdateProgress. |
| Mostrar después | Obtiene y establece el tiempo en milisegundos después de que se muestra la plantilla de procesamiento. El valor predeterminado es 500. |
| Diseño dinámico | Indica si las plantillas de proceso se muestran dinámicamente. |
| Plantilla de progreso | Indica que la plantilla se muestra durante una devolución de confirmación asincrónica que lleva más tiempo que el tiempo DisplayAfter. |
La siguiente tabla muestra los métodos del control del progreso de la actualización:
| método | describir |
|---|---|
| ObtenerDescriptores de Script | Devuelve una lista de componentes, comportamientos y controles del lado del cliente necesarios para la funcionalidad del lado del cliente del control UpdateProgress. |
| GetScriptReferencias | Devuelve una lista de controles UpdateProgress de los que dependen los scripts del cliente. |
El control del temporizador se utiliza para inicializar automáticamente las devoluciones de envío. Esto se puede hacer de dos maneras:
(1) Establezca la propiedad Triggers del control UpdatePanel.
<Disparadores> <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Clic" /></Disparadores>
(2) Coloque un control de temporizador directamente dentro de UpdatePanel como activador de un subcontrol. Un único temporizador puede servir como activador para muchos UpdatePanels.
<asp:UpdatePanel ID="UpdatePanel1" runat="servidor" UpdateMode="Siempre"> <ContentTemplate> <asp:Timer ID="Timer1" runat="servidor" Interval="1000"> </asp:Timer> < asp:Label ID="Label1" runat="server" Height="101px" > </asp:Label> </ContentTemplate></asp:UpdatePanel>