Tutorial: Mostrar datos con formato en páginas web con el control de servidor web FormView

Actualización: noviembre 2007

ASP.NET proporciona varios controles que le permiten mostrar y editar registros de datos. En este tutorial, trabajará con el control FormView, que funciona con un único registro de datos a la vez. La característica primaria del control FormView es que le permite crear el diseño del registro mediante la definición de las plantillas. El trabajar con plantillas le permite tener un control completo sobre el diseño y el aspecto de los datos dentro del control. El control FormView también es compatible con actualizaciones como la edición, inserción y eliminación de registros de datos. Si el origen de datos proporciona más de un registro al control FormView, el control le permite examinar los registros de forma individual.

Nota:
También puede editar registros de datos de forma individual con el control DetailsView, lo que proporciona un diseño predefinido para los datos. Para obtener información detallada, vea Información general sobre DetailsView (Control de servidor Web).

Las tareas ilustradas en este tutorial incluyen:

• Crear una página para mostrar información principal-detalle.

• Utilizar un control FormView para crear un diseño de forma libre para un registro de datos.

• Configurar el control FormView para permitir la edición.

Requisitos previos

Para poder completar este tutorial, necesitará:

• Microsoft Visual Web Developer.

• Obtener acceso a la base de datos Northwind de SQL Server. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo Northwind de SQL Server, vea Installing Sample Databases en el sitio Web de Microsoft SQL Server.

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

• 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 MSDN Library.

Crear el sitio Web

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.

   Aparecerá el cuadro de diálogo Nuevo sitio Web.

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

4. En el cuadro Ubicación, escriba el nombre de la carpeta en la que desea guardar las páginas de su sitio Web.

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

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.

Utilizar una lista desplegable como la lista principal

En esta parte del tutorial, agregará una lista desplegable a una página y la llenará con una lista de nombres de productos. Cuando los usuarios seleccionen un producto, la página mostrará los detalles de dicho producto en un control FormView.

Para crear y llenar una lista desplegable

1. Modifique o abra la página Default.aspx. Si trabaja con un sitio Web que ya haya creado, agregue o abra una página con la que pueda trabajar en este tutorial.

2. Cambie a la vista Diseño.

3. Escriba Mostrar información de producto en la página.

4. Desde el grupo Estándar del Cuadro de herramientas, arrastre un control DropDownList a la página.

5. Si el menú Tareas de DropDownList no aparece, haga clic con el botón secundario del mouse en el control DropDownList y luego en Mostrar etiqueta inteligente.

6. En el menú Tareas deDropDownList, active la casilla Habilitar AutoPostBack .

7. Haga clic en Elegir origen de datos para abrir el Asistente para la configuración de orígenes de datos.

8. En la lista Seleccionar un origen de datos, haga clic en <Nuevo origen de datos>.

9. Haga clic en Base de datos.

   Esto especifica que desea obtener datos de una base de datos que admite instrucciones SQL.

   En el cuadro Especificar un id. para el origen de datos, se muestra el nombre de un control de origen de datos predeterminado. Puede dejar este nombre.

10. Haga clic en Aceptar.

    El asistente muestra una página en la que puede seleccionar una conexión.

11. Haga clic en el botón Nueva conexión.

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

    • 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 la página Elegir origen de datos, en la lista Origen de datos, seleccione el tipo de origen de datos que utilizará. Para 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 haga clic en Continuar.

12. En el cuadro de diálogo Agregar conexión, siga los siguientes pasos:

    1. En el cuadro Nombre de servidor, escriba el nombre del equipo que ejecuta SQL Server.

    2. Para las credenciales de inicio de sesión, seleccione la opción necesaria para tener acceso a la base de datos de SQL Server que está ejecutándose (seguridad integrada o identificador específico y contraseña) y, si fuera necesario, escribir un nombre de usuario y contraseña. Active la casilla Guardar mi contraseña si escribió una contraseña.

    3. Seleccione el botón Seleccionar o escribir nombre de base de datos y escriba Northwind.

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

    Regresa al asistente y la información de la conexión ya está completada.

13. Haga clic en Siguiente.

14. Asegúrese de que la casilla Sí, guardar esta conexión como esté seleccionada y haga clic en Siguiente. (Puede dejar el nombre de la cadena de conexión predeterminada.)

    El asistente muestra una página en la que puede especificar los datos que desea obtener de la base de datos.

15. Haga clic en Especificar columnas de una tabla o vista.

16. En la lista Nombre, haga clic en Productos.

17. Debajo de Columnas, seleccione ProductID y ProductName.

