Compartilhar via

Controles de dados associados

  • Artigo

pela Microsoft

A maioria dos aplicativos ASP.NET depende de algum grau de apresentação de dados de uma fonte de dados de back-end. Os controles associados a dados têm sido uma parte fundamental da interação com os dados em aplicativos Web dinâmicos. ASP.NET 2.0 apresenta algumas melhorias substanciais nos controles associados a dados, incluindo uma nova classe BaseDataBoundControl e sintaxe declarativa.

A maioria dos aplicativos ASP.NET depende de algum grau de apresentação de dados de uma fonte de dados de back-end. Os controles associados a dados têm sido uma parte fundamental da interação com os dados em aplicativos Web dinâmicos. ASP.NET 2.0 apresenta algumas melhorias substanciais nos controles associados a dados, incluindo uma nova classe BaseDataBoundControl e sintaxe declarativa.

O BaseDataBoundControl atua como a classe base para a classe DataBoundControl e a classe HierarchicalDataBoundControl. Neste módulo, discutiremos as seguintes classes derivadas de DataBoundControl:

  • AdRotator
  • Controles de lista
  • GridView
  • Formview
  • Detailsview

Também discutiremos as seguintes classes derivadas da classe HierarchicalDataBoundControl:

  • TreeView
  • Menu
  • Sitemappath

Classe DataBoundControl

A classe DataBoundControl é uma classe abstrata (marcada como MustInherit na VB) usada para interagir com dados tabulares ou de estilo de lista. Os controles a seguir são alguns dos controles derivados de DataBoundControl.

AdRotator

O controle AdRotator permite que você exiba uma faixa gráfica em uma página da Web vinculada a uma URL específica. O gráfico exibido é girado usando propriedades para o controle . A frequência de um anúncio específico exibido em uma página pode ser configurada usando a propriedade Impressions e os anúncios podem ser filtrados usando palavra-chave filtragem.

Os controles AdRotator usam um arquivo XML ou uma tabela em um banco de dados para dados. Os atributos a seguir são usados em arquivos XML para configurar o controle AdRotator.

ImageUrl

A URL de uma imagem a ser exibida para o anúncio.

A URL para a qual o usuário deve ser levado quando o anúncio é clicado. Isso deve ser codificado em URL.

AlternateText

O texto alternativo exibido em uma dica de ferramenta e lido pelos leitores de tela. Também é exibido quando a imagem especificada por ImageUrl não está disponível.

Palavra-chave

Define um palavra-chave que pode ser usado ao usar palavra-chave filtragem. Se especificado, somente os anúncios com um palavra-chave correspondente ao filtro palavra-chave serão exibidos.

Impressões

Um número de ponderação que determina a frequência com que um anúncio específico é provável que apareça. É relativo à impressão de outros anúncios no mesmo arquivo. O valor máximo das impressões coletivas para todos os anúncios em um arquivo XML é 2.048.000.000 1.

Altura

A altura do anúncio em pixels.

Largura

A largura do anúncio em pixels.

Observação

Os atributos Height e Width substituem a altura e a largura do próprio controle AdRotator.

Um arquivo XML típico pode ser semelhante ao seguinte:

<?xml version="1.0" encoding="utf-8" ?> <Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File"> <Ad> <ImageUrl>~/images/Contoso_ad.gif</ImageUrl> <NavigateUrl>http://www.contoso-ltd.com</NavigateUrl> <AlternateText>Ad for Contoso, Ltd. Web site</AlternateText> <Impressions>100</Impressions> </Ad> <Ad> <ImageUrl>~/images/Aspnet_ad.gif</ImageUrl> <NavigateUrl>http://www.asp.net</NavigateUrl> <AlternateText>Ad for ASP.NET Web site</AlternateText> <Impressions>50</Impressions> </Ad> </Advertisements>

No exemplo acima, o anúncio da Contoso tem duas vezes mais chances de aparecer do que o anúncio do site ASP.NET devido ao valor do atributo Impressions.

Para exibir anúncios do arquivo XML acima, adicione um controle AdRotator a uma página e defina a propriedade AdvertisementFile para apontar para o arquivo XML, conforme mostrado abaixo:

<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="App_Data/Ads.xml" />

Se você optar por usar uma tabela de banco de dados como a fonte de dados para o controle AdRotator, primeiro precisará configurar um banco de dados usando o seguinte esquema:

Nome da coluna Data type Descrição
ID int Chave primária. Esta coluna pode ter qualquer nome.
ImageUrl nvarchar(length) A URL relativa ou absoluta da imagem a ser exibida para o anúncio.
Navigateurl nvarchar(length) A URL de destino para o anúncio. Se você não fornecer um valor, o anúncio não será um hiperlink.
AlternateText nvarchar(length) O texto exibido se a imagem não puder ser encontrada. Em alguns navegadores, o texto é exibido como uma Dica de Ferramenta. O texto alternativo também é usado para acessibilidade para que os usuários que não conseguem ver o gráfico possam ouvir sua descrição lida em voz alta.
Palavra-chave nvarchar(length) Uma categoria para o anúncio no qual a página pode filtrar.
Impressões int(4) Um número que indica a probabilidade de com que frequência o anúncio é exibido. Quanto maior o número, mais frequentemente o anúncio será exibido. O total de todos os valores de impressões no arquivo XML pode não exceder 2.048.000.000 - 1.
Largura int(4) A largura da imagem em pixels.
Altura int(4) A altura da imagem em pixels.

Nos casos em que você já tem um banco de dados com um esquema diferente, você pode usar as propriedades AlternateTextField, ImageUrlField e NavigateUrlField para mapear os atributos do AdRotator para o banco de dados existente. Para exibir os dados do banco de dados no controle AdRotator, adicione um controle de fonte de dados à página, configure a cadeia de conexão do controle da fonte de dados para apontar para o banco de dados e defina a propriedade DataSourceID do controle AdRotator como a ID do controle da fonte de dados. Nos casos em que você precisa configurar anúncios do AdRotator programaticamente, use o evento AdCreated. O evento AdCreated usa dois parâmetros; um objeto e o outro uma instância de AdCreatedEventArgs. O AdCreatedEventArgs é uma referência ao anúncio que está sendo criado.

O snippet de código a seguir define ImageUrl, NavigateUrl e AlternateText para um anúncio programaticamente:

protected void AdRotator1_AdCreated(object sender, System.Web.UI.WebControls.AdCreatedEventArgs e) { e.ImageUrl = "images/contoso_ad.gif"; e.NavigateUrl = "http://www.contoso-ltd.com/"; e.AlternateText = "Ad for Contoso, Ltd Web site"; }

Controles de lista

Os controles de lista incluem ListBox, DropDownList, CheckBoxList, RadioButtonList e BulletedList. Cada um desses controles pode ser associado a dados a uma fonte de dados. Eles usam um campo na fonte de dados como o texto de exibição e, opcionalmente, podem usar um segundo campo como o valor de um item. Os itens também podem ser adicionados estaticamente em tempo de design e você pode misturar itens estáticos e itens dinâmicos adicionados de uma fonte de dados.

Para associar dados a um controle de lista, adicione um controle de fonte de dados à página. Especifique um comando SELECT para o controle da fonte de dados e defina a propriedade DataSourceID do controle de lista como a ID do controle da fonte de dados. Use as propriedades DataTextField e DataValueField para definir o texto de exibição e o valor do controle. Além disso, você pode usar a propriedade DataTextFormatString para controlar a aparência do texto de exibição da seguinte maneira:

Expression Descrição
Preço: {0:C} Para dados numéricos/decimais. Exibe o literal "Price:" seguido por números no formato de moeda. O formato de moeda depende da configuração de cultura especificada no atributo de cultura na diretiva Page ou no arquivo Web.config.
{0:D4} Para dados inteiros. Não pode ser usado com números decimais. Os inteiros são exibidos em um campo de adição zero com quatro caracteres de largura.
{0:N2}% Para dados numéricos. Exibe o número com precisão de duas casas decimais seguida pelo literal "%".
{0:000.0} Para dados numéricos/decimais. Os números são arredondados para uma casa decimal. Os números com menos de três dígitos zero são preenchidos com zeros.
{0:D} Para dados de data/hora. Exibe o formato de data longa ("Quinta-feira, 06 de agosto de 1996"). O formato de data depende da configuração da cultura da página ou do arquivo Web.config.
{0:d} Para dados de data/hora. Exibe o formato de data abreviada ("31/12/99").
{0:yy-MM-dd} Para dados de data/hora. Exibe a data no formato numérico de ano/mês (96-08-06)

GridView

O controle GridView permite a exibição e edição de dados tabulares usando uma abordagem declarativa e é o sucessor do controle DataGrid. Os recursos a seguir estão disponíveis no controle GridView.

  • Associação a controles de fonte de dados, como SqlDataSource.
  • Recursos de classificação internos.
  • Funcionalidades internas de atualização e exclusão.
  • Recursos de paginação internos.
  • Recursos internos de seleção de linha.
  • Acesso programático ao modelo de objeto GridView para definir dinamicamente propriedades, manipular eventos e assim por diante.
  • Vários campos de chave.
  • Vários campos de dados para as colunas de hiperlink.
  • Aparência personalizável por meio de temas e estilos.

