Exportar (0) Imprimir
Expandir todo

Permitir a los usuarios editar elementos en un control DataGrid de servidor Web

Visual Studio .NET 2003

Puede permitir a los usuarios que editen sobre el terreno la información de las filas de la cuadrícula. Para ello, se crea una columna Editar, Actualizar, Cancelar mediante el Generador de propiedades y se agrega código a los eventos EditCommand, UpdateCommand y CancelCommand del DataGrid. En tiempo de ejecución, esta columna muestra un control etiquetado como "Editar". Cuando el usuario hace clic en este botón Editar, la fila de datos se muestra en controles editables tales como cuadros de texto y el botón Editar se reemplaza por controles Actualizar y Cancelar. Al hacer clic en el botón Actualizar se produce el evento UpdateCommand, donde se agrega código para propagar los datos de vuelta en el origen de datos. Al hacer clic en el botón Cancelar se produce el evento CancelCommand, donde se agrega código para enlazar de nuevo los datos originales al control DataGrid.

Para agregar una columna Editar, Actualizar, Cancelar

  1. Agregue un control DataGrid a la página de formularios Web Forms. Para obtener detalles, vea Agregar controles DataGrid de servidor Web a una página de formularios Web Forms.
  2. En la vista Diseño, seleccione el control DataGrid y, a continuación, haga clic en el vínculo Generador de propiedades en la parte inferior de la ventana Propiedades.
  3. En el cuadro de diálogo Propiedades de DataGrid, haga clic en la ficha General. Si desea asociar datos de un campo de clave a todas las filas de la cuadrícula, seleccione un nombre de campo de la lista Campo de claves de datos. Puede utilizar esta información para actualizar un elemento específico del origen de datos. Por ejemplo, si establece DataKeyField en customerId, podrá más tarde actualizar el registro mediante una instrucción como la siguiente:
    ' Visual Basic
    Dim customerId as Integer
    customerId=DataGrid1.DataKeys(DataGrid1.SelectedIndex)
    
    // C#
    int customerId;
    customerId=(int)DataGrid1.DataKeys[DataGrid1.SelectedIndex];
    this.Label1.Text = customerId.ToString();
    
  4. Cambie a la ficha Columnas y expanda el nodo Columna Botón del cuadro Columnas disponibles.
  5. Seleccione Editar, Actualizar, Cancelar y haga clic en el botón Agregar ().
  6. Establezca la información de encabezado, pie y orden, según sea necesario. Para obtener más información, vea Agregar columnas botón a un control DataGrid de servidor Web.
  7. Utilice las propiedades Editar texto, Cancelar texto y Actualizar texto para especificar el texto que aparece en los botones.
  8. Utilice la propiedad Button type para especificar si los botones se muestran como PushButtons o LinkButtons.
  9. Si desea que la fila tenga un aspecto especial en el modo de edición, establezca las propiedades del objeto EditItemStyle. Para obtener más detalles, vea Especificar el formato de un elemento de cuadrícula en un control DataGrid de servidor Web.
  10. Debe crear la plantilla EditItemTemplate para todas las columnas plantilla. Para obtener más información, vea Agregar columnas plantilla a un control DataGrid de servidor Web.

Cuando el usuario hace clic en un botón, se produce un evento en el control DataGrid correspondiente al botón. Agregue código para implementar la tarea correspondiente al evento, tal como se describe en la tabla siguiente:

Evento de DataGrid Response
EditCommand Establecer la propiedad EditItemIndex para poner la fila actual en modo de edición.
UpdateCommand Extraer el contenido de la fila actual y actualizar el origen de datos, cancelar el modo de edición de la fila y enlazar de nuevo los datos actualizados al control DataGrid.
CancelCommand Cancelar el modo de edición de la fila y enlazar de nuevo los datos originales al control DataGrid.

