Integrando controles de validação no GridView

O controle GridView é usado para exibir dados no formato tabular além de fornecer as funcionalidades para incluir, alterar e excluir registros do banco de dados relacionado. Durante a alteração ou inclusão de dados, geralmente temos que efetuar a validação dos mesmos antes de salvar no banco de dados. Este artigo mostra como você pode integrar os controles de validação com o controle Gridview de forma dinâmica em tempo de execução.

Os controles de validação que a ASP .NET disponibiliza são:

1. RequiredFieldValidator
2. RangeValidator
3. RegularExpressionValidator
4. CompareValidator
5. CustomValidator

O que vamos mostrar é como os controles de validação podem ser criados dinamicamente em tempo de execução e serem integrados com qualquer controle de entrada de dados, no caso o GridView.

As ferramentas usadas neste artigo são:

• Visual Web Developer 2008 Express Edition (VWD2008);
• SQL Server 2005 Express Edition (você pode usar o Microsoft Access);

Abra o VWD2008 e no menu File selecione New Web Site;

A seguir, faça o seguinte:

• Selecione o template ASP .NET Web Site;
• Selecione File System em Location;
• Selecione a linguagem Visual Basic em Language (note que poderíamos usar C#);
• Informe o nome do web site em uma pasta local. No exemplo eu estou informando: validaGridView
• Tecle o botão OK;

Na janela Solution Explorer
selecione o formulário web Default.aspx e a
partir da Caixa de Ferramentas (ToolBox)
faça o seguinte:

• Arraste e solte o controle
  GridView na área de Design;
• Defina a propriedade AutoGenerateColumns
  do GridView como false;
• Defina uma formatação padrão
  ao GridView;

Vamos criar agora o banco de dados Clientes.mdf
no SQL Server que será usado neste artigo.

No menu WebSite
selecione Add New Item;

A seguir, na janela Add New
Item, selecione o template SQL Server Database,
informe o nome Clientes.mdf e clique em Add;

Nota: Será apresentada uma caixa de diálogo
solicitando a sua confirmação para copiar o arquivo para a
pasta App_Data; Confirme;

Abra a pasta App_Data
e clique no arquivo Clientes.mdf para abrir o
DataBase Explorer;

Expanda os objetos do DataBase
e clique com o botão direito sobre o objeto Tables
e selecione Add New Table;

Vamos definir a tabela Contatos
com a seguinte estrutura da seguinte forma:

• No editor, você digita o nome
  da Coluna, define o seu tipo e define se a coluna permite
  valores Nulls;
• A seguir, define a coluna clienteID
  como sendo a chave primária do tipo identidade (identity),
  com isso ela será auto-incremental;
• Para encerrar, você clica no
  ícone para Salvar e informa o nome Contatos;
• Defina os campos: clienteID, nome,
  sexo, idade, cidade e email; (A coluna sexo permitirá os
  valores M e F)

Vamos incluir alguns dados na
tabela. Na janela DataBase Explorer clique
com o botão direito sobre o nome da tabela Contatos
recém-criada e selecione Show Table Data. A seguir, informe alguns dados, conforme mostra a figura a seguir:

Com isso já temos o nosso banco de
dados Clientes.mdf e a nossa tabela Contatos. Vamos continuar. Selecione o formulário web Default.aspx,
acione o modo Design e selecione o controle GridView.

Tecle F4 para abrir a janela de
propriedades e defina na propriedade DataKeyNames
o campo clienteID. Selecione o GridView,
acione a GridView Tasks e selecione a opção
Edit Columns. Inclua 5 colunas BoundField
no GridView e defina as seguintes propriedades para cada uma
delas:

Conforme a figura abaixo:

Inclua uma coluna CommandField,
defina seu tipo de comando como Edit/Update e
traduza os textos pertinentes (se desejar);

Agora converta todos os campos
vinculados (BoundField) no GridView para TemplateField, para isso, selecione o campo em Selected Fields
e clique no link Convert this field into a TemplateField.

Volte a selecionar o GridView
e em GridView Tasks clique no link Edit
Templates.

Defina cada campo convertido como TemplateField
da seguinte forma:

1. A seção ItemTemplate
deverá possui um controle Label vinculado coluna de nome
correspondente. Ex: coluna Nome -> Bind(“nome”)

2. A seção EditItemTemplate
deverá possuir um controle TextBox vinculado à coluna de nome
correspondente. Ex: Coluna Nome -> Bind(“Nome”)

Em seguida, a partir da ToolBox, na
guia Validation, para a coluna Nome, inclua o
controle RequiredFieldValidator e defina as
seguintes propriedades:

• ErrorMessage =
  Informe o nome;

• ControlToValidate
  = TextBox1;

Os demais controles de validação
serão definidos via código. A seguir temos quais os controles
iremos usar para cada uma das colunas:

Dessa forma, temos o controle de
validação definido para Nome em tempo de
desenho e os demais controles iremos definir em tempo de
execução via código.

Agora, temos que efetuar a
vinculação do controle GridView com a nossa fonte de dados: a
tabela Contatos do banco de dados Clientes.mdf.

Como vamos fazer isso via código,
vamos criar um método chamado vinculaGrid() no
arquivo Default.aspx.vb com o seguinte código:

Private Sub vinculaGrid()<br /><br /> Dim<br />conn As String = "Data<br />Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Clientes.mdf;Integrated<br />Security=True;User Instance=True"<br /><br />        Dim sql As String = "Select * from Contatos order by Nome"<br />        Dim da As SqlDataAdapter = New SqlDataAdapter(sql, conn)<br />        Dim dt As DataTable = New DataTable()<br /><br />        da.Fill(dt)<br /><br />        GridView1.DataSource = dt<br />        GridView1.DataBind()<br />    End Sub

Lembrando que devemos declarar no
início do arquivo os imports:

Imports
System.Data.SqlClient

Imports System.Data

Para chamar o método acima, vamos
usar o evento Load da página da seguinte forma:

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load<br />        If Not IsPostBack Then<br />            vinculaGrid()<br />        End If<br />    End Sub

Executando o projeto neste momento,
iremos obter:

O próximo passo é habilitar a
edição e o cancelamento da edição, pois se você clicar no
link Edita irá ocorrer um erro.

Lembre-se de que o nosso GridView não
foi gerado usando um assistente e por isso não possui os eventos
para edição e cancelamento ativos. Vamos ativá-los…

No evento RowEditing
do controle GridView informe o código abaixo para permitir a
edição:

Protected Sub GridView1_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) _ <br />                   Handles GridView1.RowEditing<br />                           GridView1.EditIndex = e.NewEditIndex<br />        vinculaGrid()<br />    End Sub