Campos de coluna

Cada coluna no controle GridView é representada por um objeto DataControlField. Por padrão, a propriedade AutoGenerateColumns é definida como true, o que cria um objeto AutoGeneratedField para cada campo na fonte de dados. Cada campo é renderizado como uma coluna no controle GridView na ordem em que cada campo aparece na fonte de dados. Você também pode controlar manualmente quais campos de coluna aparecem no controle GridView definindo a propriedade AutoGenerateColumns como false e definindo sua própria coleção de campos de coluna. Diferentes tipos de campo de coluna determinam o comportamento das colunas no controle .

A tabela a seguir lista os diferentes tipos de campo de coluna que podem ser usados.

Tipo de campo de coluna Descrição
BoundField Exibe o valor de um campo em uma fonte de dados. Esse é o tipo de coluna padrão do controle GridView.
ButtonField Exibe um botão de comando para cada item no controle GridView. Isso permite que você crie uma coluna de controles de botão personalizados, como o botão Adicionar ou Remover.
CheckBoxField Exibe uma caixa de marcar para cada item no controle GridView. Esse tipo de campo de coluna é comumente usado para exibir campos com um valor booliano.
CommandField Exibe botões de comando predefinidos para executar operações de seleção, edição ou exclusão.
HyperLinkField Exibe o valor de um campo em uma fonte de dados como um hiperlink. Esse tipo de campo de coluna permite associar um segundo campo à URL do hiperlink.
ImageField Exibe uma imagem para cada item no controle GridView.
Templatefield Exibe o conteúdo definido pelo usuário para cada item no controle GridView de acordo com um modelo especificado. Esse tipo de campo de coluna permite que você crie um campo de coluna personalizado.

Para definir uma coleção de campos de coluna declarativamente, primeiro adicione marcas de abertura e fechamento <de colunas> entre as marcas de abertura e fechamento do controle GridView. Em seguida, liste os campos de coluna que você deseja incluir entre as marcas De abertura e fechamento <de Colunas> . As colunas especificadas são adicionadas à coleção Columns na ordem listada. A coleção Columns armazena todos os campos de coluna no controle e permite que você gerencie programaticamente os campos de coluna no controle GridView.

Campos de coluna declarados explicitamente podem ser exibidos em combinação com campos de coluna gerados automaticamente. Quando ambos são usados, os campos de coluna declarados explicitamente são renderizados primeiro, seguidos pelos campos de coluna gerados automaticamente.

Associação a um controle de fonte de dados

O controle GridView pode ser associado a um controle de fonte de dados (como SqlDataSource, ObjectDataSource e assim por diante), bem como qualquer fonte de dados que implemente a interface System.Collections.IEnumerable (como System.Data.DataView, System.Collections.ArrayList ou System.Collections.Hashtable). Use um dos seguintes métodos para associar o controle GridView ao tipo de fonte de dados apropriado:

  • Para associar a um controle de fonte de dados, defina a propriedade DataSourceID do controle GridView como o valor da ID do controle da fonte de dados. O controle GridView é associado automaticamente ao controle de fonte de dados especificado e pode aproveitar os recursos do controle da fonte de dados para executar a funcionalidade de classificação, atualização, exclusão e paginação. Esse é o método preferencial para associar a dados.
  • Para associar a uma fonte de dados que implementa a interface System.Collections.IEnumerable, defina programaticamente a propriedade DataSource do controle GridView como a fonte de dados e, em seguida, chame o método DataBind. Ao usar esse método, o controle GridView não fornece funcionalidades internas de classificação, atualização, exclusão e paginação. Você precisa fornecer essa funcionalidade por conta própria.

Operações de controle GridView

O controle GridView fornece muitos recursos internos que permitem ao usuário classificar, atualizar, excluir, selecionar e paginar itens no controle. Quando o controle GridView está associado a um controle de fonte de dados, o controle GridView pode aproveitar os recursos do controle da fonte de dados e fornecer funcionalidades automáticas de classificação, atualização e exclusão.

Observação

O controle GridView pode fornecer suporte para classificação, atualização e exclusão com outros tipos de fontes de dados; no entanto, você precisará fornecer um manipulador de eventos apropriado com a implementação para essas operações.

A classificação permite que o usuário classifique os itens no controle GridView em relação a uma coluna específica clicando no cabeçalho da coluna. Para habilitar a classificação, defina a propriedade AllowSorting como true.

As funcionalidades automáticas de atualização, exclusão e seleção são habilitadas quando um botão em um campo de coluna ButtonField ou TemplateField , com um nome de comando "Editar", "Excluir" e "Selecionar", respectivamente, é clicado. O controle GridView poderá adicionar automaticamente um campo de coluna CommandField com um botão Editar, Excluir ou Selecionar se a propriedade AutoGenerateEditButton, AutoGenerateDeleteButton ou AutoGenerateSelectButton estiver definida como true, respectivamente.

Observação

Não há suporte direto para a inserção de registros na fonte de dados pelo controle GridView. No entanto, é possível inserir registros usando o controle GridView em conjunto com o controle DetailsView ou FormView.

Em vez de exibir todos os registros na fonte de dados ao mesmo tempo, o controle GridView pode dividir automaticamente os registros em páginas. Para habilitar a paginação, defina a propriedade AllowPaging como true.

Personalizando a aparência do GridView

Você pode personalizar a aparência do controle GridView definindo as propriedades de estilo para as diferentes partes do controle. A tabela a seguir lista as diferentes propriedades de estilo.

Propriedade Style Descrição
Alternatingrowstyle As configurações de estilo para as linhas de dados alternadas no controle GridView. Quando essa propriedade é definida, as linhas de dados são exibidas alternando entre as configurações rowStyle e as configurações AlternatingRowStyle .
Editrowstyle As configurações de estilo da linha que está sendo editada no controle GridView.
Emptydatarowstyle As configurações de estilo da linha de dados vazia exibidas no controle GridView quando a fonte de dados não contém nenhum registro.
Footerstyle As configurações de estilo para a linha de rodapé do controle GridView.
Headerstyle As configurações de estilo para a linha de cabeçalho do controle GridView.
Pagerstyle As configurações de estilo para a linha do pager do controle GridView.
Rowstyle As configurações de estilo para as linhas de dados no controle GridView. Quando a propriedade AlternatingRowStyle também é definida, as linhas de dados são exibidas alternando entre as configurações de RowStyle e as configurações AlternatingRowStyle .
Selectedrowstyle As configurações de estilo da linha selecionada no controle GridView.

Você também pode mostrar ou ocultar diferentes partes do controle. A tabela a seguir lista as propriedades que controlam quais partes são mostradas ou ocultas.

Propriedade Descrição
Showfooter Mostra ou oculta a seção rodapé do controle GridView.
Showheader Mostra ou oculta a seção de cabeçalho do controle GridView.

Eventos

O controle GridView fornece vários eventos com os quais você pode programar. Isso permite que você execute uma rotina personalizada sempre que ocorrer um evento. A tabela a seguir lista os eventos compatíveis com o controle GridView.

Evento Descrição
Pageindexchanged Ocorre quando um dos botões do pager é clicado, mas depois que o controle GridView manipula a operação de paginação. Esse evento é comumente usado quando você precisa executar uma tarefa depois que o usuário navega para uma página diferente no controle.
Pageindexchanging Ocorre quando um dos botões do pager é clicado, mas antes que o controle GridView manipule a operação de paginação. Esse evento geralmente é usado para cancelar a operação de paginação.
Rowcancelingedit Ocorre quando o botão Cancelar de uma linha é clicado, mas antes que o controle GridView saia do modo de edição. Esse evento geralmente é usado para interromper a operação de cancelamento.
Rowcommand Ocorre quando um botão é clicado no controle GridView. Esse evento geralmente é usado para executar uma tarefa quando um botão é clicado no controle .
Rowcreated Ocorre quando uma nova linha é criada no controle GridView. Esse evento geralmente é usado para modificar o conteúdo de uma linha quando a linha é criada.
Rowdatabound Ocorre quando uma linha de dados é associada a dados no controle GridView. Esse evento geralmente é usado para modificar o conteúdo de uma linha quando a linha está associada aos dados.
Rowdeleted Ocorre quando o botão Excluir de uma linha é clicado, mas depois que o controle GridView exclui o registro da fonte de dados. Esse evento geralmente é usado para marcar os resultados da operação de exclusão.
Rowdeleting Ocorre quando o botão Excluir de uma linha é clicado, mas antes que o controle GridView exclua o registro da fonte de dados. Esse evento geralmente é usado para cancelar a operação de exclusão.
Rowediting Ocorre quando o botão Editar de uma linha é clicado, mas antes que o controle GridView entre no modo de edição. Esse evento geralmente é usado para cancelar a operação de edição.
Rowupdated Ocorre quando o botão Atualizar de uma linha é clicado, mas depois que o controle GridView atualiza a linha. Esse evento geralmente é usado para marcar os resultados da operação de atualização.
Rowupdating Ocorre quando o botão Atualizar de uma linha é clicado, mas antes que o controle GridView atualize a linha. Esse evento geralmente é usado para cancelar a operação de atualização.
SelectedIndexChanged Ocorre quando o botão Selecionar de uma linha é clicado, mas depois que o controle GridView manipula a operação de seleção. Esse evento geralmente é usado para executar uma tarefa depois que uma linha é selecionada no controle .
Selectedindexchanging Ocorre quando o botão Selecionar de uma linha é clicado, mas antes que o controle GridView manipule a operação de seleção. Esse evento geralmente é usado para cancelar a operação de seleção.
Classificado Ocorre quando o hiperlink para classificar uma coluna é clicado, mas depois que o controle GridView manipula a operação de classificação. Esse evento é comumente usado para executar uma tarefa depois que o usuário clica em um hiperlink para classificar uma coluna.
Classificação Ocorre quando o hiperlink para classificar uma coluna é clicado, mas antes que o controle GridView manipule a operação de classificação. Esse evento geralmente é usado para cancelar a operação de classificação ou para executar uma rotina de classificação personalizada.

