Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
por Scott Mitchell
Ao contrário do DetailsView, o FormView não é composto de campos. Em vez disso, o FormView é renderizado usando modelos. Neste tutorial, examinaremos o uso do controle FormView para apresentar uma exibição menos rígida de dados.
Introdução
Nos dois últimos tutoriais, vimos como personalizar as saídas dos controles GridView e DetailsView usando TemplateFields. TemplateFields permite que o conteúdo de um campo específico seja altamente personalizado, mas, no final, tanto o GridView quanto o DetailsView têm uma aparência bastante boxy e semelhante a uma grade. Para muitos cenários, esse layout semelhante a uma grade é ideal, mas às vezes é necessário um display mais fluido e menos rígido. Ao exibir um único registro, esse layout fluido é possível usando o controle FormView.
Ao contrário do DetailsView, o FormView não é composto de campos. Não é possível adicionar um BoundField ou TemplateField a um FormView. Em vez disso, o FormView é renderizado usando modelos. Pense no FormView como um controle DetailsView que contém um único TemplateField. O FormView suporta os seguintes modelos:
-
ItemTemplateusado para renderizar o registro específico exibido no FormView -
HeaderTemplateusado para especificar uma linha de cabeçalho opcional -
FooterTemplateusado para especificar uma linha de rodapé opcional -
EmptyDataTemplatequando o FormView não tem registrosDataSource, oEmptyDataTemplateé usado no lugar doItemTemplatepara renderizar a marcação do controle -
PagerTemplatepode ser usado para personalizar a interface de paginação para FormViews que têm a paginação habilitada -
EditItemTemplate/InsertItemTemplateusado para personalizar a interface de edição ou inserir interface para FormViews que suportam tal funcionalidade
Neste tutorial, examinaremos o uso do controle FormView para apresentar uma exibição menos rígida de produtos. Em vez de ter campos para o nome, categoria, fornecedor e assim por diante, o FormView mostrará ItemTemplate esses valores usando uma combinação de um elemento de cabeçalho e um <table> (consulte a Figura 1).
Figura 1: O FormView quebra o layout Grid-Like visto no DetailsView (Clique para exibir a imagem em tamanho real)
Etapa 1: Vinculando os dados ao FormView
Abra a FormView.aspx página e arraste um FormView da Caixa de Ferramentas para o Designer. Ao adicionar o FormView pela primeira vez, ele aparece como uma caixa cinza, instruindo-nos que um ItemTemplate é necessário.
Figura 2: O FormView não pode ser renderizado no Designer até que um ItemTemplate seja fornecido (Clique para exibir a imagem em tamanho real)
O ItemTemplate pode ser criado manualmente (por meio da sintaxe declarativa) ou pode ser criado automaticamente vinculando o FormView a um controle de fonte de dados por meio do Designer. Essa criação ItemTemplate automática contém HTML que lista o nome de cada campo e um controle Label cuja Text propriedade está vinculada ao valor do campo. Essa abordagem também cria automaticamente um InsertItemTemplate e EditItemTemplate, ambos são preenchidos com controles de entrada para cada um dos campos de dados retornados pelo controle da fonte de dados.
Caso pretenda criar automaticamente o modelo, a partir da marca inteligente do FormView, adicione um novo controlo ObjectDataSource que invoca o método ProductsBLL da classe GetProducts(). Isso criará um FormView com um ItemTemplate, InsertItemTemplatee EditItemTemplate. Na visualização Código-fonte, remova o InsertItemTemplate e EditItemTemplate já que ainda não estamos interessados em criar um FormView que ofereça suporte à edição ou inserção. Em seguida, limpe a marcação dentro do ItemTemplate para que possamos começar do zero.
Se preferir criar o ItemTemplate manualmente, você pode adicionar e configurar o ObjectDataSource arrastando-o da Caixa de Ferramentas para o Designer. No entanto, não defina a fonte de dados do FormView do Designer. Em vez disso, aceda à vista Fonte e defina manualmente a propriedade DataSourceID do FormView para o valor ID de ObjectDataSource. Em seguida, adicione manualmente o ItemTemplate.
Independentemente da abordagem que você decidiu adotar, neste ponto a marcação declarativa do seu FormView deve se parecer com:
<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
<ItemTemplate>
</ItemTemplate>
</asp:FormView>
Reserve um momento para marcar a caixa de seleção Ativar paginação na marca inteligente do FormView; isso adicionará o AllowPaging="True" atributo à sintaxe declarativa do FormView. Além disso, defina a EnableViewState propriedade como False.
Etapa 2: Defina a marcação doItemTemplate
Com o FormView vinculado ao controle ObjectDataSource e configurado para oferecer suporte à paginação, estamos prontos para especificar o conteúdo para o ItemTemplate. Para este tutorial, vamos exibir o nome do produto em um <h3> cabeçalho. Depois disso, vamos usar um HTML <table> para exibir as propriedades restantes do produto em uma tabela de quatro colunas, onde a primeira e a terceira colunas listam os nomes das propriedades e a segunda e quarta listam seus valores.
Essa marcação pode ser inserida por meio da interface de edição de modelo do FormView no Designer ou inserida manualmente por meio da sintaxe declarativa. Ao trabalhar com modelos, normalmente acho mais rápido trabalhar diretamente com a sintaxe declarativa, mas sinta-se à vontade para usar qualquer técnica com a qual você se sinta mais confortável.
A marcação a seguir mostra a marcação declarativa FormView após a conclusão da estrutura de ItemTemplate:
<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
AllowPaging="True" EnableViewState="False">
<ItemTemplate>
<hr />
<h3><%# Eval("ProductName") %></h3>
<table border="0">
<tr>
<td class="ProductPropertyLabel">Category:</td>
<td class="ProductPropertyValue">
<%# Eval("CategoryName") %></td>
<td class="ProductPropertyLabel">Supplier:</td>
<td class="ProductPropertyValue">
<%# Eval("SupplierName")%></td>
</tr>
<tr>
<td class="ProductPropertyLabel">Price:</td>
<td class="ProductPropertyValue"><%# Eval("UnitPrice",
"{0:C}") %></td>
<td class="ProductPropertyLabel">Units In Stock:</td>
<td class="ProductPropertyValue">
<%# Eval("UnitsInStock")%></td>
</tr>
<tr>
<td class="ProductPropertyLabel">Units On Order:</td>
<td class="ProductPropertyValue">
<%# Eval("UnitsOnOrder") %></td>
<td class="ProductPropertyLabel">Reorder Level:</td>
<td class="ProductPropertyValue">
<%# Eval("ReorderLevel")%></td>
</tr>
<tr>
<td class="ProductPropertyLabel">Qty/Unit</td>
<td class="ProductPropertyValue">
<%# Eval("QuantityPerUnit") %></td>
<td class="ProductPropertyLabel">Discontinued:</td>
<td class="ProductPropertyValue">
<asp:CheckBox runat="server" Enabled="false"
Checked='<%# Eval("Discontinued") %>' />
</td>
</tr>
</table>
<hr />
</ItemTemplate>
</asp:FormView>
Observe que a sintaxe de vinculação de dados - <%# Eval("ProductName") %>, por exemplo, pode ser injetada diretamente na saída do modelo. Ou seja, ele não precisa ser atribuído à propriedade Text de um controlo Label. Por exemplo, temos o ProductName valor exibido em um elemento <h3> usando <h3><%# Eval("ProductName") %></h3>, que para o produto Chai será renderizado como <h3>Chai</h3>.
As ProductPropertyLabel classes e ProductPropertyValue CSS são usadas para especificar o estilo dos nomes e valores de propriedade do produto no <table>. Essas classes CSS são definidas em Styles.css e fazem com que os nomes de propriedade fiquem a negrito e alinhados à direita e adicionem um preenchimento à direita aos valores de propriedade.
Como não há CheckBoxFields disponíveis com o FormView, para mostrar o Discontinued valor como uma caixa de seleção, devemos adicionar nosso próprio controle CheckBox. A propriedade Enabled é definida para Falso, tornando-a somente leitura, e a propriedade Checked do CheckBox está vinculada ao valor do campo de dados Discontinued.
Com o ItemTemplate completo, as informações do produto são exibidas de uma forma muito mais fluida. Compare a saída DetailsView do último tutorial (Figura 3) com a saída gerada pelo FormView neste tutorial (Figura 4).
Figura 3: A saída Rigid DetailsView (Clique para visualizar a imagem em tamanho real)
Figura 4: A saída do Fluid FormView (Clique para visualizar a imagem em tamanho real)
Resumo
Embora os controlos GridView e DetailsView possam ter a sua saída personalizada usando TemplateFields, ambos ainda apresentam os seus dados num formato semelhante a uma grade, em caixas. Para aqueles momentos em que um único registro precisa ser mostrado usando um layout menos rígido, o FormView é uma escolha ideal. Como o DetailsView, o FormView renderiza um único registro de seu DataSource, mas, ao contrário do DetailsView, ele é composto apenas de modelos e não suporta campos.
Como vimos neste tutorial, o FormView permite um layout mais flexível ao exibir um único registro. Em tutoriais futuros, examinaremos os controles DataList e Repeater, que fornecem o mesmo nível de flexibilidade que o FormsView, mas são capazes de exibir vários registros (como o GridView).
Feliz Programação!
Sobre o Autor
Scott Mitchell, autor de sete livros sobre ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias Web da Microsoft desde 1998. Scott trabalha como consultor, formador e escritor independente. Seu último livro é Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Ele pode ser contatado em mitchell@4GuysFromRolla.com.
Um agradecimento especial a
Esta série de tutoriais foi revisada por muitos revisores úteis. O revisor principal deste tutorial foi E.R. Gilmore. Interessado em rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.