Partilhar via


Personalizando a interface de modificação de dados (VB)

por Scott Mitchell

Descarregar PDF

Neste tutorial, veremos como personalizar a interface de um GridView editável, substituindo os controles padrão TextBox e CheckBox por controles Web de entrada alternativos.

Introdução

Os BoundFields e CheckBoxFields usados pelos controles GridView e DetailsView simplificam o processo de modificação de dados devido à sua capacidade de renderizar interfaces somente leitura, editáveis e inseríveis. Essas interfaces podem ser renderizadas sem a necessidade de adicionar qualquer marcação declarativa ou código adicional. No entanto, as interfaces BoundField e CheckBoxField não têm a capacidade de personalização frequentemente necessária em cenários do mundo real. Para personalizar a interface editável ou inserível em um GridView ou DetailsView, precisamos usar um TemplateField.

No tutorial anterior , vimos como personalizar as interfaces de modificação de dados adicionando controles Web de validação. Neste tutorial, veremos como personalizar os controles da Web de coleta de dados reais, substituindo os controles TextBox e CheckBox padrão de BoundField e CheckBoxField por controles Web de entrada alternativos. Em particular, criaremos um GridView editável que permite que o nome, a categoria, o fornecedor e o status descontinuado de um produto sejam atualizados. Ao editar uma linha específica, os campos de categoria e fornecedor serão renderizados como DropDownLists, contendo o conjunto de categorias e fornecedores disponíveis para escolher. Além disso, substituiremos a CheckBox padrão do CheckBoxField por um controle RadioButtonList que oferece duas opções: "Ativo" e "Descontinuado".

A interface de edição do GridView inclui DropDownLists e RadioButtons

Figura 1: A interface de edição do GridView inclui DropDownLists e RadioButtons (Clique para visualizar a imagem em tamanho real)

Passo 1: Criar a sobrecarga apropriadaUpdateProduct

Neste tutorial, criaremos um GridView editável que permite a edição do nome, categoria, fornecedor e status descontinuado de um produto. Portanto, precisamos de uma UpdateProduct sobrecarga que aceite cinco parâmetros de entrada: os quatro valores de produto e o ProductID. Como em nossas sobrecargas anteriores, este irá:

  1. Recupere as informações do produto da base de dados para o ProductID especificado.
  2. Atualize os ProductName, CategoryID, SupplierID e Discontinued campos,
  3. Envie a solicitação de atualização para a DAL através do método do TableAdapter Update() .

Por uma questão de brevidade, para esta sobrecarga em particular, omiti a verificação de regras de negócio que garante que um produto marcado como descontinuado não é o único produto oferecido pelo seu fornecedor. Sinta-se à vontade para adicioná-lo, se preferir, ou, idealmente, refatorar a lógica para um método separado.

O código a seguir mostra a nova UpdateProduct sobrecarga na ProductsBLL classe:

<System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, False)>
Public Function UpdateProduct(
    ByVal productName As String, ByVal categoryID As Nullable(Of Integer), 
    ByVal supplierID As Nullable(Of Integer), ByVal discontinued As Boolean, 
    ByVal productID As Integer)
    As Boolean
    Dim products As Northwind.ProductsDataTable = Adapter.GetProductByProductID(productID)
    If products.Count = 0 Then
        Return False
    End If
    Dim product As Northwind.ProductsRow = products(0)
    product.ProductName = productName
    If Not supplierID.HasValue Then
        product.SetSupplierIDNull()
    Else
        product.SupplierID = supplierID.Value
    End If
    If Not categoryID.HasValue Then
        product.SetCategoryIDNull()
    Else
        product.CategoryID = categoryID.Value
    End If
    product.Discontinued = discontinued
    Dim rowsAffected As Integer = Adapter.Update(product)
    Return rowsAffected = 1
End Function

Etapa 2: Criando o GridView editável

Com a UpdateProduct sobrecarga adicionada, estamos prontos para criar nosso GridView editável. Abra a página CustomizedUI.aspx na pasta EditInsertDelete e adicione um controlo GridView ao Designer. Em seguida, crie um novo ObjectDataSource a partir do smart tag do GridView. Configure o ObjectDataSource para recuperar informações do produto através do método ProductBLL da classe GetProducts() e para atualizar os dados do produto usando a sobrecarga UpdateProduct que acabámos de criar. Nas guias INSERIR e EXCLUIR, selecione (Nenhum) nas listas suspensas.