18. Haga clic en Siguiente.

19. Haga clic en Consulta de prueba para asegurarse de que está recuperando los datos que desea.

20. Haga clic en Finalizar.

    Regresa al asistente.

21. En la lista Seleccionar un campo de datos para mostrar en la lista desplegable, haga clic en ProductName.

22. En la lista Seleccionar un campo de datos para el valor de la lista desplegable, seleccione ProductID.

    Esto especifica que cuando se selecciona un elemento, se devolverá el campo ProductID como el valor del elemento.

23. Haga clic en Aceptar.

Antes de continuar, pruebe la lista desplegable.

Para probar la lista desplegable.

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

2. Cuando se muestre la página, examine la lista desplegable.

3. Seleccione un nombre de producto para estar seguro de que la lista realiza una devolución de datos.

Agregar un control FormView

Ahora agregará un control FormView para mostrar detalles del producto. El control FormView obtiene sus datos de un segundo control de origen de datos que agregue a la página. El segundo control de origen de datos contiene una consulta parametrizada que obtiene el registro del producto para el elemento que se encuentra seleccionado en el control DropDownList.

Para agregar un control FormView

1. Desde el grupo Datos del Cuadro de herramientas, arrastre un control FormView a la página.

2. Si el menú Tareas de FormView no aparece, haga clic con el botón secundario del mouse en el control FormView y luego en Mostrar etiqueta inteligente.

3. En el menú Tareas de FormView, en la lista Elegir origen de datos, haga clic en <Nuevo origen de datos>.

   Aparece el cuadro de diálogo Asistente para la configuración de orígenes de datos.

4. Haga clic en Base de datos.

   El control FormView obtendrá los datos de la misma tabla que el control DropDownList.

   En el cuadro Especificar un id. para el origen de datos, se muestra el nombre de un control de origen de datos predeterminado. Puede dejar este nombre.

5. Haga clic en Aceptar.

   Se inicia el asistente Configurar origen de datos.

6. En la lista ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos?, seleccione la conexión que ha creado y almacenado con anterioridad en el tutorial.

7. Haga clic en Siguiente.

   El asistente muestra una página en la que puede crear una instrucción SQL.

8. En la lista Nombre debajo de Especificar columnas de una tabla o vista, seleccione Productos.

9. En el cuadro Columnas, seleccione ProductID, ProductName y UnitPrice.

10. Haga clic en el botón WHERE.

    Aparece el cuadro de diálogo Agregar cláusula WHERE.

11. En la lista Columna, seleccione ProductID.

12. En la lista Operador, seleccione =.

13. En la lista Origen, seleccione Control.

14. Debajo de Propiedades del parámetro, en la lista Control ID, seleccione DropDownList1.

    Los dos últimos pasos especifican que la consulta obtendrá el valor de búsqueda para el identificador del producto desde el control DropDownList que agregó con anterioridad.

15. Haga clic en Agregar.

16. Haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.

17. Haga clic en Avanzado.

    Aparece el cuadro de diálogo Opciones de generación SQL avanzadas.

18. Active la casilla Generar instrucciones Insert, Update y Delete.

    Esta opción hace que el asistente cree instrucciones de actualización SQL basándose en las instrucciones Select que haya configurado. Más adelante en el tutorial, utilizará el control FormView para editar e insertar registros, lo que requiere instrucciones Update en el control de origen de datos.

19. Haga clic en Aceptar.

20. Haga clic en Siguiente.

21. En la página Vista previa, haga clic en Consulta de prueba.

    El asistente muestra un cuadro de diálogo que le solicita un valor para utilizarlo en la cláusula WHERE.

22. En el cuadro Valor, escriba 4 y, a continuación, haga clic en Aceptar.

    Aparece la información del producto.

23. Haga clic en Finalizar.

Personalizar el diseño en el control FormView

La razón para utilizar el control FormView es que puede definir el diseño del registro que se muestra. En esta sección del tutorial, personalizará el diseño del registro mediante la edición de una plantilla. Para su diseño, utilizará una tabla HTML.

Para dar formato al diseño

1. Haga clic en el control FormView para seleccionarlo y luego arrastre el controlador de cambio de tamaño del lado derecho del control para hacerlo tan ancho como la página actual.

2. Arrastre el controlador de cambio de tamaño en la parte inferior del control para cambiar el alto del control a unos 400 píxeles. (El alto exacto no es importante.)

