Exibindo dados com o ObjectDataSource (VB)

Este tutorial examina o controle ObjectDataSource Usando esse controle, você pode vincular dados recuperados da BLL criada no tutorial anterior sem ter que escrever uma linha de código!

Introdução

Com nossa arquitetura de aplicativos e layout de página do site completos, estamos prontos para começar a explorar como realizar uma variedade de tarefas comuns relacionadas a dados e relatórios. Nos tutoriais anteriores, vimos como vincular programaticamente dados do DAL e BLL a um controle da Web de dados em uma página ASP.NET. A sintaxe que atribui a propriedade DataSource do controle Web de dados aos dados para exibir, e depois chama o método DataBind() do controle, foi o padrão usado nas aplicações ASP.NET 1.x e pode continuar a ser usado nas suas aplicações 2.0. No entanto, os novos controles de fonte de dados do ASP.NET 2.0 oferecem uma maneira declarativa de trabalhar com dados. Usando esses controles, você pode vincular dados recuperados da BLL criada no tutorial anterior sem ter que escrever uma linha de código!

ASP.NET 2.0 é fornecido com cinco controles de fonte de dados internos SqlDataSource, AccessDataSource, ObjectDataSource, XmlDataSource e SiteMapDataSource , embora você possa criar seus próprios controles de fonte de dados personalizados, se necessário. Como desenvolvemos uma arquitetura para nosso aplicativo tutorial, usaremos o ObjectDataSource em relação às nossas classes BLL.

ASP.NET 2.0 inclui cinco controles de fonte de dados Built-In

Figura 1: ASP.NET 2.0 inclui cinco controles de fonte de dados Built-In

O ObjectDataSource serve como um proxy para trabalhar com algum outro objeto. Para configurar o ObjectDataSource, especificamos este objeto subjacente e como os seus métodos são mapeados para os métodos Select, Insert, Update e Delete do ObjectDataSource. Uma vez que esse objeto subjacente tenha sido especificado e seus métodos mapeados para o ObjectDataSource, podemos vincular o ObjectDataSource a um controle da Web de dados. ASP.NET vem com muitos controles da Web de dados, incluindo GridView, DetailsView, RadioButtonList e DropDownList, entre outros. Durante o ciclo de vida da página, o controlo de dados Web pode precisar de aceder aos dados aos quais está vinculado, o que realizará invocando o método Select do seu ObjectDataSource; se o controlo de dados Web suportar inserção, atualização ou eliminação, poderão ser feitas chamadas para os métodos Insert, Update ou Delete do ObjectDataSource. Essas chamadas são então roteadas pelo ObjectDataSource para os métodos do objeto subjacente apropriado, como ilustra o diagrama a seguir.

Figura 2: O ObjectDataSource serve como um proxy (Clique para visualizar a imagem em tamanho real)

Embora o ObjectDataSource possa ser usado para invocar métodos para inserir, atualizar ou excluir dados, vamos nos concentrar apenas em retornar dados; tutoriais futuros explorarão usando o ObjectDataSource e controles da Web de dados que modificam dados.

Etapa 1: Adicionando e configurando o controle ObjectDataSource

Comece por abrir a página SimpleDisplay.aspx na pasta BasicReporting, mude para o modo Design e arraste um controlo ObjectDataSource da Caixa de Ferramentas para a superfície de design da página. O ObjectDataSource aparece como uma caixa cinza na superfície de design porque não produz nenhuma marcação; ele simplesmente acessa dados invocando um método de um objeto especificado. Os dados retornados por um ObjectDataSource podem ser exibidos por um controle da Web de dados, como GridView, DetailsView, FormView e assim por diante.

Observação

Alternativamente, pode primeiro adicionar o controlo de dados Web à página e, em seguida, na sua etiqueta inteligente, escolher a <Nova fonte de dados> na lista suspensa.

Para especificar o objeto subjacente do ObjectDataSource e como os métodos desse objeto são mapeados para o do ObjectDataSource, clique no link "Configurar Fonte de Dados" na marca inteligente do ObjectDataSource.

Figura 3: Clique na ligação Configurar Fonte de Dados do Smart Tag (Clique para visualizar a imagem em tamanho real)

Isso abre o assistente Configurar Fonte de Dados. Primeiro, devemos especificar o objeto com o qual o ObjectDataSource deve trabalhar. Se a caixa de seleção "Mostrar apenas componentes de dados" estiver marcada, a lista suspensa nesta tela listará apenas os objetos que foram decorados com o DataObject atributo. Atualmente, nossa lista inclui os TableAdapters no DataSet Tipado e as classes BLL que criamos no tutorial anterior. Se você esqueceu de adicionar o DataObject atributo às classes Business Logic Layer, não as verá nesta lista. Nesse caso, desmarque a caixa de seleção (checkbox) "Mostrar somente componentes de dados" para exibir todos os objetos, que devem incluir as classes BLL (juntamente com as outras classes no conjunto de dados tipado, DataTables, DataRows e assim por diante).

Nesta primeira tela, escolha a ProductsBLL classe na lista suspensa e clique em Avançar.

Figura 4: Especifique o objeto a ser usado com o controle ObjectDataSource (Clique para visualizar a imagem em tamanho real)

A próxima tela do assistente solicita que você selecione qual método o ObjectDataSource deve invocar. A lista suspensa lista os métodos que retornam dados no objeto selecionado na tela anterior. Aqui vemos GetProductByProductID, GetProducts, GetProductsByCategoryID, e GetProductsBySupplierID. Selecione o método GetProducts na lista suspensa e clique em Concluir (se adicionaste o DataObjectMethodAttribute aos métodos do ProductBLL como mostrado no tutorial anterior, esta opção será selecionada por padrão).

Figura 5: Escolha o método para retornar dados na guia SELECT (Clique para visualizar a imagem em tamanho real)

Configurar o ObjectDataSource manualmente

O assistente Configurar Fonte de Dados do ObjectDataSource oferece uma maneira rápida de especificar o objeto que ele usa e associar quais métodos do objeto são invocados. No entanto, você pode configurar o ObjectDataSource por meio de suas propriedades, seja através da janela Properties ou diretamente na marcação declarativa. Basta definir a TypeName propriedade para o tipo do objeto subjacente a ser usado e o SelectMethod para o método a ser invocado ao recuperar dados.

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Mesmo se você preferir o assistente Configurar Fonte de Dados, pode haver momentos em que você precise configurar manualmente o ObjectDataSource, pois o assistente lista apenas as classes criadas pelo desenvolvedor. Se você quiser vincular o ObjectDataSource a uma classe no .NET Framework, como a classe Membership, para acessar informações de conta de usuário ou a classe Directory para trabalhar com informações do sistema de arquivos, você precisará definir manualmente as propriedades de ObjectDataSource.

Etapa 2: Adicionando um controle da Web de dados e vinculando-o ao ObjectDataSource

Depois que o ObjectDataSource tiver sido adicionado à página e configurado, estaremos prontos para adicionar controles da Web de dados à página para exibir os dados retornados Select pelo método do ObjectDataSource. Qualquer controle da Web de dados pode ser vinculado a um ObjectDataSource; vamos examinar a exibição dos dados do ObjectDataSource em um GridView, DetailsView e FormView.

Vinculando um GridView ao ObjectDataSource

Adicione um controle GridView da Caixa de Ferramentas à superfície de design de SimpleDisplay.aspx. Na Etiqueta Inteligente do GridView, seleccione o controlo ObjectDataSource adicionado na Etapa 1. Isso criará automaticamente um BoundField no GridView para cada propriedade retornada pelos dados do método ObjectDataSource Select (ou seja, as propriedades definidas pelo Products DataTable).

Figura 6: Um GridView foi adicionado à página e vinculado ao ObjectDataSource (Clique para visualizar a imagem em tamanho real)

Em seguida, poderá personalizar, reorganizar ou remover os BoundFields do GridView clicando na opção Editar Colunas da tag inteligente.

Figura 7: Gerenciar os BoundFields do GridView através da caixa de diálogo Editar colunas (Clique para visualizar a imagem em tamanho real)

Reserve um momento para modificar os BoundFields do GridView, removendo o ProductID, SupplierID, CategoryID, QuantityPerUnit, UnitsInStock, UnitsOnOrdere ReorderLevel BoundFields. Basta selecionar o BoundField na lista no canto inferior esquerdo e clicar no botão excluir (o X vermelho) para removê-los. Em seguida, reorganize os BoundFields para que o CategoryName e SupplierName BoundFields precedem o UnitPrice BoundField selecionando esses BoundFields e clicando na seta para cima. Defina as HeaderText propriedades dos BoundFields restantes como Products, Category, Suppliere Price, respectivamente. Em seguida, formate o Price BoundField como moeda, definindo a propriedade HtmlEncode do BoundField como False e a propriedade DataFormatString para {0:c}. Finalmente, alinhe horizontalmente a Price à direita e a caixa de seleção Discontinued no centro usando a propriedade ItemStyle/HorizontalAlign.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName"
          HeaderText="Category" ReadOnly="True"
          SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued">
            <ItemStyle HorizontalAlign="Center" />
        </asp:CheckBoxField>
    </Columns>
</asp:GridView>

Figura 8: Os BoundFields do GridView foram personalizados (Clique para visualizar a imagem em tamanho real)

Usando temas para uma aparência consistente

Esses tutoriais procuram remover quaisquer configurações de estilo de nível de controlo, utilizando folhas de estilo em cascata definidas num ficheiro externo, sempre que possível. O Styles.css arquivo contém DataWebControlStyle, HeaderStyle, RowStyle, e AlternatingRowStyle classes CSS que devem ser usadas para ditar a aparência dos controles da Web de dados usados nesses tutoriais. Para fazer isso, poderíamos definir a propriedade CssClass do GridView como DataWebControlStyle e ajustar as propriedades HeaderStyle, RowStyle e AlternatingRowStyle de acordo com as propriedades de CssClass.

Se definirmos essas CssClass propriedades no controle da Web, precisaremos nos lembrar de definir explicitamente esses valores de propriedade para cada controle da Web de dados adicionado aos nossos tutoriais. Uma abordagem mais gerenciável é definir as propriedades padrão relacionadas a CSS para os controles GridView, DetailsView e FormView usando um Theme. Um Tema é uma coleção de configurações de propriedade de nível de controle, imagens e classes CSS que podem ser aplicadas a páginas em um site para impor uma aparência comum.

Nosso Tema não incluirá imagens ou arquivos CSS (deixaremos a folha Styles.css de estilo as-is, definida na pasta raiz do aplicativo Web), mas incluirá duas Skins. Um Skin é um arquivo que define as propriedades padrão para um controle da Web. Especificamente, teremos um arquivo Skin para os controles GridView e DetailsView, indicando as propriedades relacionadas ao padrão CssClass.

Comece adicionando um novo arquivo de capa ao seu projeto chamado GridView.skin clicando com o botão direito do mouse no nome do projeto no Gerenciador de Soluções e escolhendo Adicionar Novo Item.

Figura 9: Adicionar um arquivo de capa chamado GridView.skin (Clique para visualizar a imagem em tamanho real)

Os arquivos de capa precisam ser colocados em um tema, que estão localizados na App_Themes pasta. Como ainda não temos essa pasta, o Visual Studio gentilmente se oferecerá para criar uma para nós ao adicionar nossa primeira Skin. Clique em Sim para criar a App_Theme pasta e colocar o novo GridView.skin arquivo lá.

Figura 10: Deixe o Visual Studio criar a pasta (App_Theme imagem em tamanho real)

Isso criará um novo tema na App_Themes pasta chamada GridView com o arquivo GridView.skinSkin.

O tema GridView foi adicionado à pasta App_Theme

Figura 11: O tema GridView foi adicionado à App_Theme pasta

Renomeie o tema do GridView para DataWebControls (clique com o botão direito sobre a pasta GridView na pasta App_Theme e, em seguida, escolha a opção Renomear). Em seguida, insira a seguinte marcação no GridView.skin arquivo:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
</asp:GridView>