Configure o ObjectDataSource para usar o método sobrecarregado UpdateProduct que foi recém-criado

Figura 2: Configurar o ObjectDataSource para usar a sobrecarga UpdateProduct imagem em tamanho real)

Como vimos ao longo dos tutoriais de modificação de dados, a sintaxe declarativa para o ObjectDataSource criado pelo Visual Studio atribui a OldValuesParameterFormatString propriedade a original_{0}. Isso, é claro, não funcionará com nossa camada de lógica de negócios, já que nossos métodos não esperam que o valor original ProductID seja passado. Portanto, como fizemos em tutoriais anteriores, reserve um momento para remover essa atribuição de propriedade da sintaxe declarativa ou, em vez disso, defina o valor dessa propriedade como {0}.

Após essa alteração, a marcação declarativa de ObjectDataSource deve ter a seguinte aparência:

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL"
    UpdateMethod="UpdateProduct">
    <UpdateParameters>
        <asp:Parameter Name="productName" Type="String" />
        <asp:Parameter Name="categoryID" Type="Int32" />
        <asp:Parameter Name="supplierID" Type="Int32" />
        <asp:Parameter Name="discontinued" Type="Boolean" />
        <asp:Parameter Name="productID" Type="Int32" />
    </UpdateParameters>
</asp:ObjectDataSource>

Observe que a OldValuesParameterFormatString propriedade foi removida e que há um Parameter na coleção UpdateParameters para cada um dos parâmetros de entrada esperados pela nossa UpdateProduct sobrecarga.

Enquanto o ObjectDataSource está configurado para atualizar apenas um subconjunto de valores de produto, o GridView atualmente mostra todos os campos do produto. Reserve um momento para editar o GridView para que:

  • Inclui apenas o ProductName, SupplierName, CategoryName BoundFields e o Discontinued CheckBoxField
  • Os campos CategoryName e SupplierName devem aparecer antes (à esquerda de) do Discontinued CheckBoxField
  • A propriedade CategoryName dos SupplierName e HeaderText BoundFields está definida como "Category" e "Supplier", respectivamente
  • O suporte à edição está ativado (marque a caixa de seleção Ativar edição na marca inteligente do GridView)

Após essas alterações, o Designer será semelhante à Figura 3, com a sintaxe declarativa do GridView mostrada abaixo.

Remover os campos desnecessários do GridView

Figura 3: Remover os campos desnecessários do GridView (Clique para visualizar a imagem em tamanho real)

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="ProductName"
           HeaderText="ProductName" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
           ReadOnly="True"
           SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
           ReadOnly="True"
           SortExpression="SupplierName" />
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

Neste ponto, a funcionalidade de somente leitura do GridView está completa. Ao visualizar os dados, cada produto é renderizado como uma linha no GridView, mostrando o nome, a categoria, o fornecedor e o status descontinuado do produto.

A interface Read-Only do GridView está completa

Figura 4: A interface Read-Only do GridView está concluída (Clique para visualizar a imagem em tamanho real)

Observação

Conforme discutido no tutorial Visão geral da inserção, atualização e exclusão de dados, é de vital importância que o estado de exibição do GridView seja habilitado (o comportamento padrão). Se você definir a propriedade s EnableViewState de GridView como false, corre o risco de ter usuários simultâneos excluindo ou editando registros involuntariamente.

Etapa 3: Usando um DropDownList para as interfaces de edição de categoria e fornecedor

Lembre-se de que o ProductsRow objeto contém CategoryID, CategoryName, SupplierIDe SupplierName propriedades, que fornecem os valores reais de ID de chave estrangeira na Products tabela do banco de dados e os valores correspondentes Name nas Categories tabelas e Suppliers . As propriedades ProductRow e CategoryID podem ser lidas e gravadas, enquanto as propriedades SupplierID e CategoryName são marcadas como somente leitura.

