Demonstra Passo a passo: Executar atualizações em massa para linhas limite a um controle de servidor Web GridView

Artigo
10/15/2014

Quando a edição estiver habilitada para um controle GridView, por padrão somente uma linha pode ser editada por vez.Essa explicação passo a passo mostra como estender a funcionalidade do controle GridView para que os usuários possam modificar várias linhas e, em seguida, salvar todas as alterações clicando num botão.Essa explicação usa um controle SqlDataSource para recuperar resultados da fonte de dados e gerenciar atualizações.O controle SqlDataSource atua como a fonte de dados para o controle GridView.

Durante este explicação passo a passo, você aprenderá como:

Conectar-se a um banco de dados do SQL Server no Microsoft Visual Web Developer.
Use o controle SqlDataSource para gerenciar o acesso a dados.
Exibir dados retornados pelo banco de dados no controle GridView.
Configure o controle GridView para permitir que os usuários editem várias linhas de uma vez.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

O Visual Web Developer (Visual Studio).
Microsoft Data Access Components (MDAC) versão 2.7 ou posterior.

Se você está usando o Microsoft Windows XP ou o Windows Server 2003, você já tem MDAC 2.7.Entretanto, se você estiver usando o Microsoft Windows 2000, você deve atualizar o MDAC já instalado no seu computador.Para obter mais informações, consulte Instalação do Microsoft dados acesso Components (MDAC) na biblioteca MSDN.
Acesso ao banco de dados do SQL Server Northwind.Se você precisar de uma cópia do banco de dados Northwind do SQL servidor, consulte Instalando o banco de dados de exemplo nos manuais online do SQL servidor 2005.

Observação:

Se você precisa de informações sobre como efetuar o logon para o computador que está executando o SQL Server, contate o administrador do servidor.

Observação:
Se você precisa de informações sobre como efetuar o logon para o computador que está executando o SQL Server, contate o administrador do servidor.

Criando o Site Web

Se você já tiver criado um site Web no Visual Web Developer, completando Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer, você pode usar esse site Web e ir para a próxima seção.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

Abra o Visual Web Developer.
Sobre o Arquivo menu, clicar Novoe, em seguida, clicar Site da Web.If you are using Visual Web Developer Express, on the File menu, click NewWeb Site.

The Novo site caixa de diálogo é exibida.
Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.
Na caixa Localidade, selecione Sistema de Arquivos, e digite o nome da pasta onde você deseja manter as páginas do seu site.

Por exemplo, digite o nome da pasta C:\WebSites\BulkUpdate.
Na lista Language, clique a linguagem de programação com a qual você prefere trabalhar.
Clique em OK.

Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Adicionando uma fonte de dados para o controle GridView

Para exibir dados em uma página da Web do ASP.NET, será necessário:

Uma conexão com uma fonte de dados, como um banco de dados.

No procedimento a seguir, você criará uma conexão com o banco de dados Northwind do SQL Server.
Um controle de fonte de dados na página, que interage com a fonte de dados (o banco de dados) para ler e gravar dados.
Um controle na página para exibir os dados.

No seguinte procedimento, você vai exibir dados num controle GridView.O controle GridView vai obter seus dados de um controle SqlDataSource.

Adicionar uma fonte de dados para o controle GridView

Abra ou alterne para a página Default.aspx.
Alternar para modo Design.
A partir da guia Dados na caixa de ferramentas, arraste um controle SqlDataSource até a página.

Se a marca inteligente SqlDataSource Tasks não aparecer, clique com o botão direito do mouse no controle SqlDataSource e clique em Mostrar Marca Inteligente.
No painel SqlDataSource Tasks, clique em Configurar Fonte de Dados.

O assistente Configure Data Source aparece.
Clique em New Connection.

