Exibir detalhes e itens de dados
por Erik Reitan
Esta série de tutoriais ensina os conceitos básicos da criação de um aplicativo ASP.NET Web Forms com o ASP.NET 4.7 e o Microsoft Visual Studio 2017.
Neste tutorial, você aprenderá a exibir itens de dados e detalhes do item de dados com o ASP.NET Web Forms e o Entity Framework Code First. Este tutorial se baseia no tutorial "Interface do usuário e navegação" anterior como parte da série de tutoriais do Wingtip Toy Store. Depois de concluir este tutorial, você verá produtos na página ProductsList.aspx e os detalhes de um produto na página ProductDetails.aspx .
Você aprenderá a:
- Adicionar um controle de dados para exibir produtos do banco de dados
- Conectar um controle de dados aos dados selecionados
- Adicionar um controle de dados para exibir detalhes do produto do banco de dados
- Recuperar um valor da cadeia de caracteres de consulta e usar esse valor para limitar os dados recuperados do banco de dados
Recursos introduzidos neste tutorial:
- Model binding
- Provedores de valor
Adicionar um controle de dados
Você pode usar algumas opções diferentes para associar dados a um controle de servidor. Os mais comuns incluem:
- Adicionando um controle de fonte de dados
- Adicionando código manualmente
- Usando a associação de modelo
Usar um controle de fonte de dados para associar dados
Adicionar um controle de fonte de dados permite vincular o controle da fonte de dados ao controle que exibe os dados. Com essa abordagem, você pode conectar de forma declarativa, em vez de programaticamente, controles do lado do servidor a fontes de dados.
Codificar manualmente para associar dados
A codificação manual envolve:
- Lendo um valor
- Verificando se é nulo
- Convertendo-o em um tipo apropriado
- Verificando o êxito da conversão
- Usando o valor na consulta
Essa abordagem permite que você tenha controle total sobre sua lógica de acesso a dados.
Usar model binding para associar dados
A model binding permite associar resultados com muito menos código e oferece a capacidade de reutilizar a funcionalidade em todo o aplicativo. Ele simplifica o trabalho com a lógica de acesso a dados focada em código, ao mesmo tempo em que fornece uma estrutura avançada de associação de dados.
Exibir produtos
Neste tutorial, você usará a model binding para associar dados. Para configurar um controle de dados para usar a model binding para selecionar dados, defina a propriedade do SelectMethod controle como um nome de método no código da página. O controle de dados chama o método no momento apropriado no ciclo de vida da página e associa automaticamente os dados retornados. Não é necessário chamar explicitamente o DataBind método .
Em Gerenciador de Soluções, abra ProductList.aspx.
Substitua a marcação existente por esta marcação:
<%@ 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>
Esse código usa um controle ListView chamado productList para exibir produtos.
<asp:ListView ID="productList" runat="server"
Com modelos e estilos, você define como o controle ListView exibe dados. É útil para dados em qualquer estrutura de repetição. Embora este exemplo listView simplesmente exiba dados de banco de dados, você também pode, sem código, permitir que os usuários editem, insiram e excluam dados e classifiquem e paginem dados.
Ao definir a ItemType propriedade no controle ListView , a expressão de associação Item de dados está disponível e o controle se torna fortemente tipado. Conforme mencionado no tutorial anterior, você pode selecionar Detalhes do objeto Item com o IntelliSense, como especificar o ProductName:
Você também está usando a associação de modelo para especificar um SelectMethod valor. Esse valor (GetProducts) corresponde ao método que você adicionará ao code-behind para exibir produtos na próxima etapa.
Adicionar código para exibir produtos
Nesta etapa, você adicionará código para preencher o controle ListView com os dados do produto do banco de dados. O código dá suporte à exibição de todos os produtos e produtos de categoria individuais.
Em Gerenciador de Soluções, clique com o botão direito do mouse em ProductList.aspx e selecione Exibir Código.
Substitua o código existente no arquivo ProductList.aspx.cs por este:
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; } } }
Esse código mostra o GetProducts método que a propriedade do ItemType controle ListView faz referência na página ProductList.aspx. Para limitar os resultados a uma categoria de banco de dados específica, o código define o categoryId valor do valor da cadeia de caracteres de consulta passado para a página ProductList.aspx quando a página ProductList.aspx é navegada. A QueryStringAttribute classe no System.Web.ModelBinding namespace é usada para recuperar o valor da variável de cadeia de caracteres de consulta id. Isso instrui a model binding a tentar associar um valor da cadeia de caracteres de consulta ao categoryId parâmetro em tempo de execução.
Quando uma categoria válida é passada como uma cadeia de caracteres de consulta para a página, os resultados da consulta são limitados aos produtos no banco de dados que correspondem ao categoryId valor. Por exemplo, se a URL da página ProductsList.aspx for a seguinte:
http://localhost/ProductList.aspx?id=1
A página exibe apenas os produtos em que o é 1igual a categoryId .
Todos os produtos serão exibidos se nenhuma cadeia de caracteres de consulta for incluída quando a página ProductList.aspx for chamada.
As fontes de valores para esses métodos são conhecidas como provedores de valor (como QueryString) e os atributos de parâmetro que indicam qual provedor de valor usar são chamados de atributos de provedor de valor (como ).id ASP.NET inclui provedores de valor e atributos correspondentes para todas as fontes típicas de entrada do usuário em um aplicativo Web Forms, como a cadeia de caracteres de consulta, cookies, valores de formulário, controles, estado de exibição, estado de sessão e propriedades de perfil. Você também pode escrever provedores de valor personalizados.
Executar o aplicativo
Execute o aplicativo agora para exibir todos os produtos ou produtos de uma categoria.
Pressione F5 enquanto estiver no Visual Studio para executar o aplicativo.
O navegador é aberto e mostra a página Default.aspx .Selecione Carros no menu de navegação da categoria de produto.
A página ProductList.aspx é exibida mostrando apenas os produtos da categoria Carros . Posteriormente neste tutorial, você exibirá os detalhes do produto.
Selecione Produtos no menu de navegação na parte superior.
Novamente, a página ProductList.aspx é exibida, no entanto, desta vez ela mostra toda a lista de produtos.
Feche o navegador e retorne ao Visual Studio.
Adicionar um controle de dados para exibir detalhes do produto
Em seguida, você modificará a marcação na página ProductDetails.aspx que você adicionou no tutorial anterior para exibir informações específicas do produto.
Em Gerenciador de Soluções, abra ProductDetails.aspx.
Substitua a marcação existente por esta marcação:
<%@ 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>Esse código usa um controle FormView para exibir detalhes específicos do produto. Essa marcação usa métodos como os métodos usados para exibir dados na página ProductList.aspx . O controle FormView é usado para exibir um único registro por vez de uma fonte de dados. Ao usar o controle FormView , você cria modelos para exibir e editar valores associados a dados. Esses modelos contêm controles, expressões de associação e formatação que definem a aparência e a funcionalidade do formulário.
Conectar a marcação anterior ao banco de dados requer código adicional.
Em Gerenciador de Soluções, clique com o botão direito do mouse em ProductDetails.aspx e clique em Exibir Código.
O arquivo ProductDetails.aspx.cs é exibido.Substitua o código existente por este código:
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; } } }
Esse código verifica se há um valor de cadeia de caracteres de consulta "productID". Se um valor de cadeia de caracteres de consulta válido for encontrado, o produto correspondente será exibido. Se a cadeia de caracteres de consulta não for encontrada ou seu valor não for válido, nenhum produto será exibido.
Executar o aplicativo
Agora você pode executar o aplicativo para ver um produto individual exibido com base na ID do produto.
Pressione F5 enquanto estiver no Visual Studio para executar o aplicativo.
O navegador é aberto e mostra a página Default.aspx .Selecione Barcos no menu de navegação de categoria.
A página ProductList.aspx é exibida.Selecione Barco de Papel na lista de produtos. A página ProductDetails.aspx é exibida.
Feche o navegador.
Recursos adicionais
Recuperando e exibindo dados com model binding e web forms
Próximas etapas
Neste tutorial, você adicionou marcação e código para exibir produtos e detalhes do produto. Você aprendeu sobre controles de dados fortemente tipados, associação de modelo e provedores de valor. No próximo tutorial, você adicionará um carrinho de compras ao aplicativo de exemplo Wingtip Toys.