Tutorial: Realizar actualizaciones masivas en filas enlazadas a un control de servidor Web GridView

Actualización: noviembre 2007

Al habilitar la edición para un control GridView, de forma predeterminada se puede editar sólo una fila a la vez. Este tutorial le muestra cómo extender la funcionalidad del control GridView para que los usuarios puedan modificar varias filas y, a continuación, guardar todos los cambios haciendo clic en un botón. Este tutorial utiliza un control SqlDataSource para recuperar los resultados del origen de datos y administrar las actualizaciones. El control SqlDataSource actúa como origen de datos para el control GridView.

Durante este tutorial aprenderá a:

  • Establecer conexión con una base de datos de SQL Server en Microsoft Visual Web Developer.

  • Utilizar el control SqlDataSource para administrar el acceso a datos.

  • Mostrar los datos devueltos de la base de datos en el control GridView.

  • Configurar el control GridView para permitir a los usuarios editar varias filas de una vez.

Para poder completar este tutorial, necesitará:

  • Visual Web Developer (Visual Studio).

  • Microsoft Data Access Components (MDAC) versión 2.7 o posterior.

    Si utiliza Microsoft Windows XP o Windows Server 2003, ya tiene MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, tal vez necesite actualizar la versión de MDAC instalada en su equipo. Para obtener más información, vea Microsoft Data Access Components (MDAC) Installation en la biblioteca de MSDN.

  • Obtener acceso a la base de datos Northwind de SQL Server. Si necesita una copia de la base de datos Northwind para SQL Server, vea Installing Sample Databases en SQL Server 2005 Books Online.

    Aa992036.alert_note(es-es,VS.100).gifNota:

    Si necesita información sobre cómo iniciar sesión en el equipo en que se ejecuta SQL Server, póngase en contacto con el administrador del servidor.

Si ya ha creado un sitio web en Visual Web Developer tras completar Tutorial: Crear una página Web básica en Visual Web Developer, puede utilizar ese sitio web e ir a la sección siguiente. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Sitio Web. Si utiliza Visual Web Developer Express, en el menú Archivo, haga clic en NuevoSitio Web.

    Aparece el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

  4. En la lista Ubicación, haga clic en Sistema de archivos y escriba el nombre de la carpeta donde desee guardar las páginas del sitio Web.

    Por ejemplo, escriba el nombre de carpeta C:\WebSites\BulkUpdate.

  5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que desee trabajar.

  6. Haga clic en Aceptar.

    Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Para mostrar datos en una página Web de ASP.NET, necesita lo siguiente:

  • Una conexión con un origen de datos como una base de datos.

    En el procedimiento siguiente creará una conexión a la base de datos Northwind de SQL Server.

  • Un control de origen de datos en la página, que interactúa con el origen de datos (la base de datos) para leer y escribir datos.

  • Un control en la página para mostrar los datos.

En el procedimiento siguiente se mostrarán los datos de un control GridView. El control GridView obtendrá sus datos de un control SqlDataSource.

Para agregar un origen de datos al control GridView

  1. Abra o cambie a la página Default.aspx.

  2. Cambie a la vista Diseño.

  3. Arrastre un control SqlDataSource desde la ficha Datos del Cuadro de herramientas hasta la página.

    Si la etiqueta inteligente Tareas de SqlDataSource no aparece, haga clic con el botón secundario del mouse en el control SqlDataSource y haga clic en Mostrar etiqueta inteligente.

  4. En el menú Tareas de SqlDataSource, haga clic en Configurar origen de datos.

    Aparecerá el asistente Configurar origen de datos.

  5. Haga clic en Nueva conexión.

    Aparece el cuadro de diálogo Agregar conexión.

  6. Si se requiere, siga uno de los procedimientos siguientes. La Interfaz de usuario exacta que ve depende de las conexiones de datos que haya realizado previamente en Visual Web Developer.

    • Si la lista Origen de datos no muestra Microsoft SQL Server (SqlClient), haga clic en Cambiar y, en el cuadro de diálogo Cambiar origen de datos, seleccione Microsoft SQL Server.

    • Si aparece el cuadro de diálogo Elegir origen de datos en lugar del cuadro de diálogo Propiedades de la conexión, en la lista Origen de datos, seleccione el tipo de origen de datos que desea utilizar. En este tutorial, el tipo de origen de datos es Microsoft SQL Server. En la lista Proveedor de datos, haga clic en Proveedor de datos de .NET Framework para servidor SQL Server y, a continuación, haga clic en Continuar.

  7. En la página Agregar conexión, en el cuadro de texto Nombre de servidor, escriba el nombre del equipo en el que se ejecuta la base de datos Northwind de SQL Server.

  8. En la sección Conexión con el servidor, seleccione la opción adecuada para tener acceso a la base de datos de SQL Server (seguridad integrada o Id. y contraseña específicos). Si se requiere, escriba un nombre de usuario y contraseña.

    Aa992036.alert_note(es-es,VS.100).gifNota:

    Si necesita información sobre cómo iniciar sesión en el equipo en que se ejecuta SQL Server, póngase en contacto con el administrador del servidor.

  9. Si escribe una contraseña, active la casilla Guardar mi contraseña.

  10. Haga clic en Seleccionar o escribir nombre de base de datos y escriba Northwind.

  11. Haga clic en Probar conexión y, cuando esté seguro de que funciona, haga clic en Aceptar.

  12. En el asistente Configurar origen de datos, haga clic en Siguiente.

  13. Asegúrese de que está activada la casilla Sí, guardar esta conexión como.

  14. Llame a la conexión NorthwindConnectionString y, a continuación, haga clic en Siguiente.

  15. En la página Configurar la instrucción Select, seleccione Especificar columnas de una tabla o vista.

  16. En la lista Nombre, seleccione Employees.

  17. En Columnas, seleccione EmployeeID, LastName y FirstName.

  18. Haga clic en Avanzado.

  19. Active la casilla Generar instrucciones INSERT, UPDATE y DELETE y, a continuación, haga clic en Aceptar.

  20. Haga clic en Siguiente.

  21. Haga clic en Finalizar.