Aparecerá a caixa de diálogo Add Connection.
Se necessário, siga um destes procedimentos:A UI exata que você vê depende de quais conexões de dados você fez anteriormente no Visual Web Developer.
- Se a lista Fonte de Dados não exibir o Microsoft SQL Server (SqlClient), clique em Modificar e, na caixa de diálogo Modificar Fonte de Dados, selecione Microsof SQL Server.
- Se a caixa de diálogo Choose Data Source aparecer no lugar da caixa de diálogo Connection Properties, na lista Data source, selecione o tipo da fonte de dados que você irá usar.Para este passo a passo, o tipo da fonte de dados será Microsoft SQL Server.Na lista Provedor de Dados, clique em .NET Framework Data Provider for SQL Server e, em seguida, clique em Continue
Sobre a página Adicionar conexão, na caixa de texto Nome do servidor, digite o nome do computador que executa o banco de dados SQL Server Northwind.
Em Logar no servidor, selecione a opção apropriada para acessar o banco de dados SQL Server (segurança integrada ou ID e senha específicas).Se necessário, digite um nome de usuário e senha.

Observação:

Se você precisa de informações sobre como efetuar o logon para o computador que está executando o SQL Server, contate o administrador do servidor.
Se você inseriu uma senha, selecione a caixa de seleção Salvar minha senha.
clicar selecionar ou digite um nome de banco de dados e, em seguida, digite Northwind.
Clique em Test connection e, quando você tiver certeza que ele funciona, clique em OK.
No assistente Configurar Fonte de Dados, clique em Avançar.
Certifique-se de que a caixa de seleção Sim, salvar esta conexão como está selecionada.
Nomeie a conexão NorthwindConnectionString e, em seguida, clicar Próximo.
No painel Configure o Select Statement, selecione Especificar colunas de uma tabela ou view.
No Nome lista selecionar funcionários.
Em Colunas, seleção EmployeeID, LastName e FirstName.
Clique em Advanced.
Selecione a caixa de seleção Gerar comandos INSERT, UPDATE, and DELETE, e clique OK.
Clique em Next.
Clique em Finish.

Observação:
Se você precisa de informações sobre como efetuar o logon para o computador que está executando o SQL Server, contate o administrador do servidor.

Adicionando um Controle GridView para Exibir Dados

Após ter configurado um controle da fonte de dados para gerenciar os dados, você precisa de um controle na página para exibir os dados.

No seguinte procedimento, você vai exibir dados num controle GridView.O controle GridView vai obter os seus dados do controle SqlDataSource que você adicionou anteriormente.

Para permitir que os usuários editem o conteúdo de todo o controle GridView de uma vez (em vez de editar apenas uma linha de cada vez), você deve personalizar o controle GridView.Você vai substituir os elementos de exibição padrão em cada coluna com elementos editáveis, e, em seguida, vinculá-los à fonte de dados.Para fazer isso, você criará colunas TemplateField.Em ItemTemplate para cada coluna TemplateField, você vai adicionar um controle TextBox acoplado onde os usuários poderão editar os dados.

Para adicionar e configurar um controle GridView para exibir dados

Assegure-se de que se está no modo de design para a página default.aspx.
A partir da aba Data na caixa de ferramentas, arraste um controle GridView para a página.

No GridView Tasks painel a escolher a fonte de dados lista caixa, selecionar o SqlDataSource controle que você adicionou anteriormente, SqlDataSource1.
Selecione Ativar paginação .
Clique em Editar colunas.

A Caixa de diálogo Fields aparece.
Em Campos selecionados, selecionar Nome.
Clique em Converter este campo em um TemplateField .
Converter o campo Sobrenome em um campo de modelo, usando as mesmas etapas que você fez para o campo nome.Não converta campo EmployeeId, pois ela contém a chave primária e, portanto, não é editável.
Clique em OK.
No painel Tarefas do GridView, clique em Editar Modelos.
No Exibição lista, em Nome, clicar EditItemTemplate.

The GridView controle exibe uma área editável com o layout padrão para o Nome coluna no modo de edição.
Clique com o botão direito do mouse no controle TextBox em EditItemTemplate e, em seguida, clique em Copiar.
Clique com o botão direito do mouse no controle GridView e, em seguida, clique em Exibir Smart Tag.
No Exibição lista, em Nome, clicar ItemTemplate.

The GridView control now displays the default layout for the FirstName columnin display mode.
Exclua o controle Label existente.
Clique com o botão direito na área editável de ItemModelo e em seguida, clique em Colar.

Você copiou o controle TextBox, incluindo sua configuração de associação de dados, do layout EditItemTemplate para o layout ItemTemplate.
selecionar o TextBox controle e na janela Propriedades, conjunto o (ID) propriedade FirstNameTextBox.Isso torna-se de que o TextBox controle que você colar possui uma ID diferente daquele que você copiou.
Defina a propriedade ComprimentoMaximo para 10 (o comprimento máximo do campo no banco de dados).

