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.

  

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>

  

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

• AdventureWorks Database: http://www.microsoft.com/downloads/details.aspx?FamilyID=E719ECF7-9F46-4312-AF89-6AD8702E4E6E&displaylang=en
• Ejemplo Practico UpdatePanel y UpdateProgress. http://msmvps.com/files/folders/164607/download.aspx

Suerte!!