Formview

O controle FormView é usado para exibir um único registro de uma fonte de dados. Ele é semelhante ao controle DetailsView, exceto que exibe modelos definidos pelo usuário em vez de campos de linha. Criar seus próprios modelos oferece maior flexibilidade para controlar como os dados são exibidos. O controle FormView dá suporte aos seguintes recursos:

  • Associação a controles de fonte de dados, como SqlDataSource e ObjectDataSource.
  • Funcionalidades internas de inserção.
  • Funcionalidades internas de atualização e exclusão.
  • Recursos de paginação internos.
  • Acesso programático ao modelo de objeto FormView para definir dinamicamente propriedades, manipular eventos e assim por diante.
  • Aparência personalizável por meio de modelos, temas e estilos definidos pelo usuário.

Modelos

Para que o controle FormView exiba conteúdo, você precisa criar modelos para as diferentes partes do controle. A maioria dos modelos são opcionais; no entanto, você deve criar um modelo para o modo no qual o controle está configurado. Por exemplo, um controle FormView que dá suporte à inserção de registros deve ter um modelo de item de inserção definido. A tabela a seguir lista os diferentes modelos que você pode criar.

Tipo do modelo Descrição
Edititemtemplate Define o conteúdo da linha de dados quando o controle FormView está no modo de edição. Esse modelo geralmente contém controles de entrada e botões de comando com os quais o usuário pode editar um registro existente.
Emptydatatemplate Define o conteúdo da linha de dados vazia exibida quando o controle FormView está associado a uma fonte de dados que não contém nenhum registro. Esse modelo geralmente contém conteúdo para alertar o usuário de que a fonte de dados não contém nenhum registro.
Footertemplate Define o conteúdo da linha do rodapé. Esse modelo geralmente contém qualquer conteúdo adicional que você gostaria de exibir na linha do rodapé. Como alternativa, você pode simplesmente especificar o texto a ser exibido na linha do rodapé definindo a propriedade FooterText.
Headertemplate Define o conteúdo da linha de cabeçalho. Esse modelo geralmente contém qualquer conteúdo adicional que você gostaria de exibir na linha de cabeçalho. Como alternativa, você pode simplesmente especificar o texto a ser exibido na linha de cabeçalho definindo a propriedade HeaderText.
ItemTemplate Define o conteúdo da linha de dados quando o controle FormView está no modo somente leitura. Esse modelo geralmente contém conteúdo para exibir os valores de um registro existente.
Insertitemtemplate Define o conteúdo da linha de dados quando o controle FormView está no modo de inserção. Esse modelo geralmente contém controles de entrada e botões de comando com os quais o usuário pode adicionar um novo registro.
Pagertemplate Define o conteúdo da linha de pager exibida quando o recurso de paginação está habilitado (quando a propriedade AllowPaging é definida como true). Esse modelo geralmente contém controles com os quais o usuário pode navegar para outro registro.

Os controles de entrada no modelo de edição de item e no modelo de item de inserção podem ser associados aos campos de uma fonte de dados usando uma expressão de associação bidirecional. Isso permite que o controle FormView extraia automaticamente os valores do controle de entrada para uma operação de atualização ou inserção. As expressões de associação bidirecional também permitem que os controles de entrada em um modelo de edição de item exibam automaticamente os valores de campo originais.

Associação a dados

O controle FormView pode ser associado a um controle de fonte de dados (como SqlDataSource, AccessDataSource, ObjectDataSource e assim por diante) ou a qualquer fonte de dados que implemente a interface System.Collections.IEnumerable (como System.Data.DataView, System.Collections.ArrayList e System.Collections.Hashtable). Use um dos seguintes métodos para associar o controle FormView ao tipo de fonte de dados apropriado:

  • Para associar a um controle de fonte de dados, defina a propriedade DataSourceID do controle FormView como o valor de ID do controle da fonte de dados. O controle FormView se associa automaticamente ao controle de fonte de dados especificado e pode aproveitar os recursos do controle da fonte de dados para executar a inserção, atualização, exclusão e funcionalidade de paginação. Esse é o método preferencial a ser associado aos dados.
  • Para associar a uma fonte de dados que implementa a interface System.Collections.IEnumerable , defina programaticamente a propriedade DataSource do controle FormView como a fonte de dados e chame o método DataBind. Ao usar esse método, o controle FormView não fornece funcionalidade interna de inserção, atualização, exclusão e paginação. Você precisa fornecer essa funcionalidade usando o evento apropriado.

Operações de controle do FormView

O controle FormView fornece muitos recursos internos que permitem que o usuário atualize, exclua, insira e pagine por meio de itens no controle. Quando o controle FormView está associado a um controle de fonte de dados, o controle FormView pode aproveitar os recursos do controle da fonte de dados e fornecer atualização automática, exclusão, inserção e funcionalidade de paginação. O controle FormView pode fornecer suporte para operações de atualização, exclusão, inserção e paginação com outros tipos de fontes de dados; no entanto, você deve fornecer um manipulador de eventos apropriado com a implementação para essas operações.

Como o controle FormView usa modelos, ele não fornece uma maneira de gerar automaticamente botões de comando para executar operações de atualização, exclusão ou inserção. Você deve incluir manualmente esses botões de comando no modelo apropriado. O controle FormView reconhece determinados botões que têm suas propriedades CommandName definidas como valores específicos. A tabela a seguir lista os botões de comando que o controle FormView reconhece.

Botão Valor de nome de comando Descrição
Cancelar "Cancelar" Usado na atualização ou inserção de operações para cancelar a operação e descartar os valores inseridos pelo usuário. Em seguida, o controle FormView retorna ao modo especificado pela propriedade DefaultMode.
Excluir "Excluir" Usado na exclusão de operações para excluir o registro exibido da fonte de dados. Gera os eventos ItemDeleting e ItemDeleted.
Editar "Editar" Usado na atualização de operações para colocar o controle FormView no modo de edição. O conteúdo especificado na propriedade EditItemTemplate é exibido para a linha de dados.
Inserir "Inserir" Usado na inserção de operações para tentar inserir um novo registro na fonte de dados usando os valores fornecidos pelo usuário. Gera os eventos ItemInserting e ItemInserted.
Novo "Novo" Usado na inserção de operações para colocar o controle FormView no modo de inserção. O conteúdo especificado na propriedade InsertItemTemplate é exibido para a linha de dados.
Página "Página" Usado em operações de paginação para representar um botão na linha do pager que executa paginação. Para especificar a operação de paginação, defina a propriedade CommandArgument do botão como "Next", "Prev", "First", "Last" ou o índice da página para a qual navegar. Gera os eventos PageIndexChanging e PageIndexChanged.
Atualizar "Atualizar" Usado na atualização de operações para tentar atualizar o registro exibido na fonte de dados com os valores fornecidos pelo usuário. Gera os eventos ItemUpdating e ItemUpdated.

Ao contrário do botão Excluir (que exclui o registro exibido imediatamente), quando o botão Editar ou Novo é clicado, o controle FormView entra no modo de edição ou inserção, respectivamente. No modo de edição, o conteúdo contido na propriedade EditItemTemplate é exibido para o item de dados atual. Normalmente, o modelo de edição de item é definido de modo que o botão Editar seja substituído por um botão Atualizar e Cancelar. Os controles de entrada apropriados para o tipo de dados do campo (como uma Caixa de Texto ou um controle CheckBox) também geralmente são exibidos com o valor de um campo para o usuário modificar. Clicar no botão Atualizar atualiza o registro na fonte de dados, enquanto clicar no botão Cancelar abandona as alterações.

Da mesma forma, o conteúdo contido na propriedade InsertItemTemplate é exibido para o item de dados quando o controle está no modo de inserção. O modelo de item de inserção normalmente é definido de modo que o botão Novo seja substituído por um botão Inserir e cancelar, e controles de entrada vazios são exibidos para o usuário inserir os valores do novo registro. Clicar no botão Inserir insere o registro na fonte de dados, enquanto clicar no botão Cancelar abandona as alterações.

O controle FormView fornece um recurso de paginação, que permite que o usuário navegue até outros registros na fonte de dados. Quando habilitada, uma linha de pager é exibida no controle FormView que contém os controles de navegação de página. Para habilitar a paginação, defina a propriedade AllowPaging como true. Você pode personalizar a linha do pager definindo as propriedades dos objetos contidos na propriedade PagerStyle e PagerSettings. Em vez de usar a interface do usuário de linha de pager interna, você pode criar sua própria interface do usuário usando a propriedade PagerTemplate .

