ASP.NET - 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:(Para saber mais sobre os controles de validação veja o link nas referências.)

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:

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

A seguir faça o seguinte:

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

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:

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 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:

HeaderText Nome Sexo Idade Cidade Email
DataField nome sexo idade cidade email

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;

Agora 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á possui um controle TextBox vinculado a 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:

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:

Nome RequiredFieldValidator
Sexo CustomValidator
Idade RangeValidator
cidade RequiredFieldValidator
Email RegularExpressionValidator

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()

        Dim conn As String = "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Clientes.mdf;Integrated Security=True;User Instance=True"

        Dim sql As String = "Select * from Contatos order by Nome"
        Dim da As SqlDataAdapter = New SqlDataAdapter(sql, conn)
        Dim dt As DataTable = New DataTable()

        da.Fill(dt)

        GridView1.DataSource = dt
        GridView1.DataBind()
    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
        If Not IsPostBack Then
            vinculaGrid()
        End If
    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 ira ocorrer um erro.

Lembre-se 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) _ 
                   Handles GridView1.RowEditing
                           GridView1.EditIndex = e.NewEditIndex
        vinculaGrid()
    End Sub

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

  Protected Sub GridView1_RowCancelingEdit(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCancelEditEventArgs) _
Handles GridView1.RowCancelingEdit
        GridView1.EditIndex = -1
        vinculaGrid()
    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 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:

Primeiro 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) _
 Handles GridView1.RowDataBound

        If e.Row.RowType = DataControlRowType.DataRow Then
            'Verificando se EditIndex é igual a Row Index atual
            'então vincula os controles de validação a linha particular
            If GridView1.EditIndex = e.Row.RowIndex Then
                'Coluna Sexo- definindo o CustomValidator
                Dim cv As CustomValidator = New CustomValidator
                cv.ID = "CustomValidator1"
                cv.ControlToValidate = "TextBox2"
                cv.ErrorMessage = "Informação inválida"
                cv.SetFocusOnError = True
                cv.ValidateEmptyText = True
                cv.ClientValidationFunction = "validaSexo"
                e.Row.Cells(1).Controls.Add(cv)
            End If
        End If
    End Sub

Precisamos agora definir a função JavaScript validaSexo. A seguir uma sugestão para o código dessa função:

 <script language="javascript" type="text/javascript">
   <!--
      function validaSexo(sender, args)
      {
       if (args.Value=="M" || args.Value=="F")
           args.isValid==true;
       else
           args.isValid==false;
      }
   // -->
    </script>

Agora vamos definir via código a integração para os demais controles de validação. Iremos usar o evento RowDataBound do controle GridView e incluir o código conforme abaixo:

Nota: O evento RowDataBound Ocorre quando uma linha de dados é vinculada aos dados em um controle GridView. O evento RowDataBound evento é gerado quando uma linha de dados (representada por um objeto GridViewRow) está vinculada a dados no controle GridView.

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

 

If e.Row.RowType = DataControlRowType.DataRow Then

    'Verificando se EditIndex ‚ igual a Row Index atual

     'entÆo vincula os controles de valida‡Æo a linha particular

      If GridView1.EditIndex = e.Row.RowIndex Then

            'Coluna Sexo- definindo o CustomValidator

            Dim cv As CustomValidator = New CustomValidator()

         cv.ID = "CustomValidator1"

         cv.ControlToValidate = "TextBox2"

         cv.ErrorMessage = "Informa‡Æo inv lida"

         cv.SetFocusOnError = True

         cv.ValidateEmptyText = True

         cv.ClientValidationFunction = "validaSexo"

         e.Row.Cells(1).Controls.Add(cv)

 

           'Coluna Idade- definindo o RangeValidator

         Dim rv = New RangeValidator()

         rv.ID = "RangeValidator1"

         rv.ControlToValidate = "TextBox3"

         rv.ErrorMessage = "Idade Inv lida"

         rv.MaximumValue = "100"

         rv.MinimumValue = "18"

         rv.SetFocusOnError = True

         rv.Type = ValidationDataType.Integer

         e.Row.Cells(2).Controls.Add(rv)

 

          'Coluna Cidade- definindo o RequireFieldValidator

        Dim reqv = New RequiredFieldValidator

        reqv.ID = "RequiredValidator2"

        reqv.ControlToValidate = "TextBox4"

        reqv.ErrorMessage = "Informe a cidade"

        reqv.SetFocusOnError = True

        e.Row.Cells(3).Controls.Add(reqv)

 

          'Coluna Email- definindo o RegularExpressionValidator

           Dim rex = New RegularExpressionValidator()

         rex.ID = "RegularExpressionValidator1"

        rex.ValidationExpression = "\\w+([-+.']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*"

        rex.ControlToValidate = "TextBox5"

        rex.ErrorMessage = "Email Inv lido"

         rex.SetFocusOnError = True

         e.Row.Cells(4).Controls.Add(rex)

    End If

End If

End Sub

 

Dessa forma temos os controles de validação integrados ao controle GridView em tempo de execução.

Eu sei é apenas ASP .NET mas eu gosto...

Referências:

José Carlos Macoratti