Personalizar a interface de modificação de dados (C#)

por Scott Mitchell

Baixar PDF

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

Introdução

Os controles 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 inseriveis. Essas interfaces podem ser renderizadas sem a necessidade de adicionar qualquer marcação declarativa ou código adicional. No entanto, as interfaces de BoundField e CheckBoxField não têm a personalização frequentemente necessária em cenários do mundo real. Para personalizar a interface editável ou inserida em um GridView ou DetailsView, precisamos usar um TemplateField.

No tutorial anterior , vimos como personalizar as interfaces de modificação de dados adicionando controles Da 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 do 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 os status descontinuados 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 o 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 exibir a imagem em tamanho real)

Etapa 1: Criando a sobrecarga apropriadaUpdateProduct

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

  1. Recupere as informações do produto do banco de dados para o especificado ProductID
  2. Atualize os ProductNamecampos , CategoryID, SupplierIDe Discontinued e
  3. Envie a solicitação de atualização para o DAL por meio do método tableAdapter Update() .

Para resumir, para essa sobrecarga específica, omiti a regra de negócios marcar que garante que um produto que está sendo marcado como descontinuado não seja o único produto oferecido por seu fornecedor. Fique à 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 bool UpdateProduct(string productName, int? categoryID,
    int? supplierID, bool discontinued, int productID)
{
    Northwind.ProductsDataTable products = Adapter.GetProductByProductID(productID);
    if (products.Count == 0)
        // no matching record found, return false
        return false;
    Northwind.ProductsRow product = products[0];
    product.ProductName = productName;
    if (supplierID == null) product.SetSupplierIDNull();
      else product.SupplierID = supplierID.Value;
    if (categoryID == null) product.SetCategoryIDNull();
      else product.CategoryID = categoryID.Value;
    product.Discontinued = discontinued;
    // Update the product record
    int rowsAffected = Adapter.Update(product);
    // Return true if precisely one row was updated, otherwise false
    return rowsAffected == 1;
}

Etapa 2: Criar o GridView Editável

Com a UpdateProduct sobrecarga adicionada, estamos prontos para criar nosso GridView editável. Abra a CustomizedUI.aspx página na EditInsertDelete pasta e adicione um controle GridView à Designer. Em seguida, crie um novo ObjectDataSource com base na marca inteligente do GridView. Configure o ObjectDataSource para recuperar informações do produto por meio do ProductBLL método da classe e atualizar os dados do GetProducts() produto usando a UpdateProduct sobrecarga que acabamos de criar. Nas guias INSERT e DELETE, selecione (Nenhum) nas listas suspensas.

Configurar o ObjectDataSource para usar a sobrecarga updateproduct que acabou de ser criada

Figura 2: Configurar o ObjectDataSource para usar a UpdateProduct sobrecarga que acabou de ser criada (clique para exibir a imagem em tamanho real)

Como vimos em todos os 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, pois nossos métodos não esperam que o valor original ProductID seja passado. Portanto, como fizemos nos tutoriais anteriores, reserve um momento para remover essa atribuição de propriedade da sintaxe declarativa ou, em vez disso, definir o valor dessa propriedade como {0}.

Após essa alteração, a marcação declarativa do ObjectDataSource deve ser semelhante à seguinte:

<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 na UpdateParameters coleção para cada um Parameter dos parâmetros de entrada esperados por nossa UpdateProduct sobrecarga.

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

  • Ele inclui apenas o ProductName, SupplierName, CategoryName BoundFields e o Discontinued CheckBoxField
  • Os CategoryName campos e SupplierName a serem exibidos antes (à esquerda de) o Discontinued CheckBoxField
  • A CategoryName propriedade e SupplierName BoundFields HeaderText é definida como "Category" e "Supplier", respectivamente
  • O suporte à edição está habilitado (marcar caixa de seleção Habilitar Edição na marca inteligente 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 exibir 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, o comportamento somente leitura do GridView está concluído. Ao exibir os dados, cada produto é renderizado como uma linha no GridView, mostrando o nome, a categoria, o fornecedor e os status descontinuados do produto.

A interface de Read-Only do GridView está concluída

Figura 4: A Interface de Read-Only do GridView está concluída (clique para exibir a imagem em tamanho real)

Observação

Conforme discutido em Uma visão geral do tutorial Inserir, Atualizar e Excluir Dados, é de vital importância que o estado de exibição do GridView seja habilitado (o comportamento padrão). Se você definir a propriedade falseGridView como EnableViewState , correrá o risco de ter usuários simultâneos excluindo ou editando registros acidentalmente.

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

Lembre-se de que o objeto contém CategoryIDas propriedades , CategoryNameSupplierID, e SupplierName , que fornecem os valores reais de ID de chave estrangeira na tabela de Products banco de dados e os valores correspondentes Name nas Categories tabelas e Suppliers .ProductsRow Os ProductRowe CategoryIDSupplierID podem ser lidos e gravados, enquanto as CategoryName propriedades e SupplierName são marcadas como somente leitura.

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

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

Os campos fornecedor e categoria devem exibir os nomes da categoria e dos fornecedores quando estiverem no modo somente leitura (como agora) e uma lista suspensa de opções aplicáveis ao serem editadas. 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 com mais facilidade.

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

Adicionando eCategoriesSuppliersDropDownLists

Comece convertendo e SupplierNameCategoryName BoundFields em TemplateFields: clicando no link Editar Colunas da marca inteligente gridView; selecionando 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 BoundField foi marcado como somente leitura, e ItemTemplateEditItemTemplate contêm um controle Web Label cuja Text propriedade está associada ao campo de dados aplicável (CategoryName, na sintaxe acima). Precisamos modificar o EditItemTemplate, substituindo o controle Web Label por um controle DropDownList.

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

Remover o TexBox e Adicionar um DropDownList ao EditItemTemplate

Figura 5: Remover o TexBox e Adicionar um DropDownList ao EditItemTemplate (Clique para exibir a imagem em tamanho real)

Em seguida, precisamos preencher o DropDownList com as categorias disponíveis. Clique no link Escolher Fonte de Dados da marca inteligente dropDownList e opte por criar um novo ObjectDataSource chamado CategoriesDataSource.

Criar um novo controle ObjectDataSource chamado CategoriesDataSource

Figura 6: Criar um novo controle ObjectDataSource chamado CategoriesDataSource (clique para exibir a imagem em tamanho real)

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

Associar o ObjectDataSource ao método GetCategories() de CategoriesBLL

Figura 7: Associar o ObjectDataSource ao CategoriesBLLmétodo do GetCategories() (clique para exibir a imagem em tamanho real)

Por fim, defina as configurações do DropDownList de modo que o CategoryName campo seja exibido em cada DropDownList ListItem com o CategoryID campo usado como o valor.

Ter o campo CategoryName exibido e a CategoryID usada como o valor

Figura 8: Ter o CategoryName campo exibido e o CategoryID usado como o valor (clique para exibir a imagem em tamanho real)

Depois de fazer essas alterações, a marcação declarativa do 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 a sintaxe de vinculação de dados aos comandos declarativos de sintaxe e associação de dados do DropDownList, como eBind(), por exemploEval(), só poderão aparecer em controles cujo estado de exibição está habilitado.

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

Depois de adicionar o DropDownLists aos dois EditItemTemplate s, carregue a página em um navegador e clique no botão Editar do produto Cajun Seasoning do Chef Anton. Como mostra a Figura 9, as colunas de categoria e fornecedor do produto são renderizadas como listas suspensas que contêm as categorias e fornecedores disponíveis para escolher. No entanto, observe 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 no Drop-Down Listas é selecionado por padrão

Figura 9: o primeiro item no Drop-Down Listas é Selecionado por Padrão (Clique para exibir a imagem em tamanho real)

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

Associando dropdownlists aosCategoryIDcampos de dados eSupplierID

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

Como alternativa, você pode definir as associações de dados do DropDownList editando o modelo por meio do Designer e clicando no link Editar DataBindings da marca inteligente do DropDownList. Em seguida, indique que a SelectedValue propriedade deve ser associada ao CategoryID campo usando a vinculação de dados bidirecional (consulte a Figura 10). Repita o processo declarativo ou Designer para associar o SupplierID campo de dados ao Suppliers DropDownList.

Associar a CategoryID à propriedade SelectedValue do DropDownList usando Two-Way databinding

Figura 10: associar a CategoryID à propriedade DropDownList SelectedValue usando Two-Way databinding (clique para exibir a imagem em tamanho real)

Depois que as associações tiverem sido aplicadas às SelectedValue propriedades dos dois DropDownLists, a categoria do produto editado e as colunas do fornecedor terão como padrão os valores do produto atual. Ao clicar em Atualizar, os CategoryID valores e SupplierID do item de lista suspensa selecionado serão passados para o UpdateProduct método . A Figura 11 mostra o tutorial após a adição das instruções de vinculação de dados; observe como os itens de 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 de 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 exibir a imagem em tamanho real)

ManipulandoNULLvalores

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

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

Para dar suporte NULLCategoryID e SupplierID valores, precisamos adicionar outro ListItem a cada DropDownList para representar o NULL valor. No tutorial Filtragem Mestre/Detalhe com um DropDownList , vimos como adicionar um adicional ListItem a um DropDownList de entrada de dados, que envolvia a definição da propriedade dropDownList AppendDataBoundItems e a true adição manual do adicional ListItem. No tutorial anterior, no entanto, adicionamos um ListItem com um Value de -1. No entanto, a lógica de vinculação de dados em ASP.NET converterá automaticamente uma cadeia de caracteres em branco em um NULL valor e vice-a-versa. Portanto, para este tutorial, queremos que os ListItem's Value sejam uma cadeia de caracteres vazia.

Comece definindo a propriedade de AppendDataBoundItems DropDownLists 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>

Optei por usar "(None)" como o valor de Texto para este ListItem, mas você pode alterá-lo para também ser uma cadeia de caracteres em branco, se desejar.

Observação

Como vimos no tutorial Filtragem Mestre/Detalhe com um DropDownList, ListItem s podem ser adicionados a um DropDownList por meio do Designer clicando na propriedade dropDownList Items no janela Propriedades (que exibirá a ListItem coleção Editor). No entanto, adicione o NULLListItem para este tutorial por meio da sintaxe declarativa. Se você usar a ListItem Editor coleção, a sintaxe declarativa gerada omitirá a Value configuração completamente quando for atribuída uma cadeia de caracteres em branco, criando marcação declarativa 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 isso NULLListItem for selecionado, o valor "(Nenhum)" tentará ser atribuído ao , o CategoryIDque resultará em uma exceção. Definindo Value=""explicitamente , um NULL valor será atribuído a CategoryID quando o NULLListItem for selecionado.

Repita estas etapas para o DropDownList de Fornecedores.

Com esse adicional ListItem, a interface de edição agora pode atribuir NULL valores a campos e SupplierID produtosCategoryID, conforme mostrado na 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 exibir a imagem em tamanho real)

Etapa 4: Usando RadioButtons para o status descontinuado

Atualmente, o campo de dados dos Discontinued produtos é expresso usando um CheckBoxField, que renderiza uma caixa de seleção desabilitada para as linhas somente leitura e uma caixa de seleção habilitada para a linha que está sendo editada. Embora essa interface do usuário seja geralmente adequada, podemos personalizá-la se necessário usando um TemplateField. Para este tutorial, vamos alterar o CheckBoxField em um TemplateField que usa um controle RadioButtonList com duas opções "Ativo" e "Descontinuado" das quais o usuário pode especificar o valor do Discontinued produto.

Comece convertendo o Discontinued CheckBoxField em um TemplateField, que criará um TemplateField com um ItemTemplate e EditItemTemplate. Ambos os modelos incluem uma CheckBox com sua Checked propriedade associada ao Discontinued campo de dados, a única diferença entre os dois é que a ItemTemplatepropriedade 's CheckBox é Enabled definida como false.

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

Adicionar

Figura 13: Adicionar opções "Ativo" e "Descontinuado" ao RadioButtonList (Clique para exibir a imagem em tamanho real)

Como o RadioButtonList no ItemTemplate não deve ser editável, defina sua Enabled propriedade como false, deixando a Enabled propriedade true como (o padrão) para o RadioButtonList no EditItemTemplate. Isso tornará os botões de opção na linha não editada como somente leitura, mas permitirá que o usuário altere os valores de RadioButton 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 do Discontinued produto. Assim como acontece com o DropDownLists examinado anteriormente neste tutorial, essa sintaxe de vinculação de dados pode ser adicionada diretamente à marcação declarativa ou por meio do link Editar DataBindings nas marcas inteligentes do RadioButtonLists.

Depois de adicionar os dois RadioButtonLists e configurá-los, a Discontinued marcação declarativa do TemplateField deve ser semelhante a:

<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 Discontinued coluna foi transformada de uma lista de caixas de seleção para uma lista de pares de botões de opção (consulte Figura 14). Ao editar um produto, o botão de opção apropriado é selecionado e o status descontinuado do produto pode ser atualizado selecionando o outro botão de opção e clicando em Atualizar.

As Caixas de Seleção descontinuadas foram substituídas por pares de botões de opção

Figura 14: As Caixas de Seleção Descontinuadas foram substituídas por pares de botão de opção (clique para exibir a imagem em tamanho real)

Observação

Como a Discontinued coluna no Products banco de dados não pode ter NULL valores, não precisamos nos preocupar com a captura de NULL informações na interface. Se, no entanto, Discontinued a coluna puder conter NULL valores, gostaríamos de adicionar um terceiro botão de opção à lista com seu Value conjunto como uma cadeia de caracteres vazia (Value=""), assim como ocorre com a categoria e o fornecedor DropDownLists.

Resumo

Embora o BoundField e o CheckBoxField renderizem automaticamente somente leitura, edição e inserção de interfaces, eles não têm a 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 da 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. Aumentar a interface conforme necessário
  3. Associar 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 ASP.NET Web, você também pode personalizar os modelos de um TemplateField com controles de servidor personalizados e compilados e controles de usuário.

Programação feliz!

Sobre o autor

Scott Mitchell, autor de sete livros do ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias da Microsoft Web desde 1998. Scott trabalha como consultor independente, treinador e escritor. Seu último livro é Sams Teach Yourself ASP.NET 2.0 em 24 Horas. Ele pode ser contatado em mitchell@4GuysFromRolla.com. ou através de seu blog, que pode ser encontrado em http://ScottOnWriting.NET.