Personalizando a aparência do FormView

Você pode personalizar a aparência do controle FormView definindo as propriedades de estilo para as diferentes partes do controle. A tabela a seguir lista as propriedades de estilo diferentes.

Propriedade Style Descrição
Editrowstyle As configurações de estilo da linha de dados quando o controle FormView está no modo de edição.
Emptydatarowstyle As configurações de estilo da linha de dados vazia exibidas no controle FormView quando a fonte de dados não contém nenhum registro.
Footerstyle As configurações de estilo para a linha de rodapé do controle FormView.
Headerstyle As configurações de estilo para a linha de cabeçalho do controle FormView.
Insertrowstyle As configurações de estilo da linha de dados quando o controle FormView está no modo de inserção.
Pagerstyle As configurações de estilo da linha pager exibidas no controle FormView quando o recurso de paginação está habilitado.
Rowstyle As configurações de estilo para a linha de dados quando o controle FormView está no modo somente leitura.

Eventos FormView

O controle FormView fornece vários eventos nos quais você pode programar. Isso permite que você execute uma rotina personalizada sempre que ocorrer um evento. A tabela a seguir lista os eventos compatíveis com o controle FormView.

Evento Descrição
Itemcommand Ocorre quando um botão dentro de um controle FormView é clicado. Esse evento geralmente é usado para executar uma tarefa quando um botão é clicado no controle .
Itemcreated Ocorre depois que todos os objetos FormViewRow são criados no controle FormView. Esse evento geralmente é usado para modificar os valores de um registro antes de ser exibido.
Itemdeleted Ocorre quando um botão Excluir (um botão com sua propriedade CommandName definida como "Delete") é clicado, mas depois que o controle FormView exclui o registro da fonte de dados. Esse evento geralmente é usado para marcar os resultados da operação de exclusão.
Itemdeleting Ocorre quando um botão Excluir é clicado, mas antes que o controle FormView exclua o registro da fonte de dados. Esse evento geralmente é usado para cancelar a operação de exclusão.
Iteminserted Ocorre quando um botão Inserir (um botão com sua propriedade CommandName definida como "Insert") é clicado, mas depois que o controle FormView insere o registro. Esse evento geralmente é usado para marcar os resultados da operação de inserção.
Iteminserting Ocorre quando um botão Inserir é clicado, mas antes que o controle FormView insira o registro. Esse evento geralmente é usado para cancelar a operação de inserção.
Itemupdated Ocorre quando um botão Atualizar (um botão com sua propriedade CommandName definida como "Update") é clicado, mas depois que o controle FormView atualiza a linha. Esse evento geralmente é usado para marcar os resultados da operação de atualização.
Itemupdating Ocorre quando um botão Atualizar é clicado, mas antes que o controle FormView atualize o registro. Esse evento geralmente é usado para cancelar a operação de atualização.
Modechanged Ocorre depois que o controle FormView altera os modos (para editar, inserir ou somente leitura). Esse evento geralmente é usado para executar uma tarefa quando o controle FormView altera os modos.
Modechanging Ocorre antes que o controle FormView altere os modos (para editar, inserir ou somente leitura). Esse evento geralmente é usado para cancelar uma alteração de modo.
Pageindexchanged Ocorre quando um dos botões de paginação é clicado, mas depois que o controle FormView manipula a operação de paginação. Esse evento geralmente é usado quando você precisa executar uma tarefa depois que o usuário navega para um registro diferente no controle.
Pageindexchanging Ocorre quando um dos botões de paginação é clicado, mas antes que o controle FormView manipule a operação de paginação. Esse evento geralmente é usado para cancelar a operação de paginação.

Detailsview

O controle DetailsView é usado para exibir um único registro de uma fonte de dados em uma tabela, em que cada campo do registro é exibido em uma linha da tabela. Ele pode ser usado em combinação com um controle GridView para cenários de detalhes de master. O controle DetailsView dá suporte aos seguintes recursos:

  • Associação a controles de fonte de dados, como SqlDataSource.
  • Recursos internos de inserção.
  • Funcionalidades internas de atualização e exclusão.
  • Recursos de paginação internos.
  • Acesso programático ao modelo de objeto DetailsView para definir dinamicamente propriedades, manipular eventos e assim por diante.
  • Aparência personalizável por meio de temas e estilos.

Campos de linha

Cada linha de dados no controle DetailsView é criada declarando um controle de campo. Diferentes tipos de campo de linha determinam o comportamento das linhas no controle . Os controles de campo derivam de DataControlField. A tabela a seguir lista os diferentes tipos de campo de linha que podem ser usados.

Tipo de campo de coluna Descrição
BoundField Exibe o valor de um campo em uma fonte de dados como texto.
ButtonField Exibe um botão de comando no controle DetailsView. Isso permite que você exiba uma linha com um controle de botão personalizado, como um botão Adicionar ou Remover.
CheckBoxField Exibe uma caixa marcar no controle DetailsView. Esse tipo de campo de linha é comumente usado para exibir campos com um valor booliano.
CommandField Exibe botões de comando internos para executar operações de edição, inserção ou exclusão no controle DetailsView.
HyperLinkField Exibe o valor de um campo em uma fonte de dados como um hiperlink. Esse tipo de campo de linha permite associar um segundo campo à URL do hiperlink.
ImageField Exibe uma imagem no controle DetailsView.
Templatefield Exibe o conteúdo definido pelo usuário para uma linha no controle DetailsView de acordo com um modelo especificado. Esse tipo de campo de linha permite que você crie um campo de linha personalizado.

Por padrão, a propriedade AutoGenerateRows é definida como true, o que gera automaticamente um objeto de campo de linha associado para cada campo de um tipo associável na fonte de dados. Os tipos associáveis válidos são String, DateTime, Decimal, Guid e o conjunto de tipos primitivos. Cada campo é exibido em uma linha como texto, na ordem em que cada campo aparece na fonte de dados.

Gerar automaticamente as linhas fornece uma maneira rápida e fácil de exibir todos os campos no registro. No entanto, para usar os recursos avançados do controle DetailsView, você deve declarar explicitamente os campos de linha a serem incluídos no controle DetailsView. Para declarar os campos de linha, primeiro defina a propriedade AutoGenerateRows como false. Em seguida, adicione marcas de abertura e fechamento <de Campos> entre as marcas de abertura e fechamento do controle DetailsView. Por fim, liste os campos de linha que você deseja incluir entre as marcas Desabrindo e fechando <Campos> . Os campos de linha especificados são adicionados à coleção Fields na ordem listada. A coleção Fields permite que você gerencie programaticamente os campos de linha no controle DetailsView.

Observação

Os campos de linha gerados automaticamente não são adicionados à coleção Fields.

Associação a dados com DetailsView

O controle DetailsView pode ser associado a um controle de fonte de dados, como SqlDataSource ou AccessDataSource, ou a qualquer fonte de dados que implemente a interface System.Collections.IEnumerable, como System.Data.DataView, System.Collections.ArrayList e System.Collections.Hashtable.

Use um dos seguintes métodos para associar o controle DetailsView ao tipo de fonte de dados apropriado:

  • Para associar a um controle de fonte de dados, defina a propriedade DataSourceID do controle DetailsView como o valor de ID do controle da fonte de dados. O controle DetailsView é associado automaticamente ao controle de fonte de dados especificado. Esse é o método preferencial para associar a dados.
  • Para associar a uma fonte de dados que implementa a interface System.Collections.IEnumerable , defina programaticamente a propriedade DataSource do controle DetailsView como a fonte de dados e, em seguida, chame o método DataBind.

Segurança

Esse controle pode ser usado para exibir a entrada do usuário, que pode incluir script de cliente mal-intencionado. Verifique as informações enviadas de um cliente para script executável, instruções SQL ou outro código antes de exibi-lo em seu aplicativo. ASP.NET fornece um recurso de validação de solicitação de entrada para bloquear script e HTML na entrada do usuário.

Operações de dados em DetailsView

O controle DetailsView fornece recursos internos que permitem que o usuário atualize, exclua, insira e percorra itens no controle. Quando o controle DetailsView está associado a um controle de fonte de dados, o controle DetailsView pode aproveitar os recursos do controle da fonte de dados e fornecer funcionalidades automáticas de atualização, exclusão, inserção e paginação.

O controle DetailsView pode fornecer suporte para operações de atualização, exclusão, inserção e paginação com outros tipos de fontes de dados; no entanto, você deve fornecer a implementação para essas operações em um manipulador de eventos apropriado.

O controle DetailsView pode adicionar automaticamente um campo de linha CommandField com um botão Editar, Excluir ou Novo definindo as propriedades AutoGenerateEditButton, AutoGenerateDeleteButton ou AutoGenerateInsertButton como true, respectivamente. Ao contrário do botão Excluir (que exclui o registro selecionado imediatamente), quando o botão Editar ou Novo é clicado, o controle DetailsView entra no modo de edição ou inserção, respectivamente. No modo de edição, o botão Editar é substituído por um botão Atualizar e Cancelar. Os controles de entrada apropriados para o tipo de dados do campo (como um controle TextBox ou CheckBox) são exibidos com o valor de um campo para o usuário modificar. Clicar no botão Atualizar atualiza o registro na fonte de dados, enquanto clicar no botão Cancelar abandona todas as alterações. Da mesma forma, no modo de inserção, o botão Novo é substituído por um botão Inserir e Cancelar e os controles de entrada vazios são exibidos para o usuário inserir os valores do novo registro.

O controle DetailsView fornece um recurso de paginação, que permite que o usuário navegue até outros registros na fonte de dados. Quando habilitados, os controles de navegação de página são exibidos em uma linha de paginação. Para habilitar a paginação, defina a propriedade AllowPaging como true. A linha do pager pode ser personalizada usando as propriedades PagerStyle e PagerSettings.

Personalizando a aparência de DetailsView

Você pode personalizar a aparência do controle DetailsView definindo as propriedades de estilo para as diferentes partes do controle. A tabela a seguir lista as diferentes propriedades de estilo.

Propriedade Style Descrição
Alternatingrowstyle As configurações de estilo para as linhas de dados alternadas no controle DetailsView. Quando essa propriedade é definida, as linhas de dados são exibidas alternando entre as configurações RowStyle e AlternatingRowStyle .
Commandrowstyle As configurações de estilo da linha que contém os botões de comando internos no controle DetailsView.
Editrowstyle As configurações de estilo para as linhas de dados quando o controle DetailsView está no modo de edição.
Emptydatarowstyle As configurações de estilo da linha de dados vazia exibidas no controle DetailsView quando a fonte de dados não contém nenhum registro.
Footerstyle As configurações de estilo para a linha de rodapé do controle DetailsView.
Headerstyle As configurações de estilo para a linha de cabeçalho do controle DetailsView.
Insertrowstyle As configurações de estilo para as linhas de dados quando o controle DetailsView está no modo de inserção.
Pagerstyle As configurações de estilo para a linha pager do controle DetailsView.
Rowstyle As configurações de estilo para as linhas de dados no controle DetailsView. Quando a propriedade AlternatingRowStyle também é definida, as linhas de dados são exibidas alternando entre as configurações RowStyle e AlternatingRowStyle .
Fieldheaderstyle As configurações de estilo para a coluna de cabeçalho do controle DetailsView.

Eventos em DetailsView

O controle DetailsView fornece vários eventos com os quais você pode programar. Isso permite que você execute uma rotina personalizada sempre que ocorrer um evento. A tabela a seguir lista os eventos compatíveis com o controle DetailsView. O controle DetailsView também herda esses eventos de suas classes base: DataBinding, DataBound, Disposed, Init, Load, PreRender e Render.

Evento Descrição
Itemcommand Ocorre quando um botão é clicado no controle DetailsView.
Itemcreated Ocorre depois que todos os objetos DetailsViewRow são criados no controle DetailsView. Esse evento geralmente é usado para modificar os valores de um registro antes de ser exibido.
Itemdeleted Ocorre quando um botão Excluir é clicado, mas depois que o controle DetailsView exclui o registro da fonte de dados. Esse evento geralmente é usado para marcar os resultados da operação de exclusão.
Itemdeleting Ocorre quando um botão Excluir é clicado, mas antes que o controle DetailsView exclua o registro da fonte de dados. Esse evento geralmente é usado para cancelar a operação de exclusão.
Iteminserted Ocorre quando um botão Inserir é clicado, mas depois que o controle DetailsView insere o registro. Esse evento geralmente é usado para marcar os resultados da operação de inserção.
Iteminserting Ocorre quando um botão Inserir é clicado, mas antes que o controle DetailsView insira o registro. Esse evento geralmente é usado para cancelar a operação de inserção.
Itemupdated Ocorre quando um botão Atualizar é clicado, mas depois que o controle DetailsView atualiza a linha. Esse evento geralmente é usado para marcar os resultados da operação de atualização.
Itemupdating Ocorre quando um botão Atualizar é clicado, mas antes que o controle DetailsView atualize o registro. Esse evento geralmente é usado para cancelar a operação de atualização.
Modechanged Ocorre depois que o controle DetailsView altera os modos (editar, inserir ou somente leitura). Esse evento geralmente é usado para executar uma tarefa quando o controle DetailsView altera os modos.
Modechanging Ocorre antes que o controle DetailsView altere os modos (editar, inserir ou somente leitura). Esse evento geralmente é usado para cancelar uma alteração de modo.
Pageindexchanged Ocorre quando um dos botões de paginação é clicado, mas depois que o controle DetailsView manipula a operação de paginação. Esse evento geralmente é usado quando você precisa executar uma tarefa depois que o usuário navega para um registro diferente no controle.
Pageindexchanging Ocorre quando um dos botões de paginação é clicado, mas antes que o controle DetailsView manipule a operação de paginação. Esse evento geralmente é usado para cancelar a operação de paginação.

O controle de menu

O controle Menu no ASP.NET 2.0 foi projetado para ser um sistema de navegação completo. Ele pode ser facilmente associado a dados para fontes de dados hierárquicas, como o SiteMapDataSource.

Uma estrutura de controles de menu pode ser definida declarativamente ou dinamicamente e consiste em um único nó raiz e qualquer número de sub-nós. O código a seguir define declarativamente um menu para o controle Menu.

<asp:menu id="NavigationMenu" disappearafter="2000" staticdisplaylevels="2" staticsubmenuindent="10" orientation="Vertical" font-names="Arial" target="_blank" runat="server"> <staticmenuitemstyle backcolor="LightSteelBlue" forecolor="Black"/> <statichoverstyle backcolor="LightSkyBlue"/> <dynamicmenuitemstyle backcolor="Black" forecolor="Silver"/> <dynamichoverstyle backcolor="LightSkyBlue" forecolor="Black"/> <items> <asp:menuitem navigateurl="Home.aspx" text="Home" tooltip="Home"> <asp:menuitem navigateurl="Music.aspx" text="Music" tooltip="Music"> <asp:menuitem navigateurl="Classical.aspx" text="Classical" tooltip="Classical"/> <asp:menuitem navigateurl="Rock.aspx" text="Rock" tooltip="Rock"/> <asp:menuitem navigateurl="Jazz.aspx" text="Jazz" tooltip="Jazz"/> </asp:menuitem> <asp:menuitem navigateurl="Movies.aspx" text="Movies" tooltip="Movies"> <asp:menuitem navigateurl="Action.aspx" text="Action" tooltip="Action"/> <asp:menuitem navigateurl="Drama.aspx" text="Drama" tooltip="Drama"/> <asp:menuitem navigateurl="Musical.aspx" text="Musical" tooltip="Musical"/> </asp:menuitem> </asp:menuitem> </items> </asp:menu>

No exemplo acima, o nó Home.aspx é o nó raiz. Todos os outros nós são aninhados dentro do nó raiz em vários níveis.

Há dois tipos de menus que o controle Menu pode renderizar; menus estáticos e menus dinâmicos. Os menus estáticos consistem em itens de menu que estão sempre visíveis. Os menus dinâmicos consistem em itens de menu que só ficam visíveis quando o usuário passa o mouse sobre eles. Os clientes geralmente podem confundir menus estáticos com menus definidos declarativamente e menus dinâmicos com menus que são associados a dados em runtime. Na verdade, os menus dinâmicos e estáticos não estão relacionados ao método de população. Os termos estáticos e dinâmicos referem-se apenas se o menu é exibido estaticamente por padrão ou exibido somente quando o usuário executa alguma ação.

A propriedade StaticDisplayLevels é usada para configurar quantos níveis do menu são estáticos e, portanto, exibidos por padrão. No exemplo acima, definir a propriedade StaticDisplayLevels como um valor de 2 faria com que o menu exibisse estaticamente o nó Página Inicial, o nó Música e o nó Filmes. Todos os outros nós seriam exibidos dinamicamente quando o usuário passar o mouse sobre o nó pai.

A propriedade MaximumDynamicDisplayLevels configura o número máximo de níveis dinâmicos que o menu é capaz de exibir. Todos os menus dinâmicos em um nível superior ao valor especificado pela propriedade MaximumDynamicDisplayLevels são descartados .

Observação

É quase certo que você possa encontrar situações em que os menus não parecem renderizar devido à propriedade MaximumDynamicDisplayLevels. Nesses casos, verifique se a propriedade está definida o suficiente para permitir a exibição dos menus dos clientes.

Associação de dados do controle de menu

O controle Menu pode ser associado a qualquer fonte de dados hierárquica, como SiteMapDataSource ou XMLDataSource. O SiteMapDataSource é o método mais usado para associação de dados a um controle Menu porque ele se alimenta do arquivo Web.sitemap e seu esquema fornece uma API conhecida para o controle Menu. A listagem abaixo mostra um arquivo Web.sitemap simples.

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/default.aspx" description="Our Home Page" title="Home"> <siteMapNode url="~/products/default.aspx" title="Products" description="Our Products"> <siteMapNode url="~/products/winprods.aspx" title="Windows Products" description="Windows Products" /> <siteMapNode url="~/products/webprods.aspx" title="Web Products" description="Web Products" /> </siteMapNode> <siteMapNode url="~/services/default.aspx" title="Services" description="Our Services"> <siteMapNode url="~/services/consulting.aspx" title="Consulting Services" description="Consulting Services" /> <siteMapNode url="~/services/develop.aspx" title="Development Services" description="Development Services" /> </siteMapNode> </siteMapNode> </siteMap>