Después de haber configurado un control de origen de datos para administrar datos, necesita un control en la página para mostrar los datos.

En el procedimiento siguiente se mostrarán los datos de un control GridView. El control GridView obtendrá sus datos del control SqlDataSource que ha agregado anteriormente.

Para permitir a los usuarios editar el contenido de todo el control GridView de una vez (en lugar de editar sólo una fila a la vez), debe personalizar el control GridView. Reemplazará los elementos de visualización predeterminados en cada columna con elementos modificables y, a continuación, los enlazará al origen de datos. Para llevarlo a cabo, creará las columnas TemplateField. En ItemTemplate para cada columna TemplateField, agregará un control TextBox enlazado donde los usuarios pueden editar los datos.

Para agregar y configurar un control GridView que permita mostrar datos

  1. Asegúrese de que está en la vista Diseño en la página Default.aspx.

  2. Desde la ficha Datos del Cuadro de herramientas, arrastre un control GridView a la página.

    En el panel Tareas de GridView, en el cuadro de lista Elegir origen de datos, seleccione el control SqlDataSource que agregó previamente, SqlDataSource1.

  3. Seleccione Habilitar paginación.

  4. Haga clic en Editar columnas.

    Aparece el cuadro de diálogo Campos.

  5. En Campos seleccionados, seleccione FirstName.

  6. Haga clic en Convertir este informe en TemplateField.

  7. Convierta el campo LastName en un campo de plantilla siguiendo los mismos pasos que con el campo FirstName. No convierta el campo EmployeeId, porque contiene la clave principal y, por tanto, no es modificable.

  8. Haga clic en Aceptar.

  9. En el menú Tareas de GridView, seleccione Editar plantillas.

  10. En la lista Mostrar, en FirstName, haga clic en EditItemTemplate.

    El control GridView muestra un área modificable con el diseño predeterminado para la columna FirstName en modo de edición.

  11. Haga clic con el botón secundario del mouse en el control TextBox de EditItemTemplate y, a continuación, haga clic en Copiar.

  12. Haga clic con el botón secundario del mouse en el control GridView y, a continuación, haga clic en Mostrar etiqueta inteligente.

  13. En la lista Mostrar, en FirstName, haga clic en ItemTemplate.

    El control GridView muestra ahora el diseño predeterminado de la columna FirstName en modo de presentación.

  14. Elimine el control Label existente.

  15. Haga clic con el botón secundario del mouse en el área modificable ItemTemplate y, a continuación, haga clic en Pegar.

    Ha copiado el control TextBox, incluso su configuración del enlace de datos, del diseño EditItemTemplate al diseño ItemTemplate.

  16. Seleccione el control TextBox y, en la ventana Propiedades, establezca la propiedad (ID) en FirstNameTextBox. Esto asegura que el control TextBox que pegó tiene un identificador distinto del que copió.

  17. Establezca la propiedad MaxLength en 10 (la longitud máxima del campo en la base de datos).

    Esto garantiza que los usuarios no escriban más información de la que el campo FirstName está configurado para almacenar.

  18. Repita los nueve pasos anteriores, pero esta vez modifique el campo LastName. Reemplace el control Label existente por un TextBox copiado del diseño EditItemTemplate y establezca la propiedad ID en LastNameTextBox.

    Para la propiedad MaxLength del control TextBox, especifique un valor de 20.

  19. Haga clic con el botón secundario del mouse en el control GridView y, a continuación, haga clic en Terminar edición de plantilla.

