2. Utilice el componente ASP.NET DataGrid para mostrar datos
Introducción de contenido relacionado:
ASP.NET viene con muchos componentes web para acelerar el proceso de edición de páginas web. Usemos el ejemplo de global, un tutorial que viene con Dreamwaver MX, para demostrar cómo usar este componente para mostrar datos en la base de datos.
1. Enlace de base de datos y visualización de datos con DataGrid
Existe la base de datos global.mdb de esta instancia en los activos del directorio de la página web. Nuestro propósito es generar los datos de diferentes regiones según el valor de Region_id en la tabla de ubicación de esta base de datos. (Puede utilizar Access para abrir esta base de datos)
Podemos cambiar el nombre del archivo location3.htm a location3.aspx (el sufijo del archivo de ventana web de ASP.NET es aspx) y luego editarlo.
[Figura 2-1 Páginas que deben cambiarse]
Eliminemos la parte estática simple en el medio y usemos DataGrid de ASP.NET para implementar su funcionalidad.
[Figura 2-2 Eliminar la parte estática de la página]
El siguiente paso es vincular a la base de datos. Haga clic en el panel Aplicación a la derecha, seleccione Base de datos y haga clic en el signo +.
Seleccione conexión OLE DB.
[Figura 2-3 Panel de aplicación]
Luego ingrese al cuadro de diálogo Conexión OLE DB. Aquí puede escribir a mano el código de la base de datos del enlace o generar el código automáticamente. Asigne un nombre a la ubicación del nombre de la conexión, haga clic en Crear y el código se generará automáticamente a través del asistente.
[Figura 2-4 Cuadro de diálogo Conexión OLE DB]
Después de ingresar a la página Propiedades del enlace de datos, seleccione Proveedor para configurar el motor de la base de datos.
Lo sorprendente a continuación es que admite 21 métodos de conexión de bases de datos, incluido el servidor SQL, Oracle, etc.
[Figura 2-5 Página proporcionada por el motor de base de datos]
Esta es una de las mejores cosas de .NET: admite múltiples bases de datos. Utiliza ADO.NET. Después de un tiempo, la cadena de conexión que generamos usando este asistente se escribe de acuerdo con ADO.NET.
Dado que la base de datos a la que vamos a vincularnos es una base de datos Access2000, seleccionamos Proveedor OLE DB Microsoft Jet 4.0 y hacemos clic en Siguiente.
Haga clic en el botón junto a 1.Seleccione o ingrese un nombre de base de datos para seleccionar la base de datos a la que desea vincularse.
Cancelar Nombre de usuario y Contraseña en 2.Ingrese la información para iniciar sesión en la base de datos
[Figura 2-6 Enlace de configuración]
Establezca permisos de lectura en Avanzado. Seleccione Leer, Leer, Escribir, Escribir y haga clic en Aceptar.
[Figura 2-7 Configuración de permisos]
Agregue un nombre de conexión y haga clic en Probar para probar el enlace de la base de datos. Si el enlace de la base de datos es exitoso, haga clic en Aceptar. Felicidades,
Ha vinculado la base de datos a su sitio. El siguiente paso debería ser mostrarlo usando DataGrid.
También en el panel Aplicación, seleccione Comportamientos del servidor.
Primero complete la configuración, haga clic en implementar y el programa implementará automáticamente el sitio y copiará las carpetas DreamweaverCtrls.dll, web.config y _mmServerScripts al directorio del sitio, que son archivos necesarios para usar Dreamweaver MX para crear páginas web ASP.net.
[Figura 2-8 Sitio de implementación]
Al mismo tiempo, primero debe crear una carpeta bin en el directorio raíz del sitio web y copiar el archivo DreamweaverCtrls.dll a esta carpeta.
Haga clic en el signo + para crear primero un nuevo conjunto de datos.
[Figura 2-9 Agregar conjunto de datos]
Conexión es para seleccionar la fuente de datos, Tabla es para seleccionar la tabla, Columna es para seleccionar el elemento y Filtro se usa para filtrar los datos. Dado que esta página muestra datos de Europa, se establece el Valor ingresado = 3. En caso de error, Ir a se utiliza para manejar la página a la que salta cuando hay un error al leer los datos.
[Figura 2-10 Creación de un conjunto de datos]
Después de crear exitosamente el DataSet, puede crear el DataGrid. Haga clic en el signo + y seleccione DataGrid
[Figura 2-11 Agregar DataGrid]
Seleccione el conjunto de registros requerido en Conjunto de datos, establezca si se utilizará la visualización de paginación y la cantidad de registros por página que se muestran en la paginación, configure el método de la barra de navegación en Navegación y agregue o elimine los elementos mostrados en Columnas.
[Figura 2-12 Configuración de DataGrid]
Haga clic en Editar para configurar el título del encabezado. Después de ingresar el título, haga clic en Aceptar para confirmar.
[Figura 2-13 Título de configuración]
Haga clic en Aceptar para agregar el DataGrid.
[Figura 2-14 Página de vista previa]
En la página de vista previa puede ver un área donde se ha agregado un DataGrid. Presione F12 para obtener una vista previa de la página.
A continuación se muestra la página después de ejecutarla.
[Figura 2-15 Página después de ejecutar]
2.Cambiar las propiedades de DataGrid
Introducción de contenido relacionado:
Cuando ves este componente, ¿crees que el color no se ve muy bonito? Entonces, cambiémoslo. El componente DataGrid tiene muchas propiedades a través de las cuales puede cambiar el estilo de DataGrid.
Analizar código
Este es el código generado por Dreamwaver MX y puede modificarse según sus propiedades.
Modo estilo buscapersonas
Puede configurar el formato de visualización de paginación. NumericPages se muestra en paginación numérica y NextPrev se muestra en etiquetas "<" ">".
Estilo de encabezado
Establece el estilo del encabezado. Puede configurar HorizontalAlign (alineación horizontal), BackColor (color de fondo), ForeColor (color de primer plano), Font-Name (fuente), Font-Bold (si está en negrita), Font-Size (tamaño de fuente)
Estilo de artículo
Establezca el estilo de cada elemento de datos, donde las propiedades son las mismas que las anteriores
Estilo de artículo alternativo
Si necesita alternar el color de los elementos de datos, puede agregar este elemento. Las propiedades son las mismas que las anteriores.
Estilo de pie de página
Establecer estilo de pie de página
Estilo de buscapersonas
Estilo inferior
Dreamwaver MX también tiene un cuadro de diálogo que puede cambiar el estilo del DataGrid.
Seleccione el DataGrid generado y haga clic en Editar columnas en su panel de propiedades.
[Figura 2-16 Panel de propiedades de DataGrid]
Al ingresar a la página de modificación de atributos, podemos usar "+" y "-" para aumentar o disminuir las columnas deseadas. Al mismo tiempo, podemos hacer clic en Editar para configurar los elementos de datos correspondientes a cada elemento, así como el nombre del. Título. Haga clic en Cambiar columna para establecer el tipo de cada elemento, incluido Formulario libre (establezca libremente los datos contenidos en cada columna y puede agregar su propio contenido), Hipervínculo (establecido como hipervínculo), Editar, Actualizar, Botones Cancelar (pueden ser utilizado para crear rápidamente páginas de administración), botón Eliminar (eliminar registros)
[Figura 2-17 Propiedad de columna DataGrid]
[Figura 2-18 Atributo Cambiar tipo de columna]
Creo que a través de estas propiedades puedes configurar el DataGrid que desees.