Para permitir o cancelamento do
evento acima, vamos incluir o código abaixo no evento RowCancelingEdit:

Protected Sub<br />GridView1_RowCancelingEdit(ByVal sender As Object, ByVal e As<br />System.Web.UI.WebControls.GridViewCancelEditEventArgs) _<br />Handles GridView1.RowCancelingEdit<br />        GridView1.EditIndex = -1<br />        vinculaGrid()<br />    End Sub

Executando o projeto neste momento e
a seguir clicando no link Edita iremos conseguir
efetuar a edição dos dados. Para a coluna Nome, como já temos
o controle de validação definido, ao tentar informar um nome em
branco obteremos o resultado abaixo:

Precisamos então definir os demais
controles de validação e, para isso, vamos usar o evento RowDataBound
do controle GridView.

Para a coluna Sexo iremos usar o
controle CustomValidator, que é usado para
validar uma entrada de forma customizada no lado do cliente ou do
servidor. No exemplo iremos usar uma validação JavaScript do
lado do cliente. Lembre-se de que a coluna Sexo
deve aceitar somente os valores M, para masculino, e F, para
feminino.

Primeiro vamos definir criar o
código que define o controle em tempo de execução no servidor:

Depois verificamos se a linha é
do tipo DataRow, ou seja, é uma linha de dados
e não de cabeçalho;

A seguir verificamos se EditIndex
é igual ao índice da linha atual (RowIndex)
para em seguida definir via código o controle CustomValidator;

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _<br />Handles GridView1.RowDataBound<br /><br />If e.Row.RowType = DataControlRowType.DataRow Then<br /><br />'Verificando se EditIndex é igual a Row Index atual<br /><br />'então vincula os controles de validação a linha particular<br /><br />If GridView1.EditIndex = e.Row.RowIndex Then<br /><br />'Coluna Sexo- definindo o CustomValidator<br /><br />Dim cv As CustomValidator = New CustomValidator<br /><br />cv.ID = "CustomValidator1"<br /><br />cv.ControlToValidate = "TextBox2"<br /><br />cv.ErrorMessage = "Informação inválida"<br /><br />cv.SetFocusOnError = True<br /><br />cv.ValidateEmptyText = True<br /><br />cv.ClientValidationFunction = "validaSexo"<br /><br />e.Row.Cells(1).Controls.Add(cv)<br /><br />End If<br /><br />End If<br /><br />End Sub

• No código acima criamos uma
  instância da classe CustomValidator e
  definimos um ID para esta instância;
• A seguir especificamos o
  controle que será validado, no caso o controle TextBox2;
• Definimos a mensagem de erro em
  ErrorMessage.