SharePoint Latin Rotating Header Image

Atlas

Conoce el primer beta de AJAX para ASP.NET

Al fin tuve el tiempo de experimentar ASP.NET 2.0 AJAX mundialmente conocido por su nombre de código "Atlas". El nombre oficial de este componente será ASP.NET 2.0 AJAX y ya tenemos la primera versión beta liberada. Altamente recomendable darse un tiempo para conocer los componentes que integran este marco de trabajo para la construcción de aplicaciones web asincrónicas.  


"nunca pensé que un producto de limpieza tan famoso, llegara a influir tanto en mi vida profesional" :)

Microsoft liberó tres componentes en esta primera versión del Beta como lo dice Scott Guthrie en este post.

El ASP.NET AJAX v1.0 "Core" contiene prácticamente el motor principal de todo este marco de trabajo así que para poder construir e implementar aplicación ASP.NET AJAX necesitaras instalar este componente en tu servidor web. Este componente cuenta con ambos marcos de trabajo los que nos sirven del lado del servidor y del lado del cliente, en el primer caso contamos con tipos, clases base y prácticamente todo el modelo de objetos para desarrollo. En el segundo contamos con un conjunto de archivos javascript que prácticamente han sido modificados para un uso más óptimo en el navegador y omitir tanta sobrecarga de este tipo de código. Por fin los componentes de AJAX los tenemos integrados al GAC.

El ASP.NET AJAX "Value-Add" CTP es otro componente interesante que contiene controles y funcionalidad adicional que no alcanzó ser parte del beta pero que sin embargo seguimos esperando. Además, este componente soporta la mayoría de los objetos que utilizábamos en "Atlas" con la finalidad de seguir trabajando por cuestiones de soporte con aplicaciones anteriores. Microsoft público una matriz de características que presenta qué características se encuentran en ASP.NET AJAX "Core" o ASP.NET AJAX CTP, si has venido siguiendo esta tecnología vale la pena que le des una revisada.

El ASP.NET AJAX Control Toolkit son los controles AJAX construidos encima del ASP.NET AJAX "Core", además todas las plantillas de proyecto para las ediciones de Visual Studio 2005, binarios y sitio web de ejemplo están incluidos aquí. Todo lo que necesitas para desarrollar aplicaciones AJAX con ASP.NET 2.0.

Definitivamente estaré modificando el material de la presentación "AJAX y su integración con las plataformas de desarrollo" que tengo que dar precisamente mañana en el Developer Community Day en la ciudad de Mexicali, Baja California México, regístrate aquí.

Ejemplo Practico UpdatePanel y UpdateProgress

Tratando de encontrar un ejemplo práctico que pueda ilustrar mejor lo que escribí hace unos días sobre lo básico de los controles UpdatePanel y UpdateProgress dejo a continuación un proyecto ASP.NET 2.0 que implementa la funcionalidad antes mencionada en el siguiente escenario.

De que se trata

En la base de datos AdventureWorks contamos con la tabla Product la cual contiene información sobre productos y datos adicionales relacionados con el control de inventarios. En este escenario lo que haremos es permitir al usuario actualizar la información de control de inventario para cada producto. En un control GridView mostramos los productos filtrados por una sub categoría y además habilitamos en la vista principal la capacidad de que se capture la información de dos columnas (Nivel Optimo y Punto de Reorden). Una vez que el usuario termine de capturar la información da clic sobre el botón actualizar el cual se encarga de recorrer el listado y hacer la actualizaciones correspondientes.

ejemplopractico01.jpg  

Mediante el uso de Atlas UpdatePanel y UpdateProgress creamos una interface de usuario verdaderamente responsiva para este sencillo proceso logrando que el usuario tenga una mejor experiencia.

Como funciona

Nosotros podemos especificar que eventos de los controles de nuestro formulario web disparan una llamada asincrónica realizada por el control UpdatePanel a través de la sección “<Triggers>”. Como vemos en la siguiente declaración dentro de la sección “<Triggers>” estamos diciendo que cuando el “Button1” dispare el evento “Click” entonces nuestro control UpgradePanel realizara su trabajo. Lo mismo sucede con el evento “SelectIndexChanged” de nuestro control “DropDownList1” causando que nuestro GridView simplemente se refresque sin realizar un PostBack al servidor. [Ver ejemplo 1]. Ahora nuestro control GridView tiene un comportamiento muy sencillo ya que para renglón mostrado en las columnas donde requerimos captura de datos simplemente mostramos un control de tipo TextBox. Eso lo logramos utilizando la funcionalidad de “<ItemTemplate>” de una columna de tipo “<TemplateField>”. Una columna de tipo “<TemplateField>” en cualquier contexto de los controles GridView, DetailsView, etc. Nos permite contener y mostrar cualquier código XHTML. [Ver ejemplo 2].

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<!—ejemplo 1 –>

<Triggers>

<atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />

<atlas:ControlEventTrigger ControlID="Button1" EventName="Click" />

</Triggers>