Después de haber configurado el control GridView para mostrar datos modificables, tiene que agregar el código para realizar la actualización masiva. En esta sección, hará lo siguiente:

  • Agregue un control Button y en su controlador Click, agregue el código para actualizar masivamente los cambios de cada fila del control GridView.

  • Agregue un objeto DataTable que almacene los valores de datos originales.

  • Agregue el código para determinar si se ha modificado una fila. Los valores actuales mostrados en el control GridView se compararán con los valores originales almacenados en el objeto DataTable. Si uno o varios de los valores mostrados no coinciden con el valor original, la fila se actualizará en la base de datos. En caso contrario, la fila no se incluirá en la actualización masiva.

Para crear un procedimiento con objeto de realizar la actualización masiva

  1. Cambie a la vista Diseño.

  2. Seleccione el control GridView y, en la ventana Propiedades, haga clic en el botón Eventos (Botón de eventos de la ventana Propiedades) para mostrar los eventos del control GridView.

  3. En el campo RowDataBound, escriba GridView1_RowDataBound y presione ENTRAR.

    Visual Web Developer crea un controlador de eventos para el evento RowDataBound del control GridView. El código debe tener la apariencia del ejemplo de código siguiente.

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
    
    }
    
    
    
  4. Reemplace el procedimiento generado con el código siguiente (incluso las variables privadas).

    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;
            }
    }
    
    
    

    El código se ejecuta siempre que el control GridView realice el enlace de datos. Mientras la primera fila se está enlazando, el código guarda una copia de los valores de la base de datos original en un objeto DataTable, que se almacena a su vez en ViewState.

  5. Cambie a la vista Diseño.

  6. Desde la ficha Estándar del cuadro de herramientas, arrastre un control Button a la página.

  7. En la ventana Propiedades, haga clic en el botón Propiedades (Captura de pantalla de PropertySymbolButton) para mostrar las propiedades del control Button.

  8. En el campo (Id.), escriba UpdateButton.

  9. En el campo Texto, escriba Update.

  10. Haga clic en el botón Eventos (Botón de eventos de la ventana Propiedades) para mostrar los eventos del control Button.

  11. En el campo Click, escriba UpdateButton_Click y presione ENTRAR.

    Visual Web Developer crea un controlador de evento para el evento Click del control Button. El código debe tener la apariencia del ejemplo de código siguiente.

    protected void UpdateButton_Click(object sender, EventArgs e)
    {
    
    }
    
    
    
  12. Reemplace el procedimiento generado con el código siguiente.

    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;
    }
    
    
    
    Aa992036.alert_note(es-es,VS.100).gifNota:

    El procedimiento realiza una comparación de cadenas utilizando el valor de cada control TextBox modificable y el valor almacenado en el objeto DataTable en memoria caché. Si ha dado formato al texto en el control TextBox, los valores podrían ser equivalentes, pero sus representaciones de cadena no coincidirán. Por ejemplo, si ha dado formato a un valor DateTime utilizando el formato de fecha pequeño ({0:d}), el valor del control TextBox de fecha podría ser 3/2/2005. La representación de cadena del valor de fecha del objeto DataTable sería 3/2/2005 12:00 AM. En estos casos, debe agregar lógica de comparación que tiene en cuenta los formatos y la configuración de la localización.

    El procedimiento itera por filas del control GridView y llama a la función personalizada IsRowModified en cada fila. La acción compara la fila actual con la fila correspondiente del objeto DataTable y devuelve true si la fila ha cambiado. En las filas que han cambiado, el código del controlador Click del botón llama al método UpdateRow del control GridView.

Ahora puede ejecutar la página para probar el código.

Para probar la página

  1. Presione CTRL+F5 para ejecutar la página.

    La página se muestra en el explorador. El control GridView muestra las filas de datos de la tabla Northwind Employees en páginas modificables de datos.

  2. Modifique algunos valores.

  3. Haga clic en Actualizar.

    Las filas modificadas se actualizan en la base de datos.

  4. Cierre el explorador.

Este tutorial ha explicado cómo puede extender la funcionalidad del control GridView para habilitar actualizaciones de varias filas de datos en una página Web ASP.NET. También puede desear extender su aplicación para permitir que los usuarios agreguen nuevas filas de datos mediante un control DetailsView o FormView. También puede permitir a los usuarios trabajar con controles distintos del control TextBox para editar los valores, como un control DropDownList. Para obtener más información, vea los temas siguientes:

Adiciones de comunidad

AGREGAR
Mostrar: