Exibir dados com o ObjectDataSource (C#)

Este tutorial analisa o controle ObjectDataSource Usando esse controle, você pode associar dados recuperados da BLL criada no tutorial anterior sem precisar escrever uma linha de código!

Introdução

Com nossa arquitetura de aplicativo e layout de página do site concluídos, 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 associar dados programaticamente do DAL e da BLL a um controle da Web de dados em uma página ASP.NET. Essa sintaxe que atribui a propriedade do controle Web de dados DataSource aos dados a serem exibidos e chama o método DataBind() do controle foi o padrão usado em aplicativos ASP.NET 1.x e pode continuar a ser usado em seus aplicativos 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 associar dados recuperados da BLL criada no tutorial anterior sem precisar escrever uma linha de código!

ASP.NET 2.0 é fornecido com cinco controles internos de fonte de dados 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 de 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 esse objeto subjacente e como seus métodos são mapeados para os métodos Select, Insert, Update e Delete do ObjectDataSource. Depois que esse objeto subjacente tiver sido especificado e seus métodos mapeados para o ObjectDataSource, poderemos associar o ObjectDataSource a um controle da Web de dados. ASP.NET é fornecido com muitos controles da Web de dados, incluindo GridView, DetailsView, RadioButtonList e DropDownList, entre outros. Durante o ciclo de vida da página, o controle Web de dados pode precisar acessar os dados aos quais está vinculado, o que ele realizará invocando o método Select do seu ObjectDataSource; se o controle Web de dados der suporte à inserção, atualização ou exclusão, as chamadas poderão ser feitas aos métodos Insert, Update ou Delete do seu ObjectDataSource. Essas chamadas sã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 exibir a imagem em tamanho real)

Embora o ObjectDataSource possa ser usado para invocar métodos para inserir, atualizar ou excluir dados, vamos apenas nos concentrar no retorno de dados; Os tutoriais futuros explorarão o uso do ObjectDataSource e dos controles da Web de dados que modificam os dados.

Etapa 1: Adicionar e configurar o controle ObjectDataSource

Comece abrindo a página SimpleDisplay.aspx na pasta BasicReporting, alterne para o modo de Design e arraste um controle 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

Como alternativa, você pode primeiro adicionar o controle web de dados à página e, em seguida, em sua marca inteligente, escolher a opção <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 ObjectDataSource, clique no link Configurar Fonte de Dados da etiqueta inteligente do ObjectDataSource.

Figura 3: Clique no link Configurar Fonte de Dados da Smart Tag (Clique para exibir a imagem em tamanho real)

Isso abre o Assistente de Configuração de Fonte de Dados. Primeiro, devemos especificar o objeto com o qual o ObjectDataSource deve trabalhar. Se a caixa de seleção "Mostrar somente componentes de dados" for marcada, a lista suspensa nesta tela listará apenas os objetos que foram decorados com o DataObject atributo. Atualmente, nossa lista inclui os TableAdapters no Conjunto de Dados Tipado e as classes BLL que criamos no tutorial anterior. Se você esqueceu de adicionar o DataObject atributo às classes camada de lógica de negócios, não as verá nesta lista. Nesse caso, desmarque a caixa de seleção "Mostrar somente componentes de dados" para exibir todos os objetos, o que deve incluir as classes BLL (juntamente com as outras classes no Conjunto de Dados Digitado as DataTables, DataRows e assim por diante).

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

Figura 4: Especificar o objeto a ser usado com o controle ObjectDataSource (clique para exibir 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 vemosGetProductByProductID, GetProductse GetProductsByCategoryIDGetProductsBySupplierID. Selecione o método GetProducts da lista suspensa e clique em Concluir (se você adicionou o DataObjectMethodAttribute aos métodos do ProductBLL conforme mostrado no tutorial anterior, essa opção será selecionada automaticamente).

Figura 5: Escolha o método para retornar dados da guia SELECT (clique para exibir 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, por meio da janela Propriedades ou diretamente na marcação declarativa. Basta definir a TypeName propriedade como o tipo do objeto subjacente a ser usado e o SelectMethod método a ser invocado ao recuperar dados.

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

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

Etapa 2: Adicionar um controle da Web de dados e vinculá-lo 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 pelo método ObjectDataSource Select . Qualquer controle da Web de dados pode ser associado a um ObjectDataSource; vamos examinar a exibição dos dados do ObjectDataSource em gridView, DetailsView e FormView.

Associar um GridView ao ObjectDataSource

Adicione um controle GridView da Caixa de Ferramentas à superfície de design do SimpleDisplay.aspx. No smart tag do GridView, escolha o controle ObjectDataSource que adicionamos no Passo 1. Isso criará automaticamente um BoundField no GridView para cada propriedade retornada pelos dados do método ObjectDataSource Select (ou seja, as propriedades definidas pela DataTable de Produtos).

Figura 6: Um GridView foi adicionado à página e associado ao ObjectDataSource (clique para exibir a imagem em tamanho real)

Em seguida, você pode personalizar, reorganizar ou remover os "BoundFields" do GridView clicando na opção Editar Colunas do "smart tag".

Figura 7: Gerenciar os BoundFields do GridView por meio da caixa de diálogo Editar Colunas (clique para exibir a imagem em tamanho real)

Dedique um momento para modificar os BoundFields do GridView, removendo os ProductID, SupplierID, CategoryID, QuantityPerUnit, UnitsInStock, UnitsOnOrder e ReorderLevel BoundFields. Basta selecionar o BoundField na lista na parte inferior esquerda e clicar no botão excluir (o X vermelho) para removê-los. Em seguida, reorganize os BoundFields para que os BoundFields CategoryName e SupplierName precedam o BoundField UnitPrice selecionando esses BoundFields e clicando na seta para cima. Defina a HeaderText propriedade dos BoundFields restantes como Products, Category, Supplier e Price, respectivamente. Em seguida, formate o Price BoundField como moeda, definindo sua propriedade HtmlEncode para False e sua propriedade DataFormatString para {0:c}. Por fim, alinhe horizontalmente o Price à direita e a Discontinued caixa de seleção 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 exibir a imagem em tamanho real)

Usando temas para uma aparência consistente

Esses tutoriais se esforçam para remover as configurações de estilo no nível do controle, em vez disso, usando folhas de estilo em cascata definidas em um arquivo externo sempre que possível. O arquivo Styles.css contém classes CSS DataWebControlStyle, HeaderStyle, RowStyle e AlternatingRowStyle que devem ser usadas para ditar a aparência dos controles da Web de dados usados nestes tutoriais. Para fazer isso, poderíamos definir a propriedade CssClass do GridView como DataWebControlStyle, e as propriedades HeaderStyle, RowStyle e AlternatingRowStyle com suas propriedades CssClass adequadamente.

Se definirmos essas CssClass propriedades no controle da Web, precisaremos lembrar de definir explicitamente esses valores de propriedade para cada controle web de dados adicionados aos nossos tutoriais. Uma abordagem mais gerenciável é definir as propriedades padrão relacionadas ao CSS para os controles GridView, DetailsView e FormView usando um Tema. Um Tema é uma coleção de configurações de propriedade no nível do 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 de estilos Styles.css as-is, definida na pasta raiz do aplicativo Web), mas incluirá duas Skins. Uma 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 Pele ao seu projeto nomeado 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 pele nomeado GridView.skin (clique para exibir imagem em tamanho real)

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