<ContentTemplate>

<asp:GridView

ID="GridView1"

runat="server"

AutoGenerateColumns="False"

DataKeyNames="ProductID"

DataSourceID="productsDataSource"

Width="601px"

GridLines="None"

BorderStyle="None"

CaptionAlign="Right" BorderWidth="3px" CellPadding="5">

<Columns>

<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False" ReadOnly="True" SortExpression="ProductID" Visible="False" />

<asp:BoundField DataField="Name" HeaderText="Nombre del Articulo" SortExpression="Name" />

<asp:BoundField DataField="ProductNumber" HeaderText="Codigo" SortExpression="ProductNumber" />

<!—ejemplo 2 –>

<asp:TemplateField HeaderText="Nivel Optimo" SortExpression="SafetyStockLevel">

<ItemTemplate>

<asp:TextBox

ID="safetelyStockLevel"

runat="server"

Text='<%# Bind("SafetyStockLevel", "{0}") %>'

Width="40px"

CssClass="control-textbox">

</asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Punto de Reorden" SortExpression="ReorderPoint">

<ItemTemplate>

<asp:TextBox

ID="reorderLevel"

runat="server"

Text='<%# Bind("ReorderPoint", "{0}") %>'

Width="40px"

CssClass="control-textbox">

</asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

</Columns>

<HeaderStyle CssClass="control-gridview-header" />

<RowStyle CssClass="control-gridview-item" />

<AlternatingRowStyle CssClass="control-gridview-alternate" />

</asp:GridView>

</ContentTemplate>

</atlas:UpdatePanel>

Cuando el usuario da clic sobre el botón “Actualizar” se ejecuta un código que recorre cada elemento del control GridView y manda ejecutar el comportamiento de actualización de nuestro control no visual “SqlDataSource” el cual tiene declarado tres parámetros necesarios para ejecutar la actualización del registro. Si recordamos nuestras declaraciones “<Trigger>” del control UpdatePanel especificamos que precisamente el evento “Click” del control “Button1” disparara la llamada causando que el siguiente código se ejecute asincrónicamente vía XmlHttp.

protected void Button1_Click(object sender, EventArgs e)

{

for (int i = 0; i < GridView1.Rows.Count; i++)

{

GridViewRow row = GridView1.Rows[i];

productsDataSource.UpdateParameters[0].DefaultValue = ((TextBox)row.Cells[0].FindControl("safetelyStockLevel")).Text;

productsDataSource.UpdateParameters[1].DefaultValue = ((TextBox)row.Cells[0].FindControl("reorderLevel")).Text;

productsDataSource.UpdateParameters[2].DefaultValue = GridView1.DataKeys[i].Value.ToString();

productsDataSource.Update();

}

}

<asp:SqlDataSource

ID="productsDataSource"

runat="server"

ConnectionString="<%$ ConnectionStrings:AdventureWorksCnn %>"

SelectCommand="SELECT ProductID, Name, ProductNumber, SafetyStockLevel, ReorderPoint FROM Production.Product WHERE (ProductSubcategoryID = @subcategory)"

UpdateCommand="UPDATE Production.Product SET SafetyStockLevel = @safety, ReorderPoint = @reorder WHERE (ProductID = @productID)">

<UpdateParameters>

<asp:Parameter Name="safety" />

<asp:Parameter Name="reorder" />

<asp:Parameter Name="productID" />

</UpdateParameters>

<SelectParameters>

<asp:ControlParameter ControlID="DropDownList1" Name="subcategory" PropertyName="SelectedValue" />

</SelectParameters>

</asp:SqlDataSource>

ejemplopractico02.jpg  

Esperando te sea útil este pequeño ejemplo te dejo proyecto y el código fuente para que lo descargues. Asegúrate de contar con una instancia local de SQL Server 2005 o Express Edition que contenga la base de datos AdventureWorks.

Descargas

Suerte!!

Bases del control UpdatePanel de Atlas

Cuando una página ASP.NET ejecuta una llamada al servidor (postback) sucede una pequeña pausa seguida de un refrescado de toda la pagina sobre el navegador dibujando el nuevo contenido que es regresado en la petición. Durante esta pausa, el usuario definitivamente no puede interactuar con la aplicación y en ocasiones cuando la aplicación tiene que acceder a recursos del lado de servidor o la conexión está muy lenta resulta incomodo y tardío el cargar la información haciendo que la experiencia de usuario no sea del todo interactiva.

Una de las maneras que AJAX (Asynchronous JavaScript and XML) se diferencia de las aplicaciones web clásicas es el cómo se comunica con el servidor. AJAX utiliza código del lado del cliente (Client Script) para actualizar porciones de una página en vez de tener que hacer todo un postback. Esta técnica ofrece fluidez, responsividad y mejora la experiencia del usuario.

