Adicionando controles de validação à interface de edição da DataList (C#)

por Scott Mitchell

Descarregar PDF

Neste tutorial, veremos como é fácil adicionar controles de validação ao EditItemTemplate da DataList para fornecer uma interface de usuário de edição mais infalível.

Introdução

Nos tutoriais de edição DataList até agora, as interfaces de edição DataLists não incluíram nenhuma validação proativa de entrada do usuário, mesmo que a entrada inválida do usuário, como um nome de produto ausente ou preço negativo, resulte em uma exceção. No tutorial anterior , examinamos como adicionar código de tratamento de exceção ao manipulador de eventos DataList para UpdateCommand capturar e exibir normalmente informações sobre quaisquer exceções que foram geradas. Idealmente, no entanto, a interface de edição incluiria controles de validação para evitar que um usuário insira esses dados inválidos em primeiro lugar.

Neste tutorial, veremos como é fácil adicionar controles de validação ao DataList s para fornecer uma interface de usuário de EditItemTemplate edição mais infalível. Especificamente, este tutorial usa o exemplo criado no tutorial anterior e aumenta a interface de edição para incluir a validação apropriada.

Etapa 1: Replicando o exemplo de tratar exceções deBLL e DAL-Level

No tutorial Handling BLL- and DAL-Level Exceptions , criamos uma página que listava os nomes e preços dos produtos em uma DataList editável de duas colunas. Nosso objetivo para este tutorial é aumentar a interface de edição do DataList para incluir controles de validação. Em particular, a nossa lógica de validação irá:

• Exigir que o nome do produto seja fornecido
• Verifique se o valor inserido para o preço é um formato de moeda válido
• Certifique-se de que o valor inserido para o preço é maior ou igual a zero, uma vez que um valor negativo UnitPrice é ilegal

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

1. Abra a página ErrorHandling.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 32), como mostra a Figura 1.

Figura 1: 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 ErrorHandling.aspx.vb página e copie apenas o texto dentro da EditDeleteDataList_ErrorHandling classe. Copie os três manipuladores de eventos (Products_EditCommand, Products_CancelCommand e Products_UpdateCommand) juntamente com o método DisplayExceptionDetails, mas não copie a declaração de classe ou as instruções using. Cole o texto copiado dentro da EditDeleteDataList_UIValidation classe em UIValidation.aspx.vb.

Depois de transferir o conteúdo e o código de ErrorHandling.aspx para UIValidation.aspx, dedique algum tempo para testar as páginas num navegador. Você deve ver a mesma saída e experimentar a mesma funcionalidade em cada uma dessas duas páginas (consulte a Figura 2).

Figura 2: A página UIValidation.aspx imita a funcionalidade em ErrorHandling.aspx (Clique para ver a imagem em tamanho real)

Etapa 2: Adicionando os controles de validação ao DataList s EditItemTemplate

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, ASP.NET fornece cinco controles de validação internos projetados para validar o valor de um único controle da Web 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 é 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, consulte o tutorial Adicionando controles de validação ao tutorial Editando e inserindo interfaces ou confira a seção Controles de validação dos ASP.NET Tutoriais de início rápido.

Para o nosso tutorial, precisaremos usar um RequiredFieldValidator para garantir que um valor para o nome do produto tenha sido fornecido e um CompareValidator 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, além do Internet Explorer e a capacidade de particionar controles de validação em uma página em grupos de validação. Para obter mais informações sobre os novos recursos de controle de validação na versão 2.0, consulte Dissecando os controles de validação no ASP.NET 2.0.

Vamos começar adicionando os controles de validação necessários ao DataList s EditItemTemplate. A tarefa pode ser executada pelo Designer, clicando no link "Editar Modelos" da etiqueta inteligente do DataList, ou através da sintaxe declarativa. Vamos percorrer o processo usando a opção Editar modelos na visualização Design. Depois de escolher editar o DataList s EditItemTemplate, adicione um RequiredFieldValidator arrastando-o da Toolbox para a interface de edição do modelo, colocando-o após o ProductName TextBox.