Devido ao status somente leitura das propriedades CategoryName e SupplierName, os BoundFields correspondentes tiveram a sua propriedade ReadOnly definida como True, impedindo que esses valores sejam modificados quando uma linha é editada. Embora possamos definir a ReadOnly propriedade como False, renderizando os BoundFields CategoryName e SupplierName como TextBoxes durante a edição, essa abordagem resultará em uma exceção quando o utilizador tentar atualizar o produto, uma vez que não há uma sobrecarga de UpdateProduct que aceite entradas de CategoryName e SupplierName. Na verdade, não queremos criar tal sobrecarga por dois motivos:

  • A tabela Products não tem campos SupplierName ou CategoryName, mas SupplierID e CategoryID. Portanto, queremos que o nosso método receba esses valores de ID específicos, não os valores de suas tabelas de pesquisa.
  • Exigir que o usuário digite o nome do fornecedor ou categoria não é o ideal, pois exige que o usuário conheça as categorias e fornecedores disponíveis e suas grafias corretas.

Os campos fornecedor e categoria devem exibir a categoria e os nomes dos fornecedores quando estiverem no modo somente leitura (como acontece agora) e uma lista suspensa de opções aplicáveis ao serem editados. Usando uma lista suspensa, o usuário final pode ver rapidamente quais categorias e fornecedores estão disponíveis para escolher e pode fazer sua seleção mais facilmente.

Para fornecer esse comportamento, precisamos converter os SupplierName e CategoryName BoundFields em TemplateFields cujos ItemTemplate emitem os valores SupplierName e CategoryName e cujo EditItemTemplate usa um controlo DropDownList para listar as categorias e fornecedores disponíveis.

Adicionando asCategorieseSupplierslistas suspensas

Comece convertendo o SupplierName e CategoryName BoundFields em TemplateFields clicando no link Edit Columns da marca inteligente do GridView, selecionando o BoundField na lista no canto inferior esquerdo e clicando no link "Converter este campo em um TemplateField". O processo de conversão criará um TemplateField com um ItemTemplate e um EditItemTemplate, conforme mostrado na sintaxe declarativa abaixo:

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
    <EditItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Eval("CategoryName") %>'></asp:Label>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("CategoryName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Como o BoundField foi marcado como somente leitura, ambos os ItemTemplate e EditItemTemplate contêm um controle Web Label cuja Text propriedade está vinculada ao campo de dados aplicável (CategoryName, na sintaxe acima). Precisamos modificar o EditItemTemplate, substituindo o controle Label Web por um controle DropDownList.

Como vimos em tutoriais anteriores, o modelo pode ser editado através do Designer ou diretamente da sintaxe declarativa. Para editá-lo através do Designer, clique no link Editar Modelos da marca inteligente do GridView e escolha trabalhar com o EditItemTemplate do campo Categoria. Remova o controle Label Web e substitua-o por um controle DropDownList, definindo a propriedade ID do DropDownList como Categories.

Remova o TexBox e adicione um DropDownList ao EditItemTemplate

Figura 5: Remova a Caixa de Texto e adicione uma Lista de Opções ao EditItemTemplate (Clique para visualizar a imagem em tamanho real)

Em seguida, precisamos preencher o DropDownList com as categorias disponíveis. Clique no link "Choose Data Source" da etiqueta inteligente do DropDownList e opte por criar um novo ObjectDataSource chamado CategoriesDataSource.

Criar um novo controle ObjectDataSource chamado CategoriesDataSource

Figura 6: Criar um novo controle ObjectDataSource nomeado CategoriesDataSource (Clique para visualizar a imagem em tamanho real)

Para que esse ObjectDataSource retorne todas as categorias, vincule-o CategoriesBLL ao método da GetCategories() classe.

Vincular o ObjectDataSource ao método GetCategories() da CategoriesBLL

Figura 7: Vincular o ObjectDataSource ao método do CategoriesBLL (GetCategories() imagem em tamanho real)

Finalmente, configure as configurações do DropDownList para que o CategoryName campo seja exibido em cada DropDownList ListItem com o CategoryID campo usado como o valor.

Ter o campo CategoryName exibido e o CategoryID usado como o valor

Figura 8: Tenha o campo CategoryName exibido e use CategoryID como valor (Clique para ver a imagem em tamanho real)

