PDF de programación - Título

Creando Aplicaciones AJAX
con ASP.net

Brian J. Cardiff
Manas

Miguel Sáez
Microsoft Cono Sur

http://www.manas.com.ar

blogs.msdn.com/masaez/

Conversando con páginas ajax

 JSON|XML-Submit / JSON|XML-Response

– Rendering javascript
– Muy flexible, poco mantenible

 JSON|XML-Submit / HTML-Response

– a.k.a.: partial page rendering
– Sensible al contexto en el que se utiliza

2

DEMO

Trabajando con ASP.net en el
cliente

Web Services

 Datos y operaciones expuestos como

servicios
– Suporte para SOAP (.asmx) y modelos

RESTful

– Formato JSON, serialización de objetos

 Facilidades de networking

– Sys.Net.WebRequest – abstrae

XMLHttpRequest

– Script proxies para .asmx permiten

llamadas simples a métodos

DEMO

Incorporando Servicios Web

Modelo de Componentes y controles

Search for: <input id=“QueryTextBox" type="text" />

........

Sys.Application.add_init(function() {

$create(

AjaxControlToolkit.AutoCompleteBehavior,
{

"delimiterCharacters":"",
"id":"ctl01",
"minimumPrefixLength":1,
"serviceMethod":"GetCompletionList",
"servicePath":"Autocomplete.asmx"

}, null, null,
$get("QueryTextBox")

);

});

Modelo de Componentes y controles

Search for: <input id=“QueryTextBox" type="text" />

........

<asp:TextBox runat="server" ID="QueryTextBox">
</asp:TextBox>

<ajaxToolkit:AutoCompleteExtender

TargetControlID="QueryTextBox" runat="server"

MinimumPrefixLength="1"
ServicePath="Autocomplete.asmx"

ServiceMethod="GetCompletionList">

</ajaxToolkit:AutoCompleteExtender>

AJAX Server Controls

 Permiten construir experiencias ricas propias

con ASP.net
– La lógica de aplicación y UI corre en el servidor
– Evitar tener que trabajar con JavaScript y

programación asincrónica

 Utilizan técnicas AJAX para reducir

roundtrips completos

 Interactividad enriquecida para controles

ASP.NET
– Enriquecen la experiencia en el cliente de

aplicaciones web

– Ejemplos: auto-completion, drag-and-drop,

tooltips

Trabajamos en el Cliente o en el
Servidor?

 Sitios web centrados en el Servidor

– Trabajan con el modelo de aplicación del

servidor

– Mantienen lógica de UI/aplicación en el servidor

 Sitios web centrados en el cliente

– Explotan DHTML en la capa de presentación
– Utilizan AJAX para datos, servicios, composición

 ASP.NET provee un framework para

trabajar en ambos escenarios

DEMO

AJAX Extenders y AJAX
Control Toolkit

AJAX Server Controls
Reduciendo Roundtrips
 <asp:UpdatePanel> control

– Define regiones “updateables” de la

página fácilmente

– Server roundtrips asincrónicos
– “Atlas” maneja toda la infraestructura

<asp:UpdatePanel id=“u1” runat=“server”>

<ContentTemplate>

<!– Este contenido es actualizado dinámicamente!

->

<asp:Calendar id=“cal1” runat=“server”/>

<ContentTemplate>

</asp:UpdatePanel>

DEMO

Update Panels

Preguntas

 Brian J. Cardiff
 [email protected]
 weblogs.manas.com.ar/bcardiff
 www.manas.com.ar

 Miguel Saez
 [email protected]
 blogs.msdn.com/masaez/

13