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!!

7 thoughts on “Ejemplo Practico UpdatePanel y UpdateProgress

  1. Hola, estoy haciendo algo parecido pero me encuentro con un problema que no soy capaz de resolver y por eso te pido ayuda. Tengo una pequeña utilidad publicada en:
    http://82.158.36.197/Toptencopia1/topten.aspx y replicada
    http://82.158.36.197/Toptencopia2/topten.aspx
    La única diferencia entre ambas es el :
    ************************para la copia1*****************

    aunque el primero funciona bien pues filtra los registros, no ordena al hacer click en las columnas.
    en cambio el segundo no filtra obteniendo todos los resultados, pero si que ordena las columnas. ¿Donde puede estar el error?
    Gracias y un saludo

  2. Buen dia, estoy haciendo algo parecido, tengo el gridview con 1 o mas textbox activos para captura que depende de las denominaciones que tiene una moneda (ejemplo un textbox para $1, $2, $5 … etc pesos) pero cuando capturo por ejemplo en el de $1 me debe actualizar una columna con el importe de esa moneda por la cantidad que capturo y pasarme el foco a la moneda de $2 pesos esto del foco como lo puedo hacer ya que el calculo lo hago en el textchanged del text box en c# y se pierde, espero me puedas ayudar.

Leave a Reply to Carlos Cancel reply

Your email address will not be published. Required fields are marked *