Isso garante que os usuários não insiram mais informações do que o campo nome do banco de dados está configurado Isenção.
Repetir as etapas anteriores nove, mas desta vez modificar o Sobrenomecampo de modelo .Substituir o existente Label controle com um TextBox copiado das EditItemTemplate layout e conjunto o ID propriedade para LastNameTextBox.

O MaxLength propriedade das TextBox controlar, especifique um valor de 20.
Clique com o botão direito no controle GridView e clique em Finalizar Edição de Modelo.

Adicionando um Procedimento para Executar Atualizações em Massa

Após você ter configurado o controle GridView para exibir dados editáveis, você precisará adicionar código para executar a atualização em massa.Nesta seção da explicação, você irá fazer o seguinte:

Adicionar um controle Button e, em seu identificador Click, adicione código para atualizar em massa as alterações de cada linha do controle GridView.
Adicione um objeto DataTable que armazena os valores dos dados originais.
Adicione código para determinar se uma linha foi modificada.Os atuais valores exibidos no controle GridView serão comparados com os valores originais armazenados no objeto DataTable.Se um ou mais dos valores exibidos não coincidirem com o valor original, a linha será atualizada no banco de dados.Em caso contrário, a linha não será incluída na atualização em massa.

Criando um procedimento para executar a atualização em massa

Alternar para modo Design.
Selecione o controle GridView e na janela Propriedades, clique no botão de Eventos () para exibir os eventos para o controle GridView.

No RowDataBound campo, digite GridView1_RowDataBound e pressione ENTER.

O Visual Web Developer cria uma manipulador de eventos para o evento RowDataBound do controle GridView.O código terá o aspecto do exemplo de código a seguir.

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

End Sub

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

Substitua o procedimento gerado como seguinte código (incluindo as variáveis privadas).

Private tableCopied As Boolean = False
Private originalDataTable As System.Data.DataTable

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
        If Not tableCopied Then
            originalDataTable = CType(e.Row.DataItem, System.Data.DataRowView).Row.Table.Copy()
            ViewState("originalValuesDataTable") = originalDataTable
            tableCopied = True
        End If
    End If
End Sub

private bool tableCopied = false;
private DataTable originalDataTable;

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
        if (!tableCopied)
        {
            originalDataTable = ((DataRowView)e.Row.DataItem).Row.Table.Copy();
            ViewState["originalValuesDataTable"] = originalDataTable;
            tableCopied = true;
        }
}

O código é executado sempre que o controle GridView estiver realizando associação de dados.Enquanto a primeira linha está sendo anexada, o código salva uma cópia dos valores originais do banco de dados em um objeto DataTable, que por sua vez é armazenado em ViewState.

Alternar para modo Design.
Pela aba Standard da Caixa de Ferramentas, arraste um controle Botão na página.
Na janela Propriedades, clique no botão Propriedades () para exibir as propriedades do controle Button.
No (ID) de campo, digite UpdateButton.
No Texto de campos, insira a atualização.
Clique no botão Eventos () para exibir eventos para o controle Button.
No clicar campo, digite UpdateButton_Click e pressione ENTER.

O Visual Web Developer cria uma manipulador de eventos para o controle Button no evento Click.O código terá o aspecto do exemplo de código a seguir.
```
Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As EventArgs)

End Sub
```
```
protected void UpdateButton_Click(object sender, EventArgs e)
{

}
```

Substitua o procedimento gerado pelo código a seguir.

Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As EventArgs)
    originalDataTable = CType(ViewState("originalValuesDataTable"), System.Data.DataTable)

    For Each r As GridViewRow In GridView1.Rows
        If IsRowModified(r) Then GridView1.UpdateRow(r.RowIndex, False)
    Next

    ' Rebind the Grid to repopulate the original values table.
    tableCopied = False
    GridView1.DataBind()
End Sub