Observe que há apenas um elemento raiz siteMapNode, nesse caso, o elemento Home. Vários atributos podem ser configurados para cada siteMapNode. Os atributos mais usados são:

  • Url Especifica a URL a ser exibida quando um usuário clica no item de menu. Se esse atributo não estiver presente, o nó simplesmente postará de volta quando clicado.
  • Título Especifica o texto exibido no item de menu.
  • Descrição Usado como documentação para o nó. Também é exibido como uma dica de ferramenta quando o mouse é focalizado sobre o nó.
  • Sitemapfile Permite sites aninhados. Esse atributo deve apontar para um arquivo sitemap ASP.NET bem formado.
  • Papéis Permite que a aparência de um nó seja controlada por ASP.NET corte de segurança.

Observe que, embora esses atributos sejam todos opcionais, o comportamento do menu pode não ser o esperado se eles não forem especificados. Por exemplo, se o atributo url for especificado, mas o atributo de descrição não for, o nó não ficará visível e não haverá como navegar até a URL especificada.

Controlando uma operação de menus

Há várias propriedades que afetam a operação de um controle menu ASP.NET; a propriedade Orientation , a propriedade DisappearAfter , a propriedade StaticItemFormatString e a propriedade StaticPopoutImageUrl são apenas algumas delas.

  • A Orientação pode ser definida como horizontal ou vertical e controla se os itens de menu estáticos são dispostos horizontalmente em uma linha ou verticalmente e empilhados uns sobre os outros. Essa propriedade não afeta menus dinâmicos.
  • A propriedade DisappearAfter configura por quanto tempo um menu dinâmico deve permanecer visível depois que o mouse for removido dele. O valor é especificado em milissegundos e o padrão é 500. Definir essa propriedade como um valor de -1 fará com que o menu nunca desapareça automaticamente. Nesse caso, o menu só desaparecerá quando o usuário clicar fora do menu.
  • A propriedade StaticItemFormatString facilita a manutenção de verbiage consistente em seu sistema de menus. Ao especificar essa propriedade, {0} deve ser inserido no lugar da descrição que aparece na fonte de dados. Por exemplo, para que o item de menu do exercício 1 diga Visitar Nossa Página de Produtos etc., você especificaria Visitar Nossa {0} Página para StaticItemFormatString. Em runtime, ASP.NET substituirá qualquer ocorrência de pela descrição {0} correta do item de menu.
  • A propriedade StaticPopoutImageUrl especifica a imagem usada para indicar que um nó de menu específico tem nós filho que podem ser acessados passando o mouse sobre ele. Os menus dinâmicos continuarão a usar a imagem padrão.

Controles de menu com modelo

O controle Menu é um controle de modelo e permite dois ItemTemplates diferentes; StaticItemTemplate e DynamicItemTemplate. Usando esses modelos, você pode adicionar facilmente controles de servidor ou controles de usuário aos seus menus.

Para editar os modelos no Visual Studio .NET, clique no botão Smart Tag no menu e escolha Editar Modelos. Em seguida, você pode escolher entre editar StaticItemTemplate ou DynamicItemTemplate.

Todos os controles adicionados ao StaticItemTemplate aparecerão no menu estático quando a página for carregada. Todos os controles adicionados ao DynamicItemTemplate aparecerão em todos os menus pop-up.

O controle Menu tem dois eventos que são exclusivos para ele; o MenuItemClicked e o evento MenuItemDatabound .

O evento MenuItemClicked é gerado quando um item de menu é clicado. O evento MenuItemDatabound é gerado quando um item de menu é associado a dados. O MenuEventArgs que é passado para o manipulador de eventos fornece acesso ao item de menu por meio da propriedade Item.

Controlando uma aparência de menus

Você também pode afetar a aparência de um controle de menu usando um ou mais dos muitos estilos disponíveis para formatar menus. Entre eles estão StaticMenuStyle, DynamicMenuStyle, DynamicMenuItemStyle, DynamicSelectedStyle e DynamicHoverStyle. Essas propriedades são configuradas usando uma cadeia de caracteres de estilo HTML padrão. Por exemplo, o seguinte afetará o estilo de menus dinâmicos.

<DynamicMenuStyle BorderStyle="Outset" BorderWidth="1px"
    BackColor="#D6D3CE" />

Observação

Se você estiver usando qualquer um dos estilos Hover, precisará adicionar um <elemento head> à página com o elemento runat definido como servidor.

Os controles de menu também dão suporte ao uso de temas ASP.NET 2.0.

O controle TreeView

O controle TreeView exibe dados em uma estrutura semelhante a uma árvore. Assim como acontece com o controle Menu, ele pode ser facilmente associado a qualquer fonte de dados hierárquica, como o SiteMapDataSource.

A primeira pergunta que os clientes provavelmente perguntarão sobre o controle TreeView no ASP.NET 2.0 é se ele está ou não relacionado ao TreeView IE WebControl que estava disponível para ASP.NET 1.x. Ele não é. O controle TreeView do ASP.NET 2.0 foi gravado desde o início e oferece uma melhoria significativa em relação ao IE TreeView WebControl que estava disponível anteriormente.

Não entrarei em detalhes sobre como associar um controle TreeView a um mapa do site, pois ele é executado exatamente da mesma maneira que o controle Menu. No entanto, o controle TreeView tem algumas diferenças distintas na maneira como opera.

Por padrão, um controle TreeView aparece totalmente expandido. Para alterar o nível de expansão após a carga inicial, modifique a propriedade ExpandDepth do controle. Isso é particularmente importante nos casos em que o TreeView é associado a dados ao expandir nós específicos.

DataBinding the TreeView Control

Ao contrário do controle Menu, o TreeView se presta bem a lidar com grandes quantidades de dados. Portanto, além da vinculação de dados a um SiteMapDataSource ou XMLDataSource, o TreeView geralmente é associado a um DataSet ou a outros dados relacionais. Nos casos em que o controle TreeView está associado a grandes quantidades de dados, é melhor associar somente aos dados que estão realmente visíveis no controle. Em seguida, você pode associar dados a dados adicionais à medida que os nós treeview são expandidos.

Nesses casos, a propriedade PopulateOnDemand do TreeView deve ser definida como true. Em seguida, você precisará fornecer uma implementação para o método TreeNodePopulate .

Associação de dados sem PostBack

Observe que, quando você expande um nó no exemplo anterior pela primeira vez, a página é posta novamente e é atualizada. Isso não é um problema neste exemplo, mas você pode imaginar que ele pode estar em um ambiente de produção com uma grande quantidade de dados. Um cenário melhor seria aquele em que o TreeView ainda preencheria dinamicamente seus nós, mas sem uma postagem de volta para o servidor.

Ao definir as propriedades PopulateNodesFromClient e PopulateOnDemand como true, o controle ASP.NET TreeView preencherá dinamicamente os nós sem um postback. Quando o nó pai é expandido, uma solicitação XMLHttp é feita do cliente e o evento OnTreeNodePopulate é acionado. O servidor responde com uma ilha de dados XML que, em seguida, é usada para associar dados aos nós filho.

ASP.NET cria dinamicamente o código do cliente que implementa essa funcionalidade. As <marcas de script> que contêm o script são geradas apontando para um arquivo AXD. Por exemplo, a listagem abaixo mostra os links de script para o código de script que gera a solicitação XMLHttp.

<script src="/WebSite1/WebResource.axd?d=QQG9vSdBi4_k2y9AeP_iww2&
    amp;t=632514255396426531"
    type="text/javascript"></script>

Se você navegar pelo arquivo AXD acima no navegador e abri-lo, verá o código que implementa a solicitação XMLHttp. Esse método impede que os clientes modifiquem o arquivo de script.

Controlando a operação do controle TreeView

O controle TreeView tem várias propriedades que afetam a operação do controle. As propriedades mais óbvias são ShowCheckBoxes, ShowExpandCollapse e ShowLines.

A propriedade ShowCheckBoxes afeta se os nós exibem ou não uma caixa de marcar quando renderizados. Os valores válidos para essa propriedade são None, Root, Parent, Leaf e All. Isso afeta o controle TreeView da seguinte maneira:

Valor da propriedade Efeito
Nenhum As caixas de seleção não são exibidas em nenhum nó. Essa é a configuração padrão.
Root Uma caixa de seleção só é exibida no nó raiz.
Parent Uma caixa de seleção só é exibida nos nós que têm nós filho. Esses nós filho podem ser nós pai ou nós folha.
Leaf Uma caixa de seleção é exibida somente nos nós que não têm nós filho.
Tudo Uma caixa de seleção é exibida em todos os nós.

Quando as caixas de seleção estiverem sendo usadas, a propriedade CheckedNodes retornará uma coleção de nós TreeView que são verificados após o postback.

A propriedade ShowExpandCollapse controla a aparência da imagem de expansão/recolhimento ao lado de nós raiz e pai. Se essa propriedade for definida como false, os nós TreeView serão renderizados como hiperlinks e serão expandidos/recolhidos clicando no link.