En el mundo de ASP.NET 2.0 contamos con Atlas, la implementación de AJAX sobre Visual Studio 2005 ofreciéndonos una serie de conceptos y controles que entienden y manejan el mismo principio de AJAX. Por supuesto que Microsoft siempre buscando mejorar la productividad de los programadores nos ofrece una serie de controles de servidor que con solamente configúralos podemos integrar en nuestras aplicaciones comportamientos y conceptos AJAX.

El control “UpdatePanel” de Atlas simplifica dramáticamente el uso del concepto AJAX en nuestras aplicaciones ASP.NET 2.0 abstrayendo la interacción entre el navegador y el servidor, restringiendo actualizaciones y refrescados de porciones particulares de nuestra página.

Asumiendo que cuentas con Atlas instalado vamos a crear una nueva aplicación de tipo “Atlas” Web Site que tenga un control SqlDataSource configurado para seleccionar registros de una tabla de cualquier base de datos y asegúrate de vincular en un control GridView el SqlDataSource para que muestre la información.

Para poder tener un comportamiento AJAX para cada evento de nuestro control GridView, lo primero que debemos integrar a nuestra página es una declaración que siempre debemos declarar. Siempre que utilicemos controles atlas en nuestras páginas tendremos que hacer la siguiente declaración.

<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />

Una recomendación es que si utilices paginas maestros convendría hacer esta declaración allá.

Con solamente rodear a nuestra declaración del control GridView con el control UpdatePanel de Atlas tendremos un comportamiento AJAX para cada evento de nuestro GridView.

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:GridView

ID="GridView1"

runat="server"

AllowPaging="True"

AllowSorting="True"

DataKeyNames="IDCountry"

DataSourceID="SqlDataSource1">

</asp:GridView>

</ContentTemplate>

</atlas:UpdatePanel>

Tan solo cinco líneas de código nos ha costado habilitar un comportamiento AJAX para los eventos de un GridView.

Bases del control UpdateProgress de Atlas

Cuando utilizamos atlas para habilitar un comportamiento AJAX con la finalidad de mejorar la experiencia de usuario, la comunicación con el servidor se hace a través de XmlHttp el cual no infiere con el navegador en absoluto para mostrar alguna notificación o icono que notifique el comportamiento de la pagina. El uso de notificaciones que describan lo que esta sucediendo cuando existe algún tipo de tardanza a la hora de que Atlas este estableciendo una comunicación con el servidor para cargar datos y actualizar una porción de la pagina es un aspecto que también debemos de cuidar para que cuando el servidor tarde en responder y no lo haga instantáneamente el usuario final no piense que su acción no se efectuo.

El control “UpgradeProgress” de Atlas ofrece la posibilidad de mostrar una especie de indicador de progreso en nuestras páginas ASP.NET 2.0. Este control no está visible en la pagina cuando es cargada por primera vez en el navegador, pero para cuando se haga cualquier invocación asincrónica muestra automáticamente su contenido hasta que se reciba una respuesta del servidor o se cancele la petición.

Entonces, continuando con el mismo código del post sobre UpdatePanel que utilizamos anteriormente, veamos como configurar un control UpgradeProgress para nuestro UpdatePanel.

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:GridView

ID="GridView1"

runat="server"

AllowPaging="True"

AllowSorting="True"

DataSourceID="SqlDataSource1">

</asp:GridView>

<atlas:UpdateProgress ID="UpdateProgress1" runat="server">

<ProgressTemplate>

<b>Cargando datos…</b>

</ProgressTemplate>

</atlas:UpdateProgress>

</ContentTemplate>

</atlas:UpdatePanel>

Con esta declaración tendremos un comportamiento interesante. Cuando en nuestro control GridView seleccionemos el ordenado de una columna en particular dando clic sobre el link de la columna, en ese momento se dispara una operación asincrónica al servidor para cargar los datos ordenados y justamente mientras eso sucede se presenta justo debajo de nuestro GridView una leyenda que dice “Cargando datos…”. Cabe mencionar que dentro de nuestra sección “<ProgressTemplate>” podemos escribir cualquier tipo de código HTML que muestra una mejor interface, iconos o imágenes.

updateprogress01.jpg 

Atlas Control Toolkit

Ultimamente he estado tan ocupado metido en operacion que no me he dado el tiempo de escribir. En definitiva las consecuencias son positivas y negativas. Negativas porque dejo de mantener mi weblog radiante y al dia sin embargo positivas porque con la chamba dia a dia te encuentras siempre con escenarios que incrementar tu experiencia y por consecuencia terminas compartiendo en el blog. Tal es el caso, estoy escribiendo una aplicacion Web ASP.NET que soporta el uso de Atlas y todo va muy bien, hace unas semanas tuve que escribir la funcionalidad de seleccionar paises, estados y municipios, claro que con atlas esto se ve y se siente muy cool ya que no tenemos que hacer un postback para seleccionar cada elemento de nuestro control. Me lo avente sin problemas, sin embargo Microsoft ya publico una serie de controles atlas  llamada Atlas Control Toolkit muy interesantes para habilitar facilmente funcionalidad como la antes descrita y que ademas ofrece nuevas capacidades.


Disfrutalos!!!