3. Haga clic con el botón secundario del mouse en el control, haga clic en Editar plantilla y luego en ItemTemplate.

   El control se vuelve a mostrar en modo de edición de plantillas de elementos. La plantilla de elementos contiene el texto estático y los controles que se utilizan para mostrar el registro de datos cuando se ejecuta la página. De manera predeterminada, Visual Web Developer llena la plantilla de elementos con un control Label enlazado para cada columna de datos en el origen de datos. Además, Visual Web Developer genera texto estático para que cada etiqueta actúe como un título.

   La plantilla también se genera con tres controles LinkButton con el texto Editar, Eliminar y Nuevo.

4. Sitúe el punto de inserción en la parte superior de la plantilla de elementos, presione ENTRAR unas cuantas veces para hacer sitio y después, en la parte superior de la plantilla escriba Detalles del producto para que haga de encabezado.

5. Sitúe el cursor debajo de los controles y texto estático y, en el menú Tabla, haga clic en Insertar tabla.

   Está creando una tabla HTML como el contenedor para el texto y los controles.

6. En el cuadro de diálogo Insertar tabla, establezca Filas en 4 y Columnas en 2.

7. Haga clic en Aceptar para cerrar el cuadro de diálogo Insertar tabla.

8. Seleccione todas las celdas de la tabla y, a continuación, en el menú Tabla, seleccione Formato de celda.

   Aparecerá el cuadro de diálogo Propiedades de celda.

9. Establezca Ancho en 35 píxeles (px) y Alto en 30 píxeles (px).

10. Haga clic en Aceptar para cerrar el cuadro de diálogo Propiedades de celda.

11. Arrastre el control ProductIdLabel hasta la celda de la parte superior derecha.

12. Arrastre el control ProductNameLabel hasta la segunda celda de la parte derecha.

13. Arrastre el control UnitPriceLabel hasta la tercera celda de la parte derecha.

14. En la columna de la izquierda, escriba texto estático para que actúe como título para los controles Label. Por ejemplo, en la celda junto al control ProductIdLabel, escriba ID. Puede escribir el texto del título que desee.

15. Haga clic con el botón secundario del mouse en la columna de la izquierda, haga clic en Seleccionar y luego en Columna.

16. En la ventana Propiedades, establezca align en right para que el texto del título quede alineado a la derecha.

17. Seleccione la columna de la derecha y arrastre el borde derecho para ensanchar la tabla hasta que se vean los nombres largos de los productos.

18. Seleccione el texto que ha generado Visual Web Developer (por ejemplo, el texto ProductID) y elimínelo.

19. Haga clic con el botón secundario del mouse en la barra de título del control FormView y haga clic en Terminar edición de plantilla.

    El editor de plantillas se cierra y aparece el control con el diseño que ha creado.

Prueba del control FormView

Ahora pueda probar su diseño.

Para probar el control FormView

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

2. En el control DropDownList, haga clic en el nombre de un producto.

   El control FormView muestra los detalles sobre el producto.

3. Seleccione un producto diferente y confirme que el control FormView muestra los detalles del producto.

4. Cierre el explorador.

Agregar las funciones de edición e inserción en el control FormView

El control FormView puede mostrar registros individuales y además admite edición, eliminación e inserción.

En esta parte del tutorial, agregará la posibilidad de editar el registro que se muestre en ese momento. Para editar el registro, defina una plantilla diferente que contenga cuadros de texto (y posiblemente otros controles).

Para agregar la función de edición al control FormView

1. Haga clic con el botón secundario del mouse en el control FormView, haga clic en Editar plantilla y luego en EditItemTemplate.

   La plantilla del editor aparece mostrando la propiedad EditItemTemplate, que define cómo se muestran los registros cuando el control está en modo de edición. Visual Web Developer llena la plantilla de edición con un control TextBox para cada columna de datos que no sea una clave y agrega texto estático para los títulos. Esto es similar a la manera en que se generó la plantilla de elementos, salvo que en la plantilla de edición, Visual Web Developer genera cuadros de texto.

   Al igual que antes, la plantilla se genera con los controles Actualizar y CancelarLinkButton que se utilizan para guardar y eliminar los cambios durante la edición.

2. Opcionalmente, agregue una tabla de diseño y organice los controles del mismo modo que lo hizo con la plantilla de elementos con anterioridad en el tutorial.

3. Haga clic con el botón secundario del mouse en el control FormView, haga clic en Editar plantilla y luego en InsertItemTemplate.

   Al igual que con la propiedad EditItemTemplate, Visual Web Developer automáticamente crea el diseño de una plantilla de etiquetas y controles TextBox. Los controles se mostrarán cuando los usuarios quieran insertar un registro nuevo en la tabla Productos. La plantilla también se genera con los controles Insertar y CancelarLinkButton.

