Exibir detalhes e itens de dados

  • Artigo

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:

  1. Lendo um valor
  2. Verificando se é nulo
  3. Convertendo-o em um tipo apropriado
  4. Verificando o êxito da conversão
  5. 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 .

  1. Em Gerenciador de Soluções, abra ProductList.aspx.

  2. 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>&nbsp;</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:

Exibir detalhes e itens de dados – IntelliSense

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.

  1. Em Gerenciador de Soluções, clique com o botão direito do mouse em ProductList.aspx e selecione Exibir Código.

  2. 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.

  1. Pressione F5 enquanto estiver no Visual Studio para executar o aplicativo.
    O navegador é aberto e mostra a página Default.aspx .

  2. 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.

    Exibir Detalhes e Itens de Dados – Carros

  3. 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.

    Captura de tela da página ProductList.aspx mostrando toda a lista de produtos.

  4. 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.

  1. Em Gerenciador de Soluções, abra ProductDetails.aspx.

  2. 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>&nbsp;</td>  
                    <td style="vertical-align: top; text-align:left;">
                        <b>Description:</b><br /><%#:Item.Description %>
                        <br />
                        <span><b>Price:</b>&nbsp;<%#: String.Format("{0:c}", Item.UnitPrice) %></span>
                        <br />
                        <span><b>Product Number:</b>&nbsp;<%#: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.

  1. 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.

  2. 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.

  1. Pressione F5 enquanto estiver no Visual Studio para executar o aplicativo.
    O navegador é aberto e mostra a página Default.aspx .

  2. Selecione Barcos no menu de navegação de categoria.
    A página ProductList.aspx é exibida.

  3. Selecione Barco de Papel na lista de produtos. A página ProductDetails.aspx é exibida.

    Captura de tela da página Detalhes do Produto do Barco de Papel.

  4. 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.

AnteriorAvançar