1,2,3 ASP.NET AJAX (1)

Esta serie de posts se daran a manera de Hands On Lab sobre el framework AJAX de Microsoft. Exploraremos las bondades del lado del servidor y tambien del lado del cliente de ASP.NET AJAX. Utilizaremos una pequeña base de datos CarPictures que estoy empleando en otros ejemplos. Al final del post se podra descargar el codigo completo.

Usando capacidades de servidor de ASP.NET AJAX

En este ejercicio crearemos un sitio web en el que se utilizaran los controles de ASP.NET AJAX ScriptManager, UpdatePanel, Timer y UpdateProgress.

Tarea 1 – Creacion del formulario y uso de UpdatePanel

Para completar esta tarea realizaremos lo siguiente:

1. Abra Microsoft Visual Studio 2008 desde Inicio | Todos los Programas | Microsoft Visual Studio 2008 | Microsoft Visual Studio.
2. Crearemos el sitio web AjaxWebSite.
   

   
   

    

3. Agregaremos una AJAX WebForm Default.aspx.
   

    

   
   

    

4. Agregaremos tambien a nuestro sitio web LINQ To SQL CarPictures.dbml

   

   

    

5. Empezaremos por la edicion de Default.aspx utilizando los controles del grupo AJAX Extensions

   

    

6. Ahora agregaremos un UpdatePanel (id=”upPanel”)
   y agregaremos dentro de este un DropDownList (id=ddlCountries,AutoPostBack=”true”) y un DataList (id=lstManufacturers,
   BorderStyle=“Solid” BorderWidth=“1px” BorderColor=“#006699″ GridLines=“Horizontal”)
7. Ahora agregaremos un dos controles control LinqDataSource. El primero seleccionaremos datos de la tabla Country, los campos Name y ID (id=srcCountries, ContextTypeName=”CarPicturesDataContext” Select=”new (ID, Name)” TableName=“Countries”). Del segundo seleccionaremos datos de la tabla Manufacturers, los campos Name y URL, teniendo como fuente de where expression el control ddlCountries (ID=srcManufacturers ContextTypeName=”CarPicturesDataContext” Select=”new (Name, URL)” TableName=”Manufacturers” Where=”CountryID == @CountryID“)

    

   

    

8. Estableceremos la fuente de datos de ddlCountries
   (DataSourceID=”srcCountries” DataTextField=”Name” DataValueField=”ID“)
   
9. Editaremos el ItemTemplate de lstManufacturers
   agregando los controles Literal (id=ltlName,Text=“<%# Eval(“Name”)%>”) y Hyperlink (id=lnkURL, Text=”Ir a sitio web” NavigateUrl=”<%# Eval(“URL”)%>”) de manera opcional tambien podemos editar el HeaderTemplate.
   
10. El diseño de pagina debe quedar de la siguiente manera:
    

    

     

11. Probaremos nuestro sitio web
    

1. Notese que al momento de seleccionar algun pai­s, la pagina no realiza postbacks.

Tarea 2 – Uso de UpdateProgress

1. Se agregara ahora un control UpdateProgress(id= upProgress) encima del control lstManufacturers, en su propiedad AsociatedUpdatePanelID estableceremos el ID del UpdatePanel creado anteriormente upPanel.
2. Editaremos el control upProgress agregando en el un control Image (id=imgLoading, ImageUrl=”~/loading.gif“) y un texto “en progreso…”.
3. Probaremos nuevamente nuestra pagina:

    

   

    

4. Notese que esta vez en cada round-trip se muestra el contenido del control UpdateProgress insertado.

Tarea 3 – Uso de Timer

1. Ahora fuera del UpdatePanel creado, agregaremos otro UpdatePanel(id=upTime) al cual le agraremos un control Literal (id=ltlSeconds, Text=”0“) y un texto previo “usted esta en esta pagina” y posterior “segundos”.
2. Agregaremos el control Timer (id=tmrSeconds, Interval=”1000“) fuera del UpdatePanel creado, estableciendo su evento OnTick :

   protected void tmrSeconds_Tick(object sender, EventArgs e)
   

   {
   

   ltlSeconds.Text = (int.Parse(ltlSeconds.Text) + 1).ToString();
   

   }
   

3. Ahora en la vista de codigo, agregaremos la seccion Triggers en el UpdatePanel upTime
   agregando un AsyncPostBackTrigger estableciendo las propiedades de la siguiente manera:

   <Triggers>
   

   <asp:AsyncPostBackTrigger ControlID=”tmrTime” EventName=”Tick” />
   

   </Triggers>
   

4. Probaremos nuestra pagina
5. Notese que la pagina actualiza el mensaje de segundos, sin embargo no permite hacer una “comoda” seleccion del pai­s. Pasaremos a corregir esto en un paso.
6. En el UpdatePanel upPanel cambiaremos la propiedad UpdateMode=”Conditional” y procederemos nuevamente a probar la pagina:

    

   

Analisis del Ejercicio

1. Hemos utilizado las capacidades de servidor de ASP.NET AJAX, los controles UpdateProgress, Timer y UpdatePanel. En la practica el ASP.NET AJAX server framework consiste en este ultimo control.
2. Es necesario para utilizar las capacidades de ASP.NET AJAX la presencia del control ScriptManager
3. UpdatePanel participa en el tiempo de ejecucion tanto del lado del servidor como del cliente. Captura los postbacks y realiza un Ajax-Postback/Asynchronous-PostBack.
4. Por defecto UpdatePanel captura los Postbacks producidos en la pagina, sin embargo podemos hacer que actualice contenidos desde un control localizado fuera del contenido especificando un trigger.(para el ejemplo del Timer). El trigger AsyncPostBackTrigger causa un AjaxPostBack, el PostBackTrigger causa un postback normal a la pagina.
5. Si no asociamos un Timer a un UpdatePanel, realizara PostBacks
6. UpdateProgress muestra un mensaje de progreso de descarga de nuevo contenido de la accion asi­ncrona

   Nota: Es de recomendacion utilizar una imagen animada en el UpdateProgress

Bueno, este es el primer post de 1,2,3 ASP.NET AJAX, espero les haya sido de mucha utilidad ^^. Si hubiera comentarios aportadores o preguntas no duden en escribir.

El codigo lo pueden descargar de aqui­ :

AjaxWebSite.rar

Posteado desde Microsoft Word 2007
J

Post.End(“Se vienen mas novedades en cidesoft.com.pe, si­guenos“);