Depois de fazer essas alterações, a marcação declarativa para o EditItemTemplate no CategoryName TemplateField incluirá um DropDownList e um ObjectDataSource:

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
    <EditItemTemplate>
        <asp:DropDownList ID="Categories" runat="server"
          DataSourceID="CategoriesDataSource"
          DataTextField="CategoryName" DataValueField="CategoryID">
        </asp:DropDownList>
        <asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
            OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetCategories" TypeName="CategoriesBLL">
        </asp:ObjectDataSource>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("CategoryName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Observação

O DropDownList no EditItemTemplate deve ter seu estado de exibição habilitado. Em breve, adicionaremos sintaxe de vinculação de dados à sintaxe declarativa e aos comandos de vinculação de dados do DropDownList como Eval() e Bind() só podem aparecer em controles cujo estado de exibição está habilitado.

Repita estas etapas para adicionar um DropDownList com o nome Suppliers ao SupplierName do EditItemTemplate TemplateField. Isso envolverá a adição de um DropDownList ao EditItemTemplate e a criação de outro ObjectDataSource. O Suppliers ObjectDataSource do DropDownList, no entanto, deve ser configurado para invocar o SuppliersBLL método da GetSuppliers() classe. Além disso, configure o Suppliers DropDownList para exibir o campo CompanyName e utilizar o campo SupplierID como o valor para os seus ListItem.

Depois de adicionar as DropDownLists aos dois EditItemTemplate s, carregue a página num navegador e clique no botão Editar para o produto Tempero Cajun de Chef Anton. Como mostra a Figura 9, as colunas de categoria e fornecedor do produto são renderizadas como listas suspensas contendo as categorias e fornecedores disponíveis para escolher. No entanto, note que os primeiros itens em ambas as listas suspensas são selecionados por padrão (Bebidas para a categoria e Líquidos Exóticos como fornecedor), embora o Tempero Cajun do Chef Anton seja um Condimento fornecido pela New Orleans Cajun Delights.

O primeiro item nas listas de Drop-Down é selecionado por padrão

Figura 9: O primeiro item nas listas de Drop-Down é selecionado por padrão (Clique para visualizar a imagem em tamanho real)

Além disso, se clicar em Atualizar, verá que os valores CategoryID e SupplierID do produto estão definidos como NULL. Ambos os comportamentos indesejados são causados porque as DropDownLists no EditItemTemplate s não estão vinculadas a nenhum campo de dados dos dados do produto subjacente.

Vinculando as Listas Suspensas aosCategoryIDcampos eSupplierIDDados

Para que as listas suspensas de categoria e fornecedor do produto editado sejam definidas com os valores apropriados, e para que esses valores sejam enviados de volta para o método UpdateProduct da BLL ao clicar em Atualizar, precisamos vincular as propriedades SelectedValue das listas suspensas aos dados nos campos CategoryID e SupplierID usando a vinculação bidirecional de dados. Para fazer isso com o Categories DropDownList, você pode adicionar SelectedValue='<%# Bind("CategoryID") %>' diretamente à sintaxe declarativa.

Como alternativa, pode-se definir as ligações de dados do DropDownList editando o modelo no Designer e clicando no link Editar Ligações de Dados da etiqueta inteligente do DropDownList. Em seguida, indique que a SelectedValue propriedade deve ser associada ao CategoryID campo usando ligação de dados bidirecional (consulte a Figura 10). Repita o processo declarativo ou de design para vincular o campo de dados SupplierID à lista DropDown Suppliers.

Vincular o CategoryID à propriedade SelectedValue do DropDownList usando Two-Way Databinding

Figura 10: Vincular o CategoryID à propriedade do SelectedValue DropDownList usando Two-Way Databinding (Clique para visualizar a imagem em tamanho real)

Depois que as associações tiverem sido aplicadas às SelectedValue propriedades das duas DropDownLists, as colunas de categoria e fornecedor do produto editado serão padronizadas para os valores do produto atual. Ao clicar em Atualizar, os valores de CategoryID e SupplierID do item da lista suspensa selecionado serão passados para o método UpdateProduct. A Figura 11 apresenta o tutorial após a adição das instruções de vinculação de dados; note como os itens da lista suspensa selecionados para o Tempero Cajun do Chef Anton são corretamente "Condiment" e "New Orleans Cajun Delights".

A categoria atual do produto editado e os valores do fornecedor são selecionados por padrão

Figura 11: A categoria atual do produto editado e os valores do fornecedor são selecionados por padrão (Clique para visualizar a imagem em tamanho real)

Manipulação deNULLvalores

As CategoryID colunas e SupplierID na Products tabela podem ser NULL, mas as DropDownLists no EditItemTemplate s não incluem um item de lista para representar um NULL valor. Isto tem duas consequências:

  • O utilizador não pode utilizar a nossa interface para alterar a categoria ou fornecedor de um produto de um valor não especificado para um valor especificado.
  • Se um produto tiver um NULLCategoryID ou SupplierID, clicar no botão Editar resultará em uma exceção. Isso ocorre porque o valor retornado por NULL (ou CategoryID) na instrução SupplierID não é mapeado para um valor na DropDownList (a DropDownList lança uma exceção quando sua propriedade Bind() é definida com um valor SelectedValue está em sua coleção de itens de lista).

Para dar suporte aos valores NULL, CategoryID e SupplierID, precisamos adicionar outro ListItem a cada DropDownList para representar o valor NULL. No tutorial Master/Detail Filtering With a DropDownList, vimos como adicionar um item extra ListItem a um DropDownList vinculado a dados, o que envolvia definir a propriedade AppendDataBoundItems do DropDownList para True e adicionar manualmente o ListItem. Nesse tutorial anterior, no entanto, adicionamos um ListItem com um Value de -1. A lógica de vinculação de dados no ASP.NET, no entanto, converterá automaticamente uma cadeia de caracteres em branco em um NULL valor e vice-versa. Portanto, para este tutorial, queremos que a cadeia ListItem de Value seja vazia.

Comece definindo a propriedade de AppendDataBoundItems DropDownList como True. Em seguida, adicione o NULLListItem adicionando o seguinte <asp:ListItem> elemento a cada DropDownList para que a marcação declarativa se pareça com:

<asp:DropDownList ID="Categories" runat="server"
    DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
    DataValueField="CategoryID" SelectedValue='<%# Bind("CategoryID") %>'
    AppendDataBoundItems="True">
    <asp:ListItem Value="">(None)</asp:ListItem>
</asp:DropDownList>

Eu escolhi usar "(Nenhum)" como o valor de texto para isso ListItem, mas você pode alterá-lo para também ser uma cadeia de caracteres em branco, se desejar.

Observação

Como vimos no tutorial Master/Detail Filtering With a DropDownList, ListItem s podem ser adicionados a um DropDownList através do Designer clicando na propriedade do Items DropDownList na janela de Propriedades (que exibirá o Editor de Coleção ListItem). No entanto, certifique-se de adicionar o NULLListItem para este tutorial através da sintaxe declarativa. Se utilizar o Editor de Coleções ListItem, a sintaxe declarativa gerada omitirá completamente a configuração Value quando uma cadeia de caracteres vazia for atribuída, criando um código declarativo como: <asp:ListItem>(None)</asp:ListItem>. Embora isso possa parecer inofensivo, o valor ausente faz com que o DropDownList use o valor da Text propriedade em seu lugar. Isso significa que, se este NULLListItem for selecionado, tentará atribuir o valor "(Nenhum)" ao CategoryID, o que resultará em uma exceção. Ao definir Value="" explicitamente, será atribuído um valor NULL a CategoryID quando NULLListItem for selecionado.

Repita estas etapas para a lista suspensa Fornecedores.

Com este ListItem adicional, a interface de edição agora pode atribuir valores aos campos NULL e CategoryID de um produto, como mostra a Figura 12.

Escolha (Nenhum) para atribuir um valor NULL para a categoria ou fornecedor de um produto

Figura 12: Escolha (Nenhum) para atribuir um NULL valor para a categoria ou fornecedor de um produto (Clique para visualizar a imagem em tamanho real)

Etapa 4: Usando RadioButtons para o status descontinuado

Atualmente, o campo de dados dos Discontinued produtos é apresentado usando um CheckBoxField, que exibe uma caixa de seleção desativada para as linhas de leitura apenas e uma caixa de seleção ativada para a linha que está a ser editada. Embora essa interface de usuário seja muitas vezes adequada, podemos personalizá-la, se necessário, usando um TemplateField. Para este tutorial, vamos alterar o CheckBoxField para um TemplateField que usa um controlo RadioButtonList com duas opções "Ativo" e "Descontinuado" a partir do qual o usuário pode especificar o valor do Discontinued do produto.

Comece convertendo o Discontinued CheckBoxField em um TemplateField, que criará um TemplateField com um ItemTemplate e EditItemTemplate. Ambos os modelos incluem uma caixa de seleção com a sua propriedade Checked vinculada ao campo de dados Discontinued, a única diferença entre os dois é que a propriedade ItemTemplate da caixa de seleção Enabled está definida como False.

Substitua a CheckBox no ItemTemplate e EditItemTemplate por um controle RadioButtonList, definindo as propriedades de ID ambos RadioButtonList como DiscontinuedChoice. Em seguida, indique que cada RadioButtonList deve conter dois botões de rádio, um rotulado como "Ativo" com um valor de "False" e outro rotulado como "Descontinuado" com um valor de "True". Para fazer isso, você pode inserir os <asp:ListItem> elementos diretamente por meio da sintaxe declarativa ou usar o ListItem Editor de coleção do Designer. A Figura 13 mostra o Editor de Coleção ListItem depois de especificadas as duas opções de rádio.

Adicionar opções ativas e descontinuadas à RadioButtonList

Figura 13: Adicionar opções ativas e descontinuadas à RadioButtonList (Clique para visualizar a imagem em tamanho real)

Como a RadioButtonList no ItemTemplate não deve ser editável, defina a sua propriedade Enabled como False, mantendo a propriedade Enabled como True (o padrão) para a RadioButtonList no EditItemTemplate. Isso tornará os botões de opção na linha não editada de leitura apenas, mas permitirá que o utilizador altere os valores dos botões de opção para a linha editada.

Ainda precisamos atribuir as propriedades dos SelectedValue controles RadioButtonList para que o botão de opção apropriado seja selecionado com base no campo de dados Discontinued do produto. Assim como acontece com as DropDownLists examinadas anteriormente neste tutorial, essa sintaxe de vinculação de dados pode ser adicionada diretamente à marcação declarativa ou por meio do link Edit DataBindings nas marcas inteligentes RadioButtonLists.

Depois de adicionar os dois RadioButtonLists e configurá-los, a Discontinued marcação declarativa do TemplateField deve ter a seguinte aparência:

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
    <ItemTemplate>
        <asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
          Enabled="False" SelectedValue='<%# Bind("Discontinued") %>'>
            <asp:ListItem Value="False">Active</asp:ListItem>
            <asp:ListItem Value="True">Discontinued</asp:ListItem>
        </asp:RadioButtonList>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
            SelectedValue='<%# Bind("Discontinued") %>'>
            <asp:ListItem Value="False">Active</asp:ListItem>
            <asp:ListItem Value="True">Discontinued</asp:ListItem>
        </asp:RadioButtonList>
    </EditItemTemplate>
</asp:TemplateField>

Com essas alterações, a coluna foi transformada de uma lista de caixas de seleção para uma lista de pares de botões de opção (veja a Discontinued Figura 14). Ao editar um produto, seleciona-se o botão de opção apropriado e o estado de descontinuação do produto pode ser atualizado ao selecionar o outro botão de opção e clicar no botão Atualizar.

As caixas de seleção descontinuadas foram substituídas por pares de botões rádio

Figura 14: As caixas de seleção que foram descontinuadas foram substituídas por pares de botões de rádio (Clique para visualizar a imagem em tamanho real)

Observação

Como a coluna Discontinued no banco de dados Products não pode ter valores NULL, não temos que nos preocupar em captar informações NULL na interface. Se, no entanto, a coluna Discontinued puder conter valores NULL, gostaríamos de adicionar um terceiro botão de rádio à lista, com o seu Value definido para uma cadeia de caracteres vazia (Value=""), tal como nas listas de menus suspensos de categoria e fornecedor.

Resumo

Embora o BoundField e o CheckBoxField apresentem automaticamente interfaces de leitura apenas, de edição e de inserção, eles não possuem capacidade de personalização. Muitas vezes, porém, precisaremos personalizar a interface de edição ou inserção, talvez adicionando controles de validação (como vimos no tutorial anterior) ou personalizando a interface do usuário de coleta de dados (como vimos neste tutorial). A personalização da interface com um TemplateField pode ser resumida nas seguintes etapas:

  1. Adicionar um TemplateField ou converter um BoundField ou CheckBoxField existente em um TemplateField
  2. Aumente a interface conforme necessário
  3. Vincular os campos de dados apropriados aos controles da Web recém-adicionados usando a vinculação de dados bidirecional

Além de usar os controles internos da Web ASP.NET, você também pode personalizar os modelos de um TemplateField com controles de servidor personalizados e compilados e controles de usuário.

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.