Isso define as propriedades padrão relacionadas com as propriedades CssClass para qualquer GridView em qualquer página que utiliza o tema DataWebControls. Vamos adicionar outro Skin para o DetailsView, um controle da Web de dados que usaremos em breve. Adicione uma nova capa ao tema DataWebControls nomeado DetailsView.skin e adicione a seguinte marcação:

<asp:DetailsView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <FieldHeaderStyle CssClass="HeaderStyle" />
</asp:DetailsView>

Com o nosso Tema definido, o último passo é aplicar o Tema à nossa página ASP.NET. Um Tema pode ser aplicado página a página ou para todas as páginas de um site. Vamos usar este tema para todas as páginas do site. Para fazer isso, adicione a seguinte marcação na seção Web.config de <system.web>:

<pages styleSheetTheme="DataWebControls" />

É só isso! A styleSheetTheme configuração indica que as propriedades especificadas no Tema não devem se sobrepor às propriedades especificadas no nível de controlo. Para especificar que as configurações de Tema devem superar as configurações de controle, use o atributo theme no lugar de styleSheetTheme; infelizmente, as configurações de Tema não aparecem na visualização Design do Visual Studio. Consulte ASP.NET Visão Geral de Temas e Skins e Server-Side Estilos Usando Temas para obter mais informações sobre Temas e Skins; consulte Como: Aplicar ASP.NET temas para obter mais informações sobre como configurar uma página para usar um tema.

Figura 12: O GridView exibe o nome, a categoria, o fornecedor, o preço e as informações descontinuadas do produto (Clique para visualizar a imagem em tamanho real)

Exibindo um registro de cada vez no DetailsView

O GridView exibe uma linha para cada registro retornado pelo controle da fonte de dados ao qual está vinculado. Há momentos, no entanto, em que podemos querer exibir um único registro ou apenas um registro de cada vez. O controle DetailsView oferece essa funcionalidade, renderizando como um HTML <table> com duas colunas e uma linha para cada coluna ou propriedade vinculada ao controle. Você pode pensar no DetailsView como um GridView com um único registro girado 90 graus.

Comece adicionando um controle DetailsView acima do GridView em SimpleDisplay.aspx. Em seguida, associe-o ao mesmo controle ObjectDataSource que o GridView. Como com o GridView, um BoundField será adicionado ao DetailsView para cada propriedade no objeto retornado pelo método do ObjectDataSource Select . A única diferença é que os BoundFields do DetailsView são dispostos horizontalmente em vez de verticalmente.

Figura 13: Adicionar um DetailsView à página e vinculá-lo ao ObjectDataSource (Clique para visualizar a imagem em tamanho real)

Como o GridView, os BoundFields do DetailsView podem ser ajustados para fornecer uma exibição mais personalizada dos dados retornados pelo ObjectDataSource. A Figura 14 mostra o DetailsView depois que seus BoundFields e CssClass propriedades foram configurados para tornar sua aparência semelhante ao exemplo GridView.

Figura 14: O DetailsView mostra um único registro (Clique para visualizar a imagem em tamanho real)

Observe que o DetailsView exibe apenas o primeiro registro retornado por sua fonte de dados. Para permitir que o usuário percorra todos os registros, um de cada vez, devemos habilitar a paginação para o DetailsView. Para fazer isso, retorne ao Visual Studio e marque a caixa de seleção Ativar Paginação na tag inteligente do DetailsView.

Figura 15: Habilitar a paginação no controle DetailsView (Clique para visualizar a imagem em tamanho real)

Figura 16: Com a paginação ativada, o DetailsView permite que o usuário visualize qualquer um dos produtos (Clique para visualizar a imagem em tamanho real)

Falaremos mais sobre paginação em tutoriais futuros.

Um layout mais flexível para mostrar um registro de cada vez

O DetailsView é bastante rígido em como ele exibe cada registro retornado do ObjectDataSource. Podemos querer uma visão mais flexível dos dados. Por exemplo, em vez de mostrar o nome, a categoria, o fornecedor, o preço e as informações descontinuadas do produto, cada um em uma linha separada, podemos mostrar o nome e o preço do produto em um <h4> título, com as informações da categoria e do fornecedor aparecendo abaixo do nome e do preço em um tamanho de fonte menor. E podemos não nos importar em mostrar os nomes das propriedades (Produto, Categoria e assim por diante) ao lado dos valores.