4. Opcionalmente, agregue una tabla de diseño y organice los controles del mismo modo que lo hizo con la plantilla de elementos de edición.

5. Haga clic con el botón secundario del mouse en el control FormView y haga clic en Terminar edición de plantilla.

   Nota de seguridad:

   Los datos proporcionados por el usuario en una página Web ASP.NET podrían incluir secuencias de comandos de cliente malintencionadas. De forma predeterminada, las páginas Web ASP.NET validan los datos proporcionados por el usuario para asegurarse de que no incluyen secuencias de comandos o elementos HTML. Siempre que esta validación esté habilitada, no tendrá que comprobar explícitamente si algún usuario está insertando secuencias de comandos o elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.

Prueba de edición e inserción

Ahora puede probar a editar e insertar.

Para probar la función de edición del control FormView

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

2. Seleccione un producto en el control DropDownList.

   Los detalles del producto aparecen en el control FormView.

3. Haga clic en Editar.

   El control FormView cambia al modo de edición.

4. Realice un cambio al nombre del producto o al precio de la unidad.

5. Haga clic en Actualizar.

   El registro se guarda y el control FormView cambia al modo de presentación. El cambio se muestra en la presentación.

6. Seleccione un producto diferente.

7. Haga clic en Editar.

8. Realice un cambio al nombre del producto.

9. Haga clic en Cancelar.

   Confirme que el cambio no se ha guardado.

Para probar la función de inserción del control FormView

1. Haga clic en Nuevo en el control FormView.

   El control FormView cambia al modo de inserción y muestra dos cuadros de texto vacíos.

2. Escriba un nuevo nombre de producto y precio y haga clic en Insertar.

   El registro se guarda en la base de datos y el control FormView cambia para mostrar la vista (ItemTemplate).

   Nota:
   El registro nuevo no se muestra en la lista desplegable. Agregará esa función en la siguiente sección.

Volver a mostrar nombres de productos actualizados en la lista desplegable

La página permite ahora ver, editar o eliminar registros en la tabla de la base de datos Productos. Sin embargo, la lista desplegable todavía no está sincronizada con los cambios que realice en el control FormView. Por ejemplo, si inserta un registro nuevo en Productos, la lista desplegable no muestra el registro nuevo a menos que cierre la página y la vuelva a abrir. Además, la página se muestra en un principio con el primer registro de la tabla Productos, que tal vez no sea el que desee.

Es posible agregar código para arreglar estos problemas sin importancia. En esta sección del tutorial, realizará lo siguiente:

• Actualizar la lista desplegable siempre que los usuarios editen o inserten un registro.

• Agregar el texto "(Seleccionar)" a la lista desplegable la primera vez que aparece la página y quitarlo cuando el usuario ha realizado la primera selección.

Para actualizar la lista desplegable cuando los registros se editan o insertan

1. En la vista Diseño de la página, seleccione el control FormView.

2. En la ventana Propiedades, haga clic en el botón Eventos para mostrar una lista de eventos para el control FormView.

3. Haga doble clic en el cuadro ItemInserted.

   Visual Web Developer cambia a la vista de edición de código y crea un controlador para el evento ItemInserted.