Para crear controladores para los eventos de Editar, Actualizar y Cancelar

  1. Cree un controlador de eventos para el evento EditCommand del control. Para obtener más información, vea Crear controladores de eventos en páginas de formularios Web Forms. En el controlador de eventos, haga lo siguiente:
    1. Establezca la propiedad EditItemIndex del control DataGrid como el valor de índice del elemento que se va a poner en modo de edición. El índice del elemento en que hizo clic el usuario está disponible mediante la propiedad ItemIndex del objeto Item.
    2. Enlace de nuevo el control a su origen de datos.

      El controlador de eventos puede tener el aspecto siguiente:

      ' Visual Basic
      Private Sub DataGrid1_EditCommand(ByVal source As Object, _
      ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
      Handles DataGrid1.EditCommand
         DataGrid1.EditItemIndex = e.Item.ItemIndex
         DataGrid1.DataBind()
      End Sub
         
      // C#
      private void DataGrid1_EditCommand(object source, 
      System.Web.UI.WebControls.DataGridCommandEventArgs e)
      {
         DataGrid1.EditItemIndex = e.Item.ItemIndex;
         DataGrid1.DataBind();
      }
      
  2. Cree un método para el evento UpdateCommand que lea los valores de los controles de edición del elemento actual y los escriba de nuevo en el origen de datos.
    Nota de seguridad   Los datos escritos por un usuario en una página de formularios Web Forms pueden incluir una secuencia de comandos de cliente potencialmente maliciosa. De forma predeterminada, la página de formularios Web Forms valida los datos escritos por el usuario para comprobar que no incluyen secuencias de comandos ni elementos HTML. Para obtener más información, vea Ataques mediante secuencias de comandos y Proteger una aplicación Web frente a ataques mediante secuencias de comandos.
    • Columnas enlazadas   La propiedad e.Item contiene una colección Cells indizada que contiene un objeto Cell para cada columna del control DataGrid. Los datos se encuentran en el primer control de la colección Controls de la celda. Las instrucciones siguientes recuperan los datos de cadena del control TextBox que se muestra en la segunda columna:
      ' Visual Basic
      Dim newData As String
      Dim aTextBox As TextBox
      aTextBox = CType(e.Item.Cells(1).Controls(0), TextBox)
      newData = aTextBox.Text
      
      // C#
      string newData;
      TextBox aTextBox;
      aTextBox = (TextBox)(e.Item.Cells[1].Controls[0]);
      newData = aTextBox.Text;
      
    • Columnas plantilla   La propiedad e.Item contiene una colección Cells indizada que contiene un Cell para cada columna del DataGrid. Los datos están contenidos en controles que se crean durante la edición de la plantilla. Utilice el método FindControl y el nombre del control para recuperar los datos. Las instrucciones siguientes recuperan los datos de cadena del control TextBox cuya propiedad Name es "FirstName" en la segunda columna:
      ' Visual Basic
      Dim newName As String
      Dim box As TextBox
      box = CType(e.Item.Cells(1).FindControl("FirstName"), TextBox)
      newName = box.text
      
      // C#
      string newName;
      TextBox box;
      box = (TextBox)(e.Item.Cells[1].FindControl("FirstName"));
      newName = box.Text;
      
    • Después de actualizar el origen de datos, establezca la propiedad EditItemIndex como -1 para sacar el elemento del modo de edición y, a continuación, enlace de nuevo con el origen de datos. A continuación se muestra un ejemplo completo:
      ' Visual Basic
      Private Sub DataGrid1_UpdateCommand(ByVal source As Object, _
      ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
      Handles DataGrid1.UpdateCommand
         ' The quantity is in the 7th column.
         Dim quantityCell As TableCell = e.Item.Cells(6)
      
         ' The TextBox is the 0th element of the Controls collection.
         Dim quantityBox As TextBox = _
            CType(quantityCell.Controls(0), TextBox)
      
         ' Extract the quantity from the box.
         Dim quantity As Integer = System.Int32.Parse(quantityBox.Text)
      
         ' Use quantity to update the data source.
      
         ' Switch out of edit mode.
         DataGrid1.EditItemIndex = -1
         DataGrid1.DataBind()
      End Sub
      
      // C#
      private void DataGrid1_UpdateCommand(object source, 
      System.Web.UI.WebControls.DataGridCommandEventArgs e)
      {
         // The quantity is in the 7th column.
         TableCell quantityCell = e.Item.Cells[6];
         
         // The TextBox is the 0th element of the Controls collection.
         TextBox quantityBox = (TextBox)quantityCell.Controls[0];
      
         // Extract the quantity from the box.
         int quantity = System.Int32.Parse(quantityBox.Text);
      
         // Use quantity to update the data source.
      
         // Switch out of edit mode.
         DataGrid1.EditItemIndex = -1;
         DataGrid1.DataBind();
      }
      
  3. Cree un método para el evento CancelCommand que establezca la propiedad EditItemIndex como –1 para salir del modo de edición y, a continuación, enlace de nuevo con el origen de datos:
    ' Visual Basic
    Private Sub DataGrid1_CancelCommand(ByVal source As Object, _
    ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
    Handles DataGrid1.CancelCommand
       DataGrid1.EditItemIndex = -1
       DataGrid1.DataBind()
    End Sub
    
    // C#
    private void DataGrid1_CancelCommand(object source, 
    System.Web.UI.WebControls.DataGridCommandEventArgs e)
    {
       DataGrid1.EditItemIndex = -1;
       DataGrid1.DataBind();
    }
    

Vea también

Agregar controles DataGrid de servidor Web a una página de formularios Web Forms | DataGrid (Control de servidor Web) | Introducción al control DataGrid de servidor Web | Permitir a los usuarios seleccionar elementos en un control DataGrid de servidor Web | Permitir a los usuarios eliminar elementos en un control DataGrid de servidor Web

Mostrar:
© 2015 Microsoft