Figura 10: Permitir que o Visual Studio crie a App_Theme pasta (clique para exibir a 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 gridview para DataWebControls (clique com o botão direito do mouse na pasta GridView na App_Theme pasta e escolha 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 ao CssClass para qualquer GridView em qualquer página que usa o tema DataWebControls. Vamos adicionar outro Skin para o DetailsView, um controle da Web de dados que usaremos em breve. Adicione um novo Skin 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 nosso Tema definido, a última etapa é aplicar o Tema à nossa página ASP.NET. Um tema pode ser aplicado de página por página ou para todas as páginas em um site. Vamos usar este tema para todas as páginas no site. Para fazer isso, adicione a seguinte marcação à 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 substituir as propriedades especificadas no nível de controle. 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 especificadas por meio do atributo theme não aparecem no modo de exibição Design do Visual Studio. Consulte Visão Geral de Temas e Skins do ASP.NET e Server-Side Estilos Usando Temas para obter mais informações sobre Temas e Skins; veja Como Fazer: Aplicar Temas do ASP.NET para saber mais 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 exibir 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á associado. Há momentos, no entanto, em que talvez queiramos exibir um único registro ou apenas um registro por vez. O controle DetailsView oferece essa funcionalidade, renderizando como um HTML <table> com duas colunas e uma linha para cada coluna ou propriedade associada 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. Assim como com o GridView, um BoundField será adicionado ao DetailsView para cada propriedade no objeto retornado pelo método 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 associá-lo ao ObjectDataSource (clique para exibir a imagem em tamanho real)

Assim 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 fazer sua aparência semelhante ao exemplo de GridView.

Figura 14: O DetailsView mostra um único registro (clique para exibir 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 selecione a caixa de seleção Habilitar Paginação na tag inteligente do DetailsView.

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

Figura 16: Com a paginação habilitada, o DetailsView permite que o usuário exiba qualquer um dos produtos (clique para exibir 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 exibe cada registro retornado do ObjectDataSource. Talvez queiramos uma exibiçã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 em uma linha separada, convém mostrar o nome e o preço do produto em um <h4> título, com as informações de categoria e fornecedor aparecendo abaixo do nome e do preço em um tamanho de fonte menor. E talvez não nos importemos em mostrar os nomes de propriedade (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 o GridView e o DetailsView), o FormView usa modelos, que permitem uma combinação de controles Da Web, HTML estático e sintaxe de associação de dados. Se você estiver familiarizado com o controle Repeater de ASP.NET 1.x, poderá pensar no FormView como o Repetidor para mostrar um único registro.

Adicione um controle FormView à área de design da página SimpleDisplay.aspx. Inicialmente, o FormView é exibido como um bloco cinza, informando que precisamos fornecer, no mínimo, o ItemTemplate do controle.

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

Você pode vincular o FormView diretamente a um controle de origem de dados por meio da marca inteligente do FormView, que criará automaticamente um padrão ItemTemplate, juntamente com um EditItemTemplate e InsertItemTemplate, caso as propriedades InsertMethod e UpdateMethod do controle ObjectDataSource estejam definidas. No entanto, para este exemplo, vamos associar os dados ao FormView e especificar manualmente ItemTemplate . Comece definindo a propriedade do DataSourceID FormView para o ID controle ObjectDataSource. ObjectDataSource1 Em seguida, crie o ItemTemplate para mostrar o nome e o preço do produto em um <h4>, e os nomes da categoria e do remetente abaixo 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 exibir imagem em tamanho real)

O <%# Eval(propertyName) %> é a sintaxe de vinculação de dados. O Eval método retorna o valor da propriedade especificada para o objeto atual associado ao controle FormView. Confira o artigo Simplified and Extended Data Binding Syntax in ASP.NET 2.0 de Alex Homer para obter mais informações sobre entradas e saídas de associação de dados.

Assim 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

O acesso e a exibição de dados de uma Camada Lógica de Negócios podem ser realizados 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 associado ao ObjectDataSource. Neste tutorial, analisamos a associação dos controles GridView, DetailsView e FormView ao ObjectDataSource.

Até agora, só vimos 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 GetProductsByCategoryID(categoryID)classe? Para chamar um método que espera um ou mais parâmetros, devemos configurar o ObjectDataSource para especificar os valores desses parâmetros. Veremos como fazer isso em nosso próximo tutorial.

Divirta-se programando!

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 asp/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias da Microsoft Web desde 1998. Scott trabalha como consultor independente, treinador e escritor. Seu último livro é Sams Teach Yourself ASP.NET 2.0 em 24 Horas. Ele pode ser alcançado em mitchell@4GuysFromRolla.com.

Agradecimentos Especiais a

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

Comentários

Esta página foi útil?

Last updated on 2025-05-03