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

por Scott Mitchell

Descarregar PDF

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

Introdução

Os controles GridView e DetailsView nos exemplos que exploramos nos últimos três tutoriais foram todos compostos por BoundFields e CheckBoxFields (os tipos de campo adicionados automaticamente pelo Visual Studio ao vincular 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, os BoundFields que não são somente leitura são convertidos em caixas de texto, a partir das quais o usuário final pode modificar os dados existentes. Da mesma forma, ao inserir um novo registro em um controle DetailsView, os BoundFields cuja InsertVisible propriedade está definida como true (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, os campos de caixa de seleção que são desativados na interface padrão de leitura, são convertidos em caixas de seleção ativadas nas interfaces de edição e inserção.

Embora as interfaces padrão de edição e inserção para BoundField e CheckBoxField possam ser úteis, a interface carece de 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 profundidades da arquitetura do aplicativo. Embora essa exceção possa ser tratada normalmente, como demonstrado no tutorial anterior, idealmente a interface do usuário de edição ou inserção incluiria 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 o BoundField ou CheckBoxField por um TemplateField. TemplateFields, que foram o tópico de discussão nos tutoriais Usando TemplateFields no controle GridView e Usando TemplateFields no controle DetailsView , podem consistir em vários modelos definindo interfaces separadas para diferentes estados de linha. O TemplateField's 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 EditItemTemplate e InsertItemTemplate fornecer uma interface de usuário mais infalível. 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: Replicando o exemplo de Examinando os Eventos Associados à Inserção, Atualização e Eliminaçã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 incluía um DetailsView cuja DefaultMode propriedade estava definida como Insert, o que fazia com que fosse sempre exibido no modo de inserção. A partir desse DetailsView, o usuário pode inserir o nome e o preço de um novo produto, clicar em Inserir e adicioná-lo 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 visualizar a imagem em tamanho real)

Nosso objetivo para este tutorial é aumentar o DetailsView e o GridView para fornecer controles de validação. Em particular, a nossa lógica de validação irá:

• 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 analisarmos 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 alcançar isto, precisamos copiar tanto a marcação declarativa da página DataModificationEvents.aspx quanto seu código-fonte. Primeiro, copie a marcação declarativa para executar as seguintes etapas:

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

Figura 2: Copie o texto dentro do controle (<asp:Content> imagem em tamanho real)

1. Abrir a página UIValidation.aspx
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_RowUpdating e ObjectDataSource1_Inserting), mas não copie a declaração de classe ou instruções using. Cole o texto copiado dentro da EditInsertDelete_UIValidation classe em UIValidation.aspx.cs.

Depois de passar o conteúdo e o código do DataModificationEvents.aspx para o 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: Convertendo 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 alcançar isso, clique nos links Editar Colunas e Editar Campos nas etiquetas inteligentes do GridView e do DetailsView, respectivamente. Lá, selecione cada um dos BoundFields e clique no link "Converter este campo em um TemplateField".

Figura 3: Converter cada um dos BoundFields de DetailsView e GridView em TemplateFields (Clique para visualizar a imagem em tamanho real)

Converter um BoundField em um TemplateField por meio da caixa de diálogo de Campos gera um TemplateField que mantém as mesmas interfaces de leitura, edição e inserção que o BoundField original. 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 teve automaticamente três modelos criados ItemTemplate, EditItemTemplate e InsertItemTemplate. O ItemTemplate exibe um único valor de campo de dados (ProductName) usando um controlo Web de rótulo, enquanto o EditItemTemplate e InsertItemTemplate apresentam o valor do campo de dados num controlo Web de caixa de texto que associa o campo de dados com a propriedade Text da caixa de texto, usando vinculação de dados bidirecional. Como estamos usando apenas o DetailsView nesta página para inserir, você pode remover o ItemTemplate e EditItemTemplate dos dois TemplateFields, embora não haja nenhum dano em deixá-los.

Como o GridView não suporta os 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 através de um navegador. Você descobrirá que a aparência e o comportamento dos TemplateFields são idênticos à experiência quando BoundFields foram usados.

Observação

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

Etapa 3: Adicionando os controles de validação ao GridViewEditItemTemplate

Ao construir formulários de entrada de dados, é importante que os usuários insiram todos os campos obrigató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, o ASP.NET fornece cinco controles de validação internos projetados para serem usados para validar o valor de um único controle de entrada:

• RequiredFieldValidator garante que um valor foi 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, confira a seção Controles de validação dos tutoriais de início rápido do ASP.NET.

Para o nosso tutorial, precisaremos usar um RequiredFieldValidator nos TemplateFields de ProductName DetailsView e GridView e um RequiredFieldValidator no TemplateField de UnitPrice DetailsView. Além disso, precisaremos adicionar um CompareValidator aos TemplateFields de ambos os controles para garantir 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 o ASP.NET 1.x tivesse esses mesmos cinco controles de validação, o ASP.NET 2.0 adicionou uma série de melhorias, sendo as duas principais o suporte a scripts do lado do cliente para navegadores diferentes do Internet Explorer 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 nos TemplateFields do GridView. Para fazer isso, clique no link Editar modelos no menu de contexto do GridView para exibir a interface de edição do modelo. A partir daqui, poderá selecionar qual template editar na lista suspensa. Como queremos melhorar a interface de edição, precisamos adicionar controles de validação aos ProductName e aos UnitPrice do EditItemTemplate.

Figura 4: Precisamos estender o ProductName e o UnitPrice de EditItemTemplate (Clique para visualizar a imagem em tamanho real)

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

Figura 5: Adicione um RequiredFieldValidator ao ProductNameEditItemTemplate. (Clique para visualizar a imagem em tamanho real)

Todos os controles de validação funcionam validando a entrada de um único controle ASP.NET Web. 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 para o ID controle da Web apropriado. O TextBox atualmente tem o bastante indefinido ID de TextBox1, mas vamos mudá-lo para algo mais apropriado. Clique na TextBox no modelo e, em seguida, na janela Propriedades, altere o ID de TextBox1 para EditProductName.

Figura 6: Alterar o TextBox para IDEditProductName (Clique para visualizar a imagem em tamanho real)

Em seguida, defina a propriedade do RequiredFieldValidator ControlToValidate como EditProductName. Finalmente, 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 que é exibido pelo controle de validação se a validação falhar. O ErrorMessage valor da propriedade, que é obrigató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 deve ser semelhante à Figura 7.

Figura 7: Definir as propriedades ControlToValidate, ErrorMessage e Text do RequiredFieldValidator (Clique para visualizar a imagem em tamanho real)

Com o RequiredFieldValidator adicionado ao ProductNameEditItemTemplate, tudo o que 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, esteja formatado corretamente como uma moeda e seja maior ou igual a 0.

Antes de adicionarmos o CompareValidator ao UnitPriceEditItemTemplate, vamos primeiro alterar o 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 seguinte sintaxe declarativa mostra o UnitPrice TemplateField's EditItemTemplate após essas 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 inclua o símbolo de moeda, como $19,95, é considerado inválido. O CompareValidator permite a inclusão de separadores de números (como vírgulas ou pontos, dependendo das configurações de cultura) e um sinal de mais ou menos antes do número, mas não permite um símbolo de moeda. Esse comportamento pode deixar os utilizadores perplexos, pois a interface de edição atualmente renderiza o UnitPrice utilizando o formato de moeda.

Observação

Lembre-se de que, no tutorial Eventos Associados à Inserção, Atualização e Exclusão, definimos a propriedade do BoundField DataFormatString para {0:c} a fim de formatá-la como 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 o 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 visualizar a imagem em tamanho real)

Enquanto a validação funciona as-is, o usuário tem que remover manualmente o símbolo de moeda ao editar um registro, o que não é aceitável. Para remediar esta situação, temos três opções:

1. Configure o EditItemTemplate para que o valor não seja formatado UnitPrice como uma moeda.
2. Permita 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 RowUpdating eventos do GridView.

Vamos com a opção #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 através da sintaxe declarativa ou clicando no link Edit DataBindings da EditUnitPrice TextBox no UnitPrice TemplateField ( EditItemTemplate veja as Figuras 9 e 10).

Figura 9: Clique no link Edit DataBindings da TextBox (Clique para visualizar a imagem em tamanho real)

Figura 10: Especifique o especificador de formato na instrução (Clique para visualizar a Bindimagem em tamanho real)

Com esta alteração, o preço formatado na interface de edição inclui vírgulas como separador de grupo e um ponto 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 ocorra 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 uma verificação programática que garante que o UnitPrice seja fornecido. Fique à vontade para remover essa lógica, mantê-la em as-isou adicionar um RequiredFieldValidator ao UnitPriceEditItemTemplate.

Etapa 4: Resumindo problemas de entrada de dados

Além dos cinco controles de validação, o ASP.NET inclui o controle ValidationSummary, que exibe os resumos dos controles de validação que detectaram dados inválidos. Esses dados resumidos podem ser exibidos como texto na página da Web ou através 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 Validation 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 uma caixa de mensagem Client-Side (Clique para visualizar a imagem em tamanho normal)

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 passar a tarefa nesta etapa. Como fizemos com os EditItemTemplate do GridView, eu encorajo você a renomear os ID das TextBoxes do genérico TextBox1 e TextBox2 para InsertProductName e InsertUnitPrice.