A propriedade ShowLines controla se as linhas são exibidas ou não conectando nós pai a nós filho. Quando false (o padrão), nenhuma linha é exibida. Quando true, o controle TreeView usará imagens de linhas na pasta especificada pela propriedade LineImagesFolder .

Para personalizar a aparência das linhas TreeView, o Visual Studio .NET 2005 inclui uma ferramenta de Designer de Linha. Você pode acessar essa ferramenta usando o botão Smart Tag no controle TreeView, conforme mostrado abaixo.

Uma captura de tela da ferramenta de designer de linha do Visual Studio. O cursor passa o mouse sobre a seleção Personalizar Imagens de Linha.

Figura 1

Ao selecionar a opção de menu Personalizar Imagens de Linha, a ferramenta Designer de Linha será iniciada, permitindo que você configure a aparência das linhas treeview.

Eventos TreeView

O controle TreeView tem os seguintes eventos exclusivos:

  • SelectedNodeChanged Ocorre quando um nó é selecionado com base na propriedade SelectAction .
  • TreeNodeCheckChanged Ocorre quando um estado de caixas de seleção de nós é alterado.
  • TreeNodeExpanded Ocorre quando um nó é expandido com base na propriedade SelectAction .
  • TreeNodeCollapsed Ocorre quando um nó é recolhido.
  • TreeNodeDataBound Ocorre quando um nó está associado a dados.
  • TreeNodePopulate Ocorre quando um nó é preenchido.

A propriedade SelectAction permite configurar qual evento é acionado quando um nó é selecionado. A propriedade SelectAction fornece as seguintes ações:

  • TreeNodeSelectAction.Expand gera TreeNodeExpanded quando o nó é selecionado.
  • TreeNodeSelectAction.None Não gera nenhum evento quando o nó é selecionado.
  • TreeNodeSelectAction.Select Aciona o evento SelectedNodeChanged quando o nó é selecionado.
  • TreeNodeSelectAction.SelectExpand Gera o evento SelectedNodeChanged e o evento TreeNodeExpanded quando o nó é selecionado.

Controlando a aparência com TreeView

O controle TreeView fornece muitas propriedades para controlar a aparência do controle com estilos. As propriedades a seguir estão disponíveis.

Nome da Propriedade Controles
Hovernodestyle Controla o estilo dos nós quando o mouse é focalizado sobre eles.
Leafnodestyle Controla o estilo dos nós folha.
Nodestyle Controla o estilo de todos os nós. Estilos de nó específicos (como LeafNodeStyle) substituem esse estilo.
Parentnodestyle Controla o estilo de todos os nós pai.
Rootnodestyle Controla o estilo do nó raiz.
Selectednodestyle Controla o estilo do nó selecionado.

Cada uma dessas propriedades é somente leitura. No entanto, cada um deles retornará um objeto TreeNodeStyle e as propriedades desse objeto poderão ser modificadas usando o formato property-subproperty . Por exemplo, para definir a propriedade ForeColor do SelectedNodeStyle, você usaria a seguinte sintaxe:

<asp:TreeView id=sampleTreeView
    SelectedNodeStyle-ForeColor=Blue
    runat=server>

Observe que a marca acima não está fechada. Isso ocorre porque, ao usar a sintaxe declarativa mostrada aqui, você também incluiria os nós TreeViews no código HTML.

As propriedades de estilo também podem ser especificadas no código usando o formato property.subproperty . Por exemplo, para definir a propriedade ForeColor do RootNodeStyle no código, você usaria a seguinte sintaxe:

treeView1.RootNodeStyle.ForeColor = System.Drawing.Color.Red;

Observação

Para obter uma lista abrangente das diferentes propriedades de estilo, consulte a documentação do MSDN sobre o objeto TreeNodeStyle.

O controle SiteMapPath

O controle SiteMapPath fornece um controle de navegação de migalhas de pão para desenvolvedores ASP.NET. Assim como os outros controles de navegação, eles podem ser facilmente associados a fontes de dados hierárquicas, como SiteMapDataSource ou XmlDataSource.

Um controle SiteMapPath é composto por objetos SiteMapNodeItem. Há três tipos de nós; o nó Raiz, os nós Pai e o nó Atual. O nó raiz é o nó na parte superior da estrutura hierárquica. O nó atual representa a página atual. Todos os outros nós são nós pai.

Controlando a operação do controle SiteMapPath

As propriedades que controlam a operação do controle SiteMapPath são as seguintes:

Propriedade Descrição da propriedade
ParentLevelsDisplayed Controla quantos nós pai são exibidos. O padrão é -1, que não impõe nenhuma restrição ao número de nós pai exibidos.
Pathdirection Controla a direção do SiteMapPath. Os valores válidos são RootToCurrent (padrão) e CurrentToRoot.
PathSeparator Uma String que controla o caractere que separa os nós em um controle SiteMapPath. O valor padrão é :.
Rendercurrentnodeaslink Um valor booliano que controla se o nó atual é renderizado ou não como um link. O padrão é False.
Skiplinktext Auxilia na acessibilidade quando a página é exibida pelos leitores de tela. Essa propriedade permite que os leitores de tela ignorem o controle SiteMapPath. Para desabilitar esse recurso, defina a propriedade como String.Empty.

Controles SiteMapPath com modelo

O SiteMapControl é um controle de modelo e, como tal, você pode definir modelos diferentes para uso na exibição do controle. Para editar modelos em um controle SiteMapPath, clique no botão Smart Tag no controle e escolha Editar Modelos no menu. Isso exibe o menu SiteMapTasks, conforme mostrado abaixo, em que você pode escolher entre os diferentes modelos disponíveis.

Uma captura de tela do menu do modo de edição de modelo SiteMapControl. NodeTemplate está realçado.

Figura 2

O modelo NodeTemplate refere-se a qualquer nó no SiteMapPath. Se o nó for um nó raiz ou o nó atual e um RootNodeTemplate ou CurrentNodeTemplate estiver configurado, o NodeTemplate será substituído.

Eventos SiteMapPath

O controle SiteMapPath tem dois eventos que não são derivados da classe Control; o evento ItemCreated e o evento ItemDataBound . O evento ItemCreated é gerado quando um item SiteMapPath é criado. ItemDataBound é gerado quando o método DataBind é chamado durante a associação de dados de um nó SiteMapPath. Um objeto SiteMapNodeItemEventArgs fornece acesso ao SiteMapNodeItem específico por meio da propriedade Item.

Controlando a aparência com SiteMapPath

Os estilos a seguir estão disponíveis para formatação de um controle SiteMapPath.

Nome da Propriedade Controles
Currentnodestyle Controla o estilo do texto para o nó atual.
Rootnodestyle Controla o estilo do texto para o nó raiz.
Nodestyle Controla o estilo do texto para todos os nós supondo que um CurrentNodeStyle ou RootNodeStyle não se aplique.

A propriedade NodeStyle é substituída pelo CurrentNodeStyle ou pelo RootNodeStyle. Cada uma dessas propriedades é somente leitura e retorna um objeto Style . Para afetar a aparência de um nó usando uma dessas propriedades, você precisará definir as propriedades do objeto Style que é retornado. Por exemplo, o código abaixo altera a propriedade forecolor do nó atual.

<asp:SiteMapPath runat="server" ID="SiteMapPath1"
  CurrentNodeStyle-ForeColor="Orange"/>

A propriedade também pode ser aplicada programaticamente da seguinte maneira:

this.SiteMapPath1.CurrentNodeStyle.ForeColor =
    System.Drawing.Color.Orange;

Observação

Se um modelo for aplicado, o estilo não será aplicado.

Laboratório 1: Configurando um controle de menu ASP.NET

  1. Crie um novo site.

  2. Adicione um arquivo de Mapa do Site selecionando Arquivo, Novo, Arquivo e escolhendo Mapa do Site na lista de modelos de arquivo.

  3. Abra o mapa do site (Web.sitemap por padrão) e modifique-o para que ele se pareça com a listagem abaixo. As páginas às quais você está vinculando no arquivo de mapa do site realmente não existem, mas isso não será um problema para este exercício.

    <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/default.aspx">
        <siteMapNode url="~/products/default.aspx"
          title="Products" description="Our Products">
            <siteMapNode url="~/products/winprods.aspx"
              title="Windows Products" description="Windows Products" />
            <siteMapNode url="~/products/webprods.aspx"
              title="Web Products" description="Web Products" />
        </siteMapNode>
        <siteMapNode url="~/services/default.aspx"
          title="Services" description="Our Services">
            <siteMapNode url="~/services/consulting.aspx"
              title="Consulting Services"
              description="Consulting Services" />
            <siteMapNode url="~/services/develop.aspx"
              title="Development Services"
              description="Development Services" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

  4. Abra o formulário da Web padrão no modo design.

  5. Na seção Navegação da Caixa de Ferramentas, adicione um novo controle Menu à página.

  6. Na seção Dados da Caixa de Ferramentas, adicione um novo SiteMapDataSource. O SiteMapDataSource usará automaticamente o arquivo Web.sitemap em seu site. (O arquivo Web.sitemap deve estar na pasta raiz do site.)

  7. Clique no controle Menu e, em seguida, clique no botão Marca Inteligente para exibir a caixa de diálogo Tarefas de Menu.

  8. Na lista suspensa Escolher Fonte de Dados, selecione SiteMapDataSource1.

  9. Clique no link AutoFormat e escolha um formato para o Menu.

  10. No painel Propriedades, defina a propriedade StaticDisplayLevels como 2. O controle Menu agora deve exibir o nó Página Inicial, Produtos e Serviços no Designer.

  11. Procure a página no navegador para usar o menu. (Como as páginas adicionadas ao mapa do site não existem de fato, você verá um erro ao tentar navegar até elas.)

