Visualización de elementos de datos y detalles
Por Erik Reitan
En esta serie de tutoriales se le enseñarán los conceptos básicos de la creación de una aplicación ASP.NET Web Forms con ASP.NET 4.7 y Microsoft Visual Studio 2017.
En este tutorial, aprenderá a mostrar los elementos de datos y los detalles de los elementos de datos con ASP.NET Web Forms y Entity Framework Code First. Este tutorial se basa en el tutorial anterior de "Interfaz de usuario y navegación" como parte de la serie de tutoriales de Wingtip Toy Store. Después de completar este tutorial, verá los productos en la página ProductsList.aspx y los detalles de un producto en la página ProductDetails.aspx.
Aprenderá a:
- Añadir un control de datos para mostrar productos de la base de datos
- Conectar un control de datos a los datos seleccionados
- Añadir un control de datos para mostrar detalles de productos de la base de datos
- Recuperar un valor de la cadena de consulta y usar ese valor para limitar los datos recuperados de la base de datos
Características introducidas en este tutorial:
- Enlace de modelos
- Proveedores de valores
Adición de un control de datos
Puede usar algunas opciones diferentes para enlazar datos a un control de servidor. Los más comunes incluyen:
- Agregar un control de origen de datos
- Añadir código a mano
- Usar el enlace de modelos
Uso de un control de origen de datos para enlazar datos
Agregar un control de origen de datos permite vincular el control de origen de datos al control que muestra los datos. Con este enfoque, puede conectar mediante programación controles del lado del servidor a orígenes de datos en lugar de mediante declaración.
Codificación a mano para enlazar datos
La codificación a mano implica:
- Lectura de un valor
- Comprobación de si es null
- Convertirlo en un tipo adecuado
- Comprobación del éxito de la conversión
- Uso del valor en la consulta
Este enfoque le permite tener control total sobre la lógica de acceso a datos.
Uso del enlace de modelos para enlazar datos
El enlace de modelos le permite enlazar resultados con mucho menos código y le ofrece la posibilidad de reutilizar la funcionalidad en toda la aplicación. Simplifica el trabajo con lógica de acceso a datos centrada en código, a la vez que proporciona un marco de enlace de datos enriquecido.
Visualización de productos
En este tutorial, usará el enlace de modelos para enlazar datos. Para configurar que un control de datos use el enlace de modelos para seleccionar datos, establezca la propiedad SelectMethod del control en el nombre de un método en el código de la página. El control de datos llama al método en el momento adecuado del ciclo de vida de la página y automáticamente enlaza los datos devueltos. No es necesario llamar explícitamente al método DataBind.
En el Explorador de soluciones, abra ProductList.aspx.
Reemplace el marcado existente por el marcado siguiente:
<%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <section> <div> <hgroup> <h2><%: Page.Title %></h2> </hgroup> <asp:ListView ID="productList" runat="server" DataKeyNames="ProductID" GroupItemCount="4" ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts"> <EmptyDataTemplate> <table > <tr> <td>No data was returned.</td> </tr> </table> </EmptyDataTemplate> <EmptyItemTemplate> <td/> </EmptyItemTemplate> <GroupTemplate> <tr id="itemPlaceholderContainer" runat="server"> <td id="itemPlaceholder" runat="server"></td> </tr> </GroupTemplate> <ItemTemplate> <td runat="server"> <table> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>" width="100" height="75" style="border: solid" /></a> </td> </tr> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <span> <%#:Item.ProductName%> </span> </a> <br /> <span> <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%> </span> <br /> </td> </tr> <tr> <td> </td> </tr> </table> </p> </td> </ItemTemplate> <LayoutTemplate> <table style="width:100%;"> <tbody> <tr> <td> <table id="groupPlaceholderContainer" runat="server" style="width:100%"> <tr id="groupPlaceholder"></tr> </table> </td> </tr> <tr> <td></td> </tr> <tr></tr> </tbody> </table> </LayoutTemplate> </asp:ListView> </div> </section> </asp:Content>
Este código usa un control ListView denominado productList para mostrar productos.
<asp:ListView ID="productList" runat="server"
Con plantillas y estilos, se define cómo muestra los datos el control ListView. Resulta útil para los datos en cualquier estructura de repetición. Aunque este ejemplo de ListView simplemente muestra datos de base de datos, también puede, sin código, permitir a los usuarios editar, insertar y eliminar datos, y ordenar y paginar datos.
Al establecer la propiedad ItemType en el control ListView, la expresión de enlace de datos Item está disponible y el control se vuelve fuertemente tipado. Como se mencionó en el tutorial anterior, puede seleccionar Detalles del objeto Item con IntelliSense, como especificar ProductName:
También usa el enlace de modelos para especificar un valor SelectMethod. Este valor (GetProducts) corresponde al método que agregará al código subyacente para mostrar los productos en el paso siguiente.
Adición de código para mostrar productos
En este paso, agregará código para rellenar el control ListView con datos de productos de la base de datos. El código admite la visualización de todos los productos y productos de categorías individuales.
En el Explorador de soluciones, haga clic con el botón derecho en ProductList.aspx y seleccione Ver código.
Reemplace el código existente en el archivo ProductList.aspx.cs por el siguiente:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using WingtipToys.Models; using System.Web.ModelBinding; namespace WingtipToys { public partial class ProductList : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public IQueryable<Product> GetProducts([QueryString("id")] int? categoryId) { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Product> query = _db.Products; if (categoryId.HasValue && categoryId > 0) { query = query.Where(p => p.CategoryID == categoryId); } return query; } } }
Este código muestra el método GetProducts al que hace referencia la propiedad del control ListView (propiedad ItemType) en la página ProductList.aspx. Para limitar los resultados a una categoría de base de datos específica, el código establece el valor categoryId del valor de la cadena de consulta que se pasa a la página ProductList.aspx cuando se navega a la página ProductList.aspx. La clase QueryStringAttribute del espacio de nombres System.Web.ModelBinding se usa para recuperar el valor de la variable de cadena de consulta id. Esto indica al enlace de modelos que intente enlazar un valor de la cadena de consulta al parámetro categoryId en el tiempo de ejecución.
Cuando se pasa una categoría válida como una cadena de consulta a la página, los resultados de la consulta se limitan a esos productos de la base de datos que coinciden con el valor categoryId. Por ejemplo, si la dirección URL de la página ProductsList.aspx es la siguiente:
http://localhost/ProductList.aspx?id=1
La página muestra solo los productos en los que categoryId es igual a 1.
Todos los productos se muestran si no se incluye ninguna cadena de consulta cuando se llama a la página ProductList.aspx.
Los orígenes de los valores de estos métodos se conocen como proveedores de valores (por ejemplo, QueryString) y los atributos de parámetro que indican qué proveedor de valores usar se conocen como atributos de proveedor de valores (por ejemplo, id). ASP.NET incluye proveedores de valores y atributos correspondientes de todos los orígenes típicos de entrada de usuario en una aplicación de Web Forms, como la cadena de consulta, cookies, valores de formulario, controles, estado de vista, estado de sesión y propiedades de perfil. También puede escribir proveedores de valores personalizados.
Ejecución de la aplicación
Ejecute la aplicación ahora para ver todos los productos o los productos de una categoría.
Presione F5 mientras está en Visual Studio para ejecutar la aplicación.
El explorador se abre y muestra la página Default.aspx.Seleccione Cars (Coches) en el menú de navegación de categorías de productos.
La página ProductList.aspx muestra solo los productos de la categoría Cars (Coches). Más adelante en este tutorial, mostrará los detalles del producto.
Seleccione Products (Productos) en el menú de navegación de la parte superior.
De nuevo, se muestra la página ProductList.aspx, pero esta vez muestra toda la lista de productos.
Cierre el explorador y vuelva a Visual Studio.
Adición de un control de datos para mostrar los detalles del producto
A continuación, modificará el marcado en la página ProductDetails.aspx que agregó en el tutorial anterior para mostrar información específica del producto.
En el Explorador de soluciones, abra ProductDetails.aspx.
Reemplace el marcado existente por el marcado siguiente:
<%@ Page Title="Product Details" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs" Inherits="WingtipToys.ProductDetails" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <asp:FormView ID="productDetail" runat="server" ItemType="WingtipToys.Models.Product" SelectMethod ="GetProduct" RenderOuterTable="false"> <ItemTemplate> <div> <h1><%#:Item.ProductName %></h1> </div> <br /> <table> <tr> <td> <img src="/Catalog/Images/<%#:Item.ImagePath %>" style="border:solid; height:300px" alt="<%#:Item.ProductName %>"/> </td> <td> </td> <td style="vertical-align: top; text-align:left;"> <b>Description:</b><br /><%#:Item.Description %> <br /> <span><b>Price:</b> <%#: String.Format("{0:c}", Item.UnitPrice) %></span> <br /> <span><b>Product Number:</b> <%#:Item.ProductID %></span> <br /> </td> </tr> </table> </ItemTemplate> </asp:FormView> </asp:Content>Este código usa un control FormView para mostrar detalles específicos del producto. Este marcado usa métodos como los métodos usados para mostrar datos en la página ProductList.aspx. El control FormView se usa para mostrar un único registro de un origen de datos. Al usar el control FormView, se crean plantillas para mostrar y editar valores enlazados a datos. Estas plantillas contienen controles, expresiones de enlace y formato que definen la apariencia y la funcionalidad del formulario.
Conectar el marcado anterior a la base de datos requiere código adicional.
En el Explorador de soluciones, haga clic con el botón derecho en ProductDetails.aspx y, después, haga clic en Ver código.
Se muestra el archivo ProductDetails.aspx.cs.Reemplace el código existente por el siguiente:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using WingtipToys.Models; using System.Web.ModelBinding; namespace WingtipToys { public partial class ProductDetails : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public IQueryable<Product> GetProduct([QueryString("productID")] int? productId) { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Product> query = _db.Products; if (productId.HasValue && productId > 0) { query = query.Where(p => p.ProductID == productId); } else { query = null; } return query; } } }
Este código comprueba si hay un valor de cadena de consulta "productID". Si se encuentra un valor de cadena de consulta válido, se muestra el producto coincidente. Si no se encuentra la cadena de consulta o su valor no es válido, no se muestra ningún producto.
Ejecución de la aplicación
Ahora puede ejecutar la aplicación para ver un producto individual mostrado en función del identificador de producto.
Presione F5 mientras está en Visual Studio para ejecutar la aplicación.
El explorador se abre y muestra la página Default.aspx.Seleccione Boats (Barcos) en el menú de navegación de categorías.
Se muestra la página ProductList.aspx.Seleccione Paper Boat (Barco de papel) en la lista de productos. Se muestra la página ProductDetails.aspx.
Cierre el explorador.
Recursos adicionales
Recuperación y visualización de datos con formularios web y enlace de modelos
Pasos siguientes
En este tutorial, ha agregado marcado y código para mostrar los productos y los detalles del producto. Ha aprendido sobre los controles de datos fuertemente tipados, el enlace de modelos y los proveedores de valores. En el siguiente tutorial, agregará un carro de la compra a la aplicación de ejemplo Wingtip Toys.