Tutorial ASP.NET: Utilización de AJAX
ASP.NET AJAX es un conjunto de extensiones que permiten la implementación de AJAX en web forms que nos permiten actualizar datos en la pantalla sin necesidad de una recarga completa de la misma. Para poder usar AJAX en un entorno ASP.NET es necesario tener instaladas las extensiones de AJAX.
Podemos encontrarlas en el centro de descargas de Microsoft:
Una vez instaladas ya podemos comenzar a utilizar los controles AJAX en nuestros formularios ASP.NET
El control AJAX más usado es el UpdatePanel que justamente nos permite recargar solo una porción de nuestra página. El control UpdatePanel necesita del ScriptManager para funcionar.
¿Cómo se implementa AJAX en nuestro sitio Web?
Una vez instaladas las extensiones de ajax debemos indicarle a nuestro sitio web que deberá responder a controles AJAX. Esto lo hacemos agregando las siguientes líneas en nuestro Web.Config.
System.Web.Extensions System.Web.Extensions.Design <runtime>/code> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35"/> <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/> </dependentAssembly> <dependentAssembly> <assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35"/> <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/> </dependentAssembly> </assemblyBinding> </runtime>
En caso de utilizar la IDE del Visual Studio no sería necesario agregar estas líneas ya que al crear el proyecto las agrega por default. Uno de los formularios que realizan postback, es decir, que van al servidor y se vuelven a recargar es el formulario ADO.NET. En este vamos a implementar el UpdatePanel para que no recargue toda la página.
Agregamos el control ScriptManager en la parte inicial del webform o del ContentPlaceHolder.
En nuestro caso que estamos usando Master Page con el webform ADO.aspx.
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
Luego colocamos todo el formulario que creamos (cuadros de textos, labels, botons, grilla, tablas, etc.) dentro del UpdatePanel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> …Aquí pondremos todos los controles </ContentTemplate> </asp:UpdatePanel></code>
Ejecutamos ADO.aspx y veremos que cada vez que va a guardar información o leer información no va a recargar toda la página, solamente la porción que está dentro del UpdatePanel.
Capítulos del Tutorial
- Capítulo 1: Tutorial de desarrollo web con ASP.NET
- Capítulo 2: Primera aplicación web en ASP.NET
- Capítulo 3: Ejecutar código JavaScript en ASPNET
- Capítulo 4: Archivos Web.Config y Global.asax
- Capítulo 5: Utilización de Código detrás del modelo o código en línea
- Capítulo 6: Controles de servidor y eventos
- Capítulo 7: Controles de usuarios reutilizables
- Capítulo 8: Crear una página de login, autenticación y seguridad.
- Capítulo 9: Utilización de estilos en ASP.NET (CSS)
- Capítulo 10: Trabajando con XML y Web Services
- Capítulo 11: Acceso a datos, consultar y guardar información desde WebForms
- Capítulo 12: Estructura de clases y objetos
- Capítulo 13: Utilización de Master Pages
- Capítulo 14: Cómo crear menús de navegación
- Capítulo 15: Utilización de AJAX
Excelente aportación, muy buena.