Adicionar controles de validação à interface de edição do DataList (C#)

por Scott Mitchell

Baixar PDF

Neste tutorial, veremos como é fácil adicionar controles de validação ao EditItemTemplate do DataList para fornecer uma interface do usuário de edição mais à prova de falhas.

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, embora a entrada de usuário inválida, 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 UpdateCommand para capturar e exibir normalmente informações sobre quaisquer exceções que foram geradas. O ideal, no entanto, é que a interface de edição inclua controles de validação para impedir que um usuário insira esses dados inválidos em primeiro lugar.

Neste tutorial, veremos como é fácil adicionar controles de validação aos DataLists EditItemTemplate para fornecer uma interface do usuário de edição mais à prova de falhas. 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 detratamento de exceções de BLL e DAL-Level

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

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

Antes de podermos examinar 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 isso, precisamos copiar a ErrorHandling.aspx marcação declarativa da página e seu código-fonte. Primeiro copie sobre a marcação declarativa executando as seguintes etapas:

1. Abrir a ErrorHandling.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 32), conforme mostrado na Figura 1.

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

1. Abrir a UIValidation.aspx página
2. Vá 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_CancelCommande Products_UpdateCommand) junto com o DisplayExceptionDetails método , mas não copie a declaração ou using as instruções de classe. Cole o texto copiado dentro da EditDeleteDataList_UIValidation classe em UIValidation.aspx.vb.

Depois de mover o conteúdo e o código de ErrorHandling.aspx para UIValidation.aspx, tire um momento para testar as páginas 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 2).

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

Etapa 2: Adicionar os controles de validação ao EditItemTemplate do DataList

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 projetados para validar o valor de um único controle Web 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, consulte o tutorial Adicionando controles de validação ao tutorial Editando e Inserindo Interfaces ou marcar a seção Controles de Validação dos Tutoriais de Início Rápido ASP.NET.

Para 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 ASP.NET 1.x tenha esses mesmos cinco controles de validação, ASP.NET 2.0 adicionou uma série de melhorias, os main dois são suporte a scripts do lado do cliente para navegadores além de Explorer da Internet 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 no 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. Essa tarefa pode ser executada por meio do Designer clicando no link Editar Modelos da marca inteligente DataList ou por meio da sintaxe declarativa. Vamos percorrer o processo usando a opção Editar Modelos na exibição Design. Depois de optar por editar o DataList s EditItemTemplate, adicione um RequiredFieldValidator arrastando-o da Caixa de Ferramentas para a interface de edição de modelo, colocando-o após o ProductName TextBox.

Figura 3: Adicionar um RequiredFieldValidator à EditItemTemplate AfterProductName Caixa de Texto (Clique para exibir a imagem em tamanho real)

Todos os controles de validação funcionam validando a entrada de um único controle Web ASP.NET. Portanto, precisamos indicar que o RequiredFieldValidator que acabamos de adicionar deve validar em relação ao ProductName TextBox; isso é feito definindo a propriedade do controle de ControlToValidate validação como o ID do controle Web apropriado (ProductName, nesta instância). 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 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 será 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 4.

Figura 4: definir as propriedades RequiredFieldValidator , ControlToValidateErrorMessagee Text (clique para exibir a imagem em tamanho real)

Com o RequiredFieldValidator adicionado ao , tudo o EditItemTemplateque resta é adicionar a validação necessária para o preço do produto TextBox. 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, seja 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 CompareValidator como OperatorGreaterThanEqual, sua ValueToCompare propriedade como 0 e sua Type propriedade como Currency.

Depois de adicionar esses dois controles de validação, a sintaxe declarativa do EditItemTemplate DataList 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 inclui o símbolo de moeda, como US$ 19,95, é considerado inválido. O CompareValidator s 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.

Figura 5: 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. Além disso, se houver entradas inválidas na interface de edição, nem os botões Atualizar nem Cancelar, quando clicado, invocarão um postback. O ideal é que o botão Cancelar retorne a DataList ao 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 UpdateCommand cliente de controles de validação pode ser ignorada por usuários cujos navegadores não dão suporte ao JavaScript ou têm seu suporte desabilitado.

Removendo o símbolo de Conversor de Moedas 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 desses 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 no TextBox, o UnitPrice que significa que o usuário deve remover explicitamente o símbolo de moeda antes de salvar suas alterações. Para corrigir isso, temos três opções:

1. Configure o EditItemTemplate para que o UnitPrice valor TextBox 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 se há 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 dependa da 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 por meio da sintaxe declarativa ou clicando no link Editar DataBindings da UnitPrice Caixa de Texto no DataList s EditItemTemplate.

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

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

Corrigindo o botão Cancelar

Por padrão, os controles Web de validação emitem JavaScript para executar a validação no lado do cliente. Quando um Botão, 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 dados inválidos, o postback será cancelado. Para determinados botões, porém, a validade dos dados pode ser imaterial; nesse caso, ter o postback cancelado devido a dados inválidos é um incômodo.

O botão Cancelar é um exemplo. Imagine que um usuário insira dados inválidos, como omitindo o nome do produto e, em seguida, decide que não deseja salvar o produto depois de tudo e atinge o botão Cancelar. Atualmente, o botão Cancelar dispara os controles de validação na página, que relatam que o nome do produto está ausente e impedem o postback. Nosso usuário precisa digitar um texto no ProductName TextBox apenas para cancelar o processo de edição.

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

Garantir 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 quaisquer 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 um cujo suporte a JavaScript tenha sido desabilitado, 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 interrompido de forma alguma com base no valor de Page.IsValid. Como desenvolvedores, é nossa responsabilidade garantir que a Page.IsValid propriedade tenha um valor de antes de True prosseguir com o código que pressupõe dados de entrada válidos.

Se um usuário tiver JavaScript desabilitado, visitar nossa página, editar um produto, inserir um valor de preço muito caro e clicar no botão Atualizar, a validação do lado do cliente será ignorada e um postback ocorrerá. No postback, o manipulador de eventos da UpdateCommand página ASP.NET é executado e uma exceção é gerada ao tentar analisar Muito caro para um Decimal. Como temos tratamento de exceção, essa exceção será tratada normalmente, mas podemos impedir que os dados inválidos passem por aqui em primeiro lugar apenas procedendo 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 essa adição, o produto tentará ser atualizado somente se os dados enviados forem válidos. A maioria dos usuários não poderá postar dados inválidos devido aos controles de validação de scripts do lado do cliente, mas os usuários cujos navegadores não dão suporte a JavaScript ou que têm suporte a JavaScript desabilitados, 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 precisamos marcar 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, 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 ValidationSummary 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 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 exibir 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 Web de validação projetados para inspecionar a entrada de um controle Web específico e relatar novamente 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 o EditItemTemplate da Caixa de Ferramentas e definir um punhado de propriedades. Por padrão, os controles de validação emitem automaticamente o 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 Page.IsValid propriedade . Para ignorar a validação do lado do cliente quando um Botão, LinkButton ou ImageButton for clicado, defina a propriedade do botão como CausesValidationFalse. Além disso, antes de executar tarefas com os dados enviados no postback, verifique se 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 pelo preço. No entanto, a interface de edição pode conter uma combinação de diferentes controles da Web, como DropDownLists, Calendars, RadioButtons, CheckBoxes e assim por diante. Em nosso próximo tutorial, examinaremos a criação de uma interface que usa uma variedade de controles da Web.

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 Dennis Patterson, Ken Pespisa e Liz Shulok. Interessado em revisar meus próximos artigos do MSDN? Nesse caso, solte-me uma linha em mitchell@4GuysFromRolla.com.

AnteriorAvançar