O controle FormView fornece esse nível de personalização. Em vez de usar campos (como GridView e DetailsView), o FormView usa modelos, que permitem uma combinação de controles da Web, HTML estático e sintaxe de vinculação de dados. Se você estiver familiarizado com o controle Repeater do ASP.NET 1.x, você pode pensar no FormView como o Repeater para mostrar um único registro.

Adicione um controle FormView à superfície de design da SimpleDisplay.aspx página. Inicialmente, o FormView é exibido como um bloco cinza, notificando-nos de que precisamos fornecer, no mínimo, o ItemTemplate do controlo.

Figura 17: O FormView deve incluir um ItemTemplate (Clique para ver a imagem em tamanho real)

Você pode vincular o FormView diretamente a um controle de fonte de dados por meio da tag inteligente do FormView, que criará um ItemTemplate padrão automaticamente (junto com um EditItemTemplate e InsertItemTemplate, se as propriedades InsertMethod e UpdateMethod do controlo ObjectDataSource estiverem definidas). No entanto, para este exemplo, vamos vincular os dados ao FormView e especificar seu ItemTemplate manualmente. Comece definindo a propriedade de DataSourceID FormView como a ID do controle ObjectDataSource, ObjectDataSource1. Em seguida, crie o ItemTemplate para que ele exiba o nome e o preço do produto em um <h4> elemento e os nomes de categoria e remetente abaixo disso em um tamanho de fonte menor.

<asp:FormView ID="FormView1" runat="server"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><%# Eval("ProductName") %>
          (<%# Eval("UnitPrice", "{0:c}") %>)</h4>
        Category: <%# Eval("CategoryName") %>;
        Supplier: <%# Eval("SupplierName") %>
    </ItemTemplate>
</asp:FormView>

Figura 18: O primeiro produto (Chai) é exibido em um formato personalizado (Clique para visualizar a imagem em tamanho real)

A <%# Eval(propertyName) %> é a sintaxe de vinculação de dados. O Eval método retorna o valor da propriedade especificada para o objeto atual que está sendo vinculado ao controle FormView. Confira o artigo de Alex Homer Simplified and Extended Data Binding Syntax in ASP.NET 2.0 para obter mais informações sobre os prós e contras da vinculação de dados.

Como o DetailsView, o FormView mostra apenas o primeiro registro retornado do ObjectDataSource. Você pode habilitar a paginação no FormView para permitir que os visitantes percorram os produtos um de cada vez.

Resumo

Acessar e exibir dados de uma camada de lógica de negócios pode ser realizado sem escrever uma linha de código graças ao controle ObjectDataSource do ASP.NET 2.0. O ObjectDataSource invoca um método especificado de uma classe e retorna os resultados. Esses resultados podem ser exibidos em um controle da Web de dados vinculado ao ObjectDataSource. Neste tutorial, examinamos a vinculação dos controles GridView, DetailsView e FormView ao ObjectDataSource.

Até agora, vimos apenas como usar o ObjectDataSource para invocar um método sem parâmetros, mas e se quisermos invocar um método que espera parâmetros de entrada, como o ProductBLL da classe GetProductsByCategoryID(categoryID)? Para chamar um método que espera um ou mais parâmetros, devemos configurar o ObjectDataSource para especificar os valores para esses parâmetros. Veremos como fazer isso em nosso próximo tutorial.

Feliz Programação!

Leitura adicional

Para obter mais informações sobre os tópicos discutidos neste tutorial, consulte os seguintes recursos:

Sobre o Autor

Scott Mitchell, autor de sete livros sobre ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias Web da Microsoft desde 1998. Scott trabalha como consultor, formador e escritor independente. Seu último livro é Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Ele pode ser contatado em mitchell@4GuysFromRolla.com.

Um agradecimento especial a

Esta série de tutoriais foi revisada por muitos revisores úteis. O revisor principal deste tutorial foi Hilton Giesenow. Interessado em rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.

Anterior Próximo

Comentários

Esta página foi útil?

Last updated on 2025-05-04