Está en la página 1de 6

Capítulo 11

Uso de AJAX y AJAX Control


Toolkit

Objetivo

Al finalizar el capítulo, el alumno

 Aplica AJAX con WebForms en aplicaciones Web ASP.NET.

Temas

1. ASP.NET AJAX
2. Controles básicos de AJAX
3. Instalación y uso de AJAX Toolkit

Cibertec Perú S.A.C – Visual Studio 2015 Developer – C# (PDS1508)


Uso de AJAX y AJAX Control Toolkit 116

1. ASP.NET AJAX

AJAX en WebForms incorpora mejoras sustanciales en las aplicaciones Web.


Dentro de esas mejoras se tienen:

 Basado en los estándares abiertos: AJAX está formado por la


combinación de las tecnologías JavaScript, HTML, XML y XML HTTP
Request Object, siendo este último el único que no es estándar pero es
soportado por los navegadores más utilizados.

 Usabilidad: AJAX evita que el navegador tenga que volver a cargar la


página luego de una petición de datos, de este modo ya no se realizarán
postbacks innecesarios de toda la página cuando realmente cambia parte
del contenido.

 Rendimiento: Al renderizar parcialmente una sección de la página se


incrementa el rendimiento significativamente.

.NET incorpora nativamente ASP.NET AJAX desde la versión 2.0 del


Framework e incluye soporte para usar UpdatePanels con WebParts, soporte
para WCF basado en JSON end-points, soporte para ASP.NET Profile, Role y
Login Application Services usando JavaScript.

Cibertec Perú S.A.C – Visual Studio 2015 Developer – C# (PDS1508) 116


Uso de AJAX y AJAX Control Toolkit 117

2. Controles básicos de AJAX

Con ASP.NET AJAX una página puede realizar “partial-page updates” sin tener
que renderizar todo su contenido, evitando así postbacks completos. Solo
basta identificar las páginas cuyos datos se actualizan frecuentemente e incluir
en cada una el control ScriptManager para habilitar AJAX client-side libary. A
partir de ese momento, se pueden utilizar los controles UpdatePanel,
UpdateProgress y Timer que invoquen a los controles del servidor.

Obligatorio, gestiona librerías de script, archivos de


ScriptManager script, renderización parcial de páginas, y otras
funciones.

Se utiliza para invocar servicios web desde una


página ASP .NET. Al igual que cualquier control
ScriptManagerProxy
AJAX, este control debe ser usado dentro de la
sección <ScriptManager/>

Habilita secciones de la página a ser parcialmente


UpdatePanel renderizables sin necesidad de realizar un postback
en la página.

Opcional, provee un efecto visual interactivo en el


UpdateProgress browser cuando el contenido de un UpdatePanel se
está actualizando.

Opcional, realiza actualizaciones parciales de la


Timer
página en intervalos de tiempo definido.

Cibertec Perú S.A.C – Visual Studio 2015 Developer – C# (PDS1508) 117


Uso de AJAX y AJAX Control Toolkit 118

Como se menciona en la tabla previa, es obligatorio el contar con un control


ScriptManager para poder agregar controles con la funcionalidad de AJAX, por
defecto uno de estos controles viene incorporado en la MasterPage Site.Master
(la cual también viene por defecto en los proyectos WebForms que creamos):

<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see
http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
...
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
...

Podemos incorporar los controles AJAX de ASP.NET como si fuera cualquier


otro control, la sintaxis del UpdatePanel y del UpdateProgress en un WebForm
es la siguiente:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnGetProduct" EventName="Click"/>
</Triggers>

<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="300"
DynamicLayout="True">
<ProgressTemplate>
<img src="Images/loading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>

<asp:FormView runat="server" ID="FormView1"


ItemType="AW.SalesApp.WebForms.Models.ProductMaintenanceModel"
DefaultMode="Edit" DataKeyNames="ProductID">
<EditItemTemplate>
...
</ EditItemTemplate >
</asp:FormView>
</ContentTemplate>

</asp:UpdatePanel>

Cibertec Perú S.A.C – Visual Studio 2015 Developer – C# (PDS1508) 118


Uso de AJAX y AJAX Control Toolkit 119

3. Instalación y uso de AJAX Toolkit

El ASP.NET AJAX Control Toolkit nace como un proyecto conjunto entre la


comunidad de programadores y Microsoft. Está desarrollado en base a
ASP.NET AJAX y contiene una serie de controles Web y extensiones con los
que podremos utilizar las avanzadas características de ASP.NET AJAX de
manera rápida. Del mismo modo, con su descarga disponemos de ejemplos de
uso, así como del propio código fuente de los controles. El sitio web del
proyecto es: http://www.ajaxcontroltoolkit.com/

Vamos a distinguir entre controles Web y extensiones, donde los primeros son
una entidad por sí mismos, mientras que los segundos únicamente añaden un
comportamiento a un control Web existente.

Estos controles van desde un simple botón con una alerta asociada, hasta un
complejo panel que podemos arrastrar por la pantalla; en ambos casos,
mandando y recogiendo información entre el cliente y el servidor sin ningún tipo
de recarga de página. Su uso hará que nuestra Web sea mucho más atractiva
y simpática al usuario, así como potente y efectiva.

Cibertec Perú S.A.C – Visual Studio 2015 Developer – C# (PDS1508) 119


Uso de AJAX y AJAX Control Toolkit 120

Ejercicio Nº 11

Cambiar la manera de mostrar la información de un Product específico


transmitiendo menos datos mediante llamadas AJAX.

Cibertec Perú S.A.C – Visual Studio 2015 Developer – C# (PDS1508) 120

También podría gustarte