Adicionar controles de validação às interfaces de edição e inserção (C#)

por Scott Mitchell

Baixar PDF

Neste tutorial, veremos como é fácil adicionar controles de validação ao EditItemTemplate e InsertItemTemplate de um controle da Web de dados para fornecer uma interface do usuário mais à prova de falhas.

Introdução

Os controles GridView e DetailsView nos exemplos que exploramos nos últimos três tutoriais foram compostos por BoundFields e CheckBoxFields (os tipos de campo adicionados automaticamente pelo Visual Studio ao associar um GridView ou DetailsView a um controle de fonte de dados por meio da marca inteligente). Ao editar uma linha em um GridView ou DetailsView, esses BoundFields que não são somente leitura são convertidos em caixas de texto, das quais o usuário final pode modificar os dados existentes. Da mesma forma, ao inserir um novo registro em um controle DetailsView, esses BoundFields cuja InsertVisible propriedade é definida true como (o padrão) são renderizados como caixas de texto vazias, nas quais o usuário pode fornecer os valores de campo do novo registro. Da mesma forma, CheckBoxFields, que estão desabilitados na interface padrão somente leitura, são convertidos em caixas de seleção habilitadas nas interfaces de edição e inserção.

Embora a edição padrão e a inserção de interfaces para BoundField e CheckBoxField possam ser úteis, a interface não tem qualquer tipo de validação. Se um usuário cometer um erro de entrada de dados, como omitir o ProductName campo ou inserir um valor inválido para UnitsInStock (como -50), uma exceção será gerada de dentro das profundezas da arquitetura do aplicativo. Embora essa exceção possa ser tratada normalmente conforme demonstrado no tutorial anterior, o ideal é que a edição ou inserção da interface do usuário inclua controles de validação para impedir que um usuário insira esses dados inválidos em primeiro lugar.

Para fornecer uma interface de edição ou inserção personalizada, precisamos substituir BoundField ou CheckBoxField por um TemplateField. TemplateFields, que foram o tópico de discussão em Using TemplateFields in the GridView Control and Using TemplateFields nos tutoriais de Controle DetailsView , pode consistir em vários modelos definindo interfaces separadas para diferentes estados de linha. O TemplateField é ItemTemplate usado para renderizar campos ou linhas somente leitura nos controles DetailsView ou GridView, enquanto o EditItemTemplate e InsertItemTemplate indicam as interfaces a serem usadas para os modos de edição e inserção, respectivamente.

Neste tutorial, veremos como é fácil adicionar controles de validação ao TemplateField e EditItemTemplateInsertItemTemplate fornecer uma interface do usuário mais à prova de falhas. Especificamente, este tutorial usa o exemplo criado no tutorial Examinando os eventos associados à inserção, atualização e exclusão e aumenta as interfaces de edição e inserção para incluir a validação apropriada.

Etapa 1: Replicar o exemploexaminando os eventos associados à inserção, atualização e exclusão

No tutorial Examinando os eventos associados à inserção, atualização e exclusão, criamos uma página que listava os nomes e preços dos produtos em um GridView editável. Além disso, a página incluiu um DetailsView cuja DefaultMode propriedade foi definida Insertcomo , renderizando sempre no modo de inserção. A partir deste DetailsView, o usuário pode inserir o nome e o preço de um novo produto, clicar em Inserir e adição dele ao sistema (consulte a Figura 1).

Figura 1: O exemplo anterior permite que os usuários adicionem novos produtos e editem os existentes (clique para exibir a imagem em tamanho real)

Nossa meta para este tutorial é aumentar o DetailsView e o GridView para fornecer controles de validação. Em particular, nossa lógica de validação:

• Exigir que o nome seja fornecido ao inserir ou editar um produto
• Exigir que o preço seja fornecido ao inserir um registro; ao editar um registro, ainda exigiremos um preço, mas usaremos a lógica programática no manipulador de eventos do RowUpdating GridView já presente no tutorial anterior
• Verifique se o valor inserido para o preço é um formato de moeda válido

Antes de podermos examinar o aumento do exemplo anterior para incluir a validação, primeiro precisamos replicar o exemplo da DataModificationEvents.aspx página para a página deste tutorial, UIValidation.aspx. Para fazer isso, precisamos copiar a DataModificationEvents.aspx marcação declarativa da página e seu código-fonte. Primeiro copie a marcação declarativa executando as seguintes etapas:

1. Abrir a DataModificationEvents.aspx página no Visual Studio
2. Vá para a marcação declarativa da página (clique no botão Origem na parte inferior da página)
3. Copie o texto dentro das <asp:Content> marcas e </asp:Content> (linhas 3 a 44), conforme mostrado na Figura 2.

Figura 2: Copiar o texto dentro do <asp:Content> controle (clique para exibir a imagem em tamanho real)

1. Abrir a UIValidation.aspx página
2. Ir para a marcação declarativa da página
3. Cole o texto dentro do <asp:Content> controle .

Para copiar o código-fonte, abra a DataModificationEvents.aspx.cs página e copie apenas o texto dentro da EditInsertDelete_DataModificationEvents classe . Copie os três manipuladores de eventos (Page_Load, GridView1_RowUpdatinge ObjectDataSource1_Inserting), mas não copie a declaração ou using as instruções de classe. Cole o texto copiado dentro da EditInsertDelete_UIValidation classe em UIValidation.aspx.cs.

Depois de passar o conteúdo e o código de DataModificationEvents.aspx para UIValidation.aspx, reserve um momento para testar seu progresso em um navegador. Você deve ver a mesma saída e experimentar a mesma funcionalidade em cada uma dessas duas páginas (consulte a Figura 1 para obter uma captura de tela de DataModificationEvents.aspx em ação).

Etapa 2: Converter os BoundFields em TemplateFields

Para adicionar controles de validação às interfaces de edição e inserção, os BoundFields usados pelos controles DetailsView e GridView precisam ser convertidos em TemplateFields. Para fazer isso, clique nos links Editar Colunas e Editar Campos nas marcas inteligentes gridView e DetailsView, respectivamente. Lá, selecione cada um dos BoundFields e clique no link "Converter este campo em um TemplateField".

Figura 3: Converter cada um dos Campos Limitados do DetailsView e do GridView em TemplateFields (clique para exibir a imagem em tamanho real)

Converter um BoundField em um TemplateField por meio da caixa de diálogo Campos gera um TemplateField que exibe as mesmas interfaces somente leitura, edição e inserção que o próprio BoundField. A marcação a seguir mostra a sintaxe declarativa para o ProductName campo no DetailsView depois que ele foi convertido em um TemplateField:

<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </EditItemTemplate>
    <InsertItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </InsertItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Observe que este TemplateField tinha três modelos criados ItemTemplateautomaticamente , EditItemTemplatee InsertItemTemplate. O ItemTemplate exibe um único valor de campo de dados (ProductName) usando um controle Web Label, enquanto o EditItemTemplate e InsertItemTemplate apresentam o valor do campo de dados em um controle Web TextBox que associa o campo de dados à propriedade textbox Text usando associação de dados bidirecional. Como estamos usando apenas o DetailsView nesta página para inserção, você pode remover o ItemTemplate e EditItemTemplate dos dois TemplateFields, embora não haja nenhum dano em deixá-los.

Como o GridView não dá suporte aos recursos internos de inserção do DetailsView, converter o campo do ProductName GridView em um TemplateField resulta em apenas um ItemTemplate e EditItemTemplate:

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

Ao clicar em "Converter este campo em um TemplateField", o Visual Studio criou um TemplateField cujos modelos imitam a interface do usuário do BoundField convertido. Você pode verificar isso visitando esta página por meio de um navegador. Você descobrirá que a aparência e o comportamento de TemplateFields são idênticos à experiência em que BoundFields foi usado.

Observação

Fique à vontade para personalizar as interfaces de edição nos modelos conforme necessário. Por exemplo, talvez queiramos que o TextBox no UnitPrice TemplateFields seja renderizado como uma caixa de texto menor que a ProductName caixa de texto. Para fazer isso, você pode definir a propriedade textbox Columns como um valor apropriado ou fornecer uma largura absoluta por meio da Width propriedade . No próximo tutorial, veremos como personalizar completamente a interface de edição substituindo TextBox por um controle Web de entrada de dados alternativo.

Etapa 3: adicionando os controles de validação aos doEditItemTemplate GridView

Ao construir formulários de entrada de dados, é importante que os usuários insiram todos os campos necessários e que todas as entradas fornecidas sejam valores legais e formatados corretamente. Para ajudar a garantir que as entradas de um usuário sejam válidas, ASP.NET fornece cinco controles de validação internos que foram projetados para serem usados para validar o valor de um único controle de entrada:

• RequiredFieldValidator garante que um valor tenha sido fornecido
• CompareValidator valida um valor em relação a outro valor de controle da Web ou um valor constante ou garante que o formato do valor seja legal para um tipo de dados especificado
• RangeValidator garante que um valor esteja dentro de um intervalo de valores
• RegularExpressionValidator valida um valor em relação a uma expressão regular
• CustomValidator valida um valor em relação a um método personalizado definido pelo usuário

Para obter mais informações sobre esses cinco controles, marcar a seção Controles de Validação dos Tutoriais de Início Rápido do ASP.NET.

Para nosso tutorial, precisaremos usar um RequiredFieldValidator nos TemplateFields de ProductName DetailsView e GridView e um RequiredFieldValidator no TemplateField do UnitPrice DetailsView. Além disso, precisaremos adicionar um CompareValidator a TemplateFields de UnitPrice ambos os controles que garanta que o preço inserido tenha um valor maior ou igual a 0 e seja apresentado em um formato de moeda válido.

Observação

Embora ASP.NET 1.x tenha esses mesmos cinco controles de validação, ASP.NET 2.0 adicionou uma série de melhorias, o main dois sendo o suporte a scripts do lado do cliente para navegadores diferentes de Explorer da Internet e a capacidade de particionar controles de validação em uma página em grupos de validação.

Vamos começar adicionando os controles de validação necessários ao EditItemTemplate s em TemplateFields do GridView. Para fazer isso, clique no link Editar Modelos da marca inteligente gridView para abrir a interface de edição de modelo. A partir daqui, você pode selecionar qual modelo editar na lista suspensa. Como queremos aumentar a interface de edição, precisamos adicionar controles de validação aos ProductName e UnitPrice.s EditItemTemplate .

Figura 4: Precisamos estender os ProductName e UnitPrices EditItemTemplate (clique para exibir a imagem em tamanho real)

ProductNameEditItemTemplateNo , adicione um RequiredFieldValidator arrastando-o da Caixa de Ferramentas para a interface de edição de modelo, colocando após o TextBox.

Figura 5: Adicionar um RequiredFieldValidator ao ProductNameEditItemTemplate (Clique para exibir a imagem em tamanho real)

Todos os controles de validação funcionam validando a entrada de um único controle da Web ASP.NET. Portanto, precisamos indicar que o RequiredFieldValidator que acabamos de adicionar deve validar em relação ao TextBox no EditItemTemplate; isso é feito definindo a propriedade ControlToValidate do controle de validação como o ID do controle Web apropriado. O TextBox atualmente tem o não descritivo ID , TextBox1mas vamos alterá-lo para algo mais apropriado. Clique em TextBox no modelo e, no janela Propriedades, altere o ID de TextBox1 para EditProductName.

Figura 6: Alterar o textBox's ID para EditProductName (clique para exibir a imagem em tamanho real)

Em seguida, defina a propriedade requiredFieldValidator ControlToValidate como EditProductName. Por fim, defina a propriedade ErrorMessage como "Você deve fornecer o nome do produto" e a propriedade Text como "*". O Text valor da propriedade, se fornecido, é o texto exibido pelo controle de validação se a validação falhar. O ErrorMessage valor da propriedade, que é necessário, é usado pelo controle ValidationSummary; se o valor da Text propriedade for omitido, o valor da ErrorMessage propriedade também será o texto exibido pelo controle de validação na entrada inválida.

Depois de definir essas três propriedades do RequiredFieldValidator, sua tela deverá ser semelhante à Figura 7.

Figura 7: definir as propriedades , ErrorMessagee Text do ControlToValidateRequiredFieldValidator (clique para exibir a imagem em tamanho real)

Com o RequiredFieldValidator adicionado ao , tudo o ProductNameEditItemTemplateque resta é adicionar a validação necessária ao UnitPriceEditItemTemplate. Como decidimos que, para esta página, o UnitPrice é opcional ao editar um registro, não precisamos adicionar um RequiredFieldValidator. No entanto, precisamos adicionar um CompareValidator para garantir que o UnitPrice, se fornecido, seja formatado corretamente como uma moeda e seja maior ou igual a 0.

Antes de adicionarmos o CompareValidator ao UnitPriceEditItemTemplate, primeiro vamos alterar a ID do controle Web TextBox de TextBox2 para EditUnitPrice. Depois de fazer essa alteração, adicione o CompareValidator, definindo sua ControlToValidate propriedade como EditUnitPrice, sua ErrorMessage propriedade como "O preço deve ser maior ou igual a zero e não pode incluir o símbolo de moeda" e sua Text propriedade como "*".

Para indicar que o UnitPrice valor deve ser maior ou igual a 0, defina a propriedade Operator do CompareValidator como GreaterThanEqual, sua propriedade ValueToCompare como "0" e sua propriedade Type como Currency. A sintaxe declarativa a seguir mostra a UnitPrice de EditItemTemplate TemplateField após estas alterações terem sido feitas:

<EditItemTemplate>
    <asp:TextBox ID="EditUnitPrice" runat="server"
      Text='<%# Bind("UnitPrice", "{0:c}") %>'
      Columns="6"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator1" runat="server"
        ControlToValidate="EditUnitPrice"
        ErrorMessage="The price must be greater than or equal to zero and
                       cannot include the currency symbol"
        Operator="GreaterThanEqual" Type="Currency"
        ValueToCompare="0">*</asp:CompareValidator>
</EditItemTemplate>

Depois de fazer essas alterações, abra a página em um navegador. Se você tentar omitir o nome ou inserir um valor de preço inválido ao editar um produto, um asterisco aparecerá ao lado da caixa de texto. Como mostra a Figura 8, um valor de preço que inclui o símbolo de moeda, como US$ 19,95, é considerado inválido. O CompareValidator CurrencyType permite separadores de dígitos (como vírgulas ou períodos, dependendo das configurações de cultura) e um sinal de mais ou menos à esquerda, mas não permite um símbolo de moeda. Esse comportamento pode confundir os usuários, pois a interface de edição atualmente renderiza o UnitPrice usando o formato de moeda.

Observação

Lembre-se de que, no tutorial Eventos Associados à Inserção, Atualização e Exclusão, definimos a propriedade {0:c} BoundField DataFormatString como para formatar como uma moeda. Além disso, definimos a ApplyFormatInEditMode propriedade como true, fazendo com que a interface de edição do GridView formate o UnitPrice como uma moeda. Ao converter o BoundField em um TemplateField, o Visual Studio anotou essas configurações e formatou a propriedade textBox Text como uma moeda usando a sintaxe <%# Bind("UnitPrice", "{0:c}") %>de vinculação de dados .

Figura 8: Um Asterisco aparece ao lado das caixas de texto com entrada inválida (clique para exibir a imagem em tamanho real)

Embora a validação funcione no estado em que se encontra, o usuário precisa remover manualmente o símbolo de moeda ao editar um registro, o que não é aceitável. Para corrigir isso, temos três opções:

1. Configure o EditItemTemplate para que o UnitPrice valor não seja formatado como uma moeda.
2. Permitir que o usuário insira um símbolo de moeda removendo o CompareValidator e substituindo-o por um RegularExpressionValidator que verifica corretamente um valor de moeda formatado corretamente. O problema aqui é que a expressão regular para validar um valor de moeda não é bonita e exigiria escrever código se quiséssemos incorporar configurações de cultura.
3. Remova completamente o controle de validação e confie na lógica de validação do lado do servidor no manipulador de eventos do RowUpdating GridView.

Vamos com a opção nº 1 para este exercício. Atualmente, o UnitPrice é formatado como uma moeda devido à expressão de vinculação de dados para o TextBox no EditItemTemplate: <%# Bind("UnitPrice", "{0:c}") %>. Altere a instrução Bind para Bind("UnitPrice", "{0:n2}"), que formata o resultado como um número com dois dígitos de precisão. Isso pode ser feito diretamente por meio da sintaxe declarativa ou clicando no link Editar DataBindings da EditUnitPrice TextBox no UnitPrice TemplateField's EditItemTemplate (consulte Figuras 9 e 10).

Figura 9: Clique no link Editar DataBindings do TextBox (Clique para exibir a imagem em tamanho real)

Figura 10: especifique o especificador de formato na Bind instrução (clique para exibir a imagem em tamanho real)

Com essa alteração, o preço formatado na interface de edição inclui vírgulas como separador de grupo e um período como separador decimal, mas deixa de fora o símbolo de moeda.

Observação

O UnitPriceEditItemTemplate não inclui um RequiredFieldValidator, permitindo que o postback seja iniciado e a lógica de atualização seja iniciada. No entanto, o RowUpdating manipulador de eventos copiado do tutorial Examinando os eventos associados à inserção, atualização e exclusão inclui um marcar programático que garante que o UnitPrice seja fornecido. Fique à vontade para remover essa lógica, deixá-la no ponto em que se encontra ou adicionar um RequiredFieldValidator ao UnitPriceEditItemTemplate.

Etapa 4: Resumindo problemas de entrada de dados

Além dos cinco controles de validação, ASP.NET inclui o controle ValidationSummary, que exibe os ErrorMessage s desses controles de validação que detectaram dados inválidos. Esses dados de resumo podem ser exibidos como texto na página da Web ou por meio de uma caixa de mensagem modal do lado do cliente. Vamos aprimorar este tutorial para incluir uma caixa de mensagem do lado do cliente resumindo quaisquer problemas de validação.

Para fazer isso, arraste um controle ValidationSummary da Caixa de Ferramentas para o Designer. O local do controle Validação realmente não importa, pois vamos configurá-lo para exibir apenas o resumo como uma caixa de mensagem. Depois de adicionar o controle, defina sua propriedade ShowSummary como false e sua propriedade ShowMessageBox como true. Com essa adição, todos os erros de validação são resumidos em uma caixa de mensagem do lado do cliente.

Figura 11: Os erros de validação são resumidos em um Client-Side Messagebox (Clique para exibir a imagem em tamanho real)

Etapa 5: adicionando os controles de validação ao DetailsViewInsertItemTemplate

Tudo o que resta para este tutorial é adicionar os controles de validação à interface de inserção do DetailsView. O processo de adição de controles de validação aos modelos do DetailsView é idêntico ao examinado na Etapa 3; portanto, vamos percorrer a tarefa nesta etapa. Como fizemos com o gridview, EditItemTemplate eu encorajo você a renomear os ID s das TextBoxes do não descritivo TextBox1 e para InsertProductName e TextBox2InsertUnitPrice.

Adicione um RequiredFieldValidator ao ProductNameInsertItemTemplate. Defina o ControlToValidate como ID do TextBox no modelo, sua Text propriedade como "*" e sua ErrorMessage propriedade como "Você deve fornecer o nome do produto".

Como o UnitPrice é necessário para esta página ao adicionar um novo registro, adicione um RequiredFieldValidator às UnitPriceInsertItemTemplatepropriedades , definindo suas ControlToValidatepropriedades , Texte ErrorMessage adequadamente. Por fim, adicione um CompareValidator ao UnitPriceInsertItemTemplate também, configurando suas ControlToValidatepropriedades , Text, ErrorMessage, Type, OperatoreValueToCompare, assim como fizemos com o UnitPriceCompareValidator do GridView.EditItemTemplate

Depois de adicionar esses controles de validação, um novo produto não poderá ser adicionado ao sistema se seu nome não for fornecido ou se seu preço for um número negativo ou formatado ilegalmente.

Figura 12: a lógica de validação foi adicionada à interface de inserção do DetailsView (clique para exibir a imagem em tamanho real)

Etapa 6: particionando os controles de validação em grupos de validação

Nossa página consiste em dois conjuntos logicamente diferentes de controles de validação: aqueles que correspondem à interface de edição do GridView e aqueles que correspondem à interface de inserção do DetailsView. Por padrão, quando ocorre um postback , todos os controles de validação na página são verificados. No entanto, ao editar um registro, não queremos que os controles de validação da interface de inserção do DetailsView sejam validados. A Figura 13 ilustra nosso dilema atual quando um usuário está editando um produto com valores perfeitamente legais, clicar em Atualizar causa um erro de validação porque os valores de nome e preço na interface de inserção estão em branco.

Figura 13: atualizar um produto faz com que os controles de validação da interface de inserção sejam acionados (clique para exibir a imagem em tamanho real)

Os controles de validação no ASP.NET 2.0 podem ser particionados em grupos de validação por meio de sua ValidationGroup propriedade. Para associar um conjunto de controles de validação em um grupo, basta definir sua ValidationGroup propriedade como o mesmo valor. Para nosso tutorial, defina as ValidationGroup propriedades dos controles de validação nos TemplateFields do GridView como EditValidationControls e as ValidationGroup propriedades de TemplateFields do DetailsView como InsertValidationControls. Essas alterações podem ser feitas diretamente na marcação declarativa ou por meio do janela Propriedades ao usar a interface de modelo de edição do Designer.

Além dos controles de validação, os controles relacionados a Button e Button no ASP.NET 2.0 também incluem uma ValidationGroup propriedade . Os validadores de um grupo de validação são verificados quanto à validade somente quando um postback é induzido por um Botão que tem a mesma ValidationGroup configuração de propriedade. Por exemplo, para que o botão Inserir do DetailsView dispare o InsertValidationControls grupo de validação, precisamos definir a propriedade CommandField ValidationGroup como InsertValidationControls (consulte a Figura 14). Além disso, defina a propriedade CommandField do ValidationGroup GridView como EditValidationControls.

Figura 14: defina a propriedade CommandField do ValidationGroup DetailsView como InsertValidationControls (Clique para exibir a imagem em tamanho real)

Após essas alterações, os TemplateFields e CommandFields de DetailsView e GridView devem ser semelhantes aos seguintes:

TemplateFields e CommandField do DetailsView

<asp:TemplateField HeaderText="ProductName"
  SortExpression="ProductName">
    <InsertItemTemplate>
        <asp:TextBox ID="InsertProductName" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2"
          runat="server" ControlToValidate="InsertProductName"
            ErrorMessage="You must provide the product name"
            ValidationGroup="InsertValidationControls">*
        </asp:RequiredFieldValidator>
    </InsertItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">
    <InsertItemTemplate>
         <asp:TextBox ID="InsertUnitPrice" runat="server"
           Text='<%# Bind("UnitPrice") %>' Columns="6">
         </asp:TextBox>
         <asp:RequiredFieldValidator ID="RequiredFieldValidator3"
           runat="server" ControlToValidate="InsertUnitPrice"
            ErrorMessage="You must provide the product price"
            ValidationGroup="InsertValidationControls">*
         </asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator2" runat="server"
           ControlToValidate="InsertUnitPrice"
           ErrorMessage="The price must be greater than or equal to zero and
                          cannot include the currency symbol"
           Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
           ValidationGroup="InsertValidationControls">*
        </asp:CompareValidator>
     </InsertItemTemplate>
 </asp:TemplateField>
<asp:CommandField ShowInsertButton="True"
  ValidationGroup="InsertValidationControls" />

CommandField e TemplateFields do GridView

<asp:CommandField ShowEditButton="True" ValidationGroup="EditValidationControls" />
<asp:TemplateField HeaderText="ProductName"
  SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="EditProductName" runat="server"
          Text='<%# Bind("ProductName") %>'>
        </asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            runat="server" ControlToValidate="EditProductName"
            ErrorMessage="You must provide the product name"
            ValidationGroup="EditValidationControls">*
        </asp:RequiredFieldValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">
    <EditItemTemplate>
        <asp:TextBox ID="EditUnitPrice" runat="server"
          Text='<%# Bind("UnitPrice", "{0:n2}") %>' Columns="6"></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1" runat="server"
            ControlToValidate="EditUnitPrice"
            ErrorMessage="The price must be greater than or equal to zero and
                           cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency"
            ValueToCompare="0"
            ValidationGroup="EditValidationControls">*
        </asp:CompareValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("UnitPrice", "{0:c}") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Neste ponto, os controles de validação específicos de edição são acionados somente quando o botão Atualização do GridView é clicado e os controles de validação específicos da inserção são disparados somente quando o botão Inserir do DetailsView é clicado, resolvendo o problema realçado pela Figura 13. No entanto, com essa alteração, nosso controle ValidationSummary não é mais exibido ao inserir dados inválidos. O controle ValidationSummary também contém uma ValidationGroup propriedade e mostra apenas informações resumidas para esses controles de validação em seu grupo de validação. Portanto, precisamos ter dois controles de validação nesta página, um para o InsertValidationControls grupo de validação e outro para EditValidationControls.

<asp:ValidationSummary ID="ValidationSummary1" runat="server"
    ShowMessageBox="True" ShowSummary="False"
    ValidationGroup="EditValidationControls" />
<asp:ValidationSummary ID="ValidationSummary2" runat="server"
    ShowMessageBox="True" ShowSummary="False"
    ValidationGroup="InsertValidationControls" />

Com essa adição, nosso tutorial foi concluído!

Resumo

Embora BoundFields possa fornecer uma interface de inserção e edição, a interface não é personalizável. Normalmente, queremos adicionar controles de validação à interface de edição e inserção para garantir que o usuário insira as entradas necessárias em um formato legal. Para fazer isso, devemos converter o BoundFields em TemplateFields e adicionar os controles de validação aos modelos apropriados. Neste tutorial, estendemos o exemplo do tutorial Examinando os eventos associados à inserção, atualização e exclusão , adicionando controles de validação à interface de inserção do DetailsView e à interface de edição do GridView. Além disso, vimos como exibir informações de validação resumida usando o controle ValidationSummary e como particionar os controles de validação na página em grupos de validação distintos.

Como vimos neste tutorial, TemplateFields permitem que as interfaces de edição e inserção sejam aumentadas para incluir controles de validação. TemplateFields também pode ser estendido para incluir controles web de entrada adicionais, permitindo que o TextBox seja substituído por um controle Web mais adequado. Em nosso próximo tutorial, veremos como substituir o controle TextBox por um controle DropDownList associado a dados, que é ideal ao editar uma chave estrangeira (como CategoryID ou SupplierID na Products tabela).

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.

Agradecimentos Especiais

Esta série de tutoriais foi revisada por muitos revisores úteis. Os principais revisores deste tutorial foram Liz Shulok e Zack Jones. Interessado em revisar meus próximos artigos do MSDN? Nesse caso, solte-me uma linha em mitchell@4GuysFromRolla.com.

AnteriorAvançar