Controles enlazados a datos
por Microsoft
La mayoría de las aplicaciones ASP.NET dependen de algún grado de presentación de datos de un origen de datos back-end. Los controles enlazados a datos han sido una parte fundamental de la interacción con los datos en aplicaciones web dinámicas. ASP.NET 2.0 presenta algunas mejoras sustanciales en los controles enlazados a datos, incluida una nueva clase BaseDataBoundControl y una sintaxis declarativa.
La mayoría de las aplicaciones ASP.NET dependen de algún grado de presentación de datos de un origen de datos back-end. Los controles enlazados a datos han sido una parte fundamental de la interacción con los datos en aplicaciones web dinámicas. ASP.NET 2.0 presenta algunas mejoras sustanciales en los controles enlazados a datos, incluida una nueva clase BaseDataBoundControl y una sintaxis declarativa.
BaseDataBoundControl actúa como clase base para la clase DataBoundControl y la clase HierarchicalDataBoundControl. En este módulo, analizaremos las siguientes clases que derivan de DataBoundControl:
- AdRotator
- Controles de lista
- GridView
- Formview
- DetailsView
También analizaremos las siguientes clases que derivan de la clase HierarchicalDataBoundControl:
- TreeView
- Menú
- SiteMapPath
Clase DataBoundControl
La clase DataBoundControl es una clase abstracta (marcada como MustInherit en VB) que se usa para interactuar con datos tabulares o de estilo de lista. Los controles siguientes son algunos de los controles que derivan de DataBoundControl.
AdRotator
El control AdRotator permite mostrar un banner gráfico en una página web vinculada a una dirección URL específica. El gráfico que se muestra se gira mediante propiedades para el control. La frecuencia de un anuncio determinado que se muestra en una página se puede configurar mediante la propiedad Impressions y los anuncios se pueden filtrar mediante el filtrado de palabras clave.
Los controles AdRotator usan un archivo XML o una tabla de una base de datos para los datos. Los atributos siguientes se usan en archivos XML para configurar el control AdRotator.
ImageUrl
Dirección URL de una imagen que se va a mostrar para el anuncio.
NavigateUrl
Dirección URL a la que se debe llevar el usuario cuando se hace clic en el anuncio. Debe estar codificada en dirección URL.
AlternateText
Texto alternativo que se muestra en una información sobre herramientas y que leen los lectores de pantalla. También se muestra cuando la imagen especificada por ImageUrl no está disponible.
Palabra clave
Define una palabra clave que se puede usar al usar el filtrado de palabras clave. Si se especifica, solo se mostrarán los anuncios con una palabra clave que coincida con el filtro de palabras clave.
Impresiones
Número de ponderación que determina la frecuencia con la que es probable que aparezca un anuncio determinado. Es relativo a la impresión de otros anuncios en el mismo archivo. El valor máximo de las impresiones colectivas para todos los anuncios de un archivo XML es 2.048.000.000 1.
Height
Alto del anuncio en píxeles.
Ancho
Ancho del anuncio en píxeles.
Nota:
Los atributos Height y Width invalidan el alto y el ancho del propio control AdRotator.
Un archivo XML típico podría tener un aspecto similar al siguiente:
<?xml version="1.0" encoding="utf-8" ?> <Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File"> <Ad> <ImageUrl>~/images/Contoso_ad.gif</ImageUrl> <NavigateUrl>http://www.contoso-ltd.com</NavigateUrl> <AlternateText>Ad for Contoso, Ltd. Web site</AlternateText> <Impressions>100</Impressions> </Ad> <Ad> <ImageUrl>~/images/Aspnet_ad.gif</ImageUrl> <NavigateUrl>http://www.asp.net</NavigateUrl> <AlternateText>Ad for ASP.NET Web site</AlternateText> <Impressions>50</Impressions> </Ad> </Advertisements>
En el ejemplo anterior, el anuncio para Contoso es el doble de probabilidades de aparecer como anuncio para el sitio web de ASP.NET debido al valor del atributo Impressions.
Para mostrar anuncios del archivo XML anterior, agregue un control AdRotator a una página y establezca la propiedad AdvertisingFile para que apunte al archivo XML, como se muestra a continuación:
<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="App_Data/Ads.xml" />
Si decide usar una tabla de base de datos como origen de datos para el control AdRotator, primero deberá configurar una base de datos con el esquema siguiente:
| Nombre de la columna | Tipo de datos | Descripción |
|---|---|---|
| ID | int | Clave principal. Esta columna puede tener cualquier nombre. |
| ImageUrl | nvarchar(length) | Dirección URL relativa o absoluta de la imagen que se va a mostrar para el anuncio. |
| NavigateUrl | nvarchar(length) | Dirección URL de destino del anuncio. Si no proporciona un valor, el anuncio no es un hipervínculo. |
| AlternateText | nvarchar(length) | Texto que se muestra si no se encuentra la imagen. En algunos exploradores, el texto se muestra como información sobre herramientas. El texto alternativo también se usa para la accesibilidad para que los usuarios que no puedan ver el gráfico puedan escuchar su descripción en voz alta. |
| Palabra clave | nvarchar(length) | Categoría del anuncio en el que se puede filtrar la página. |
| Impresiones | int(4) | Número que indica la probabilidad de que se muestre el anuncio con frecuencia. Cuanto mayor sea el número, más a menudo se mostrará el anuncio. Es posible que el total de todos los valores de impresiones del archivo XML no supere los 2.048.000.000 - 1. |
| Ancho | int(4) | Ancho de la imagen en píxeles. |
| Height | int(4) | Alto de la imagen en píxeles. |
En los casos en los que ya tiene una base de datos con un esquema diferente, puede usar las propiedades AlternateTextField, ImageUrlField y NavigateUrlField para asignar los atributos de AdRotator a la base de datos existente. Para mostrar los datos de la base de datos en el control AdRotator, agregue un control de origen de datos a la página, configure el cadena de conexión para que el control de origen de datos apunte a la base de datos y establezca la propiedad DataSourceID del control AdRotator en el identificador del control de origen de datos. En los casos en los que tenga que configurar anuncios de AdRotator mediante programación, use el evento AdCreated. El evento AdCreated toma dos parámetros; un objeto y la otra una instancia de AdCreatedEventArgs. AdCreatedEventArgs es una referencia al anuncio que se está creando.
El siguiente fragmento de código establece ImageUrl, NavigateUrl y AlternateText para un anuncio mediante programación:
protected void AdRotator1_AdCreated(object sender, System.Web.UI.WebControls.AdCreatedEventArgs e) { e.ImageUrl = "images/contoso_ad.gif"; e.NavigateUrl = "http://www.contoso-ltd.com/"; e.AlternateText = "Ad for Contoso, Ltd Web site"; }
Controles de lista
Los controles de lista incluyen ListBox, DropDownList, CheckBoxList, RadioButtonList y BulletedList. Cada uno de estos controles puede estar enlazado a datos enlazados a un origen de datos. Usan un campo en el origen de datos como texto para mostrar y, opcionalmente, pueden usar un segundo campo como valor de un elemento. Los elementos también se pueden agregar estáticamente en tiempo de diseño y puede mezclar elementos estáticos y elementos dinámicos agregados desde un origen de datos.
Para enlazar datos a un control de lista, agregue un control de origen de datos a la página. Especifique un comando SELECT para el control de origen de datos y, a continuación, establezca la propiedad DataSourceID del control de lista en el identificador del control de origen de datos. Use las propiedades DataTextField y DataValueField para definir el texto para mostrar y el valor del control. Además, puede usar la propiedad DataTextFormatString para controlar la apariencia del texto para mostrar de la siguiente manera:
| Expression | Descripción |
|---|---|
| Precio: {0:C} | Para datos numéricos o decimales. Muestra el literal "Precio:" seguido de números en formato de moneda. El formato de moneda depende de la configuración de referencia cultural especificada en el atributo culture de la directiva Page o en el archivo Web.config. |
| {0:D4} | Para los datos enteros. No se puede usar con números decimales. Los números enteros se muestran en un campo a cero de cuatro caracteres de ancho. |
| {0:N2}% | Para los datos numéricos. Muestra el número con precisión de posición decimal 2 seguida del literal "%". |
| {0:000.0} | Para datos numéricos o decimales. Los números se redondean a una posición decimal. Los números de menos de tres dígitos se rellenan con ceros. |
| {0:D} | Para los datos de fecha y hora. Muestra el formato de fecha larga ("Jueves, 06 de agosto de 1996"). El formato de fecha depende de la configuración de la referencia cultural de la página o del archivo Web.config. |
| {0:d} | Para los datos de fecha y hora. Muestra el formato de fecha corta ("31/12/99"). |
| {0:yy-MM-dd} | Para los datos de fecha y hora. Muestra la fecha en formato numérico año-mes-día (96-08-06) |
GridView
El control GridView permite mostrar y editar datos tabulares mediante un enfoque declarativo y es el sucesor del control DataGrid. Las siguientes características están disponibles en el control GridView.
- Enlace a controles de origen de datos, como SqlDataSource.
- Funcionalidades de ordenación integradas.
- Actualización integrada y eliminación de funcionalidades.
- Funcionalidades de paginación integradas.
- Funcionalidades de selección de filas integradas.
- Acceso mediante programación al modelo de objetos GridView para establecer dinámicamente propiedades, controlar eventos, etc.
- Varios campos clave.
- Varios campos de datos para las columnas de hipervínculo.
- Apariencia personalizable a través de temas y estilos.
Campos de columna
Cada columna del control GridView se representa mediante un objeto DataControlField. De forma predeterminada, la propiedad AutoGenerateColumns se establece en true, lo que crea un objeto AutoGeneratedField para cada campo del origen de datos. A continuación, cada campo se representa como una columna en el control GridView en el orden en que cada campo aparece en el origen de datos. También puede controlar manualmente qué campos de columna aparecen en el control GridView estableciendo la propiedad AutoGenerateColumns en false y definiendo a continuación su propia colección de campos de columna. Los distintos tipos de campo de columna determinan el comportamiento de las columnas del control.
En la tabla siguiente se enumeran los distintos tipos de campo de columna que se pueden usar.
| Tipo de campo de columna | Descripción |
|---|---|
| BoundField | Muestra el valor de un campo en un origen de datos. Este es el tipo de columna predeterminado del control GridView. |
| ButtonField | Muestra un botón de comando para cada elemento del control GridView. Esto le permite crear una columna de controles de botón personalizados, como el botón Agregar o Quitar. |
| CheckBoxField | Muestra una casilla para cada elemento del control GridView. Este tipo de campo de columna se usa normalmente para mostrar campos con un valor booleano. |
| CommandField | Muestra botones de comando predefinidos para realizar operaciones de selección, edición o eliminación. |
| HyperLinkField | Muestra el valor de un campo de un origen de datos como hipervínculo. Este tipo de campo de columna permite enlazar un segundo campo a la dirección URL del hipervínculo. |
| ImageField | Muestra una imagen para cada elemento del control GridView. |
| TemplateField | Muestra el contenido definido por el usuario para cada elemento del control GridView según una plantilla especificada. Este tipo de campo de columna permite crear un campo de columna personalizado. |
Para definir una colección de campos de columna de forma declarativa, añada primero etiquetas <Columnas> de apertura y cierre entre las etiquetas de apertura y cierre del control GridView. A continuación, enumere los campos de columna que desea incluir entre las etiquetas <Columnas> de apertura y cierre. Las columnas especificadas se agregan a la colección Columnas en el orden indicado. La colección Columnas almacena todos los campos de columna del control y permite administrar mediante programación los campos de columna en el control GridView.
Los campos de columna declarados explícitamente se pueden mostrar en combinación con campos de columna generados automáticamente. Cuando se usan ambos, los campos de columna declarados explícitamente se representan primero, seguidos de los campos de columna generados automáticamente.
Enlace a un control de origen de datos
El control GridView puede vincularse a un control de fuente de datos (como SqlDataSource, ObjectDataSource, etc.), así como a cualquier fuente de datos que implemente la interfaz System.Collections.IEnumerable (como System.Data.DataView, System.Collections.ArrayList o System.Collections.Hashtable). Utilice uno de los siguientes métodos para vincular el control GridView al tipo de fuente de datos adecuado:
- Para enlazar a un control de origen de datos, establezca la propiedad DataSourceID del control GridView en el valor id. del control de origen de datos. El control GridView se enlaza automáticamente al control de origen de datos especificado y puede aprovechar las funcionalidades del control de origen de datos para realizar la ordenación, actualización, eliminación y paginación de la funcionalidad. Este es el método preferido para enlazar a los datos.
- Para enlazar a un origen de datos que implemente la interfaz System.Collections.IEnumerable, establezca mediante programación la propiedad DataSource del control GridView en el origen de datos y, a continuación, llame al método DataBind. Al usar este método, el control GridView no proporciona funcionalidad integrada de ordenación, actualización, eliminación y paginación. Debe proporcionar esta funcionalidad usted mismo.
Operaciones de control GridView
El control GridView proporciona muchas funcionalidades integradas que permiten al usuario ordenar, actualizar, eliminar, seleccionar y paginar elementos del control. Cuando el control GridView está enlazado a un control de origen de datos, el control GridView puede aprovechar las funcionalidades del control de origen de datos y proporcionar una funcionalidad de ordenación, actualización y eliminación automáticas.
Nota:
El control GridView puede proporcionar compatibilidad para ordenar, actualizar y eliminar con otros tipos de orígenes de datos; sin embargo, deberá proporcionar un controlador de eventos adecuado con la implementación de estas operaciones.
La ordenación permite al usuario ordenar los elementos del control GridView con respecto a una columna específica haciendo clic en el encabezado de la columna. Para habilitar la ordenación, establezca la propiedad AllowSorting en true.
Las funcionalidades de actualización, eliminación y selección automáticas se habilitan cuando se hace clic en un botón de un campo de columna ButtonField o TemplateField, con un nombre de comando "Editar", "Eliminar" y "Seleccionar", respectivamente. El control GridView puede añadir automáticamente un campo de columna CommandField con un botón Editar, Borrar o Seleccionar si la propiedad AutoGenerateEditButton, AutoGenerateDeleteButton o AutoGenerateSelectButton se establece en true, respectivamente.
Nota:
El control GridView no admite directamente la inserción de registros en el origen de datos. Sin embargo, es posible insertar registros mediante el control GridView junto con el control DetailsView o FormView.
En lugar de mostrar todos los registros del origen de datos al mismo tiempo, el control GridView puede dividir automáticamente los registros en páginas. Para habilitar la paginación, establezca la propiedad AllowPaging en true.
Personalización de la apariencia de GridView
Puede personalizar la apariencia del control GridView estableciendo las propiedades de estilo de las distintas partes del control. En la tabla siguiente se enumeran las distintas propiedades de estilo.
| Propiedad de estilo | Descripción |
|---|---|
| AlternatingRowStyle | La configuración de estilo de las filas de datos alternas en el control GridView. Cuando se establece esta propiedad, las filas de datos se muestran alternando entre la configuración RowStyle y la configuración AlternatingRowStyle. |
| EditRowStyle | La configuración de estilo de la fila que se está editando en el control GridView. |
| EmptyDataRowStyle | La configuración de estilo de la fila de datos vacía que se muestra en el control GridView cuando el origen de datos no contiene ningún registro. |
| FooterStyle | La configuración de estilo de la fila de pie de página del control GridView. |
| HeaderStyle | La configuración de estilo de la fila de pie de página del control GridView. |
| PagerStyle | La configuración de estilo de la fila de pie de página del control GridView. |
| RowStyle | La configuración de estilo de la fila de pie de página del control GridView. Cuando también se establece la propiedad AlternatingRowStyle, las filas de datos se muestran alternando entre la configuración RowStyle y la configuración AlternatingRowStyle. |
| SelectedRowStyle | La configuración de estilo de la fila seleccionada en el control GridView. |
También puede mostrar u ocultar diferentes partes del control. La siguiente tabla enumera las propiedades que controlan qué partes se muestran u ocultan.
| Propiedad | Descripción |
|---|---|
| ShowFooter | Muestra u oculta la sección pie de página del control GridView. |
| ShowHeader | Muestra u oculta la sección pie de página del control GridView. |
Eventos
El control GridView proporciona varios eventos en los que puede programar. Esto le permite ejecutar una rutina personalizada cada vez que se produce un evento. En la tabla siguiente se enumeran los eventos admitidos por el control GridView.
| Evento | Descripción |
|---|---|
| PageIndexChanged | Se produce cuando se hace clic en uno de los botones del buscapersonas, pero después de que el control GridView controle la operación de paginación. Este evento se usa normalmente cuando es necesario realizar una tarea después de que el usuario navegue a una página diferente del control. |
| PageIndexChanging | Se produce cuando se hace clic en uno de los botones del buscapersonas, pero antes de que el control GridView controle la operación de paginación. Este evento se usa a menudo para cancelar la operación de paginación. |
| RowCancelingEdit | Se produce cuando se hace clic en el botón Cancelar de una fila, pero antes de que el control GridView salga del modo de edición. Este evento se usa a menudo para detener la operación de cancelación. |
| RowCommand | Se produce cuando se hace clic en un botón en el control GridView. Este evento se suele usar para realizar una tarea cuando se hace clic en un botón en el control. |
| RowCreated | Se produce cuando se crea una nueva fila en el control GridView. Este evento se suele usar para modificar el contenido de una fila cuando se crea la fila. |
| RowDataBound | Se produce cuando una fila de datos está enlazada a los datos del control GridView. Este evento se usa a menudo para modificar el contenido de una fila cuando la fila está enlazada a los datos. |
| RowDeleted | Se produce cuando se hace clic en el botón Eliminar de una fila, pero después de que el control GridView elimine el registro del origen de datos. Este evento se suele usar para comprobar los resultados de la operación de eliminación. |
| RowDeleting | Se produce cuando se hace clic en el botón Eliminar de una fila, pero antes de que el control GridView elimine el registro del origen de datos. Este evento se usa a menudo para cancelar la operación de eliminación. |
| RowEditing | Se produce cuando se hace clic en el botón Editar de una fila, pero antes de que el control GridView entre en el modo de edición. Este evento se usa a menudo para cancelar la operación de edición. |
| RowUpdated | Se produce cuando se hace clic en el botón Actualizar de una fila, pero después de que el control GridView actualice la fila. Este evento se usa a menudo para comprobar los resultados de la operación de actualización. |
| RowUpdating | Se produce cuando se hace clic en el botón Actualizar de una fila, pero antes de que el control GridView actualice la fila. Este evento se usa a menudo para cancelar la operación de actualización. |
| SelectedIndexChanged | Se produce cuando se hace clic en el botón Seleccionar de una fila, pero después de que el control GridView controle la operación de selección. Este evento se suele usar para realizar una tarea después de seleccionar una fila en el control. |
| SelectedIndexChanging | Se produce cuando se hace clic en el botón Seleccionar de una fila, pero antes de que el control GridView controle la operación de selección. Este evento se usa a menudo para cancelar la operación de selección. |
| Ordenados | Se produce cuando se hace clic en el hipervínculo para ordenar una columna, pero después de que el control GridView controle la operación de ordenación. Este evento se usa normalmente para realizar una tarea después de que el usuario haga clic en un hipervínculo para ordenar una columna. |
| Ordenar | Se produce cuando se hace clic en el hipervínculo para ordenar una columna, pero antes de que el control GridView controle la operación de ordenación. Este evento se suele usar para cancelar la operación de ordenación o para realizar una rutina de ordenación personalizada. |
FormView
El control FormView se usa para mostrar un único registro de un origen de datos. Es similar al control DetailsView, excepto que muestra plantillas definidas por el usuario en lugar de campos de fila. La creación de sus propias plantillas ofrece mayor flexibilidad para controlar cómo se muestran los datos. El control FormView admite las siguientes características:
- Enlace a controles de origen de datos, como SqlDataSource y ObjectDataSource.
- Funcionalidades de inserción integradas.
- Actualización integrada y eliminación de funcionalidades.
- Funcionalidades de paginación integradas.
- Acceso mediante programación al modelo de objetos FormView para establecer dinámicamente propiedades, controlar eventos, etc.
- Apariencia personalizable a través de plantillas, temas y estilos definidos por el usuario.
Templates (Plantillas [C++])
Para que el control FormView muestre contenido, debe crear plantillas para las distintas partes del control. La mayoría de las plantillas son opcionales; sin embargo, debe crear una plantilla para el modo en el que está configurado el control. Por ejemplo, un control FormView que admita la inserción de registros debe tener definida una plantilla de elemento de inserción. En la tabla siguiente se enumeran las distintas plantillas que puede crear.
| Tipo de plantilla | Descripción |
|---|---|
| EditItemTemplate | Define el contenido de la fila de datos cuando el control FormView está en modo de edición. Esta plantilla normalmente contiene controles de entrada y botones de comando con los que el usuario puede editar un registro existente. |
| EmptyDataTemplate | Define el contenido de la fila de datos vacía que se muestra cuando el control FormView está enlazado a un origen de datos que no contiene ningún registro. Esta plantilla normalmente contiene contenido para alertar al usuario de que el origen de datos no contiene ningún registro. |
| FooterTemplate | Define el contenido de la fila de pie de página. Esta plantilla normalmente contiene cualquier contenido adicional que desee mostrar en la fila de pie de página. Como alternativa, puede especificar simplemente el texto que se va a mostrar en la fila de pie de página estableciendo la propiedad FooterText. |
| HeaderTemplate | Define el contenido de la fila de encabezado. Esta plantilla normalmente contiene cualquier contenido adicional que desee mostrar en la fila de encabezado. Como alternativa, simplemente puede especificar texto que se mostrará en la fila de encabezado estableciendo la propiedad HeaderText. |
| ItemTemplate | Define el contenido de la fila de datos cuando el control FormView está en modo de solo lectura. Esta plantilla normalmente contiene contenido para mostrar los valores de un registro existente. |
| InsertItemTemplate | Define el contenido de la fila de datos cuando el control FormView está en modo de inserción. Esta plantilla normalmente contiene controles de entrada y botones de comando con los que el usuario puede agregar un nuevo registro. |
| PagerTemplate | Define el contenido de la fila del buscapersonas que se muestra cuando se habilita la característica de paginación (cuando la propiedad AllowPaging se establece en true). Esta plantilla normalmente contiene controles con los que el usuario puede navegar a otro registro. |
Los controles de entrada de la plantilla editar elemento e insertar plantilla de elemento se pueden enlazar a los campos de un origen de datos mediante una expresión de enlace bidireccional. Esto permite que el control FormView extraiga automáticamente los valores del control de entrada para una operación de actualización o inserción. Las expresiones de enlace bidireccionales también permiten que los controles de entrada de una plantilla de elemento de edición muestren automáticamente los valores de campo originales.
Enlace de datos
El control FormView se puede enlazar a un control de origen de datos (como SqlDataSource, AccessDataSource, ObjectDataSource, etc.), o a cualquier origen de datos que implemente la interfaz System.Collections.IEnumerable (como System.Data.DataView, System.Collections.ArrayList y System.Collections.Hashtable). Utilice uno de los siguientes métodos para vincular el control FormView al tipo de fuente de datos adecuado:
- Para enlazar a un control de origen de datos, establezca la propiedad DataSourceID del control FormView en el valor id. del control de origen de datos. El control FormView se enlaza automáticamente al control de origen de datos especificado y puede aprovechar las funcionalidades del control de origen de datos para realizar la inserción, actualización, eliminación y paginación de la funcionalidad. Este es el método preferido para enlazar a los datos.
- Para enlazar a un origen de datos que implemente la interfaz System.Collections.IEnumerable, establezca mediante programación la propiedad DataSource del control FormView en el origen de datos y, a continuación, llame al método DataBind. Al usar este método, el control FormView no proporciona funciones integradas de inserción, actualización, eliminación y paginación. Debe proporcionar esta funcionalidad mediante el evento adecuado.
Operaciones de control FormView
El control FormView proporciona muchas funcionalidades integradas que permiten al usuario actualizar, eliminar, insertar y paginar a través de elementos del control. Cuando el control FormView está enlazado a un control de origen de datos, el control FormView puede aprovechar las funcionalidades del control de origen de datos y proporcionar una actualización automática, eliminación, inserción y funcionalidad de paginación. El control FormView puede proporcionar compatibilidad con las operaciones de actualización, eliminación, inserción y paginación con otros tipos de orígenes de datos; sin embargo, debe proporcionar un controlador de eventos adecuado con la implementación de estas operaciones.
Dado que el control FormView usa plantillas, no proporciona una manera de generar automáticamente botones de comando para realizar operaciones de actualización, eliminación o inserción. Debe incluir manualmente estos botones de comando en la plantilla adecuada. El control FormView reconoce determinados botones que tienen sus propiedades CommandName establecidas en valores específicos. En la tabla siguiente se enumeran los botones de comando que reconoce el control FormView.
| Button | Valor commandname | Descripción |
|---|---|---|
| Cancelar | "Cancel" | Se usa en la actualización o inserción de operaciones para cancelar la operación y descartar los valores especificados por el usuario. A continuación, el control FormView vuelve al modo especificado por la propiedad DefaultMode. |
| Eliminar | “Eliminar” | Se usa en la eliminación de operaciones para eliminar el registro mostrado del origen de datos. Genera los eventos ItemDeleting y ItemDeleted. |
| Editar | "Editar" | Se usa en las operaciones de actualización para colocar el control FormView en modo de edición. El contenido especificado en la propiedad EditItemTemplate se muestra para la fila de datos. |
| Insertar | "Insert" | Se usa en las operaciones de inserción para intentar insertar un nuevo registro en el origen de datos mediante los valores proporcionados por el usuario. Genera los eventos ItemInserting y ItemInserted. |
| Nuevo | "New" | Se usa en las operaciones de inserción para colocar el control FormView en modo de inserción. El contenido especificado en la propiedad InsertItemTemplate se muestra para la fila de datos. |
| Page | "Page" | Se usa en las operaciones de paginación para representar un botón en la fila del buscapersonas que realiza la paginación. Para especificar la operación de paginación, establezca la propiedad CommandArgument del botón en "Next", "Prev", "First", "Last" o el índice de la página en la que se va a navegar. Genera los eventos PageIndexChanging y PageIndexChanged. |
| Actualizar | "Update" | Se usa en las operaciones de actualización para intentar actualizar el registro mostrado en el origen de datos con los valores proporcionados por el usuario. Genera los eventos ItemUpdating y ItemUpdated. |
A diferencia del botón Eliminar (que elimina el registro mostrado inmediatamente), cuando se hace clic en el botón Editar o Nuevo, el control FormView entra en modo de edición o inserción, respectivamente. En el modo de edición, se muestra el contenido de la propiedad EditItemTemplate para el elemento de datos actual. Normalmente, la plantilla editar elemento se define de modo que el botón Editar se reemplaza por un botón Actualizar y cancelar. Los controles de entrada adecuados para el tipo de datos del campo (como un control TextBox o CheckBox) también se muestran normalmente con el valor de un campo para que el usuario modifique. Al hacer clic en el botón Actualizar se actualiza el registro en el origen de datos, mientras se hace clic en el botón Cancelar se abandonan los cambios.
Asimismo, el contenido de la propiedad InsertItemTemplate se muestra para el elemento de datos cuando el control está en modo de inserción. Normalmente, la plantilla de elemento de inserción se define de modo que el botón Nuevo se reemplaza por un botón Insertar y Cancelar y se muestran controles de entrada vacíos para que el usuario escriba los valores del nuevo registro. Al hacer clic en el botón Insertar, se inserta el registro en el origen de datos, mientras se hace clic en el botón Cancelar se abandonan los cambios.
El control FormView proporciona una característica de paginación, que permite al usuario navegar a otros registros del origen de datos. Cuando está habilitada, se muestra una fila del buscapersonas en el control FormView que contiene los controles de navegación de página. Para habilitar la paginación, establezca la propiedad AllowPaging en true. Puede personalizar la fila del buscapersonas estableciendo las propiedades de los objetos contenidos en PagerStyle y la propiedad PagerSettings. En lugar de usar la interfaz de usuario de fila del buscapersonas integrada, puede crear su propia interfaz de usuario mediante la propiedad PagerTemplate.
Personalización de la apariencia de FormView
Puede personalizar la apariencia del control FormView estableciendo las propiedades de estilo de las distintas partes del control. En la tabla siguiente se enumeran las distintas propiedades de estilo.
| Propiedad de estilo | Descripción |
|---|---|
| EditRowStyle | La configuración de estilo de la fila de datos cuando el control FormView está en modo de edición. |
| EmptyDataRowStyle | La configuración de estilo de la fila de datos vacía que se muestra en el control FormView cuando el origen de datos no contiene ningún registro. |
| FooterStyle | La configuración de estilo de la fila de pie de página del control FormView. |
| HeaderStyle | La configuración de estilo de la fila de encabezado del control FormView. |
| InsertRowStyle | La configuración de estilo de la fila de datos cuando el control FormView está en modo de inserción. |
| PagerStyle | La configuración de estilo de la fila del buscapersonas que se muestra en el control FormView cuando la característica de paginación está habilitada. |
| RowStyle | La configuración de estilo de la fila de datos cuando el control FormView está en modo de solo lectura. |
Eventos FormView
El control FormView proporciona varios eventos en los que puede programar. Esto le permite ejecutar una rutina personalizada cada vez que se produce un evento. En la tabla siguiente se enumeran los eventos admitidos por el control FormView.
| Evento | Descripción |
|---|---|
| ItemCommand | Se produce cuando se hace clic en un botón dentro de un control FormView. Este evento se suele usar para realizar una tarea cuando se hace clic en un botón en el control. |
| ItemCreated | Se produce después de crear todos los objetos FormViewRow en el control FormView. Este evento se usa a menudo para modificar los valores de un registro antes de que se muestre. |
| ItemDeleted | Se produce cuando se hace clic en un botón Eliminar (un botón con su propiedad CommandName establecida en "Delete"), pero después de que el control FormView elimine el registro del origen de datos. Este evento se suele usar para comprobar los resultados de la operación de eliminación. |
| ItemDeleting | Se produce cuando se hace clic en un botón Eliminar, pero antes de que el control FormView elimine el registro del origen de datos. Este evento se usa a menudo para cancelar la operación de eliminación. |
| ItemInserted | Se produce cuando se hace clic en un botón Insertar (un botón con su propiedad CommandName establecida en "Insert"), pero después de que el control FormView inserte el registro. Este evento se suele usar para comprobar los resultados de la operación de inserción. |
| ItemInserting | Se produce cuando se hace clic en un botón Insertar, pero antes de que el control FormView inserte el registro. Este evento se usa a menudo para cancelar la operación de inserción. |
| ItemUpdated | Se produce cuando se pulsa un botón Actualizar (un botón con su propiedad CommandName establecida en "Update"), pero después de que el control FormView actualice la fila. Este evento se usa a menudo para comprobar los resultados de la operación de actualización. |
| ItemUpdating | Se produce cuando se hace clic en un botón Actualizar, pero antes de que el control FormView actualice el registro. Este evento se usa a menudo para cancelar la operación de actualización. |
| ModeChanged | Se produce después de que el control FormView cambie los modos (para editar, insertar o modo de solo lectura). Este evento se usa a menudo para realizar una tarea cuando el control FormView cambia los modos. |
| ModeChanging | Se produce antes de que el control FormView cambie los modos (para editar, insertar o modo de solo lectura). Este evento se suele usar para cancelar un cambio de modo. |
| PageIndexChanged | Se produce cuando se hace clic en uno de los botones del buscapersonas, pero después de que el control FormView controle la operación de paginación. Este evento se usa normalmente cuando se necesita realizar una tarea después de que el usuario navegue a un registro diferente en el control. |
| PageIndexChanging | Se produce cuando se hace clic en uno de los botones del buscapersonas, pero antes de que el control FormView controle la operación de paginación. Este evento se usa a menudo para cancelar la operación de paginación. |
DetailsView
El control DetailsView se usa para mostrar un único registro de un origen de datos en una tabla, donde cada campo del registro se muestra en una fila de la tabla. Se puede usar en combinación con un control GridView para escenarios de detalles maestros. El control DetailsView admite las siguientes características:
- Enlace a controles de origen de datos, como SqlDataSource.
- Funcionalidades de inserción integradas.
- Actualización integrada y eliminación de funcionalidades.
- Funcionalidades de paginación integradas.
- Acceso mediante programación al modelo de objetos DetailsView para establecer dinámicamente propiedades, controlar eventos, etc.
- Apariencia personalizable a través de temas y estilos.
Campos de fila
Cada fila de datos del control DetailsView se crea declarando un control de campo. Los distintos tipos de campo de fila determinan el comportamiento de las filas del control. Los controles de campo derivan de DataControlField. En la tabla siguiente se enumeran los distintos tipos de campo de fila que se pueden usar.
| Tipo de campo de columna | Descripción |
|---|---|
| BoundField | Muestra el valor de un campo de un origen de datos como texto. |
| ButtonField | Muestra un botón de comando en el control DetailsView. Esto le permite mostrar una fila con un control de botón personalizado, como un botón Agregar o Quitar. |
| CheckBoxField | Muestra una casilla en el control DetailsView. Este tipo de campo de fila se usa normalmente para mostrar campos con un valor booleano. |
| CommandField | Muestra los botones de comando integrados para realizar operaciones de edición, inserción o eliminación en el control DetailsView. |
| HyperLinkField | Muestra el valor de un campo de un origen de datos como hipervínculo. Este tipo de campo de fila permite enlazar un segundo campo a la dirección URL del hipervínculo. |
| ImageField | Muestra una imagen en el control DetailsView. |
| TemplateField | Muestra el contenido definido por el usuario para una fila en el control DetailsView según una plantilla especificada. Este tipo de campo de fila permite crear un campo de fila personalizado. |
De forma predeterminada, la propiedad AutoGenerateRows se establece en true, que genera automáticamente un objeto de campo de fila enlazado para cada campo de un tipo enlazable en el origen de datos. Los tipos enlazables válidos son String, DateTime, Decimal, Guid y el conjunto de tipos primitivos. A continuación, cada campo se muestra en una fila como texto, en el orden en que cada campo aparece en el origen de datos.
La generación automática de las filas proporciona una manera rápida y sencilla de mostrar todos los campos del registro. Sin embargo, para usar las funcionalidades avanzadas del control DetailsView, debe declarar explícitamente los campos de fila que se incluirán en el control DetailsView. Para declarar los campos de fila, establezca primero la propiedad AutoGenerateRows en false. A continuación, agregue etiquetas <Campos> de apertura y cierre entre las etiquetas de apertura y cierre del control DetailsView. Por último, enumere los campos de fila que desea incluir entre las etiquetas <Campos> de apertura y cierre. Los campos de fila especificados se agregan a la colección Campos en el orden indicado. La colección Campos permite administrar mediante programación los campos de fila en el control DetailsView.
Nota:
Los campos de fila generados automáticamente no se agregan a la colección Campos.
Enlace a datos con DetailsView
El control DetailsView se puede enlazar a un control de origen de datos, como SqlDataSource o AccessDataSource, o a cualquier origen de datos que implemente la interfaz System.Collections.IEnumerable, como System.Data.DataView, System.Collections.ArrayList y System.Collections.Hashtable.
Utilice uno de los siguientes métodos para vincular el control DetailsView al tipo de fuente de datos adecuado:
- Para enlazar a un control de origen de datos, establezca la propiedad DataSourceID del control DetailsView en el valor id. del control de origen de datos. El control DetailsView se enlaza automáticamente al control de origen de datos especificado. Este es el método preferido para enlazar a los datos.
- Para enlazar a un origen de datos que implemente la interfaz System.Collections.IEnumerable, establezca mediante programación la propiedad DataSource del control DetailsView en el origen de datos y, a continuación, llame al método DataBind.
Seguridad
Este control se puede usar para mostrar la entrada del usuario, que puede incluir un script de cliente malintencionado. Compruebe cualquier información que se envíe desde un cliente para ver el script ejecutable, las instrucciones SQL u otro código antes de mostrarla en la aplicación. ASP.NET proporciona una característica de validación de solicitudes de entrada para bloquear el script y HTML en la entrada del usuario.
Operaciones de datos en DetailsView
El control DetailsView proporciona funcionalidades integradas que permiten al usuario actualizar, eliminar, insertar y paginar a través de elementos del control. Cuando el control DetailsView está enlazado a un control de origen de datos, el control DetailsView puede aprovechar las funcionalidades del control de origen de datos y proporcionar una actualización automática, eliminación, inserción y funcionalidad de paginación.
El control DetailsView puede proporcionar compatibilidad con las operaciones de actualización, eliminación, inserción y paginación con otros tipos de orígenes de datos; sin embargo, debe proporcionar la implementación de estas operaciones en un controlador de eventos adecuado.
El control DetailsView puede agregar automáticamente un campo de fila CommandField con un botón Editar, Eliminar o Nuevo estableciendo las propiedades AutoGenerateEditButton, AutoGenerateDeleteButton o AutoGenerateInsertButton en true, respectivamente. A diferencia del botón Eliminar (que elimina el registro seleccionado inmediatamente), cuando se hace clic en el botón Editar o Nuevo, el control DetailsView entra en modo de edición o inserción, respectivamente. En el modo de edición, el botón Editar se reemplaza por un botón Actualizar y Cancelar. Los controles de entrada adecuados para el tipo de datos del campo (como un control TextBox o CheckBox) se muestran con el valor de un campo para que el usuario modifique. Al hacer clic en el botón Actualizar se actualiza el registro en el origen de datos, mientras se hace clic en el botón Cancelar se abandonan los cambios. Del mismo modo, en el modo de inserción, el botón Nuevo se reemplaza por un botón Insertar y Cancelar y se muestran controles de entrada vacíos para que el usuario escriba los valores del nuevo registro.
El control DetailsView proporciona una característica de paginación, que permite al usuario navegar a otros registros del origen de datos. Cuando se habilita, los controles de navegación de página se muestran en una fila de buscapersonas. Para habilitar la paginación, establezca la propiedad AllowPaging en true. La fila del buscapersonas se puede personalizar mediante las propiedades PagerStyle y PagerSettings.
Personalizar la apariencia de DetailsView
Puede personalizar la apariencia del control DetailsView estableciendo las propiedades de estilo de las distintas partes del control. En la tabla siguiente se enumeran las distintas propiedades de estilo.
| Propiedad de estilo | Descripción |
|---|---|
| AlternatingRowStyle | La configuración de estilo de las filas de datos alternas en el control DetailsView. Cuando se establece esta propiedad, las filas de datos se muestran alternando entre la configuración RowStyle y la configuración AlternatingRowStyle. |
| CommandRowStyle | La configuración de estilo de la fila que contiene los botones de comando integrados en el control DetailsView. |
| EditRowStyle | La configuración de estilo de la fila de datos cuando el control DetailsView está en modo de edición. |
| EmptyDataRowStyle | La configuración de estilo de la fila de datos vacía que se muestra en el control DetailsView cuando el origen de datos no contiene ningún registro. |
| FooterStyle | La configuración de estilo de la fila de pie de página del control DetailsView. |
| HeaderStyle | La configuración de estilo de la fila de encabezado del control DetailsView. |
| InsertRowStyle | La configuración de estilo de las filas de datos cuando el control DetailsView está en modo de inserción. |
| PagerStyle | La configuración de estilo de la fila del buscapersonas del control DetailsView. |
| RowStyle | La configuración de estilo de las filas de datos en el control DetailsView. Cuando también se establece la propiedad AlternatingRowStyle, las filas de datos se muestran alternando entre la configuración RowStyle y la configuración AlternatingRowStyle. |
| FieldHeaderStyle | La configuración de estilo de la columna de encabezado del control DetailsView. |
Eventos en DetailsView
El control DetailsView proporciona varios eventos en los que puede programar. Esto le permite ejecutar una rutina personalizada cada vez que se produce un evento. En la tabla siguiente se enumeran los eventos admitidos por el control DetailsView. El control DetailsView también hereda estos eventos de sus clases base: DataBinding, DataBound, Disposed, Init, Load, PreRender y Render.
| Evento | Descripción |
|---|---|
| ItemCommand | Se produce cuando se hace clic en un botón en el control DetailsView. |
| ItemCreated | Se produce después de crear todos los objetos DetailsViewRow en el control DetailsView. Este evento se usa a menudo para modificar los valores de un registro antes de que se muestre. |
| ItemDeleted | Se produce cuando se hace clic en un botón Eliminar, pero después de que el control DetailsView elimine el registro del origen de datos. Este evento se suele usar para comprobar los resultados de la operación de eliminación. |
| ItemDeleting | Se produce cuando se hace clic en un botón Eliminar, pero antes de que el control DetailsView elimine el registro del origen de datos. Este evento se usa a menudo para cancelar la operación de eliminación. |
| ItemInserted | Se produce cuando se hace clic en un botón Insertar, pero después de que el control DetailsView inserte el registro. Este evento se suele usar para comprobar los resultados de la operación de inserción. |
| ItemInserting | Se produce cuando se hace clic en un botón Insertar, pero antes de que el control DetailsView inserte el registro. Este evento se usa a menudo para cancelar la operación de inserción. |
| ItemUpdated | Se produce cuando se hace clic en un botón Actualizar, pero después de que el control DetailsView actualice la fila. Este evento se usa a menudo para comprobar los resultados de la operación de actualización. |
| ItemUpdating | Se produce cuando se hace clic en un botón Actualizar, pero antes de que el control DetailsView actualice el registro. Este evento se usa a menudo para cancelar la operación de actualización. |
| ModeChanged | Se produce después de que el control DetailsView cambie los modos (modo de edición, inserción o solo lectura). Este evento se usa a menudo para realizar una tarea cuando el control DetailsView cambia los modos. |
| ModeChanging | Se produce antes de que el control DetailsView cambie los modos (modo de edición, inserción o solo lectura). Este evento se suele usar para cancelar un cambio de modo. |
| PageIndexChanged | Se produce cuando se hace clic en uno de los botones del buscapersonas, pero después de que el control DetailsView controle la operación de paginación. Este evento se usa normalmente cuando se necesita realizar una tarea después de que el usuario navegue a un registro diferente en el control. |
| PageIndexChanging | Se produce cuando se hace clic en uno de los botones del buscapersonas, pero antes de que el control DetailsView controle la operación de paginación. Este evento se usa a menudo para cancelar la operación de paginación. |
El Control Menu
El control Menu de ASP.NET 2.0 está diseñado para ser un sistema de navegación completo. Puede vincularse fácilmente a orígenes de datos jerárquicos como SiteMapDataSource.
Una estructura de controles de menú se puede definir de forma declarativa o dinámica y consta de un único nodo raíz y de cualquier número de subnodo. El código siguiente define mediante declaración un menú para el control Menu.
<asp:menu id="NavigationMenu" disappearafter="2000" staticdisplaylevels="2" staticsubmenuindent="10" orientation="Vertical" font-names="Arial" target="_blank" runat="server"> <staticmenuitemstyle backcolor="LightSteelBlue" forecolor="Black"/> <statichoverstyle backcolor="LightSkyBlue"/> <dynamicmenuitemstyle backcolor="Black" forecolor="Silver"/> <dynamichoverstyle backcolor="LightSkyBlue" forecolor="Black"/> <items> <asp:menuitem navigateurl="Home.aspx" text="Home" tooltip="Home"> <asp:menuitem navigateurl="Music.aspx" text="Music" tooltip="Music"> <asp:menuitem navigateurl="Classical.aspx" text="Classical" tooltip="Classical"/> <asp:menuitem navigateurl="Rock.aspx" text="Rock" tooltip="Rock"/> <asp:menuitem navigateurl="Jazz.aspx" text="Jazz" tooltip="Jazz"/> </asp:menuitem> <asp:menuitem navigateurl="Movies.aspx" text="Movies" tooltip="Movies"> <asp:menuitem navigateurl="Action.aspx" text="Action" tooltip="Action"/> <asp:menuitem navigateurl="Drama.aspx" text="Drama" tooltip="Drama"/> <asp:menuitem navigateurl="Musical.aspx" text="Musical" tooltip="Musical"/> </asp:menuitem> </asp:menuitem> </items> </asp:menu>
En el ejemplo anterior, el nodo Home.aspx es el nodo raíz. Todos los demás nodos se anidan dentro del nodo raíz en varios niveles.
Hay dos tipos de menús que el control Menu puede representar; menús estáticos y menús dinámicos. Los menús estáticos constan de elementos de menú que siempre están visibles. Los menús dinámicos constan de elementos de menú que solo son visibles cuando el usuario mantiene el puntero sobre ellos con el mouse. A menudo, los clientes pueden confundir los menús estáticos con menús definidos mediante declaración y menús dinámicos con menús que son de entrada de datos en tiempo de ejecución. De hecho, los menús dinámicos y estáticos no están relacionados con el método de rellenado. Los términos estáticos y dinámicos solo hacen referencia a si el menú se muestra estáticamente de forma predeterminada o solo se muestra cuando el usuario realiza alguna acción.
La propiedad StaticDisplayLevels se usa para configurar cuántos niveles del menú son estáticos y, por tanto, se muestran de forma predeterminada. En el ejemplo anterior, establecer la propiedad StaticDisplayLevels en un valor de 2 haría que el menú mostrara estáticamente el nodo Inicio, el nodo Música y el nodo Películas. Todos los demás nodos se mostrarían dinámicamente cuando el usuario mantiene el puntero sobre el nodo primario.
La propiedad MaximumDynamicDisplayLevels configura el número máximo de niveles dinámicos que el menú es capaz de mostrar. Los menús dinámicos en un nivel superior al valor especificado por la propiedad MaximumDynamicDisplayLevels se descartan.
Nota:
Es casi seguro que podría encontrar situaciones en las que los menús no parecen representarse debido a la propiedad MaximumDynamicDisplayLevels. En esos casos, asegúrese de que la propiedad está suficientemente configurada para permitir la visualización de los menús de los clientes.
Enlace de datos al control Menu
El control Menu se puede enlazar a cualquier origen de datos jerárquico, como SiteMapDataSource o XMLDataSource. SiteMapDataSource es el método más usado para el enlace de datos a un control Menu porque se alimenta del archivo Web.sitemap y su esquema proporciona una API conocida al control Menu. En la lista siguiente se muestra un archivo Web.sitemap simple.
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/default.aspx" description="Our Home Page" title="Home"> <siteMapNode url="~/products/default.aspx" title="Products" description="Our Products"> <siteMapNode url="~/products/winprods.aspx" title="Windows Products" description="Windows Products" /> <siteMapNode url="~/products/webprods.aspx" title="Web Products" description="Web Products" /> </siteMapNode> <siteMapNode url="~/services/default.aspx" title="Services" description="Our Services"> <siteMapNode url="~/services/consulting.aspx" title="Consulting Services" description="Consulting Services" /> <siteMapNode url="~/services/develop.aspx" title="Development Services" description="Development Services" /> </siteMapNode> </siteMapNode> </siteMap>
Observe que solo hay un elemento siteMapNode raíz, en este caso, el elemento Home. Se pueden configurar varios atributos para cada siteMapNode. Los atributos más usados son:
- url Especifica la dirección URL que se va a mostrar cuando un usuario hace clic en el elemento de menú. Si este atributo no está presente, el nodo simplemente se publicará cuando se haga clic en este.
- title Especifica el texto que se muestra en el elemento de menú.
- description Se usa como documentación para el nodo. También se muestra como información sobre herramientas cuando el mouse se mantiene sobre el nodo.
- siteMapFile Permite mapas del sitio para los mapas del sitio anidados. Este atributo debe apuntar a un archivo de mapa del sitio ASP.NET bien formado.
- roles Permite controlar la apariencia de un nodo mediante el recorte de seguridad ASP.NET.
Tenga en cuenta que, aunque estos atributos son opcionales, es posible que el comportamiento del menú no sea lo que se espera si no se especifican. Por ejemplo, si se especifica el atributo url, pero el atributo description no es así, el nodo no estará visible y no habrá ninguna manera de navegar a la dirección URL especificada.
Controlar una operación de menús
Existen varias propiedades que afectan al funcionamiento de un control Menu ASP.NET; la propiedad Orientation, la propiedad DisappearAfter, la propiedad StaticItemFormatString y la propiedad StaticPopoutImageUrl son solo algunas de ellas.
- Orientation puede establecerse en horizontal o vertical y controla si los elementos estáticos del menú se disponen horizontalmente en una fila o verticalmente y apilados unos sobre otros. Esta propiedad no afecta a los menús dinámicos.
- La propiedad DisappearAfter configura cuánto tiempo debe permanecer visible un menú dinámico después de que el mouse se haya alejado de él. El valor se especifica en milisegundos y el valor predeterminado es 500. Establecer esta propiedad en un valor de -1 hará que el menú nunca desaparezca automáticamente. En ese caso, el menú solo desaparecerá cuando el usuario haga clic fuera del menú.
- La propiedad StaticItemFormatString facilita el mantenimiento de verbos coherentes en el sistema de menús. Al especificar esta propiedad, {0} debe escribirse en lugar de la descripción que aparece en el origen de datos. Por ejemplo, para que el elemento de menú del ejercicio 1 diga Visitar nuestra página de productos, etc., especificaría Visitar nuestra página {0} para StaticItemFormatString. En tiempo de ejecución, ASP.NET reemplazará cualquier aparición de {0} por la descripción correcta del elemento de menú.
- La propiedad StaticPopoutImageUrl especifica la imagen que se usa para indicar que un nodo de menú determinado tiene nodos secundarios a los que se puede tener acceso al mantener el puntero sobre él. Los menús dinámicos seguirán usando la imagen predeterminada.
Controles de menú con plantilla
El control Menu es un control con plantilla y permite dos cuadros ItemTemplates diferentes; StaticItemTemplate y DynamicItemTemplate. Con estas plantillas, puede agregar fácilmente controles de servidor o controles de usuario a los menús.
Para editar las plantillas en Visual Studio .NET, haga clic en el botón Etiqueta inteligente del menú y elija Editar plantillas. A continuación, puede elegir entre editar StaticItemTemplate o DynamicItemTemplate.
Los controles agregados a StaticItemTemplate aparecerán en el menú estático cuando se cargue la página. Todos los controles agregados a DynamicItemTemplate aparecerán en todos los menús emergentes.
Eventos de menú
El control Menu tiene dos eventos que son únicos para él; MenuItemClicked y el evento MenuItemDatabound.
El evento MenuItemClicked se genera cuando se hace clic en un elemento de menú. El evento MenuItemDatabound se genera cuando un elemento de menú es databound. El MenuEventArgs que se pasa al controlador del evento proporciona acceso al elemento del menú a través de la propiedad Item.
Controlar la apariencia de los menús
También puede afectar a la apariencia de un control de menú mediante uno o varios de los muchos estilos disponibles para dar formato a los menús. Entre ellos se encuentran StaticMenuStyle, DynamicMenuStyle, DynamicMenuItemStyle, DynamicSelectedStyle, y DynamicHoverStyle. Estas propiedades se configuran mediante una cadena de estilo HTML estándar. Por ejemplo, lo siguiente afectará al estilo de los menús dinámicos.
<DynamicMenuStyle BorderStyle="Outset" BorderWidth="1px"
BackColor="#D6D3CE" />
Nota:
Si está utilizando alguno de los estilos Hover, tendrá que añadir un elemento <head> en la página con el elemento runat establecido en server.
Los controles de menú también admiten el uso de temas de ASP.NET 2.0.
Control TreeView
El control TreeView muestra datos en una estructura similar a un árbol. Al igual que con el control Menu, puede enlazarse fácilmente a cualquier origen de datos jerárquico, como SiteMapDataSource.
La primera pregunta que es probable que los clientes pregunten sobre el control TreeView en ASP.NET 2.0 es si está relacionado o no con TreeView IE WebControl que estaba disponible para ASP.NET 1.x. No lo es. El control TreeView de ASP.NET 2.0 se escribió desde cero y ofrece una mejora significativa con respecto al IE TreeView WebControl que estaba disponible anteriormente.
No se va a profundizar en cómo enlazar un control TreeView a un mapa de sitio, ya que se realiza exactamente de la misma manera que el control Menu. Sin embargo, el control TreeView tiene algunas diferencias distintas en la forma en que funciona.
De forma predeterminada, aparece un control TreeView totalmente expandido. Para cambiar el nivel de expansión tras la carga inicial, modifique la propiedad ExpandDepth del control. Esto es especialmente importante en los casos en los que TreeView es databound al expandir nodos concretos.
DataBinding del control TreeView
A diferencia del control Menu, TreeView se presta bien para controlar grandes cantidades de datos. Por lo tanto, además del enlace de datos a un SiteMapDataSource o XMLDataSource, TreeView suele estar enlazado a un DataSet u otros datos relacionales. En los casos en los que el control TreeView está enlazado a grandes cantidades de datos, es mejor enlazar solo a los datos que realmente son visibles en el control. A continuación, puede enlazar datos a datos adicionales a medida que se expanden los nodos TreeView.
En estos casos, la propiedad PopulateOnDemand de TreeView debe establecerse en true. A continuación, deberá proporcionar una implementación para el método TreeNodePopulate.
Enlace de datos sin postback
Tenga en cuenta que cuando expande un nodo en el ejemplo anterior por primera vez, la página vuelve a publicaciones y se actualiza. No es un problema en este ejemplo, pero se puede imaginar que podría estar en un entorno de producción con una gran cantidad de datos. Un escenario mejor sería uno en el que TreeView seguiría rellenando dinámicamente sus nodos, pero sin un postback de vuelta al servidor.
Al establecer las propiedades PopulateNodesFromClient y PopulateOnDemand en true, el control ASP.NET TreeView rellenará dinámicamente los nodos sin un postback. Cuando se expande el nodo primario, se realiza una solicitud XMLHttp desde el cliente y se desencadena el evento OnTreeNodePopulate. El servidor responde con una isla de datos XML que, a continuación, se usa para enlazar los nodos secundarios.
ASP.NET crea dinámicamente el código de cliente que implementa esta funcionalidad. Las etiquetas de <script> que contienen el script se generan apuntando a un archivo AXD. Por ejemplo, la lista siguiente muestra los vínculos de script para el código de script que genera la solicitud XMLHttp.
<script src="/WebSite1/WebResource.axd?d=QQG9vSdBi4_k2y9AeP_iww2&
amp;t=632514255396426531"
type="text/javascript"></script>
Si examina el archivo AXD anterior en el explorador y lo abre, verá el código que implementa la solicitud XMLHttp. Este método impide que los clientes modifiquen el archivo de script.
Controlar la operación del control TreeView
El control TreeView tiene varias propiedades que afectan al funcionamiento del control. Las propiedades más obvias son ShowCheckBoxes, ShowExpandCollapse y ShowLines.
La propiedad ShowCheckBoxes afecta a si los nodos muestran o no una casilla cuando se representan. Los valores válidos para esta propiedad son None, Root, Parent, Leaf y All. Estos afectan al control TreeView de la siguiente manera:
| Valor de propiedad | Efecto |
|---|---|
| None | Las casillas no se muestran en ningún nodo. Esta es la configuración predeterminada. |
| Root | Una casilla solo se muestra en el nodo raíz. |
| Parent | Una casilla solo se muestra en los nodos que tienen nodos secundarios. Esos nodos secundarios pueden ser nodos primarios o nodos hoja. |
| Hoja | Una casilla solo se muestra en los nodos que no tienen nodos secundarios. |
| All | Se muestra una casilla en todos los nodos. |
Cuando se usan casillas, la propiedad CheckedNodes devolverá una colección de nodos TreeView que se activan tras el postback.
La propiedad ShowExpandCollapse controla la apariencia de la imagen expandir/contraer junto a los nodos raíz y primarios. Si esta propiedad se establece en false, los nodos TreeView se representan como hipervínculos y se expanden o contraen haciendo clic en el vínculo.
La propiedad ShowLines controla si se muestran o no líneas que conectan los nodos primarios a los nodos secundarios. Cuando es false (valor predeterminado), no se muestran líneas. Cuando es true, el control TreeView usará imágenes de líneas en la carpeta especificada por la propiedad LineImagesFolder.
Para personalizar la apariencia de las líneas TreeView, Visual Studio .NET 2005 incluye una herramienta diseñador de líneas. Puede acceder a esta herramienta mediante el botón Etiqueta inteligente del control TreeView como se indica a continuación.
Figura 1
Al seleccionar la opción de menú Personalizar imágenes de línea, se iniciará la herramienta Diseñador de líneas, lo que le permitirá configurar la apariencia de las líneas TreeView.
Eventos TreeView
El control TreeView tiene los siguientes eventos únicos:
- SelectedNodeChanged se produce cuando se selecciona un nodo en función de la propiedad SelectAction.
- TreeNodeCheckChanged se produce cuando se cambia el estado de las casillas de verificación de los nodos.
- TreeNodeExpanded se produce cuando se expande un nodo en función de la propiedad SelectAction.
- TreeNodeCollapsed se produce cuando se contrae un nodo.
- TreeNodeDataBound se produce cuando un nodo está enlazado a datos.
- TreeNodePopulate se produce cuando se rellena un nodo.
La propiedad SelectAction permite configurar qué evento se desencadena cuando se selecciona un nodo. La propiedad SelectAction proporciona las siguientes acciones:
- TreeNodeSelectAction.Expand genera TreeNodeExpanded cuando se selecciona el nodo.
- TreeNodeSelectAction.None no genera ningún evento cuando se selecciona el nodo.
- TreeNodeSelectAction.Select genera el evento SelectedNodeChanged cuando se selecciona el nodo.
- TreeNodeSelectAction.SelectExpand genera el evento SelectedNodeChanged y el evento TreeNodeExpanded cuando se selecciona el nodo.
Controlar la apariencia con TreeView
El control TreeView proporciona muchas propiedades para controlar la apariencia del control con estilos. Están disponibles las propiedades siguientes:
| Nombre de la propiedad | Controles |
|---|---|
| HoverNodeStyle | Controla el estilo de los nodos cuando se mantiene el mouse sobre ellos. |
| LeafNodeStyle | Controla el estilo de los nodos hoja. |
| NodeStyle | Controla el estilo de todos los nodos. Los estilos de nodo específicos (como LeafNodeStyle) invalidan este estilo. |
| ParentNodeStyle | Controla el estilo de todos los nodos primarios. |
| RootNodeStyle | Controla el estilo del nodo raíz. |
| SelectedNodeStyle | Controla el estilo del nodo seleccionado. |
Cada una de estas propiedades es de solo lectura. Sin embargo, cada uno devolverá un objeto TreeNodeStyle y las propiedades de ese objeto se pueden modificar mediante el formato property-subproperty. Por ejemplo, para establecer la propiedad ForeColor de SelectedNodeStyle, usaría la sintaxis siguiente:
<asp:TreeView id=sampleTreeView
SelectedNodeStyle-ForeColor=Blue
runat=server>
Observe que la etiqueta anterior no está cerrada. Esto se debe a que al usar la sintaxis declarativa que se muestra aquí, incluiría también los nodos TreeViews en el código HTML.
Las propiedades de estilo también se pueden especificar en el código mediante el formato property.subproperty. Por ejemplo, para establecer la propiedad ForeColor del RootNodeStyle en el código, usaría la sintaxis siguiente:
treeView1.RootNodeStyle.ForeColor = System.Drawing.Color.Red;
Nota:
Para obtener una lista completa de las distintas propiedades de estilo, consulte la documentación de MSDN sobre el objeto TreeNodeStyle.
El control SiteMapPath
El control SiteMapPath proporciona un control de navegación de crumb de navegación para desarrolladores ASP.NET. Al igual que los otros controles de navegación, se pueden enlazar fácilmente a orígenes de datos jerárquicos como SiteMapDataSource o XmlDataSource.
Un control SiteMapPath se compone de objetos SiteMapNodeItem. Hay tres tipos de nodos; el nodo raíz, los nodos primarios y el nodo actual. El nodo raíz es el nodo situado en la parte superior de la estructura jerárquica. El nodo actual representa la página actual. Todos los demás nodos son nodos primarios.
Controlar la operación del control SiteMapPath
Las propiedades que controlan la operación del control SiteMapPath son las siguientes:
| Propiedad | Descripción de la propiedad |
|---|---|
| ParentLevelsDisplayed | Controla cuántos nodos primarios se muestran. El valor predeterminado es -1, que no impone ninguna restricción en el número de nodos primarios mostrados. |
| PathDirection | Controla la dirección de SiteMapPath. Los valores válidos son RootToCurrent (valor predeterminado) y CurrentToRoot. |
| PathSeparator | Cadena que controla el carácter que separa los nodos de un control SiteMapPath. El valor predeterminado es :. |
| RenderCurrentNodeAsLink | Valor booleano que controla si el nodo actual se representa como un vínculo. El valor predeterminado es False. |
| SkipLinkText | Ayuda con la accesibilidad cuando los lectores de pantalla ven la página. Esta propiedad permite a los lectores de pantalla omitir el control SiteMapPath. Para deshabilitar esta característica, establezca la propiedad en String.Empty. |
Controles SiteMapPath con plantilla
SiteMapControl es un control con plantilla y, como tal, puede definir diferentes plantillas para usarlas para mostrar el control. Para editar plantillas en un control SiteMapPath, haga clic en el botón Etiqueta inteligente del control y elija Editar plantillas en el menú. Esto muestra el menú SiteMapTasks, como se muestra a continuación, donde puede elegir entre las distintas plantillas disponibles.
Figura 2
La plantilla NodeTemplate hace referencia a cualquier nodo de SiteMapPath. Si el nodo es un nodo raíz o el nodo actual y se configura RootNodeTemplate o CurrentNodeTemplate, se invalida NodeTemplate.
Eventos SiteMapPath
El control SiteMapPath tiene dos eventos que no derivan de la clase Control; el evento ItemCreated y el evento ItemDataBound. El evento ItemCreated se genera cuando se crea un elemento SiteMapPath. ItemDataBound se genera cuando se llama al método DataBind durante el enlace de datos de un nodo SiteMapPath. Un objeto SiteMapNodeItemEventArgs proporciona acceso al SiteMapNodeItem específico a través de la propiedad Item.
Controlar la apariencia con SiteMapPath
Los estilos siguientes están disponibles para dar formato a un control SiteMapPath.
| Nombre de la propiedad | Controles |
|---|---|
| CurrentNodeStyle | Controla el estilo del texto del nodo actual. |
| RootNodeStyle | Controla el estilo del texto del nodo raíz. |
| NodeStyle | Controla el estilo del texto de todos los nodos suponiendo que no se aplique un CurrentNodeStyle o un RootNodeStyle. |
La propiedad NodeStyle se invalida mediante CurrentNodeStyle o RootNodeStyle. Cada una de estas propiedades es de solo lectura y devuelve un objeto Style. Para afectar a la apariencia de un nodo mediante una de estas propiedades, deberá establecer las propiedades del objeto Style que se devuelve. Por ejemplo, el código siguiente cambia la propiedad forecolor del nodo actual.
<asp:SiteMapPath runat="server" ID="SiteMapPath1"
CurrentNodeStyle-ForeColor="Orange"/>
La propiedad también se puede aplicar mediante programación de la siguiente manera:
this.SiteMapPath1.CurrentNodeStyle.ForeColor =
System.Drawing.Color.Orange;
Nota:
Si se aplica una plantilla, no se aplicará el estilo.
Laboratorio 1: Configuración de un control de menú de ASP.NET
Cree un nuevo sitio web.
Para agregar un archivo de mapa de sitio, seleccione Archivo, Nuevo, Archivo y elija Mapa de sitio en la lista de plantillas de archivo.
Abra el mapa del sitio (Web.sitemap por defecto) y modifíquelo para que se parezca al listado de abajo. Las páginas a las que está vinculando en el archivo de mapa del sitio no existen realmente, pero eso no será un problema para este ejercicio.
<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/default.aspx"> <siteMapNode url="~/products/default.aspx" title="Products" description="Our Products"> <siteMapNode url="~/products/winprods.aspx" title="Windows Products" description="Windows Products" /> <siteMapNode url="~/products/webprods.aspx" title="Web Products" description="Web Products" /> </siteMapNode> <siteMapNode url="~/services/default.aspx" title="Services" description="Our Services"> <siteMapNode url="~/services/consulting.aspx" title="Consulting Services" description="Consulting Services" /> <siteMapNode url="~/services/develop.aspx" title="Development Services" description="Development Services" /> </siteMapNode> </siteMapNode> </siteMap>Abra el formulario web predeterminado en la vista Diseño.
En la sección Navegación del Cuadro de herramientas, agregue un nuevo control Menu a la página.
En la sección Datos del cuadro de herramientas, agregue un nuevo SiteMapDataSource. SiteMapDataSource usará automáticamente el archivo Web.sitemap en su sitio. (El archivo Web.sitemap debe estar en la carpeta raíz del sitio).
Haga clic en el control Menu y, a continuación, haga clic en el botón Etiqueta inteligente para mostrar el cuadro de diálogo Tareas de menú.
En la lista desplegable Elegir origen de datos, seleccione SiteMapDataSource1.
Haga clic en el vínculo AutoFormat y elija un formato para el menú.
En el panel Propiedades, establezca la propiedad StaticDisplayLevels en 2. El control Menu debe mostrar ahora el nodo Inicio, Productos y Servicios en el Diseñador.
Examine la página en el explorador para usar el menú. (Dado que las páginas que ha agregado al mapa del sitio no existen realmente, verá un error al intentar examinarlas).
Experimente cambiando las propiedades StaticDisplayLevels y MaximumDynamicDisplayLevels y vea cómo afectan a la representación del menú.
Laboratorio 2: Enlace dinámico de un control TreeView
En este ejercicio se supone que tiene SQL Server ejecutándose localmente y que la base de datos Northwind está presente en la instancia de SQL Server. Si no se cumplen estas condiciones, cambie el cadena de conexión del ejemplo. Tenga en cuenta que es posible que también tenga que especificar la autenticación de SQL Server en lugar de una conexión de confianza.
Cree un nuevo sitio web.
Cambie a la vista Código para Default.aspx y reemplace todo el código por el código que se muestra a continuación.
<%@ Page Language="C#" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <script runat="server"> void PopulateNode(Object sender, TreeNodeEventArgs e) { // Call the appropriate method to populate a node at a particular level. switch (e.Node.Depth) { case 0: // Populate the first-level nodes. PopulateCategories(e.Node); break; case 1: // Populate the second-level nodes. PopulateProducts(e.Node); break; default: // Do nothing. break; } } void PopulateCategories(TreeNode node) { // Query for the product categories. These are the values // for the second-level nodes. DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories"); // Create the second-level nodes. if (ResultSet.Tables.Count > 0) { // Iterate through and create a new node for each row in the query results. // Notice that the query results are stored in the table of the DataSet. foreach (DataRow row in ResultSet.Tables[0].Rows) { // Create the new node. Notice that the CategoryId is stored in the Value property // of the node. This will make querying for items in a specific category easier when // the third-level nodes are created. TreeNode newNode = new TreeNode(); newNode.Text = row["CategoryName"].ToString(); newNode.Value = row["CategoryID"].ToString(); // Set the PopulateOnDemand property to true so that the child nodes can be // dynamically populated. newNode.PopulateOnDemand = true; // Set additional properties for the node. newNode.SelectAction = TreeNodeSelectAction.Expand; // Add the new node to the ChildNodes collection of the parent node. node.ChildNodes.Add(newNode); } } } void PopulateProducts(TreeNode node) { // Query for the products of the current category. These are the values // for the third-level nodes. DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value); // Create the third-level nodes. if (ResultSet.Tables.Count > 0) { // Iterate through and create a new node for each row in the query results. // Notice that the query results are stored in the table of the DataSet. foreach (DataRow row in ResultSet.Tables[0].Rows) { // Create the new node. TreeNode NewNode = new TreeNode(row["ProductName"].ToString()); // Set the PopulateOnDemand property to false, because these are leaf nodes and // do not need to be populated. NewNode.PopulateOnDemand = false; // Set additional properties for the node. NewNode.SelectAction = TreeNodeSelectAction.None; // Add the new node to the ChildNodes collection of the parent node. node.ChildNodes.Add(NewNode); } } } DataSet RunQuery(String QueryString) { // Declare the connection string. This example uses Microsoft SQL Server // and connects to the Northwind sample database. String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI"; SqlConnection DBConnection = new SqlConnection(ConnectionString); SqlDataAdapter DBAdapter; DataSet ResultsDataSet = new DataSet(); try { // Run the query and create a DataSet. DBAdapter = new SqlDataAdapter(QueryString, DBConnection); DBAdapter.Fill(ResultsDataSet); // Close the database connection. DBConnection.Close(); } catch (Exception ex) { // Close the database connection if it is still open. if (DBConnection.State == ConnectionState.Open) { DBConnection.Close(); } Message.Text = "Unable to connect to the database."; } return ResultsDataSet; } </script> <html> <body> <form id="Form1" runat="server"> <h3> TreeView PopulateNodesFromClient Example</h3> <asp:TreeView ID="LinksTreeView" Font-Name="Arial" ForeColor="Blue" EnableClientScript="true" PopulateNodesFromClient="false" OnTreeNodePopulate="PopulateNode" runat="server" ExpandDepth="0"> <Nodes> <asp:TreeNode Text="Inventory" SelectAction="Expand" PopulateOnDemand="True" Value="Inventory" /> </Nodes> </asp:TreeView> <br> <br> <asp:Label ID="Message" runat="server" /> </form> </body> </html>Guarde la página como treeview.aspx.
Examine la página.
Cuando se muestre la página por primera vez, vea el origen de la página en el explorador. Tenga en cuenta que solo se enviaron los nodos visibles al cliente.
Haga clic en el signo más situado junto a cualquier nodo.
Vuelva a ver el origen de la página. Observe que los nodos que se muestran recientemente ahora están presentes.
Laboratorio 3: Vista de detalles y edición de datos mediante GridView y DetailsView
Cree un nuevo sitio web.
Agregue un nuevo archivo web.config al sitio web.
Agregue un cadena de conexión al archivo web.config como se muestra a continuación:
<connectionStrings> <add name="Northwind" providerName="System.Data.SqlClient" connectionString="Data Source=localhost;Integrated Security=SSPI; Initial Catalog=Northwind;"/> </connectionStrings>Nota:
Puede que tenga que cambiar la cadena de conexión en función de su entorno.
Guarde y cierre el archivo web.config.
Abra Default.aspx y agregue un nuevo control SqlDataSource.
Cambie el identificador del control SqlDataSource a Productos.
En el menú Tareas de SQLDataSource, haga clic en Configurar origen de datos.
Seleccione Northwind en la lista desplegable de conexiones y haga clic en Siguiente.
Seleccione Productos en la lista desplegable Nombre y marque las casillas ProductID, ProductName, UnitPrice y UnitsInStock como se muestra a continuación.
Ilustración 3
- Haga clic en Next.
- Haga clic en Finalizar
- Cambie a la vista Origen y examine el código que se generó. Observe el SelectCommand, DeleteCommand, InsertCommand, y UpdateCommand que se han añadido al control SqlDataSource. Observe también los parámetros que se agregaron.
- Cambie a la vista Diseño y agregue un nuevo control GridView a la página.
- Seleccione Productos en la lista desplegable Seleccionar origen de datos.
- Marque Habilitar paginación y Habilitar selección como se muestra a continuación.
Ilustración 4
- Haga clic en el enlace Editar columnas y asegúrese de que Autogenerar campos está seleccionado.
- Haga clic en OK.
- Con el control GridView seleccionado, haga clic en el botón situado junto a la propiedad DataKeyNames del panel Propiedades.
- Seleccione ProductID de la lista Campos de datos disponibles y haga clic en el botón > para agregarlo.
- Haga clic en OK.
- Agregue un nuevo control SqlDataSource a la página.
- Cambie el identificador del control SqlDataSource a Detalles.
- En el menú Tareas de SqlDataSource, seleccione Configurar origen de datos.
- Elija Northwind en la lista desplegable y haga clic en Siguiente.
- Seleccione Productos en la lista desplegable Nombre y marque la casilla </strong>* en la lista Columnas.
- Haga clic en el botón WHERE.
- Seleccione ProductID de la lista desplegable Columna.
- Seleccione = en la lista desplegable Operador.
- Seleccione Control en la lista desplegable Origen.
- Seleccione GridView1 en la lista desplegable Id. de control.
- Haga clic en el botón Agregar para agregar la cláusula WHERE.
- Haga clic en OK.
- Haga clic en el botón Avanzado y active la casilla Generar sentencias INSERT, UPDATE y DELETE.
- Haga clic en OK.
- Haga clic en Siguiente y haga clic en Finalizar.
- Agregue un control DetailsView a la página.
- En el desplegable Seleccionar origen de datos, seleccione Detalles.
- Marque la casilla Habilitar edición como se muestra a continuación.
Figura 5 39. Guarde la página y examine Default.aspx. 40. Haga clic en el vínculo Seleccionar junto a diferentes registros para ver la actualización DetailsView automáticamente. 41. Haga clic en el vínculo Editar en el control DetailsView. 42. Realice un cambio en el registro y haga clic en Actualizar.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de