Experimente alterar as propriedades StaticDisplayLevels e MaximumDynamicDisplayLevels e veja como elas afetam como o menu é renderizado.

Laboratório 2: Associar dinamicamente um controle TreeView

Este exercício pressupõe que você tenha SQL Server em execução localmente e que o banco de dados Northwind esteja presente na instância SQL Server. Se essas condições não forem atendidas, altere a cadeia de conexão no exemplo. Observe que talvez você também precise especificar SQL Server autenticação em vez de uma conexão confiável.

  1. Crie um novo site.

  2. Alterne para Exibição de código para Default.aspx e substitua todo o código pelo código listado abaixo.

    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">
    void PopulateNode(Object sender, TreeNodeEventArgs e) {
        // Call the appropriate method to populate a node at a particular level.
        switch (e.Node.Depth) {
            case 0:
                // Populate the first-level nodes.
                PopulateCategories(e.Node);
                break;
            case 1:
                // Populate the second-level nodes.
                PopulateProducts(e.Node);
                break;
            default:
                // Do nothing.
                break;
        }

    }
    void PopulateCategories(TreeNode node) {

        // Query for the product categories. These are the values
        // for the second-level nodes.
        DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories");
        // Create the second-level nodes.
        if (ResultSet.Tables.Count > 0) {

            // Iterate through and create a new node for each row in the query results.
            // Notice that the query results are stored in the table of the DataSet.
            foreach (DataRow row in ResultSet.Tables[0].Rows) {

                // Create the new node. Notice that the CategoryId is stored in the Value property
                // of the node. This will make querying for items in a specific category easier when
                // the third-level nodes are created.
                TreeNode newNode = new TreeNode();
                newNode.Text = row["CategoryName"].ToString();
                newNode.Value = row["CategoryID"].ToString();
                // Set the PopulateOnDemand property to true so that the child nodes can be
                // dynamically populated.
                newNode.PopulateOnDemand = true;

                // Set additional properties for the node.
                newNode.SelectAction = TreeNodeSelectAction.Expand;

                // Add the new node to the ChildNodes collection of the parent node.
                node.ChildNodes.Add(newNode);

            }

        }

    }
    void PopulateProducts(TreeNode node) {
        // Query for the products of the current category. These are the values
        // for the third-level nodes.
        DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value);
        // Create the third-level nodes.
        if (ResultSet.Tables.Count > 0) {

            // Iterate through and create a new node for each row in the query results.
            // Notice that the query results are stored in the table of the DataSet.
            foreach (DataRow row in ResultSet.Tables[0].Rows) {

                // Create the new node.
                TreeNode NewNode = new TreeNode(row["ProductName"].ToString());

                // Set the PopulateOnDemand property to false, because these are leaf nodes and
                // do not need to be populated.
                NewNode.PopulateOnDemand = false;

                // Set additional properties for the node.
                NewNode.SelectAction = TreeNodeSelectAction.None;

                // Add the new node to the ChildNodes collection of the parent node.
                node.ChildNodes.Add(NewNode);

            }

        }
    }
    DataSet RunQuery(String QueryString) {
        // Declare the connection string. This example uses Microsoft SQL Server
        // and connects to the Northwind sample database.
        String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI";
        SqlConnection DBConnection = new SqlConnection(ConnectionString);
        SqlDataAdapter DBAdapter;
        DataSet ResultsDataSet = new DataSet();
        try {
            // Run the query and create a DataSet.
            DBAdapter = new SqlDataAdapter(QueryString, DBConnection);
            DBAdapter.Fill(ResultsDataSet);
            // Close the database connection.
            DBConnection.Close();
        } catch (Exception ex) {
            // Close the database connection if it is still open.
            if (DBConnection.State == ConnectionState.Open) {
                DBConnection.Close();
            }

            Message.Text = "Unable to connect to the database.";
        }
        return ResultsDataSet;
    }
</script>

<html>
<body>
    <form id="Form1" runat="server">
        <h3>
            TreeView PopulateNodesFromClient Example</h3>
        <asp:TreeView ID="LinksTreeView" 
          Font-Name="Arial" ForeColor="Blue" EnableClientScript="true"
          PopulateNodesFromClient="false" 
          OnTreeNodePopulate="PopulateNode" runat="server"
            ExpandDepth="0">
            <Nodes>
                <asp:TreeNode Text="Inventory" SelectAction="Expand"
                              PopulateOnDemand="True" Value="Inventory" />
            </Nodes>
        </asp:TreeView>
        <br>
        <br>
        <asp:Label ID="Message" runat="server" />
    </form>
</body>
</html>

  3. Salve a página como treeview.aspx.

  4. Navegue pela página.

  5. Quando a página for exibida pela primeira vez, exiba a origem da página no navegador. Observe que apenas os nós visíveis foram enviados ao cliente.

  6. Clique no sinal de adição ao lado de qualquer nó.

  7. Exibir a origem na página novamente. Observe que os nós exibidos recentemente agora estão presentes.

Laboratório 3: Exibir detalhes e editar dados usando gridView e DetailsView

  1. Crie um novo site.

  2. Adicione um novo web.config ao site.

  3. Adicione uma cadeia de conexão ao arquivo web.config, conforme mostrado abaixo:

    <connectionStrings>
    <add name="Northwind"
         providerName="System.Data.SqlClient"
         connectionString="Data Source=localhost;Integrated Security=SSPI;
         Initial Catalog=Northwind;"/>
</connectionStrings>

    Observação

    Talvez seja necessário alterar a cadeia de conexão com base em seu ambiente.

  4. Salve e feche o arquivo web.config.

  5. Abra Default.aspx e adicione um novo controle SqlDataSource.

  6. Altere a ID do controle SqlDataSource para Produtos.

  7. No menu Tarefas do SqlDataSource , clique em Configurar Fonte de Dados.

  8. Selecione Northwind na lista suspensa de conexão e clique em Avançar.

  9. Selecione Produtos na lista suspensa Nome e marcar as caixas de seleção ProductID, ProductName, UnitPrice e UnitsInStock, conforme mostrado abaixo.

Uma captura de tela da tela configurar produtos de fonte de dados.

Figura 3

  1. Clique em Próximo.
  2. Clique em Concluir.
  3. Alterne para Exibição de origem e examine o código que foi gerado. Observe o SelectCommand, DeleteCommand, InsertCommand e UpdateCommand que foram adicionados ao controle SqlDataSource. Observe também os parâmetros que foram adicionados.
  4. Alterne para o modo design e adicione um novo controle GridView à página.
  5. Selecione Produtos na lista suspensa Escolher Fonte de Dados .
  6. Verifique Habilitar Paginação e Habilitar Seleção , conforme mostrado abaixo.

Uma captura de tela do menu Tarefas gridview.

Figura 4

  1. Clique no link Editar Colunas e verifique se os campos de geração automática estão marcados.
  2. Clique em OK.
  3. Com o controle GridView selecionado, clique no botão ao lado da propriedade DataKeyNames no painel Propriedades.
  4. Selecione ProductID na lista Campos de dados disponíveis e clique no > botão para adicioná-lo.
  5. Clique em OK.
  6. Adicione um novo controle SqlDataSource à página.
  7. Altere a ID do controle SqlDataSource para Detalhes.
  8. No menu Tarefas sqlDataSource, escolha Configurar Fonte de Dados.
  9. Escolha Northwind na lista suspensa e clique em Avançar.
  10. Selecione Produtos na lista suspensa Nome e marcar caixa de seleção </strong>* na caixa de listagem Colunas.
  11. Clique no botão WHERE .
  12. Selecione ProductID na lista suspensa Coluna .
  13. Selecione = na lista suspensa Operador.
  14. Selecione Controle na lista suspensa Origem .
  15. Selecione GridView1 na lista suspensa ID de Controle .
  16. Clique no botão Adicionar para adicionar a cláusula WHERE.
  17. Clique em OK.
  18. Clique no botão Avançado e marcar caixa de seleção Gerar instruções INSERT, UPDATE e DELETE.
  19. Clique em OK.
  20. Clique em Avançar e clique em Concluir.
  21. Adicione um controle DetailsView à página.
  22. Na lista suspensa Escolher Fonte de Dados , escolha Detalhes.
  23. Marque a caixa de seleção Habilitar Edição , conforme mostrado abaixo.

Uma captura de tela do menu Tarefas DetailsView.

Figura 5 39. Salve a página e navegue por Default.aspx. 40. Clique no link Selecionar ao lado de registros diferentes para ver a atualização DetailsView automaticamente. 41. Clique no link Editar no controle DetailsView. 42. Faça uma alteração no registro e clique em Atualizar.