Adicione um RequiredFieldValidator ao ProductNameInsertItemTemplate. Defina o ControlToValidate para o ID da caixa de texto no template, a sua Text propriedade para "*" e a sua ErrorMessage propriedade para "Deve fornecer o nome do produto".

Como o UnitPrice é necessário para esta página ao adicionar um novo registo, adicione um RequiredFieldValidator ao UnitPriceInsertItemTemplate, definindo suas ControlToValidate, Text e ErrorMessage propriedades apropriadamente. Finalmente, adicione um CompareValidator ao UnitPriceInsertItemTemplate também, configurando suas propriedades ControlToValidate, Text, ErrorMessage, Type, Operator, e ValueToCompare assim como fizemos com o CompareValidator do UnitPrice no EditItemTemplate do GridView.

Depois de adicionar estes controlos de validação, um novo produto não pode ser adicionado ao sistema se o seu nome não for fornecido ou se o 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 visualizar 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 díspares 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 registo, não queremos que os controlos de validação da interface de inserção do DetailsView executem a validação. 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: A atualização de um produto faz com que os controles de validação da interface de inserção sejam acionados (Clique para visualizar 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 com o mesmo valor. Para nosso tutorial, defina as ValidationGroup propriedades dos controles de validação em 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 através da janela Propriedades ao usar a interface de modelo de edição do Designer.

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

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

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

Os 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" />

Os CommandField e TemplateField 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 Update do GridView é clicado e os controles de validação específicos de inserção são acionados somente quando o botão Insert do DetailsView é clicado, resolvendo o problema destacado pela Figura 13. No entanto, com essa alteração, nosso controle ValidationSummary não é mais exibido ao inserir dados inválidos. O controlo ValidationSummary também contém uma propriedade ValidationGroup e mostra apenas informações de resumo para esses controlos de validação no seu grupo de validação. Portanto, precisamos ter dois controles de validação nesta página, um para o grupo de InsertValidationControls 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 esta adição o nosso tutorial está completo!

Resumo

Embora BoundFields possa fornecer uma interface de inserção e edição, a interface não é personalizável. Geralmente, 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 os BoundFields em TemplateFields e adicionar os controles de validação ao(s) modelo(s) apropriado(s). 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 de resumo 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 permite 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 da Web de entrada adicionais, permitindo que o TextBox seja substituído por um controle da Web mais adequado. Em nosso próximo tutorial, veremos como substituir o controle TextBox por um controle DropDownList vinculado a dados, que é ideal ao editar uma chave estrangeira (como CategoryID ou SupplierID na Products tabela).

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. Os principais revisores deste tutorial foram Liz Shulok e Zack Jones. Interessado em rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.

AnteriorPróximo