Adicionar controles de validação à interface de edição do DataList (C#)
por Scott Mitchell
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:
- Abrir a
ErrorHandling.aspx
página no Visual Studio - Vá para a marcação declarativa da página (clique no botão Origem na parte inferior da página)
- 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)
- Abrir a
UIValidation.aspx
página - Vá para a marcação declarativa da página
- 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
) 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 After
ProductName
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 , ControlToValidate
ErrorMessage
e Text
(clique para exibir a imagem em tamanho real)
Com o RequiredFieldValidator adicionado ao , tudo o EditItemTemplate
que 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 Operator
GreaterThanEqual
, 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 Currency
Type
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:
- Configure o
EditItemTemplate
para que oUnitPrice
valor TextBox não seja formatado como uma moeda. - 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.
- 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 CausesValidation
False
.
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 CausesValidation
False
. 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.
Comentários
https://aka.ms/ContentUserFeedback.
Brevemente: Ao longo de 2024, vamos descontinuar progressivamente o GitHub Issues como mecanismo de feedback para conteúdos e substituí-lo por um novo sistema de feedback. Para obter mais informações, veja:Submeter e ver comentários