Protected Function IsRowModified(ByVal r As GridViewRow) As Boolean
    Dim currentID As Integer
    Dim currentLastName As String
    Dim currentFirstName As String

    currentID = Convert.ToInt32(GridView1.DataKeys(r.RowIndex).Value)

    currentLastName = CType(r.FindControl("LastNameTextBox"), TextBox).Text
    currentFirstName = CType(r.FindControl("FirstNameTextBox"), TextBox).Text

    Dim row As System.Data.DataRow = _
        originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))(0)

    If Not currentLastName.Equals(row("LastName").ToString()) Then Return True
    If Not currentFirstName.Equals(row("FirstName").ToString()) Then Return True

    Return False
End Function

protected void UpdateButton_Click(object sender, EventArgs e)
{
    originalDataTable = (DataTable)ViewState["originalValuesDataTable"];

    foreach (GridViewRow r in GridView1.Rows)
        if (IsRowModified(r)) { GridView1.UpdateRow(r.RowIndex, false); }

    // Rebind the Grid to repopulate the original values table.
    tableCopied = false;
    GridView1.DataBind();
}

protected bool IsRowModified(GridViewRow r)
{
    int currentID;
    string currentLastName;
    string currentFirstName;

    currentID = Convert.ToInt32(GridView1.DataKeys[r.RowIndex].Value);

    currentLastName = ((TextBox)r.FindControl("LastNameTextBox")).Text;
    currentFirstName = ((TextBox)r.FindControl("FirstNameTextBox")).Text;

    DataRow row =
        originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))[0];

    if (!currentLastName.Equals(row["LastName"].ToString())) { return true; }
    if (!currentFirstName.Equals(row["FirstName"].ToString())) { return true; }

    return false;
}

Observação:
O procedimento executa uma comparação de strings usando o valor em cada controle editável TextBox e o valor armazenado em cache no objeto DataTable.Se você tiver formatado o texto no controle TextBox, os valores podem ser equivalentes, mas suas representações em string não corresponderão.Por exemplo, se você tiver formatado um valor DateTime usando o formato pequeno de data ({0:d}), o valor no controle de data TextBox poderia ser 3/2/2005.O representação em string do valor de data pelo objeto DataTable seria 3/2/2005 12:00 AM.Nesses casos, você deve adicionar lógica de comparação que leva os formatos e configurações de localização em consideração.

O procedimento executa uma comparação de strings usando o valor em cada controle editável TextBox e o valor armazenado em cache no objeto DataTable.Se você tiver formatado o texto no controle TextBox, os valores podem ser equivalentes, mas suas representações em string não corresponderão.Por exemplo, se você tiver formatado um valor DateTime usando o formato pequeno de data ({0:d}), o valor no controle de data TextBox poderia ser 3/2/2005.O representação em string do valor de data pelo objeto DataTable seria 3/2/2005 12:00 AM.Nesses casos, você deve adicionar lógica de comparação que leva os formatos e configurações de localização em consideração.

O procedimento itera através das linhas do controle GridView e chama a função personalizada IsRowModified para cada linha.A função compara a linha atual com a linha correspondente do objeto DataTable e retorna true se a linha foi alterada.Para quaisquer linhas que foram alteradas, o código do manipulador de botão Click chama o método UpdateRow do controle GridView.

Testando a Página

Agora você pode executar a página para testar o código.

Para testar a página

Pressione CTRL+F5 para executar a página.

A página aparece no navegador.O controle GridView exibe as linhas de dados da tabela de funcionários de Northwind em páginas de dados editáveis.
Modifique alguns valores.
Clique em Update.

As linhas modificadas serão atualizadas no banco de dados.
Feche o navegador.

Próximas etapas

Essa explicação passo a passo ilustrou como se pode estender a funcionalidade do controle GridView para habilitar as atualizações de várias linhas de dados em uma página Web ASP.NET.Você poderia também estender seu aplicativo para permitir aos usuários adicionar novas linhas de dados usando um controle DetailsView ou FormView.Você também pode habilitar aos usuários trabalhar com controles que não seja um controle TextBox para editar os valores, como um controle DropDownList.Para obter mais informações, consulte os seguintes tópicos:

Consulte também

Tarefas

Como: Proteger seqüências de conexão quando usando controles de fontes de dados

Passo-a-passo: Exibindo uma Lista Suspensa Durante a Edição no Controle GridView do Servidor Web

Explicação passo a passo: Acesso básico a dados em páginas da Web

Partilhar via