4. Agregue el código resaltado siguiente al controlador de eventos.

   Protected Sub FormView1_ItemInserted(ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) _
      Handles FormView1.ItemInserted
         DropDownList1.DataBind()
   End Sub
   

   [C#]

   protected void FormView1_ItemInserted(object sender, 
           FormViewInsertedEventArgs e)
   {
       DropDownList1.DataBind();
   }
   

   El código se ejecuta después de haber insertado el registro nuevo. Vuelve a enlazar la lista desplegable con la tabla Productos, lo que hace que se actualice el contenido de la lista.

5. Cambie a la vista Diseño. (Si está trabajando con una página de código subyacente, cambie a la página Default.aspx y después a Design view.)

6. En la ventana Propiedades, haga clic en el botón Eventos para mostrar una lista de eventos para el control FormView.

7. Haga doble clic en el cuadro ItemUpdated.

   Visual Web Developer cambia a la vista de edición de código y crea un controlador de evento para el evento ItemUpdated.

8. Agregue el siguiente código resaltado:

   Protected Sub FormView1_ItemUpdated(ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) _
      Handles FormView1.ItemUpdated
         DropDownList1.DataBind()
   End Sub
   

   [C#]

   protected void FormView1_ItemUpdated(object sender, 
       FormViewUpdatedEventArgs e)
   {
       DropDownList1.DataBind();
   }
   

   El código se ejecuta después de haber actualizado el registro. Vuelve a enlazar la lista desplegable con la tabla Productos, lo que hace que se actualice el contenido de la lista.

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

10. Edite el nombre del producto de un registro, haga clic en Actualizar y luego examine la lista desplegable para asegurarse de que se muestra el nombre actualizado.

11. Inserte un registro de producto nuevo, haga clic en Insertar y, a continuación, examine la lista desplegable para asegurarse de que el nombre nuevo se ha agregado a la lista.

El paso final es cambiar la lista desplegable para que muestre "(Seleccionar)" y que muestre el control FormView solo cuando los usuarios hayan realizado una selección.

Para agregar una entrada Select al control DropDownList

1. El la vista Diseño, haga doble clic en un espacio en blanco de la página.

   Visual Web Developer crea un controlador de evento para el evento Load de la página.

2. En el controlador, agregue el siguiente código resaltado:

   [Visual Basic]

   Protected Sub Page_Load(ByVal sender As Object, _
           ByVal e As System.EventArgs) Handles Me.Load
       If Not IsPostBack Then        FormView1.Visible = False    End If
   End Sub
   

   [C#]

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           FormView1.Visible = false;
       }
   }
   

   El código se ejecuta cuando se ejecuta la página. Primero realiza una prueba para ver si esto es una devolución de datos; si no, esta es la primera vez que la página se ha ejecutado. Si no es una devolución de datos, el código oculta el control FormView, porque solo desea mostrarlo cuando el usuario selecciona de forma explícita un registro para verlo o editarlo.

3. En la vista Diseño para la página, seleccione el control DropDownList.

4. En la ventana Propiedades, haga clic en los puntos suspensivos (...) en el cuadro Elementos.

   Aparece el cuadro de diálogo Editor de la colección ListItem.

5. Haga clic en Agregar para crear un elemento nuevo.

6. Debajo de Propiedades ListItem, en el cuadro Texto, escriba (Seleccionar).

7. Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de la colección de ListItem.

8. En el cuadro Propiedades, establezca AppendDataBoundItems en true.

   Cuando la lista desplegable se llena durante el enlace de datos, la información del producto se agrega al elemento (Seleccionar) que haya definido.

9. En la ventana Propiedades, haga clic en el botón Eventos para mostrar una lista de eventos para el control DropDownList.

10. Haga doble clic en el cuadro SelectedIndexChanged.

11. Agregue el siguiente código resaltado:

    [Visual Basic]

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender _
        As Object, ByVal e As System.EventArgs) _
        Handles DropDownList1.SelectedIndexChanged
            If DropDownList1.Items(0).Text = "(Select)" Then            DropDownList1.Items.RemoveAt(0)        End If        FormView1.Visible = True
    End Sub
    

    [C#]

    protected void DropDownList1_SelectedIndexChanged(object sender, 
        EventArgs e)
    {
        if(DropDownList1.Items[0].Text == "(Select)")    {        DropDownList1.Items.RemoveAt(0);    }    FormView1.Visible = true;
    }
    

    El código se ejecuta cuando los usuarios seleccionan un elemento en el control DropDownList. Quita el elemento "(Seleccionar)" que agregó con anterioridad (después de comprobar que realmente existe), porque después de que los usuarios seleccionan un elemento, ya no es necesario volverles a pedir que lo hagan. El código también muestra (deja de estar oculto) el control FormView para que los usuarios puedan ver el registro que han seleccionado.

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

    La página solo muestra la lista desplegable, con la palabra (Seleccionar).

13. Seleccione un elemento de la lista.

    El elemento se muestra en el control FormView.

14. Examine la lista desplegable y observe que la palabra (Seleccionar) ya no aparece en la lista.

Pasos siguientes

Este tutorial le ha enseñado los pasos básicos para utilizar un control FormView para mostrar y editar registros de datos individuales mediante un diseño personalizado. El control FormView le permite trabajar con un formato más sofisticado que el ha realizado en este tutorial. Además, puede crear plantillas para otros modos, incluyendo el modo de selección y de inserción, y para los encabezados y pies de página que se muestran con el registro. Para explorar otros escenarios con FormView, vea lo siguiente:

Crear plantillas para el control FormView de servidor Web

Modificar datos mediante un control FormView de servidor Web

Vea también

Conceptos

Información general sobre FormView (Control de servidor Web)

Referencia

Información general sobre DetailsView (Control de servidor Web)