Figura 3: Adicionar um RequiredFieldValidator à TextBox (EditItemTemplate AfterProductName 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 ProductName TextBox, isso é feito definindo a propriedade s ControlToValidate do controle de validação para o ID controle da Web apropriado (ProductName, neste caso). Em seguida, defina a ErrorMessage propriedade como Você deve fornecer o nome do produto e a Text propriedade como *. O Text valor da propriedade, se fornecido, é o texto que é exibido pelo controle de validação se a validação falhar. O valor da propriedade ErrorMessage, que é obrigatório, é utilizado pelo controlo ValidationSummary; se o valor da propriedade Text for omitido, o valor da propriedade ErrorMessage será exibido pelo controlo de validação em caso de entrada inválida.

Depois de definir essas três propriedades do RequiredFieldValidator, sua tela deve ser semelhante à Figura 4.

< c0>Figura 4: Definir as propriedades , e do RequiredFieldValidator (Clique para visualizar a imagem em tamanho real)

Com o RequiredFieldValidator adicionado ao EditItemTemplate, só falta adicionar a validação necessária para o TextBox do preço do produto. Como 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.

Adicione o CompareValidator ao EditItemTemplate e defina sua ControlToValidate propriedade como UnitPrice, 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 s Operator de CompareValidator como GreaterThanEqual, sua ValueToCompare propriedade como 0 e sua Type propriedade como Currency.

Depois de adicionar esses dois controles de validação, a sintaxe declarativa de DataList s EditItemTemplate deve ser semelhante à seguinte:

<EditItemTemplate>
    Product name:
        <asp:TextBox ID="ProductName" runat="server"
            Text='<%# Eval("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            ControlToValidate="ProductName"
            ErrorMessage="You must provide the product's name"
            runat="server">*</asp:RequiredFieldValidator>
    <br />
    Price:
        <asp:TextBox ID="UnitPrice" runat="server"
            Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1"
            ControlToValidate="UnitPrice"
            ErrorMessage="The price must be greater than or equal to zero
                          and cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
            runat="server">*</asp:CompareValidator><br />
    <br />
    <asp:Button ID="UpdateProduct" runat="server" CommandName="Update"
        Text="Update" /> 
    <asp:Button ID="CancelUpdate" runat="server" CommandName="Cancel"
        Text="Cancel" />
</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 5, um valor de preço que inclua o símbolo da moeda, como $19,95, é considerado inválido. O CompareValidator s permite separadores de dígitos (como vírgulas ou pontos, dependendo das configurações de cultura) e um sinal de mais ou menos no início, 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.

Figura 5: 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. Além disso, se houver entradas inválidas na interface de edição, nem o botão Atualizar nem o botão Cancelar, quando clicados, invocarão um postback. Idealmente, o botão Cancelar retornaria o DataList ao seu estado de pré-edição, independentemente da validade das entradas do usuário. Além disso, precisamos garantir que os dados da página sejam válidos antes de atualizar as informações do produto no manipulador de eventos DataList, pois a lógica do lado do cliente dos UpdateCommand controles de validação pode ser ignorada por usuários cujos navegadores não suportam JavaScript ou têm seu suporte desativado.

Removendo o símbolo de moeda da caixa de texto UnitPrice de EditItemTemplate

Ao usar o CompareValidator s Currency``Type, a entrada que está sendo validada não deve incluir nenhum símbolo de moeda. A presença de tais símbolos faz com que o CompareValidator marque a entrada como inválida. No entanto, nossa interface de edição atualmente inclui um símbolo de moeda na TextBox, o UnitPrice que significa que o usuário deve remover explicitamente o símbolo de moeda antes de salvar suas alterações. Para remediar esta situação, temos três opções:

1. Configure o EditItemTemplate para que o valor de UnitPrice TextBox não seja formatado como moeda.
2. Permita que o usuário insira um símbolo de moeda removendo o CompareValidator e substituindo-o por um RegularExpressionValidator que verifica um valor de moeda formatado corretamente. O desafio aqui é que a expressão regular para validar um valor de moeda não é tão simples quanto o CompareValidator 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 personalizada do lado do servidor no manipulador de eventos GridView RowUpdating .

Vamos com a opção 1 para este tutorial. Atualmente, o UnitPrice é formatado como um valor de moeda devido à expressão de vinculação de dados para o TextBox no EditItemTemplate: <%# Eval("UnitPrice", "{0:c}") %>. Altere a Eval instrução para Eval("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 UnitPrice TextBox no DataList s EditItemTemplate.

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

Ao remover o formato de moeda da interface editável, acho útil colocar o símbolo de moeda como texto fora da TextBox. Isso serve como uma dica para o usuário de que ele não precisa fornecer o símbolo da moeda.

Corrigindo o botão Cancelar

Por padrão, os controles da Web de validação emitem JavaScript para executar a validação no lado do cliente. Quando um Button, LinkButton ou ImageButton é clicado, os controles de validação na página são verificados no lado do cliente antes que o postback ocorra. Se houver algum dado inválido, o postback é cancelado. Para certos botões, no entanto, a validade dos dados pode ser irrelevante; Nesse caso, ter o postback cancelado devido a dados inválidos é um incômodo.

O botão Cancelar é um exemplo disso. Imagine que um usuário insere dados inválidos, como omitir o nome do produto, e depois decide que não quer salvar o produto e aperta o botão Cancelar. Atualmente, o botão Cancelar aciona os controles de validação na página, que informam que o nome do produto está ausente e impedem o postback. Nosso usuário tem que digitar algum texto na caixa de texto ProductName apenas para cancelar o processo de edição.

Felizmente, Button, LinkButton e ImageButton têm uma CausesValidation propriedade que pode indicar se clicar ou não no Button deve ou não iniciar a lógica de validação (o padrão é True). Defina a propriedade do botão Cancelar CausesValidation como False.

Garantindo que as entradas sejam válidas no manipulador de eventos UpdateCommand

Devido ao script do lado do cliente emitido pelos controles de validação, se um usuário inserir entrada inválida, os controles de validação cancelarão todos os postbacks iniciados pelos controles Button, LinkButton ou ImageButton cujas CausesValidation propriedades são True (o padrão). No entanto, se um usuário estiver visitando com um navegador antiquado ou cujo suporte a JavaScript tenha sido desativado, as verificações de validação do lado do cliente não serão executadas.

Todos os controles de validação ASP.NET repetem sua lógica de validação imediatamente após o postback e relatam a validade geral das entradas da página por meio da Page.IsValid propriedade. No entanto, o fluxo de página não é interrompido ou parado de maneira alguma com base no valor de Page.IsValid. Como desenvolvedores, é nossa responsabilidade garantir que a propriedade Page.IsValid tenha um valor de True antes de prosseguir com o código que assume dados de entrada válidos.

Se um utilizador tiver o JavaScript desativado, visitar a nossa página, editar um produto, inserir o valor de preço "Too expensive" e clicar no botão Atualizar, a validação do lado do cliente será ignorada e um postback seguirá. Durante o postback, o manipulador de eventos da página ASP.NET UpdateCommand é executado e uma exceção é gerada ao tentar converter "Muito caro" em um Decimal. Como temos tratamento de exceções, essa exceção será tratada de forma eficiente, mas podemos evitar que os dados inválidos se infiltrem desde o início apenas prosseguindo com o UpdateCommand manipulador de eventos se Page.IsValid tiver um valor de True.

Adicione o seguinte código ao início do UpdateCommand manipulador de eventos, imediatamente antes do Try bloco:

if (!Page.IsValid)
    return;

Com esta adição, o produto tentará ser atualizado apenas se os dados enviados forem válidos. A maioria dos usuários não poderá postar dados inválidos devido aos scripts do lado do cliente dos controles de validação, mas os usuários cujos navegadores não suportam JavaScript ou que têm o suporte a JavaScript desativado podem ignorar as verificações do lado do cliente e enviar dados inválidos.

Observação

O leitor astuto lembrará que, ao atualizar dados com o GridView, não precisávamos verificar explicitamente a Page.IsValid propriedade na classe code-behind de nossa página. Isso ocorre porque o GridView consulta a Page.IsValid propriedade para nós e só prossegue com a atualização somente se retornar um valor de True.

Etapa 3: 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 mensagens 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 ValidationSummary realmente não importa, já que vamos configurá-lo para exibir apenas o resumo como uma caixa de mensagem. Depois de adicionar o controle, defina sua ShowSummary propriedade como False e sua ShowMessageBox propriedade como True. Com essa adição, todos os erros de validação são resumidos em uma caixa de mensagem do lado do cliente (consulte a Figura 6).

Figura 6: Os erros de validação são resumidos em uma caixa de mensagem Client-Side (Clique para visualizar a imagem em tamanho real)

Resumo

Neste tutorial, vimos como reduzir a probabilidade de exceções usando controles de validação para garantir proativamente que as entradas de nossos usuários sejam válidas antes de tentar usá-las no fluxo de trabalho de atualização. ASP.NET fornece cinco controles da Web de validação projetados para inspecionar a entrada de um determinado controle da Web e relatar a validade da entrada. Neste tutorial, usamos dois desses cinco controles, o RequiredFieldValidator e o CompareValidator, para garantir que o nome do produto fosse fornecido e que o preço tivesse um formato de moeda com um valor maior ou igual a zero.

Adicionar controles de validação à interface de edição do DataList é tão simples quanto arrastá-los para a EditItemTemplate Caixa de Ferramentas e definir um punhado de propriedades. Por padrão, os controles de validação emitem automaticamente um script de validação do lado do cliente; eles também fornecem validação do lado do servidor no postback, armazenando o resultado cumulativo na propriedade Page.IsValid. Para ignorar a validação do lado do cliente quando um Button, LinkButton ou ImageButton é clicado, defina a propriedade s CausesValidation do botão como False. Além disso, antes de executar qualquer tarefa com os dados enviados no postback, certifique-se de que a Page.IsValid propriedade retorna True.

Todos os tutoriais de edição DataList que examinamos até agora tiveram interfaces de edição muito simples, uma TextBox para o nome do produto e outra para o preço. A interface de edição, no entanto, pode conter uma mistura de diferentes controles da Web, como DropDownLists, Calendários, RadioButtons, CheckBoxes e assim por diante. Em nosso próximo tutorial, veremos a criação de uma interface que usa uma variedade de controles da Web.

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 Dennis Patterson, Ken Pespisa e Liz Shulok. Interessado em rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.

Anterior Seguinte