diseÑo de pÁginas web bajo la plataforma net

Agosto 2011

Manual del curso

Introducción al .NET__________________________________________________3

ANTECEDENTES:___________________________________________________________3

qué NO es .NET____________________________________________________________4

Que es .net_________________________________________________________________4

.NET como evolución de COM_____________________________________________7

.NET Framework___________________________________________________________7

CLR - Arquitecturas de Ejecución de Aplicaciones_____________________10

NET Framework Class Library___________________________________________11

Common Language Specification (CLS)_________________________________13

CLS - Elección del lenguaje______________________________________________14

Acceso a Datos: ADO.NET___________________________________________16

Arquitectura de ADO.NET________________________________________________17

Capa conectada y desconectada________________________________________18

La capa conectada_______________________________________________________19

Ventajas y también sus desventajas capa conectada.________________21

La capa desconectada___________________________________________________22

Unión entre capa conectada y desconectada__________________________23

Otras clases dependientes de DataSet_________________________________24

Ventajas y también sus desventajas capa Desconectada.____________25

DataSet tipados__________________________________________________________26

Partes de un DataSet tipado____________________________________________28

Creacion de sitio WEB_______________________________________________30

Crear la estructura de un sitio web.____________________________________31

Definir y usar directorios._______________________________________________32

Crear y editar paginas web._____________________________________________32

1

Compatibilidad con los navegadores.__________________________________38

Crear un apartado exclusivo para miembros.__________________________40

Configurar un rol.________________________________________________________44

Crear una regla.__________________________________________________________45

Crear cuentas de usuario._______________________________________________47

Crear páginas maestras._________________________________________________50

Crear formularios.________________________________________________________53

Editar paginas maestras.________________________________________________54

Crear hiperenlaces.______________________________________________________56

Uso de controles asp.net________________________________________________61

Controles de navegación.________________________________________________65

Crear mapa del sitio._____________________________________________________67

Creación de un sistema completo de login.____________________________71

Crear perfiles de usuario._______________________________________________86

Usar controles de validación.___________________________________________91

Usar datos en paginas web.________________________________________96

Control datalist___________________________________________________________96

Trabajar con controles de datos.______________________________________105

Control gridview________________________________________________________105

Control detailsview_____________________________________________________112

Crear formulario maestro - detalles.__________________________________115

Crear un DataSet tipieado________________________________________120

Primer paso_____________________________________________________________120

Conectarse a la base de datos en un servidor de Microsoft SQL Server 2000 o 2005 Server base de datos____________________________121

Creación de un DataSet tipeado y el Dataadapter___________________122

2

INTRODUCCIÓN AL .NET

ANTECEDENTES:

La idea de .NET gira en torno a los servicios web como base para la construcción de aplicaciones basadas en tecnologías de internet para la próxima década. Por tanto el diseño de esta nueva plataforma es totalmente diferente al planteamiento de ASP ya que esta ultima se planteaba como la solucion corporativa para la construcción de aplicaciones basadas en componentes COM. Esta fue la base del famoso concepto que inundo la informática corporativa de mediados de los 90’s con la inclusión de los componentes COM y su famoso homologo JavaBeans de la tecnología JAVA

FIGURA 1

.Net es la nueva plataforma de desarrollo que ha lanzado al mercado MicroSoft, y en la que ha estado trabajado durante los últimos años. Sin duda alguna va a ser uno de los entornos de desarrollo que reinen durante los próximos años.

3

1980 1990 2000Fu

nci

on

alid

ad

Win16 Win32COM

MFCComponent

es

Servicios

APIs

Windows3.0

qué NO es .NET

Antes de decir qué es .NET, es conveniente aclarar qué NO es .NET:

.NET no es un sistema operativo, como si lo es Microsoft Windows en sus distintas versiones.

.NET no es un Lenguaje de Programación: si bien la plataforma Microsoft .NET incluye lenguajes de programación de aplicaciones, su concepto es más amplio y va más allá de éstos.

.NET no es un Entorno de Desarrollo: si bien la plataforma Microsoft .NET incluye entornos de desarrollo integrados (IDEs), su concepto es más amplio y va más allá de éstos.

.NET no es un servidor de aplicaciones (Application Server)

.NET no es un producto empaquetado que se pueda comprar como tal, sino que es una plataforma que engloba distintas aplicaciones, servicios y conceptos y que en conjunto permiten el desarrollo y la ejecución de aplicaciones.

Que es .net

Microsoft .NET es una plataforma de desarrollo y ejecución de aplicaciones. Esto quiere decir que no sólo nos brinda todas las herramientas y servicios que se necesitan para desarrollar modernas aplicaciones empresariales y de misión crítica, sino que también nos provee de mecanismos robustos, seguros y eficientes para asegurar que la ejecución de las mismas sea óptima. Los componentes principales de la plataforma .NET son:

• Un entorno de ejecución de aplicaciones, también llamado “Runtime”, que es un componente de software cuya función es la de ejecutar las aplicaciones .NET e interactuar con el sistema operativo ofreciendo sus servicios y recursos.

• Un conjunto de bibliotecas de funcionalidades y controles reutilizables, con una enorme cantidad de componentes ya programados listos para ser consumidos por otras aplicaciones.

• Un conjunto de lenguajes de programación de alto nivel, junto con sus compiladores y linkers, que permitirán el desarrollo de aplicaciones sobre la plataforma .NET.

4

• Un conjunto de utilitarios y herramientas de desarrollo para simplificar las tareas más comunes del proceso de desarrollo de aplicaciones

• Documentación y guías de arquitectura, que describen las mejores prácticas de diseño, organización, desarrollo, prueba e instalación de aplicaciones .NET

Por otra parte, .NET representa la evolución COM (Component Object Model), la plataforma de desarrollo de Microsoft anterior a .NET y sobre la cual se basaba el desarrollo de aplicaciones Visual Basic 6 (entre otros tantos lenguajes y versiones).

Estas son las características principales de la plataforma Microsoft .NET:

• Se dice que es una plataforma de ejecución intermedia, ya que las aplicaciones .NET no son ejecutadas directamente por el sistema operativo, como ocurre en el modelo tradicional de desarrollo. En su lugar, las aplicaciones .NET están diseñadas para ser ejecutadas contra un componente de software llamado Entorno de Ejecución (muchas veces también conocido como “Runtime”, o , “Máquina Virtual”). Este componente es el encargado de manejar el ciclo de vida de cualquier aplicación .NET, iniciándola, deteniéndola, interactuando con el Sistema Operativo y proveyéndole servicios y recursos en tiempo de ejecución.

• La plataforma Microsoft .NET está completamente basada en el paradigma de Orientación a objetos

• .NET es multi-lenguaje: esto quiere decir que para poder codificar aplicaciones sobre esta plataforma no necesitamos aprender un único lenguaje específico de programación de alto nivel, sino que se puede elegir de una amplia lista de opciones.

• .NET es una plataforma que permite el desarrollo de aplicaciones empresariales de misión crítica, entendiéndose por esto que permite la creación y ejecución de aplicaciones de porte corporativo que sean críticas para la operación de tipos variados de organizaciones. Si bien también es muy atrayente para desarrolladores no profesionales, estudiantes y entusiastas, su verdadero poder radica en su capacidad para soportar las aplicaciones más grandes y complejas.

• .Net fue diseñado de manera tal de poder proveer un único modelo de programación, uniforme y consistente, para todo tipo de aplicaciones (ya sean de formularios Windows, de consola, aplicaciones Web, aplicaciones móviles, etc.) y para cualquier

5

Componentes principales

dispositivo de hardware (PC’s, Pocket PC’s, Teléfonos Celulares Inteligentes, también llamados “SmartPhones”, Tablet PC’s, etc.). Esto representa un gran cambio con respecto a las plataformas anteriores a .NET, las cuales tenían modelos de programación, bibliotecas, lenguajes y herramientas distintas según el tipo de aplicación y el dispositivo de hardware.

• Uno de los objetivos de diseño de .NET fue que tenga la posibilidad de interactuar e integrarse fácilmente con aplicaciones desarrolladas en plataformas anteriores, particularmente en COM, ya que aún hoy existen una gran cantidad de aplicaciones desarrolladas sobre esa base.

• .NET no sólo se integra fácilmente con aplicaciones desarrolladas en otras plataformas Microsoft, sino también con aquellas desarrolladas en otras plataformas de software, sistemas operativos o lenguajes de programación. Para esto hace un uso extensivo de numerosos estándares globales que son de uso extensivo en la industria. Algunos ejemplos de estos estándares son XML, HTTP, SOAP, WSDL y UDDI.

Figura 2

6

Entorno de Desarrollo

Librerías de Funcionalidad

Lenguajes de Programación

Entorno de Ejecución

Sistema Operativo (Familia Windows)

Aplicación .NET

Objetivos del .NET

.NET como evolución de COM

Entorno de Ejecución (Runtime) COM: Windows .NET: Common Language Runtime

Librerías de Funcionalidad COM: Algunas (ADO, FSO, etc.) .NET: Muy extensa (.NET Framework Class Library)

Lenguajes de Programación COM: VB, C++, VFP, ASP, J++ .NET: Common Language Specification

Entorno de Desarrollo (IDE) COM: Uno para cada lenguaje .NET: Uno independiente del lenguaje (VS.NET)

.NET Framework

El .NET Framework (traducido como “Marco de Trabajo”) es el componente fundamental de la plataforma Microsoft .NET, necesario tanto para poder desarrollar aplicaciones como para poder ejecutarlas luego en entornos de prueba o producción.

El .NET framework tiene tres variantes principales, todas descargables gratuitamente desde Internet

.NET Framework Redistributable Package: este es el mínimo componente de la plataforma .NET que se necesita para poder ejecutar aplicaciones. Normalmente ésta es la variante que se instala en los entornos productivos, una vez que el desarrollo y las pruebas de la aplicación han finalizado.

Está compuesto por:

• El entorno de ejecución de la plataforma .NET• Las bibliotecas de funcionalidad reutilizable• .NET Framework SDK: esta versión contiene herramientas de

desarrollo de línea de comandos (compiladores, depuradores, etc.), documentación de referencia, ejemplos y manuales para desarrolladores de aplicaciones. Normalmente ésta variante se instala en los entornos de desarrollo de aplicaciones, y es más útil a los programadores que a los usuarios finales. Para poder

8

Componentes

instalar la versión SDK (Software Development Kit) es necesario instalar previamente el Redistributable Package.

• .NET Compact Framework: esta es una versión reducida del .NET Framework Redistributable, especialmente pensada para ser instalada en dispositivos móviles como Pocket PC’s y SmartPhones.

El .NET Framework puede ser instalado en cualquier sistema operativo de la familia Windows superior a Windows 98. Para más información acerca de los prerrequisitos se puede consultar:

http://msdn.microsoft.com/netframework/technologyinfo/sysreqs/default.aspx

Actualmente, Windows 2003 Server y Windows XP SP2 traen el .NET Framework preinstalado. Para más información acerca de las descargas gratuitas, por favor consulte http://msdn.microsoft.com/netframework/downloads/updates/default.aspx

Figura 3

El .NET Framework debe estar instalado en cualquier dispositivo de hardware para que la ejecución de una aplicación .NET sea posible. En el caso de las aplicaciones de escritorio (también llamadas “De Formularios Windows”) y las aplicaciones de consola (aplicaciones cuya interfaz de usuario es una consola de comandos), el Framework

9

.NET Compact Framework

ü*ü

üü*ü

AplicaciónMóvil

Aplicación de Consola

Aplicación Web

Aplicación de Escritorio

ServidorCliente

Sistemas compatibles

debe estar presente del lado del cliente (computadora donde se ejecuta la parte de la aplicación que interactúa con el usuario), y en el servidor sólo en caso de que la aplicación sea distribuída y tenga parte de su funcionalidad centralizada en una única computadora.

En el caso de las aplicaciones Web, el único requisito del lado del cliente es tener un navegador y una conexión de red al servidor, el cual debe tener instalado el .NET Framework. Veremos más sobre aplicaciones Web a lo largo del curso.

Para las aplicaciones móviles, que se ejecutan sobre Windows Mobile en algún dispositivo tipo Pocket PC o SmartPhone, es necesario tener instalado el .NET Compact Framework en el dispositivo.

Imagen 4

En la figura4 se pueden apreciar las distintas partes que componen al .NET Framework, incluídas el entorno de ejecución de aplicaciones (CLR, en verde), el conjunto de bibliotecas de funcionalidad reutilizable (.NET Framework Class Library, en azul) y los compiladores y herramientas de desarrollo para los lenguajes .NET (en rojo). Todos estos componentes se motan por encima de la familia de sistemas operativos Windows.

Dentro del conjunto de la .NET Framework Class Library se distinguen 4 sub-componentes principales:

• La Base Class Library (BCL - Biblioteca de Clases Base), que contiene la funcionalidad más comunmente utilizada para el desarrollo de todo tipo de aplicaciones. Algunos ejemplos de la funcionalidad

10

WindowsCOM+ Services

Common Language RuntimeBase Class Library

ADO.NET y XML

ASP.NETWindows Forms

Common Language SpecificationVB C++ C# J# …

.NE

T F

ram

ewor

k R

edis

trib

utab

le

.NE

T F

ram

ew

ork

SD

K.N

ET

Fram

ework

Class L

ibrary

Partes del framework

provista por la BCL son el manejo de colecciones, cadenas de texto, entrada/salida, threading, operaciones matemáticas y dibujos 2D.

• ADO.NET, que contiene un conjunto de clases que permiten interactuar con bases de datos relacionales y documentos XML como repositorios de información persistente.

• ASP.NET, que constituye la tecnología dentro del .NET Framework para construir aplicaciones con interfaz de usuario Web (es decir, aplicaciones cuya lógica se encuentra centralizada en uno o varios servidores y que los clientes pueden acceder usando un browser o navegador mediante una serie de protocolos y estándares como HTTP y HTML).

• Windows Forms (o simplemente WinForms), que constituye la tecnología dentro del .NET Framewok que permite crear aplicaciones con interfaz de usuario basada en formularios y ventanas Windows de funcionalidad rica y que se ejecutan directamente en los clientes.

CLR - Arquitecturas de Ejecución de Aplicaciones

Figura 5

11

• El modelo de ejecución que propone la plataforma .NET se suele definir como “virtual”, o “de máquina virtual”, ya que las aplicaciones no son desarrolladas directamente contra las APIs de programación expuestas por el sistema operativo, ni es éste el que se encarga de su ejecución y ciclo de vida, sino que .NET provee un entorno de ejecución (el CLR) que corre por sobre el sistema operativo y que es el encargado de ejecutar las aplicaciones y proveerles servicios en tiempo de ejecución. A los componentes de software que se ejecutan de esta manera se los conoce comúnmente como “componentes manejados”, ya que su ejecución es controlada por un entorno intermedio. En la figura 5 podemos ver las diferencias entre las arquitecturas de ejecución de los componentes tradicionales (como los COM) y los componentes manejados.

• Una de las principales ventajas de contar con una plataforma virtual es que no están “atadas” de ninguna forma con el sistema operativo y la plataforma de hardware subyacente. Es sabido que una aplicación compilada para que utilice directamente las APIs y servicios expuestas por un sistema operativo “x” muy difícilmente pueda ser ejecutada en otro sistema operativo distinto sin ser recompilada. Las aplicaciones manejadas, en cambio, descansan la tarea de su compilación a un código de máquina específico en el entorno de ejecución. De esta manera, si existen distintos entornos de ejecución intermedia para diferentes Sistemas Operativos, la misma aplicación puede ejecutarse en todos ellos si necesidad de recompilarse.

NET Framework Class Library

Conjunto de Tipos básicos (clases, interfaces, etc.) que vienen incluídos en el .NET Framework Los tipos están organizados en jerarquías lógicas de nombres, denominados NAMESPACES Los tipos son INDEPENDIENTES del lenguaje de desarrollo Es extensible y totalmente orientada a objetos

De muy poco serviría a los desarrolladores el contar con una plataforma de ejecución de aplicaciones tan sofisticada y robusta como el CLR sin tener además un conjunto de funcionalidades y componentes empaquetados listos para aprovechar y reutilizar en sus aplicaciones. Justamente ese es el propósito de la .NET Framework Class Library (Biblioteca de Clases del .NET Framework), que provee cientos de tipos básicos (clases e interfaces principalmente) orientados a objetos, extensibles mediante herencia, independientes

12

ventajas

Importancia

del lenguaje de programación de alto nivel que se desee utilizar y organizados en namespaces jerárquicos.

Figura 6

En la figura 6 se aprecian los principales namespaces de la biblioteca de clases .NET:

• System: raíz de todos los otros namespaces, y dentro del cual podemos encontrar la mayoria de los namespaces correspondientes a la Base Class Library

• System.Data y System.Xml: en conjunto, estos dos namespaces constituyen la tecnología conocida como ADO.NET

• System.Web: dentro de este namespace se encuentran todos los tipos necesarios para programar aplicaciones y servicios web ASP.NET

• System.Windows.Forms: dentro de este namespace se encuentran todos los tipos necesarios para programar aplicaciones de escritorio basadas en formularios y ventanas Windows.

13

System

System.Data System.Xml

System.Web

GlobalizationDiagnosticsConfigurationCollections

ResourcesReflectionNetIO

ThreadingTextServiceProcessSecurity

CommonOleDb

SqlClientOdbc

XPathXSLT

RuntimeInteropServicesRemotingSerialization

Serialization

Configuration SessionStateCaching Security

ServicesDescriptionDiscoveryProtocols

UIHtmlControlsWebControls

System.Drawing

ImagingDrawing2D

TextPrinting

System.Windows.Forms

Design ComponentModel

NameSpaces

Common Language Specification (CLS)

Uno de los objetivos de diseño de la plataforma .NET fue el ser independiente del lenguaje de programación elegido para el desarrollo de aplicaciones. Para lograr esto es que se creó la Especificación de Lenguaje Común (o CLS, por sus siglas en inglés), que define y estandariza un subconjunto de todas las características soportadas por el CLR y que son necesarias en la mayoría de las aplicaciones. Todos los componentes desarrollados y compilados de acuerdo con la especificación CLS pueden interactuar entre si, independientemente del lenguaje de programación de alto nivel en el que fueron escritos.

Junto con el .NET Framework, Microsoft provee implementaciones de 4 lenguajes compatibles con CLS, junto con sus compiladores:

• Microsoft Visual Basic .NET

• Microsoft Visual C# .NET

• Microsoft Visual J#.NET

• Microsoft Visual C++.NET

Esto quiere decir que una aplicación escrita, por ejemplo, en Visual Basic.NET, puede incorporar sin problemas nuevas partes escritas en C# o C++ .NET.

El resto de la industria y el sector académico han desarrollado más de 20 lenguajes compatibles con la especificación CLS

14

Cobol

Eiffel

Fortran

Pascal

Perl

Haskell

Java

JavaScript

Mercury

ML

PHP

Objective Caml

Oberon

Smalltalk

Scheme

RPGMond

rian

Delphi

PythonLIS

PProlo

g

CLS - Elección del lenguaje

• .NET posee un único runtime (el CLR) y un único conjunto de bibliotecas para todos los lenguajes• No hay diferencias notorias de performance entre los lenguajes provistos por Microsoft• El lenguaje a utilizar, en gral., dependerá de su experiencia previa con otros lenguajes o de gustos personales

Si conoce Java, Delphi, C++, etc. C# Si conoce Visual Basic o VBScript VB.NET

• Los tipos de aplicaciones .NET son INDEPENDIENTES del lenguaje que elija

Un punto importante a destacar es que la elección del lenguaje de alto nivel en el que debe escribirse una aplicación .NET prácticamente ha sido reducida a una cuestión de gustos personales y comodidad con la sintaxis. No hay prácticamente motivos tecnológicos sobresalientes que inclinen la balanza hacia algún lenguaje en particular, al menos entre los ofrecidos por Microsoft. Todos utilizan el mismo runtime, todos utitlizan el mismo conjunto de bibliotecas de la misma forma, no existen diferencias notorias de performance entre ellos, todos tienen la misma potencia y todos tienen la misma capacidad de acceso a los recursos y servicios que expone el .NET Framework. De hecho, al cargar y ejecutar un assembly el CLR no sabe en qué lenguaje de programación de alto nivel éste fue escrito, ya que lo que el recibe como entrada es código MSIL.

15

Figura 7

La figura 7 representa el modelo de compilación y ejecución de aplicaciones .NET, al cual muchas veces se denomina “de compilación diferida”, o “de compilación en dos etapas”. Esto es asi ya que el primer paso para poder ejecutar una aplicación dentro del CLR es compilar su código fuente para obtener un assembly con código MSIL. Este paso es realizado por cada uno de los compiladores de los distintos lenguajes de alto nivel soportados por .NET.

Luego, el CLR se encarga de compilar el código MSIL a código nativo que hace uso específico de los servicios del sistema operativo y la plataforma de hardware subyacente.

Todos los compiladores de los nuevos lenguajes .NET de Microsoft siguen este modelo de ejecución, con excepción de C++ .NET, que es el único lenguaje al que se le ha dejado la capacidad de emitir también código “no manejado”. Esto se debe a que ciertas aplicaciones, como los drivers de dispositivos, necesitan tener acceso a los recursos del sistema operativo a muy bajo nivel para lograr un rendimiento óptimo y mayor performance.

16

Compilación

ACCESO A DATOS: ADO.NET

ADO.NET es un subconjunto de la .NET Framework Class Library, que contiene todas las funcionalidades necesarias para conectarse e interactuar con dos tipos de repositorios permamentes de información:

1) Bases de Datos, como Microsoft SQL Server (clases del namespace System.Data, que se encuentran compiladas en System.data.dll)

2) Archivos XML (clases del namespace System.XML, que se encuentran compiladas en System.Xml.dll)

Como cualquier otro modelo de acceso a datos, ADO.NET es un conjunto de clases relacionadas entre sí que están especializadas en ofrecer toda la funcionalidad que un programador necesita para realizar acceso a datos y manejarlos una vez los ha obtenido.

Las clases genéricas expuestas por ADO.NET se encuentran bajo el espacio de nombres System.Data. Este espacio de nombres define clases genéricas de acceso a datos que posteriormente son extendidas para ofrecer características y funciones específicas de cada proveedor.

Figura 8

17

System.Data

OleDbSqlClient

OracleClientCommon

Odbc SqlTypes

System.XmlSerialization

XPathXSLT

Schema

Introducción

Conjunto de clases

El objeto más importante a la hora de trabajar con el nuevo modelo de acceso a datos es el DataSet. Sin exagerar demasiado podríamos calificarlo casi como un motor de datos relacionales en memoria. Aunque hay quien lo asimila a los clásicos Recordsets su funcionalidad va mucho más allá como se verá en breve.

Arquitectura de ADO.NET

El concepto más importante que hay que tener claro sobre ADO.NET es su modo de funcionar, que se revela claramente al analizar su arquitectura:

Figura 8

18

Data set

Capa conectada y desconectada

Existen dos capas fundamentales dentro de su arquitectura: la capa conectada y la desconectada.

FIGURA 9

En la figura 9 se pueden apreciar las clases más comunes que componen a todos los proveedores de acceso a datos de ADO.NET. Nótese que algunos nombres empiezan con las letras “Xxx”: esto se debe a que los nombres de esas clases varían según el proveedor específico que se esté utilizando. Por ejemplo, la clase que representa una conexión con la base de datos usando el Data Provider For Sql Server es “SqlConnection”, mientras que si usamos el Data Provider For Oracle podemos obtener la misma funcionalidad de la clase “OracleConnection”.

● XxxConnection: representa una conexión. Almacena, entre otras cosas, el string de conexión (connection string), y permite conectarse y desconectarse con una base de datos.

● XxxCommand: permite almacenar y ejecutar una instrucción SQL contra una base de datos, enviando parámetros de entrada y recibiendo parámetros de salida.

19

Base de Datos

XxxConnectionXxxConnection

XxxCommandXxxCommand

DataSetDataSet XxxDataReaderXxxDataReader

XxxDataAdapterXxxDataAdapter

Maneja la conección a una base de datos

Maneja la conección a una base de datos

Ejecuta comandos contra una basede datos

Ejecuta comandos contra una basede datos

Copia local de datos relacionalesCopia local de datos relacionales

Provee acceso a datos read-only, Forward-onlyProvee acceso a datos read-only, Forward-only

Intercambia datos entre un dataset y una base de datos

Intercambia datos entre un dataset y una base de datos

Principales clases

Estas dos clases se utilizan tanto en escenarios conectados como desconectados.

● XxxDataReader: permite acceder a los resultados de la ejecución de un comando contra la base de datos de manera read-only (sólo lectura), forward-only (sólo hacia adelante). Esta clase se utiliza en escenarios conectados, ya que no es posible operar sobre los registros de un DataReader estando desconectado de la fuente de datos.

● XxxDataAdapter y DataSet: en conjunto, estas clases constituyen el corazón del soporte a escenarios desconectados de ADO.NET. El DataSet es una representación en memoria de una base de datos relacional, que permite almacenar un conjunto de datos obtenidos mediante un DataAdapter. El DataAdapter actúa como intermediario entre la base de datos y el DataSet local desconectado. Una vez que el DataSet se encuentra lleno con los datos que se necesitan para trabajar, la conexión con la base de datos puede cerrarse sin problemas y los datos pueden ser modificados localmente. Por último, el DataAdapter provee un mecanismo para sincronizar los cambios locales contra el servidor de base de datos. Nótese que la clase System.Data.DataSet no tiene el prefijo Xxx, ya que es independiente del proveedor de acceso a datos utilizado.

La capa conectada

La capa conectada de ADO.NET contiene objetos especializados en la conexión con los orígenes de datos. Así, como ya se dijo, la clase genérica Connection se utiliza para establecer conexiones a los orígenes de datos. La clase Command se encarga de enviar comandos de toda índole al origen de datos. Por fin la clase DataReader está especializada en leer los resultados de los comandos.

La clase DataAdapter hace uso de las tres anteriores para actuar de puente entre la capa conectada y la desconectada como veremos después.

Estas clases son abstractas, es decir, no tienen una implementación real de la que se pueda hacer uso directamente. Es en este punto en donde entran en juego los proveedores de datos. Cada origen de datos tiene un modo especial de comunicarse con los programas que los utilizan, además de otras particularidades que se deben contemplar. Un proveedor de datos de ADO.NET es una implementación concreta de las clases conectadas abstractas que

20

hemos visto, que hereda de éstas y que tiene en cuenta ya todas las particularidades del origen de datos en cuestión.

21

Así, por ejemplo, las clases específicas para acceder a SQL Server se llaman SqlConnection, SqlCommand, SqlDataReader y SqlDataAdapter y se encuentran bajo el espacio de nombres System.Data.SqlClient. Es decir, al contrario que en ADO clásico no hay una única clase Connection o Command que se use en cada caso, si no que existen clases especializadas para conectarse y recuperar información de cada tipo de origen de datos.

Nota:El hecho de utilizar clases concretas para acceso a las fuentes de datos no significa que no sea posible escribir código independiente del origen de datos. Todo lo contrario. La plataforma .NET ofrece facilidades de escritura de código genérico basadas en el uso de herencia e implementación de interfaces. De hecho la versión 2.0 de .NET ofrece grandes novedades específicamente en este ámbito.

Existen proveedores nativos, que son los que se comunican directamente con el origen de datos (por ejemplo el de SQL Server o el de Oracle), y proveedores "puente", que se utilizan para acceder a través de ODBC u OLEDB cuando no existe un proveedor nativo para un determinado origen de datos.

Nota:Estos proveedores puente, si bien muy útiles en determinadas circunstancias, ofrecen un rendimiento menor debido a la capa intermedia que están utilizando (ODBC u OLEDB). Un programador novel puede sentir la tentación de utilizar siempre el proveedor puente para OLEDB y así escribir código compatible con diversos gestores de datos de forma muy sencilla. Se trata de un error y siempre que sea posible es mejor utilizar un proveedor nativo.

La plataforma .NET proporciona "de serie" los siguientes proveedores de acceso a datos.

Proveedor Espacio de nombres Descripción

ODBC .NET Data Provider

System.Data.Odbc Permite conectar nuestras aplicaciones a fuentes de datos a través de ODBC.

OLE DB .NET Data Provider

System.Data.OleDb Realiza la conexión utilizando un proveedor OLEDB, al igual que el ADO clásico.

Oracle Client .NET Data Provider

System.Data.OracleClient

Proveedor de datos para acceder a Oracle.

SQL Server .NET Data Provider

System.Data.SqlClient Permite la conexión optimizada a SQL Server 7.0 o posterior, incluyenbdo la última versión SQL Server 2005.

22

Proveedores nativos

Los proveedores de acceso a datos que distribuye Microsoft en ADO.NET y algunos desarrollados por otras empresas o terceros, contienen los mismos objetos, aunque los nombres de éstos, sus propiedades y métodos, pueden ser diferentes.

Existen, por supuesto, proveedores para tipos de orígenes de datos de cualquier gestor de datos existente en el mercado. Éstos los desarrolla normalmente la empresa responsable del producto. Si bien éstos optimizan el acceso a estos orígenes de datos nosotros siempre podremos realizarlo mediante ODBC u OLEDB si tenemos necesidad.

Con la capa conectada de ADO.NET realizamos la conexión y comunicación con los orígenes de datos. Cada proveedor de datos implementa su propia versión de las clases Connection, Command, DataReader y DataAdapter (entre otras).

Las clases derivadas de Connection se utilizan para realizar la conexión y enviar y recibir información.

Las clases derivadas de Command permiten ejecutar sentencias SQL y procedimientos almacenados en el gestor de datos.

Las clases derivadas de DataReader se emplean para obtener los posibles resultados de un comando utilizando para ello el conducto de comunicación establecido por Connection.

Ventajas y también sus desventajas capa conectada.

Algunas Ventajas:

• Al haber una única conexión a la base de datos por usuario, o incluso a veces por aplicación, establecida permanentemente, puede llegar a resultar más sencillo administrar la seguridad y el acceso al servidor de datos. Lo mismo ocurre con el control de concurrencia: en un escenario donde múltiples usuarios se estuvieran conectando y desconectando permanentemente para realizar distintas acciones, este control sería más difícil de llevar.

• Siempre la aplicación tiene acceso a los datos actualizados

23

Proveedores de terceros

En resumen

Algunas Desventajas:

• Se requiere una conexión abierta todo el tiempo con el servidor de base de datos, lo cual consume recursos innecesariamente si no se la está utilizando.• La escalabilidad del acceso a los datos se ve limitada por la cantidad de conexiones establecidas simultáneamente contra el servidor de base de datos

La capa desconectada

Una vez que ya se han recuperado los datos desde un origen de datos la conexión a éste ya no es necesaria. Sin embargo sigue siendo necesario trabajar con los datos obtenidos de una manera flexible. Es aquí cuando la capa de datos desconectada entra en juego. Además, en muchas ocasiones es necesario tratar con datos que no han sido obtenidos desde un origen de datos relacional con el que se requiera una conexión. A veces únicamente necesitamos un almacén de datos temporal pero que ofrezca características avanzadas de gestión y acceso a la información.

Por otra parte las conexiones con las bases de datos son uno de los recursos más escasos con los que contamos al desarrollar. Su mala utilización es la causa más frecuente de cuellos de botella en las aplicaciones y de que éstas no escalen como es debido. Esta afirmación es especialmente importante en las aplicaciones Web en las que se pueden recibir muchas solicitudes simultáneas de cualquier parte del mundo.

Finalmente otro motivo por el que es importante el uso de los datos desconectado de su origen es la transferencia de información entre capas de una aplicación. Éstas pueden encontrarse distribuidas por diferentes equipos, e incluso en diferentes lugares del mundo gracias a Internet. Por ello es necesario disponer de algún modo genérico y eficiente de poder transportar los datos entre diferentes lugares, utilizarlos en cualquiera de ellos y posteriormente tener la capacidad de conciliar los cambios realizados sobre ellos con el origen de datos del que proceden. Todo esto y mucho más es lo que nos otorga el uso de los objetos DataSet, núcleo central de la capa desconectada de ADO.NET.

Nota:Otra interesante características de los DataSet es que permiten gestionar simultáneamente diversas tablas (relaciones) de datos, cada una de un origen diferente si es necesario, teniendo en cuenta las restricciones y las relaciones existentes entre ellas.

24

Conexiones recursos escasos

Los DataSet, como cualquier otra clase no sellada de .NET, se pueden extender mediante herencia. Ello facilita una técnica avanzada que consiste en crear tipos nuevos de DataSet especializados en la gestión de una información concreta (por ejemplo un conjunto de tablas relacionadas). Estas nuevas tipos clases se denominan genéricamente DataSet Tipados, y permiten el acceso mucho más cómodo a los datos que representan, verificando reglas de negocio, y validaciones de tipos de datos más estrictas.

Los objetos DataSet no dependen de proveedor de datos alguno y su funcionamiento es independiente de cómo hayan sido obtenidos los datos que contienen. Este es el concepto más importante que debemos recordar.

El proceso general de trabajo de ADO.NET para acceder a un gestor de datos (SQL Server, por ejemplo) es casi siempre el mismo: se abre una conexión (clase Connection), se lanza una consulta SQL o procedimiento almacenado mediante un objeto de la clase Command, y se almacenan en memoria los resultados dentro de un objeto DataSet, cerrando la conexión.

Nota:Aunque este es el comportamiento habitual de una aplicación de datos existen casos en los que no es recomendable almacenar en memoria (en un DataSet) todos los resultados de una consulta, bien por ser muchos registros o por contener datos muy grandes. En este tipo de casos se puede usar u objeto DataReader directamente para leer la información, tratarla y no almacenarla en lugar alguno. De todos modos lo más frecuente es realizar el proceso descrito.

Unión entre capa conectada y desconectada

La clase DataAdapter se ha incluido anteriormente en la capa conectada por que está implementada por cada proveedor de un modo diferente. En realidad es una clase que pone sus pies en ambos mundos (conectado y sin conexión) y sirve de nexo entre ellos.

Un DataAdapter sabe omo manejar correctamente los objetos proporcionados por su proveedor específico (fundamentalmente los vistos: Connection, Command y DataReader) y proporciona métodos para trasegar información desde el servidor a DataSets desconectados y viceversa haciendo uso de dichos objetos específicos del proveedor.

Así, por ejemplo, el método Fill de un DataSet se utiliza para introducir los resultados de una consula dentro de un DataSet para luego trabajar con ellos sin preocuparnos de su origen. Del mismo

26

Data Set

modo su método Update se utiliza para conciliar automáticamente con el origen de datos los datos modificados en un DataSet mientras no había conexión.

Otras clases dependientes de DataSet

Como hemos dicho antes un DataSet podría asimilarse a un pequeño gestor de datos en memoria. Como tal un DataSet permite mantener diversas tablas así como las relaciones entre ellas, incluso forzando que se cumplan restricciones de creación y actualización, como en una base de datos "real". Para ello se apoya en el uso de otras clases especializadas que son las siguientes:

DataTable: representa una tabla o relación de datos. Se puede asimilar a una tabla de un gestor de datos. Los datos obtenidos de una consulta de tipo SELECT de SQL se almacenan en un objeto de esta clase.

DataColumn: ofrece información sobre cada uno de los campos de los registros almacenados en un DataTable, como su nombre o su tipo.

DataRow: representa un registro de la tabla virtual definida por el DataTable. Contiene tantos elementos como campos tiene la tabla, cada uno del tipo definido por el objeto DataColumn correspondiente.

Constraint: las clases Constraint se emplean para definir resticciones en los tipos de datos contenidos en un DataTable. Por ejemplo se puede usar un objeto de esta clase para indicar que un determinado campo debe ser único o que se trata de una clave externa que debe ser tenida en cuenta en actualizaciones o borrados en cascada.

DataRelations: define la relación existente entre dos objetos DataTable. Normalmente se suelen utilizar un identificador común a ambas tablas aunque pueden ser combinaciones de más de uno de ellos. De este modo se sabe cómo obtener información de una tabla a partir de información en otra. Por ejemplo el identificador de una factura (su número, por ejemplo) puede servir para relacionar su registro con los registros de detalle de factura que están contenidos en otra tabla.

DataView: representa una vista concreta de un DataTable. Normalmente se trata de ordenaciones o filtros sobre los datos originales. Todas las tablas disponen de una vista por dfecto (propiedad DefaultView) que ofrece los datos tal y como se han introducido en ésta y es la vista que se usa habitualmente.

27

Este tipo de funcionalidad es particularmente útil para escenarios de usuarios móviles, que salen de su oficina con una laptop, un SmartPhone o una PocketPC y desean poder continuar trabajando por más que no tengan conectividad física con el servidor de base de datos ubicado en la red interna de la empresa.

Ventajas y también sus desventajas capa Desconectada.

Algunas ventajas que provee un escenario de acceso a datos desconectado son:

• La posibilidad de trabajar sobre los datos independientemente del resto de los usuarios de la aplicación

• Mayor escalabilidad en el acceso a datos y utlización más óptima de recursos del servidor, ya que se mantiene en un mínimo indispensable la cantidad y duración de conexiones abiertas.

• Mayor performance, al trabajar con una copia local de los datos.

Algunas Desventajas:

• Puede ocurrir que en un momento dado un usuario no esté accediendo a los datos más actualizados del repositorio central

• Al momento de sincronizar los cambios efectuados localmente contra el repositorio central pueden surgir conflictos, los cuales deben ser resueltos manualmente.

28

DataSet tipados

La clase DataSet, como cualquier otra clase no sellada de .NET, puede ser extendida mediante herencia para añadirle nuevas funcionalidades y aprovechar las ya existentes. Si creamos una nueva clase que herede de DataSet y ésta la especializamos en el tratamiento de un conjunto de datos determinado que conocemos de antemano nos encontramos un DataSet especializado.

Por ejemplo, podemos crear un DataSet especial que tengan en cuenta las particularidades de los datos que maneja para validarlos antes de permitir su inserción, que verifique las relaciones con otros datos o que los transforme o controle el acceso a los mismos. Nosotros sólo tendríamos que ocuparnos de estas tareas dejando a la clase DataSet de la que hemos heredado todos los puntos complejos que tienen que ver con la gestión de datos pura y dura.

Esta es, en esencia, la idea que subyace bajo los DataSet tipados de Visual Studio 2005. Se trata de clases especializadas derivadas de DataSet que ofrecen una forma más rápida y sencilla de acceder a los datos que albergan. Además Visual Studio nos permite crear este tipo de DataSet de forma visual y usando asistentes. En el vídeo se ilustra la manera de conseguirlo.

Los DataSet tipados parten del conocimiento preciso de la estructura de una base de datos para definir su funcionalidad. Esta es su principal diferencia con los DataSet normales puesto que éstos son genéricos y no saben nada acerca de los datos que albergan. Los tipados sólo sirven para albergar una información muy concreta. Ganan en especialización y pierden en versatilidad.

Para agregar un DataSet tipado a nuestro proyecto sólo hay que presionar con el botón secundario sobre la carpeta App_Code y en el diálogo que aparece elegir el icono de DataSet. La extensión del archivo generado es '.xsd' porque lo que en realidad albergan es un esquema XML que define la estructura de los datos en los que se van a especializar.

Una vez agregado el DataSet aparece una superficie de diseño y un asistente como el de la figura 9.

29

Conocer la Base de datos

Figura 9.- Primer paso del asistente de configuración de un TableAdapter.

Este asistente nos permite configurar un objeto TableAdapter que se encargará de trasegar datos entre el DataSet tipado que estamos creando y la base de datos. Un TableAdapter es una clase que encapsula a un DataAdapter especializado en los datos que vamos a procesar con la tabla del dataSet tipado que estamos definiendo. De hecho sus métodos son, por defecto, los mismos que los de un DataAdapter normal (Fill, Update...).

Con él dispondremos de métodos para recuperar información, crear nuevos registros, actualizarlos y eliminarlos, sólo que los correspondientes comandos estarán creados de manera automática o asistiéndonos en ello. Así, por defecto, se definen un par de métodos para obtener los datos subyacentes rellenando un DataSet que se le pase (método Fill) o devolviendo directamente un DataTable (método GetData). Además el método Update sirve para conciliar automáticamente los cambios del un DataSet tipado con la base de datos original.

No vamos a analizar desde el texto la definición de estos objetos adaptadores pero puede conocerlo viendo el vídeo de esta lección.

Truco: Podemos ver el código que se genera de manera automática para crear el DataAdapter si hacemos doble-clic sobre él desde el examinador de objetos de Visual Studio (CTRL+ALT+J). Esto hará que

30

Cuatro funciones básicas

se abra el archivo de código auto-generado por ASP.NET desde la ubicación real de ejecución (normalmente una ruta del estilo C:\Windows\Microsoft.NET\....). Es muy interesante echarle un vistazo a este código para aprender el funcionamiento interno de los DataSet tipados.

Partes de un DataSet tipiado

Al igual que un DataSet normal, uno tipado consta de un conjunto de tablas y relaciones entre ellas. En este caso sin embargo podemos acceder a las tablas y a sus campos utilizando directamente sus nombres en lugar de recorrer la colección de tablas, lo cual lo hace más fácil de usar.

Cada una de las tablas del DataSet lleva asociado como mínimo un TableAdapter. Entre los dos objetos (el DataTable y el o los TableAdapter relacionados) se reparten el trabajo. El DataTable tipado mantiene en memoria la información y el TableAdapter actúa de puente con la tabla real en la base de datos.

Nota:Como sabemos las tablas de un DataSet no tienen porqué coincidir con tablas reales de una base de datos ya que pueden ser resultados obtenidos de una consulta compleja que involucre a varias tablas. En estos casos es más complicada la actualziación y se suelen usar únicamente para recuperar datos. la alternativa habitual es tratar de replicar la estructura física de la base de datos en la estructura en memoria del DataSet de modo que se tiene acceso estructurado a la misma información y gracias a las relaciones y restricciones se conserva la consistencia de los datos tambien estando desconectados.

El DataSet tipado dispone de propiedades que coinciden con los nombres de los objetos que contienen. Así, por ejemplo, si tenemos una tabla "Clientes" con un campo "Nombre" podemos acceder a él directamente con este código:

ds.Clientes(0).Nombre

que nos daría el nombre del primer cliente de la tabla de clientes en el DataSet 'ds'. esta propiedad nombre además ya sería un campo de tipo String que es el tipo adecuado para la información albergada, por lo que se simplifica mucho su uso.

En un DataSet normal para obtener lo mismo tendríamos que haber escrito:

ds..Tables(0).Rows(0)("Nombre").ToString()

que obviamente es mucho menos legible.

31

Código

La cosa no termina aquí ya que además se definen clases específicas para representar los registros de las tablas. Por ejemplo si la tabla se llama 'Clientes' existirá una clase ClientesRow que dispone de propiedades con el mismo nombre y tipo que los campos correspondientes en la tabla de la base de datos y que hemos usado en la línea de ejemplo. Así, para añadir un cliente podríamos escribir:

Dim cliente As New Cliente

cliente.Nombre = "Pepe"

....

ds.Clientes.AddClientesRow(cliente)

Nótese que el método Add del DataTable se ha sustituido por uno con nombre especializado que nos ayuda a saber mejor por donde pisamos, pero su función es idéntica.

Para rellenar una tabla de un DataSet tipado se usa su correspondiente TableAdapter así:

Dim clientes As New ClientesDSDim ta As New ClientesTableAdapters.ClientesTableAdapter()ta.Fill(clientes.Clientes)

clientes.Clientes(0).Nombre = "Pepe"

....

o también usando el método GetData para obtener la tabla directamente si sólo nos interesa esa parte concreta del DataSet (que puede constar de varias tablas):

Dim clientes As Clientes.ClientesDataTableDim ta As New ClientesTableAdapters.ClientesTableAdapter()clientes = ta.GetData()

clientes(0).Nombre = "Pepe"

....

Para un mismo DataTable tipado se pueden definir diversos TableAdapter especializados aparte del básico que permite llenar todos los datos: para filtrar podr diversos parámetros normalmente.

El uso de DataSet tipados es muy recomendable puesto que simplifica mucho el trabajo puesto que podemos realizar casi todo el trabajo utilizando asistentes y accediendo a la información de manera muy cómodo. Además es un modo muy sencillo de separar la funcionalidad de la base de datos del resto del código. Así, si se hace necesario en el futuro, se puede exponer esta parte de manera independiente

32

mediante un, por ejemplo, un servicio Web que utilice el DataSet tipado y sus TableAdapters para acceder a los datos desde una ubicación remota.

CREACION DE SITIO WEB

Visual Web Developer 2005 es aprender Visual Studio 2005, quien no lo tenga podrá utilizar Visual Web Developer 2005 Express Edition totalmente gratuito, muy potente, practico, compacto.

Visual Web Developer 2005 es una aplicación, una herramienta para construir Sitios Web dinámicos y enlazados a Bases de Datos, usando tecnologías como XHTML, XML, CSS, ASP.NET, así como .NET Framework 2.0, SQL Server 2005, y lenguajes de programación como C# y VISUAL BASIC.

Esta Aplicación contiene ya un servidor de prueba por lo que no será necesario instalar el Internet Information Server.

Entender a profundidad Visual Web Developer 2005 Express Edition y también va a ser el primer acercamiento al lenguaje ASP.NET.

33

Cuadro 1- Página principal de VWD 2005.

Crear la estructura de un sitio web.

Da clic en el comando File situado en la barra de herramientas y selecciona la opción New Web Site…

Cuadro 2- New Web Site.

Notaras que se abrirá en modo código HTML; en la ventana de Solution Explorer se crearon dos

archivos, uno es una pagina vacía llamada Default.aspx que es la

34

pagina de inicio de nuestro sitio web; y un directorio llamado App_Data que es donde se almacenaran las bases de datos en caso de que las utilicemos.

Cuadro 2.1

35

Definir y usar directorios.

Para crear un nuevo

directorio solo da clic derecho sobre el lugar donde tenemos el enlace del sitio web en Solution Explorer – New Folder. Para agregar imágenes o Paginas Web existentes al nuevo directorio, solo da clic derecho sobre de este y pulsa la opción Add New Item o Add Existing Item.

Crear y editar paginas web.

Para empezar a escribir en nuestra página web solo tienes que cambiar a vista diseño que se encuentra en la parte inferior izquierda de la pantalla.

Para darle formato al texto da clic en el comando View de la barra de

herramientas, selecciona la opción Toolbars – Formating.

36

INSERTAR IMÁGENES.

Previamente tienes que haber creado un directorio para guardar tus imágenes (ver cuadro 3). Para insertar una imagen en tu página web solo tienes que arrastrarla al sitio donde quieras que esta se posicione.

Puedes darle el formato que desees a la imagen por medio del cuadro de propiedades, o si prefieres por el código fuente, o bien como a continuación se muestra en el siguiente cuadro:

37

Cuadro 4.1 – Barra de Formato de Texto.

Se mostrara el siguiente cuadro:

39

40

Cuadro 5.2 – Style Builder.

VWD 2005 posee una tecnología llamada IntelliSence esto nos sirve

para cuando estamos trabajando en modo código ya que es una lista

con las distintas etiquetas que podemos utilizar, sea en lenguaje que

sea.

Para poner una imagen detrás del texto tendrás que aplicarle un estilo a la imagen como se muestra en la siguiente pantalla, selecciona la pestaña Posición del Generador de Estilos, y en el rubro índice z escribe -1.

41

Cuadro 5.4 – IntelliSence.

Cuadro 5.5 – Posición.

Observa el resultado de esta operación:

42

Si prefieres que se vea en equilibrio con el texto, aplica un estilo a la imagen, selecciona la pestaña Diseño y en el rubro Permitir Flujo de Texto elige la opción que desees.

43

Cuadro 5.6 – Imagen de fondo.

Esta pantalla muestra un ejemplo de las distintas formas en las que puedes colocar tus imágenes.

44

Cuadro 5.7 – Generador de Estilos.

Para agregarle lineas horizontales mediante el Cuadro de herramientas de VWD 2005, selecciona la etiqueta HTML y elige la opcion Horizontal Rule y arrastrala al sitio que prefieras.

45

Cuadro 5.8 –Imágenes.

Cuadro 5.9 – Horizontal Rule.

Compatibilidad con los navegadores.

Antes de hacer una aplicación pública tenemos que probar y/o comprobar como funciona la aplicación con los distintos navegadores, para esto VWD 2005 Express Edition nos presenta la siguiente opción: en la barra de herramientas selcciona el comando Tools – Options…

Aparecera la siguiente pantalla:

Esta opción nos presenta la forma de cómo se vera nuestra pagina web ya en el navegador. Antes de poder verla tenemos que guardar cambios que se hallan hecho; de lo contrario marcara la siguiente pantalla:

46

Otra manera de probar el navegador es dando clic derecho sobre la pagina que queremos comprobar y seleccionamos la opcion View in Browser…

Si no encuentras el navegador en el que deseas comprobar tu proyecto puedes busacarlo mediante File de la barra de herramientas, seleccionanas la opcion Browse With…

Donde si lo prefieres podras configurarlo como navergador predeterminadio, asi cada vez que pruebes tus paginas en VWD 2005 se abriran automaticamente con tal navegador.

47

Cuadro 6.1 – Guardar.

Cuadro 6.2 – View in Browser.

Crear un apartado exclusivo para miembros.

La siguiente practica consiste en crear una regla, la cual rija que los usuarios que no sean miembros no podrán ver el contenido del directorio, de lo contario tendrá que crear una cuenta de usuario.

1.- crear un nuevo directorio donde incluiremos el contenido que queremos que solo vean nuestros usuarios registrados (Ver cuadro 3).

48

Nota: VWD 2005 posee la herramienta de administracion del sitio web “WAT”. Esta herramienta permite administrar el accseso dentro de nuestras páginas del sitio web. Para usarla da clic en el comando Website de la barra de herramientas y elige la opcion ASP.NET Configuration…

Para poder crear la base de datos para que administre al sitio web debemos ejecutar el archivo siguiente.

C:\Windows\Microsoft.NET\Framework\v2.0.50727

Aspnet_regsql.exe

49

Cuadro 7.1 – WAT.

Se abrirá la siguiente pantalla:

Tenemos que asegurarnos que exista conexión con SQL SERVER 2005 para configurar nuestro sitio de miembros; para esto dar clic en la pestaña Provider y seleccionar un proveedor simple para el manejo de todo el sitio.

Si no se ha configurado el web.config que es un archivo que se encuentra en C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG se debe configurar para que todo funcione adecuadamente.

La base de datos donde se almacenaran las restricciones cuentas y accesos, se encuentra almacenada en sql server 2005, para poder crear esa base de datros ejecutar este archivo Aspnet_regsql.exe que se encuentra en C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG

50

Mostrara la siguiente pantalla:

Nota: Asegúrate que esté marcada la opción AspNetSqlProvider y pulsa sobre test para llevar a cabo una comprobación de que el sistema funciona.

Después de unos segundos donde verificara tal conexión aparecerá el siguiente mensaje si la conexión a la base de datos es correcta:

51

Cuadro 7.2 – ASP.NET

Cuadro 7.3 – Provider Management.

Pulsamos ok para volver a la página de administración y ahora damos

clic sobre la pestaña Security para crear la autenticación.

Posteriormente indicaremos la forma en que accederán nuestros usuarios, si de red o localmente, elegirimos desde internet.

52

Cuadro 7.4 – Security.

53

Cuadro 7.5 – Acceso.

Configurar un rol.

Los miembros del grupo ya no seran anónimos porque ya van a estar registrados con una cuenta, lo que hara que tomen el papel de rol de

miembros del sisti

Si los papeles o roles no estan abilitados pulsa sobre Enable roles para habilitarlos, despues da clic a la nueva opcion que nos brinda para crear el rol de miembros del grupo.

54

Cuadro 8 – Roles.

Le das un nombre al Rol, nosotros le pondremos miembros, da clic en Add Role, veremos como nos agrega el rol, después pulsamos el botón back.

Crear una regla.

Nuestra primera regla va a distinguir a los miembros del sitio de los usuarios anónimos que son los que van a acceder a las partes públicas del sitio.

55

Cuadro 8.1 – New Rol.

Mostrará la siguiente pantalla:

56

Cuadro 9 – Access Rules.

Cuadro 9.1 – Add New Access Rule.

Esta regla es para que a los usuarios a nonimos se les deniegue el permiso de entrar y ver el directotio de miembros que creamos.

Sólo se pueden modificar las reglas de los directorios que nosotros creamos no los que VWD 2005 nos proporciona por defecto como app_data y default, ya que a estos el propio VWD los ha asignado automaticamente.

Despues pulsar sobre ok, con esto ya tenemos definida una regla de acceso, para modificarla da clic en la pestaña Security de nuestro administrador en la opcion Manage access rules.

57

Abrira la siguiente pantalla:

58

Cuadro 9.2 – Manage Access rules.

59

Cuadro 9.3

Crear cuentas de usuario.

Da clic en la pestaña Security del Web Site Administration Tool, seleccionamos la opcion Create user del grupo Users.

Nos mostrará la siguiente pantalla:

60

Primero se debe de escribir la respuesta de seguridad y despues la

contraseña. La contraseña debe de tener como mínimo siete

caracteres, y uno de ellos debe ser un caracter que no sea alfabético

ni numérico; esto es para crear contraseñas que tengan más

seguridad.

61

Cuadro 10.1 – Create Users

Con esto tenemos el primer usuario de nuestro archivo creado y si lo hicimos correctamente mostrara el siguiente mensaje en pantalla:

62

Cuadro 10.2 – New User

Si deseas manejar los usuarios sigue los pasos que se muestran en las siguientes pantallas:

63

Cuadro 10.3 – Created user.


64

Cuadro 10.4

Observa como en el Solution Explorer aparece un nuevo archivo llamado web.config. El archivo web config contiene el código que permite que los usuarios retringidos no entren al contenido de la

carpeta.

Nota: A estos archivos no le debes de cambiar el nombre de lo contrario no funcionaran.

65

Cuadro 10.5

Cuadro 10.6 – web.config

Crear páginas maestras.

Primeramente tenemos que crear un directoio donde guardaremos nuestra pagina maestra (Ver cuadro 3). Para crear la pagina maestra pulsamos sobre el directorio que acabamos de crear, clic derecho añadir nuevo item y seleccionamos Master Page…

66

Ya creada la pagina maestra debemos empezar por definir el croquis del diseño, para ello pulsamos en el comando Layout y seleccionamos insertar table y escogemos la opción templetes.

Puedes elegir el modelo que desees.

67

Cuadro 11 – Master Page.


Lo que nos muestra ahora en el modo diseño es el place holder, en este apartado es para editar posteriormente nuestra Master Page. Para moverlo solo tienes que cortarlo y pegarlo en el lugar que prefieras.

Para aplicarle un estilo a cualquiera de los paneles, situate en el que desees modificar y da clic derecho y selecciona la opcion style…

Se abrira la siguiente pantalla:

68

Cuadro 11.1 – Insertar Table.

Verás todas las opciones que Style Builder te ofrece para dar un diseño profesional a tu Master Page como se muestra en la pantalla siguiente.

69

Cuadro 11.3 – Style Builder.

70

Cuadro 11.4 – Ejemplo.

Crear formularios.

Para agregar un nuevo formulario selecciona el directorio donde esta se almacena tu Master Page, da clic derecho sobre de esta y elige la opcion Add New Item…

Mostrara la siguiente pantalla, observa que ahora tienes que seleccionar la opcion Select Master Page para la creacion de nuestro formulario.

71

72

Cuadro 12 – Formulario.

Nos

mostrara la pantalla siguiente donde indicaremos cual es la Master Page que vamos a usar.

73

Editar paginas maestras.

Para agregar una aimagen a cualquier panel esta debe estar

previamente guradada en nuestro directorio dentro de un rol. Existen varias formas de agregar las imágenes una de ellas es seleccionar la imagen que vamos a agregar y arrastrarla al sitio que queramos.

Puedes insertar cualquiera de las herramientas del ToolBox, como por ejemplo un Login como se muestra en la siguiente pantalla:

74

Cuadro 13

75

Cuadro 13.1 - Ejemplo Login.

Puedes agregar una tabla si lo necesitas, esto es posible mediante el Cuadro de Herramientas, la pestaña Estándar y selecionas el objeto Table…

76

A esta tabla tambien le puedes aplicar un estilo pulsando en ella con el botón derecho y selecciona la opcion Estilo:

77

Y nos mostrara el Generador de Estilos visto ya anteriormente, donde podras modificar las propiedades de esta.

Si selecionas una celda y presionas el boton derecho del mouse observaras que VWD 2005 no ofrece las mismas opciones para la configuracion de tablas al igual que las demas aplicaciones de Microsoft que haz utilizado.

Crear hiperenlaces.

Para crear un enlace selecciona una palabra o una imagen donde quieras que este el enlace y da clic en Convertir en hipervínculo.

Mostrará la siguiente pantalla donde indicaremos el tipo de

hipervinculo y la ruta hacia donde queremos que este nos lleve.

78

Cuadro 13.3 – Tabla.

80

Cuadro 14.1

Para crear un enlace a una pagina local como por ejemplo la pagina Default, solamente arrastrala hacia el lugar que desees, puedes cambiarle el nombre si asi lo decides, en este ejemplo le cambiamos el nombre a: Ir a Inicio aunque cabe mencionar que sólo se cambiará el texto ya que el enlace será el mismo.

81

Puedes checar tu pagina en el navegador, aquí te presentamos otra forma de acceder a esto:

82

Cuadro 14.2

Aparecerá el siguiente cuadro de dialogo:

83

Cuadro 14.3

AÑADIR MARCADORES. Los marcadores nos llevan a una apagina web o bien a un lugar en concreto de nuestro contenido.

Para insertar un marcador a un lugar especifico en la misma pagina, sólo tienes que seleccionar un texto o una imagen y dar clic en el comando Formato de la barra de herramientas, seleciona la opción Insertar Marcador…

84

Cuadro 14.4

Para ir a ese marcador tendras primero que selccionarlo y dar clic en el boton Convertir en hipervinculo, como se muestra en la siguiente imagen.

86

Podemos también crear marcadores a otras páginas, por ejemplo si quisiéramos crear un marcador que nos lleve a la página default.aspx el marcador lo tendríamos que crear exactamente igual pero en la página default.

Ver cuadro (14.5), puedes llamarle marcador 2. Y ahora en la página donde queremos poner el enlace (ejemplo.aspx) escribimos: Ir al otro marcador.

Ahora crea el hipervínculo (ver cuadro 14.6), mostrara la siguiente pantalla donde escribiremos la siguiente ruta "Default.aspx#marcador2" = "nombre de la pagina web donde creamos el marcador#nombre del marcador":

87

Cuadro 14.6

Antepones el nombre de la página hacia donde está dicho marcador, esto es cuando la pagina esta fuera; de lo contrario solo usaremos el nombre del marcador “marcador 2” como el ejemplo anterior si el marcador se encuentra en la misma página. Posteriormente escribimos el símbolo # y seguido tecleamos el nombre del marcador.

Si ahora lo probamos en el navegador (ver cuadro 14.3), nos mostrara una pantalla similar es esta:

88

89

Cuadro 14.9

Uso de controles asp.net

Añadir un control de servidor es muy simple, solo tienes que

arrastrar el control hacia nuestra página .aspx, a estos controles

podrás aplicarles el

diseño que

prefieras mediante las propiedades o un estilo pero para que esto

sea posible tendrás que convertir el elemento del control en una

plantilla. Nos mostrara la siguiente pantalla:

90

Observa cómo nos separa cada uno de los elementos que lo

conforman, esto facilita su modificación total en el cuadro de

propiedades del mismo.

91

O bien puedes elegir algún formato automático que VWD 2005 te

presenta:

92

Cuadro 16.2 - Propiedades

VWD 2005 te ofrece un control asistente para crear cuentas de usuario mediante el cuadro de herramientas.

93

Cuadro 16.3 – Formato Automático…

Otro elemento importante para el diseño de tu página web es el control PasswordRecovery que se muestra en la siguiente pantalla.

94

Cuadro 16.4 – Inicio de Sesión.

Las contraseñas se enviaran al usuario vía e-mail por lo cual en la propiedad From tendrás indicar el correo electrónico desde el que enviarán las respuestas de las contraseñas y en la propiedad Subject si lo deseas escribe el tema por defecto que quieras que aparezca en el envío , por ejemplo “Restablecimiento de contraseña”. Para el uso de este control tendrás que definir un servidor de correo, por ejemplo el SERVER SMTP, el cual se especifica mediante la herramienta de configuración ASP.NET que veremos mas adelante. Pulsa el icono que se encuentra en el explorador de soluciones, mostrara la siguiente pantalla:

96

Cuadro 16.5 – PasswordRecovery.

El nombre del servidor es localhost, con el puerto 25, desde localhost, no tendrá ninguna autenticación, damos clic en el botón Guardar, y con esto ya nos lo copia en nuestro archivo web.config

Por lo tanto con el uso de este conjunto de controles de Inicio de sesión nos permite crear un sistema de registro de identificación de usuarios completo y totalmente personalizado.

97

Cuadro 16.6 – PasswordRecovery.

Controles de navegación.

98

Este Control de Navegación nos permite crear un menú desplegable simple de navegación de enlaces. Nos mostrara la siguiente pantalla:

99

Cuadro 17 – Menu.

ToolTip, lo que escribas en este rubro aparecerá cuando el usuario pase el mouse sobre el elemento creado.

100

Para agregar un submenú da clic al botón remarcado de la siguiente pantalla:

TreeView es otro control de navegación que nos permite apilar grandes grupos de archivos como se muestra en la siguiente pantalla.

Comprueba que funcione correctamente en tu navegador (Ver cuadro 14.3).

101

Cuadro 17.3 – TreeView.

Cuadro 17.2 – Submenú.

Crear mapa del sitio.

El SiteMap es un archivo de navegación del sitio donde se almacenan los controles vistos anteriormente y que se enlazan a ese SiteMap.

Para crear un mapa del sitio pulsamos en nuestro directorio raíz, botón derecho y agregar un nuevo elemento… Mostrara la siguiente pantalla:

102

Cuadro 18

Observa que ya se ha agregado al Explorador de soluciones, no se presenta en modo diseño porque es solo código XML.

Si modificamos el código nos quedaría algo así:

103

Cuadro 18.1

Cuadro 18.2- Código Sitemap.

Para aplicar el mapa del sitio a un control, inserta un menú, da clic en la flecha superior derecha (Tares de Menú), en el rubro Elegir origen de datos selecciona la opción <Nuevo origen de taos…>.

Mostrara la siguiente pantalla, elegir Mapa del Sitio:

104

Ruta de la página web

Texto que aparecerá en el menú.

ToolTip

Cuadro 18.3- Descripción.

105

Cuadro 18.4

Ahora si lo probamos en el navegador observarás y comprenderás mejor su funcionamiento.

106

El mapa del sitio que acabamos de ver nos permite definir varios menús para distintos roles, es decir que aparezca un menú distinto si es un usuario anónimo o si es un usuario de nuestro sitio.

107

Creación de un sistema completo de login.

DESARROLLO:

1. Crear un nuevo sitio Web ASP.NET (Ver cuadro 2).

2. Crear la carpeta que permitirá usar los controles para Login, en donde se colocara el contenido deseado.

3. En la barra de menú elegimos Sitio Web y hacer clic en Configuración de ASP.NET.

108

Cuadro 19 – Creación de una nueva carpeta.

Cuadro 19.1

Opción que nos dará acceso a la Herramienta Administrativa de Sitios Web.

4. Nos situamos en la opción Proveedor para comprobar la conexión SQL.

5. Comprobar la conexión SQL dando doble clic en Prueba.

Indicando si la conexión es correcta o no.

109

Cuadro 19.3

Cuadro 19.4– Realizar una Prueba para comprobar la conexión.

6. Ahora dar clic en la opción Seguridad, en esta opción podemos agregar nuevas Funciones, Reglas y Usuarios.

7. Seleccionamos en Tipo de Autenticación desde la opción Usuario para permitirnos el acceso.

8. Seleccionamos la Opción Desde Internet pulsamos sobre Listo.

110

Cuadro 19.5– Tipo de Autenticación.

9. En la opción Funciones damos clic en crear o habilitar funciones.

10.Creamos una función con el nombre deseado en este caso Miembros, hacer clic en Agregar función.

111

Cuadro 19.6

Cuadro 19.7

Cuadro 19.8

Funciones: Estas son grupos de

usuario que usted puede

predeterminar. Estas funciones

permiten otorgar o denegar acceso a

carpetas específicas del Sitio

Web

11.Una vez creada la función se procede a crear las reglas.

12.La regla se aplicara para la carpeta creada con anterioridad (Miembros).

112

Reglas: Las reglas nos sirven para seleccionar los tipos de Usuarios que deseamos tengan acceso a nuestro Sitio. Por medio de ellas podemos controlar parte de la

Cuadro 19.9

Cuadro 19.20 – Seleccionar quienes accederán al Sitio Web.

Pulsamos sobre Aceptar para que se cree la Regla. Esta regla se aplicara para la carpeta mencionada denegando el

acceso a los Usuarios Anónimos. Con esto provocamos que a esta carpeta solo accedan personas

registradas. En este caso no crearemos Usuarios ya que estos se crearan

mediante nuestro sistema de Login. Cerramos Herramienta Administración de Sitios Web.

13.En nuestro Sitio pulsamos sobre Actualizar para que nos aparezcan las nuevas creaciones.

Mediante los controles se creara el Sistema de Login. No se crearan páginas Maestras. Solo se creara el sistema y lasa paginas necesarias para probara

el funcionamiento del sistema.

14.Dentro del directorio Miembros se creara una nueva página.

113

Cuadro 19.21– Actualizamos nuestro Sitio Web.

Se guarda el archivo creado.

Colocamos el archivo guardado dentro de la carpeta Miembros para que solo puedan acceder aquellos Usuarios que estén registrados.

15.hora procederemos a realizar la creación de Usuarios esto es lo que tendrá que cubrir toda persona que aun no sea Usuario y dese accesar al sistema.

114

Cuadro 19.22

Cuadro 19.23

Esto se realizara en el propio Default.aspx. Pulsar sobre propiedades y hacer clic sobre el siguiente icono

Hacer doble clic en el evento de crear Usuario.

115

Cuadro 19.23

Cuadro 19.24

116

Cuadro 19.25

Mostrándonos la siguiente pantalla, se procede a tipiar un alinea de código en donde indicamos a que Función o Miembro pertenecerá el Usuario.

Con lo anterior todos los Usuarios que se ubiquen en ese controlador pasaran a formar parte del Rol Miembros.

Guardamos y con esto esta creado nuestro sistema para que los posibles Usuarios se registren.

117

Cuadro 19.26

16. Prueba tu aplicación en el navegador.

Otra propiedad importante es la de LoginCreateUsuary, propiedad que tendremos que poner en True para que cuando se cree un nuevo Usuario inmediatamente al dar clic en continuar lo enlace a la Página de Bienvenida.

Ahora hacemos clic en Administrar Usuarios para verificar los Usuarios existentes en el sistema, mostrando la siguiente pantalla con la lista de usuarios teniendo la posibilidad de editarlos

118

Cuadro 19.28 - Edición de un Usuario.

Cuadro 19.27– Mensaje de Bienvenida.

Dando clic en Editar los Usuarios podemos editar a los Usuarios existentes desde el formulario que llenamos al inicio de la creación de la cuenta como se muestra a continuación:

Seleccionar el Usuario deseado para editar. Cambiar las propiedades deseadas para este Usuario.

Para que los Visitantes puedan ver nuestro Sitio con un enlace para poder hacer Login, esto porque nunca se asegura la forma en que llegaran los Usuarios, ya que no todos pueden llegar por la pagina de inicio (Por ejemplo buscadores).

Controlador LoginStatus

119

Cuadro 19.29

120

Cuadro 19.30 – Página maestra del Sitio Web.

Para crear un controlador se arrastra hasta la ubicación

Ahora ya actualizado nuestro Sitio Web nos mostrara la página de Login.aspx desde la Pagina Maestra; cabe mencionar que para poder ver esta página hay que estar antes identificados como Usuarios, esto se puede observar en la siguiente pantalla:

Llenamos los campos con datos correctos de algún Usuario y damos clic en Inicio de Sesión, enlazándonos a la página de Bienvenida.aspx pero desde la página Maestra de nuestro Sitio Web.

Notaremos que ahora el LoginStatus cambia de la opción de Iniciar Sesión a Cerrar Sesión.

Estos controles (LoginStatus) los podemos modificar cambiando el texto o quizás colocando una imagen para que nos aparezca al iniciar sesión, todo esto en Propiedades (Cambiar texto, colocar una imagen, etc.)

121

Cuadro 19.30 - Login desde la Página maestra del Sitio Web.

Cuadro 19.31

LoginStat

Existen otros controles como:

LoginName. LoginView.

Controlador LoginName

Este nos permite mostrar el nombre de usuario que ha iniciado sesión. Únicamente arrastra el controlador al lugar que desees.

LoginName es un control que difícilmente se usa por separado siempre va dentro de otro control. Generalmente se usa dentro del control LoginView.

Cuando nos enlace a la pagina Bienvenida.aspx en donde nosotros creamos nuestro controlador LoginName nos tendrá que aparecer el nombre del Usuario. De la siguiente manera:

122

Nombre del usuario

Pagina Bienvenida.aspx

Cuadro 19.32– Controlador LoginName.

Controlador LoginView

Este controlador puede contener otros controladores dentro de él, es muy útil para saber que paginas tenemos abiertas en algún sitio y cuales están restringidas.

Al igual que los demás controladores para insertar este controlador simplemente lo arrastramos a la página Maestra.

Este controlador tiene 2 vistas una es para Usuarios Anónimos y la otra que es para Usuarios Logueados. Teniendo la posibilidad de cambiar el tipo de vista.

Para los Usuarios que ya estén identificados realizaremos lo siguiente:

123

Cuadro 19.33

Un mensaje de

Nombre del

Indicador de que se esta Logueado.

Cuadro 19.34

Se guarda todo. Se prueba haciendo clic derecho en default.aspx en la opción Ver desde el Explorador.

124

Cuadro 19.35

Como los controladores se agregaron en la Página Maestra los controladores se mostraran en todas las páginas.

Crear perfiles de usuario.

Profile.Nombre.Propiedad

Perfil: Conjunto de nombres de propiedades, cada nombre de propiedad representa una unidad de información a almacenar, los nombres deben ser cortos, sin espacios en blanco y empezar con una letra mayúscula.

Podemos también elegir un tipo de dato para cada campo al igual de poder asignar valores por defecto para las propiedades. Para poder definir los perfiles primero tenemos que asegurarnos que nuestra aplicación los permita, para esto tenemos que editar manualmente el archivo web.config de la raíz de nuestra

aplicación, porque recuerda que pueden haber mas archivos web.config.

125

Para crear el formulario, agregaremos una nueva forma a la que llamaremos CrearPerfil.aspx, donde insertaras una tabla como se muestra a continuación y un control Textbox en cada celda.

126

Para copiar los contenidos de un textbox a una propiedad de perfil:

Profile.Apellidos=TxtApellidos.Text;

127

Ahora vamos a darle funcionalidad al botón, para esto da doble clic sobre de este y escribe el siguiente código:

Puedes probarlo ahora en tu navegador.

Para que el usuario pueda editar su perfil crearemos una página web donde escribiremos el código para realizar este evento. La página web se llamara editarperfil.aspx.

128

Cuadro 21.3

Cuadro 21.4

editarperfil.aspx tendrá el siguiente diseño:

Y en el código tendrá:

129

Cuadro 21.5

130

Cuadro 21.6

Usar controles de validación.

La mayoria de los controles de navegacion poseen ciertas propiedades que son las que se tienen que modificar para que funcionen:

ControlToValidateDisplayErrorMessageText

Lo que tu escribas en la propiedad Text es lo que se mostrará en el recuadro del control de validacion pero sólo si existe un error.

Otro control es el RangeValidator el cual permite un rango máximo y mínimo de valores que es necesario incluir, puede ser útil para un código postal que tenga que tener como mínimo cinco caracteres o los que sean.

131

Nota: El texto que escribas en este rubro No es el que se mostrará donde has insertado el control; si no que es el texto que aparecerá si insertamos un sumario que contiene los distintos errores de validación.

Cuadro 22

El Control Regular de Validación se refiere a un modo simbólico de definir criterios complejos de validación, nos permite poder validar la entrada de un campo de texto respecto a un conjunto de caracteres de términos para el uso de expresiones lógicas, un ejemplo de ello es validar un e-mail, los cuales llevan un nombre antes y después de un carácter especifico que es el @.

“[email protected]”

132

CompareValidator, este control compara si dos cajas de texto tienen el mismo contenido, se usa por ejemplo en las contraseñas, en este ejemplo se validara que los e-mails coincidan.

Recuerda que solo se cambio el texto de las textbox y no sus nombres.

Aunque este no es el único uso del control CompareValidator sino que además puedes comparar una caja de texto con un valor ya predefinido por ti, por ejemplo que el e-mail siempre tenga que ser “[email protected]”, de lo contrario marcaria un error al usuario.

Para llevar a cabo esta operación eliminas el contenido de la propiedad ControlToCompare y ahora introduces lo que quieres comparar en la propiedad ValueToCompare.

134

Cuadro 22.3

Cuadro 22.4

El control ValidatorSumary muestra en pantalla la descripción de los mensajes de error en caso de que sea necesario. Recuerda que el texto que se muestra es el que esta insertado en la propiedad MessageErrror que hayas escrito en los controles de validación utilizados anteriormente, por lo tanto este control no es necesario modificarlo en sus propiedades puesto que solo con arrastrarlo al lugar que prefieras funcionara, aunque puedes modificar su diseño si así lo deseas.

136

137

Cuadro 22.5

Cuadro 22.6

USAR DATOS EN PAGINAS WEB.

Control datalist

Usaremos un control de lista para poder ver los datos de una vista dentro de nuestro sitio web.

Mostrara la siguiente pantalla donde elegiremos nuestro origen de datos:

138

139

Cuadro 29.1

Mostrara el cuadro de dialogo para elegir la conexión, da clic en el botón Nueva Conexión y desplegara la siguiente pantalla:

Prueba la conexión con el botón Test Connection:

Ya elegido el origen de datos aparecerá la siguiente pantalla donde guardaremos la cadena de conexión:

140

Cuadro 29.2

Cuadro 29.3

141

Cuadro 29.4

En esta pantalla elegiremos la vista o la tabla de la que seleccionaremos los campos que podrá ver el usuario.

Pulsa el botón siguiente para obtener una vista previa de lo que será el resultado de los campos que seleccionaste:

142

Cuadro 29.5

143

Cuadro 29.6

Al finalizar el asistente mostrara los siguientes datos en nuestro control de lista:

Observa como aquí no aparecen todos los registros, para poder verlos usa el navegador:

144

Cuadro 29.7

Cuadro 29.7

Como habrás visto el asistente nos ofrece varias formas para mostrar nuestros datos, como lo es la cláusula WHERE…, ORDER BY…, y la opción Return Only Unique Rows.El siguiente ejemplo te mostrara la función que tiene esta última opción:

145

Cuadro 29.8

Lo que se quiere es que se muestre UserName con su respectivo Email sólo una vez por usuario y no que muestre al usuario con su correo tantas veces como este haya realizado una transacción.

La Clausula WHERE… nos muestra todos los datos de una tabla pero definidos por un parámetro.

146

Cuadro 29.9

Este es el resultado que muestra si no activamos dicha opción.

Este es el resultado que muestra cuando activamos dicha opción.

Cuadro 29.10 – Comparativa.

Con estos parámetros estamos indicando que muestre los datos cuando el campo UserName sea igual a jesus.

148

149

Cuadro 29.12

El resultado de esta operación será:

150

En la cláusula ORDER BY… puedes indicar que se muestren los datos bajo un orden establecido por tus criterios.

151

Cuadro 29.13

Trabajar con controles de datos.

Control gridview

El control GridView muestra los datos de una tabla o vista, además puede ser usado para añadir, modificar o borrar datos.

Para poder editar los datos: No puedes enlazar el control a una vista. El control debe estar enlazado a una única tabla, la cual debe

contener un campo de clave primaria.

La forma más sencilla de mostrar de usar este control, es únicamente arrastrando una tabla creada por nosotros al sitio donde queramos y los datos se verán en un GridView por defecto:

152

Puedes probar esto en el navegador:

153

Cuadro 30

Para permitir que los datos de la base de datos que se muestran en el GridView se puedan modificar, eliminar y seleccionar, da clic derecho sobre de este y abrirá el siguiente panel:

154

Cuadro 30.2

Si esto lo probamos en el navegador mostrara algo así:

Si lo que quieres es que se muestren sólo algunos datos de la tabla, entonces ahora si tienes que arrastrar el control GridView al sitio web y realizar los pasos del tema “USAR DATOS EN PAGINAS WEB”, donde se describe como elegir el origen de datos y tanto los campos como los datos que queremos que se muestren al usuario.

155

Cuadro 30.4

Cuadro 30.3

Al igual que los demás controles puedes cambiarle el formato

tanto a la tabla como a la fuente.

Mostrará la siguiente pantalla donde podrás elegir uno de tantos diseños que VWD ofrece:

156

Cuadro 30.5

O bien puedes dar clic en la opción de Editar Columnas y formatear manualmente:

157

Cuadro 30.6 – Ejemplo.

Recuerda que también puedes modificar sus propiedades en su respectivo cuadro de propiedades.

158

Cuadro 30.7

Vemos ahora a crear un filtro para mostrar los datos, en este ejemplo filtraremos por nombre de usuario lo que permitirá ver únicamente las transacciones de ese usuario.

Para empezar insertaremos el siguiente control:

159

De igual manera que en los demás controles tienes que elegir la base de datos a usar mediante la lista de tareas para este control.

160

Cuadro 30.8

Cuadro 30.10

Posteriormente se tiene que habilitar el AutoPostBack de la lista de tareas de dicho control, y después agregar un control GridView; en el cual también tendrás que indicar una base de datos.

Para esto pulsa la opción nuevo origen de datos y no selecciones las bases de datos que te muestra en las opciones, aunque si, tienes que elegir la misma conexión, ya que ésta solamente indica el lugar donde se encuentra la base de datos y no las tablas o campos que esas bases de datos contienen.

161

Cuando elijas los campos que quieres que se muestren en este control, asegúrate que uno de estos campos sea una llave foránea de la tabla que utilizaste para obtener los datos del control DropDownList.

Para que este filtro esté completo se configura la cláusula WHERE…. de la siguiente manera:

162

En vista navegador se mostraría de la siguiente manera:

163

Cuadro 30.12

Control detailsview

Este control es usado para mostrar, editar, añadir y borrar datos de las tablas, la diferencia principal que presenta con respecto al Gridview es que mientras que el Gridview esta diseñado para mostrar múltiples filas y columnas el DetailsList esta diseñado para trabajar con un registro de uno por uno.

Insertamos dicho control en nuestro escritorio y elegimos el origen de datos:

164

Cuadro 30.13

Nota: Para que funcione un DetailsView tienes que elegir todos los campos (*) y posteriormente con las clausulas Where y Order By seleccionar que campos quieres y en que orden.

165

Pulsamos el botón de Avanzadas… para indicar que queremos que los datos se puedan modificar, eliminar e insertar nuevos.

166

Cuadro 30.15

Si lo anterior es correcto ahora observa como en el control muestra ya dichas opciones:

167

Cuadro 30.16

En el navegador se vería algo así:

168

Cuadro 30.17

169

Cuadro 30.18 – Paginación.

Cuadro 30.19 – Edición.

Cuadro 30.20 – Inserción.

Crear formulario maestro - detalles.

Cuando se habla de estos formularios se trata de un sistema que permite usar unos controles como filtros para determinar el contenido que va a aparecer en los controles.

Para empezar en una WebForm insertamos una tabla de 3 * 2, como la siguiente:

170

Para este ejemplo, en el primer control (DropDownList) elegimos un nuevo origen de datos, como ya lo hemos visto anteriormente, seleccionamos el campo UserName, activamos la opción Devolver sólo filas únicas y en la clausula ORDER BY filtramos por

UserName de forma ascendente.

Recuerda habilitar la opción AutoPostBack para que posteriormente este control pueda utilizarse como filtro para el control GridView.

Para el segundo control (GridView) elegimos también un nuevo origen de datos. Seleccionamos los campos que queremos que se

171

Control GridView

Cuadro 31

Cuadro 31.1

muestren y en la clausula WHERE le indicamos que el filtro sea por medio del control DropDownList. Ver cuadro 30.12No te olvides de habilitar la opción de selección de la lista de tareas.

En el tercer control (DetailsView) reiteradamente elegimos un nuevo origen de datos, y recuerda que para este control es necesario marcar el * lo cual indica que muestre todos los campos de la tabla. La cláusula WHERE se configurara de la siguiente manera:

172

173

Cuadro 31.2

Recuerda habilitar las opciones para que se puedan llevar a cabo eliminaciones e inserciones de nuevos datos. Ver cuadro 30.16 Y de marcar las opciones de edición y eliminación que se mostraran en la lista de tareas.

Aplicamos una plantilla a este control para que cuando no tenga datos que mostrar pues no aparezca vacía si no que muestre un mensaje:

174

Elegimos la opción de plantilla para datos vacios:

175

Cuadro 31.3

Y escribimos el texto:

176

Y por último pulsamos en la opción Terminar edición de plantilla de la lista de tareas.

Dale un formato y pruébalo en el navegador.

Antes de que el usuario seleccione una transacción para mostrar, el control DetailsView mostrara la plantilla:

177

Cuadro 31.5

Cuadro 31.7

Cuando el usuario ha seleccionado una transacción, se mostraran los detalles de esta en el control DetailsView:

178

179

Cuadro 31.8

Crear un DataSet tipieado

Primer paso

Antes de que podamos crear nuestra capa de acceso a datos (DAL),

primero tenemos que crear un sitio web y la configuración de nuestra

base de datos. Comience por crear un sistema de archivos basado en

nuevo sitio web ASP.NET. Para lograr esto, vaya al menú Archivo y

seleccione Nuevo sitio web, mostrando el nuevo sitio Web cuadro de

diálogo. Elija la plantilla Sitio Web ASP.NET, configure la ubicación de

la lista desplegable Sistema de archivos, elija una carpeta para

colocar el sitio web y seleccionar el idioma de Visual Basic.

Esto creará una nueva página web con un Default.aspx página

ASP.NET, una App_Data carpeta, y una Web.config archivo.

Con el sitio web creado, el siguiente paso es agregar una referencia a

la base de datos en el Explorador de servidores de Visual Studio.

Mediante la adición de una base de datos para el Explorador de

servidores puede agregar tablas, procedimientos almacenados, vistas,

etc, todo desde Visual Studio. También puede ver los datos de la tabla

o crear sus propias consultas ya sea a mano o gráficamente a través

del Generador de consultas. Además, cuando construimos los

conjuntos de datos con tipo para el DAL tendremos que punto de

180

http://static.asp.net/asp.net/images/dataaccess/01fig01vb.png

Visual Studio para la base de datos de los que los conjuntos de datos

con tipo se debe construir. A pesar de que puede proporcionar esta

información de conexión en ese punto en el tiempo, Visual Studio

rellena automáticamente una lista desplegable de las bases de datos

ya registrados en el Explorador de servidores.

Los pasos para agregar la base de datos Northwind en el Explorador

de servidores depende de si desea usar el servidor SQL Server 2005

Express Edition base de datos en el App_Data carpeta o si tiene un

Microsoft SQL Server 2000 o 2005, la configuración del servidor de

base de datos que desea usar en su lugar.

Conectarse a la base de datos en un servidor de Microsoft SQL Server 2000 o 2005 Server base de datos

Una vez que haya instalado la base de datos, vaya al Explorador de

servidores en Visual Studio, haga clic en el nodo Conexiones de datos

y elija Agregar conexión. Si no ve el Explorador de servidores vaya al

Explorador de Vista / Server, o pulse Ctrl + Alt + S. Con ello se abre el

cuadro de diálogo Agregar conexión, en el que puede especificar el

servidor para conectarse a la información de autenticación y el

nombre de base de datos. Una vez que haya configurado

correctamente la información de conexión de bases de datos y hacer

clic en el botón Aceptar, la base de datos se agrega como un nodo

bajo el nodo Conexiones de datos. Puede expandir el nodo de base de

datos para explorar sus tablas, vistas, procedimientos almacenados, y

así sucesivamente.

181

Creación de un DataSet tipeado y el Dataadapter

Para empezar a crear nuestra DAL, se inicia mediante la adición de un

DataSet a nuestro proyecto. Para lograr esto, haga clic derecho en el

nodo del proyecto en el Explorador de soluciones y seleccione Agregar

nuevo elemento. Seleccione la opción de conjunto de datos de la lista

de plantillas y el nombre de Northwind.xsd .

Para empezar a crear nuestra DAL, se inicia mediante la adición de un DataSet a nuestro proyecto. Para lograr esto, haga clic derecho en el nodo del proyecto en el Explorador de soluciones y seleccione Agregar nuevo elemento. Seleccione la opción de conjunto de datos de la lista de plantillas y el nombre de Northwind.xsd .

182

Figura 4 : optar por añadir un nuevo conjunto al proyecto

Después de hacer clic en Agregar, cuando se le pida para añadir el

conjunto de datos a la App_Code carpeta, seleccione Si. El Diseñador

de DataSet se mostrará, y el Asistente para la configuración de

TableAdapter se inicia, lo que le permite agregar su TableAdapter

primero en el DataSet.

Tenga en cuenta que DataTables inflexible de tipos no incluyen

ninguna información sobre cómo acceder a los datos de su tabla de

base de datos subyacente. Con el fin de recuperar los datos para

rellenar el objeto DataTable, se utiliza una clase TableAdapter, que

funciona como nuestra capa de acceso a datos. Para nuestros

productos DataTable, TableAdapter contendrá los métodos

GetProducts () , GetProductByCategoryID ( IdCategoría ) , y así

sucesivamente que vamos a invocar a partir de la capa de

presentación. El papel de la DataTable es la de servir como objetos

con establecimiento inflexible utiliza para pasar datos entre las capas.

El Asistente para la configuración de TableAdapter comienza le pide

que seleccione qué base de datos para trabajar. La lista desplegable

muestra las bases de datos en el Explorador de servidores. Si no ha

agregado la base de datos Northwind para el Explorador de

servidores, puede hacer clic en el botón Nueva conexión en este

momento para hacerlo.

183


A continuación, tenemos que definir el esquema de la primera

DataTable inflexible de tipos y dar el primer método para nuestro

TableAdapter utilizar al rellenar el DataSet con tipos declarados. Estos

dos pasos se llevan a cabo al mismo tiempo mediante la creación de

una consulta que devuelve las columnas de la tabla que queremos

que se refleja en nuestro DataTable. Al final del asistente le daremos

un nombre de método a esta pregunta. Una vez que se ha logrado,

este método puede ser invocado de nuestra capa de presentación. El

método se ejecutará la consulta definida y rellenar un DataTable con

establecimiento inflexible.

184


Para comenzar a definir la consulta SQL, primero debemos indicar

cómo queremos que el TableAdapter que ejecutar la consulta.

Podemos utilizar una sentencia SQL ad-hoc, crear un nuevo

procedimiento almacenado, o utilizar un procedimiento almacenado

existente. Para estos tutoriales vamos a utilizar ad-hoc sentencias

SQL. Se refieren a Brian Noyes artículo 's, construir una capa de

acceso a datos con el Diseñador de DataSet de Visual Studio 2005

para un ejemplo de uso de procedimientos almacenados.

En este punto se puede escribir en la consulta SQL a mano. Cuando se

crea el primer método en el TableAdapter que por lo general quieren

tener el retorno consulta las columnas que deben ser expresados en la

correspondiente DataTable. Podemos lograr esto mediante la creación

de una consulta que devuelve todas las columnas y todas las filas de

los Productos de la tabla:

185


Como alternativa, utilice el Generador de consultas y gráficamente

construir la consulta, como se muestra en la Figura 9.

186



Después de crear la consulta, pero antes de pasar a la siguiente

pantalla, haga clic en el botón Opciones avanzadas. En proyectos de

sitios Web, "Generar instrucciones Insert, Update y Delete" es la única

opción avanzada seleccionada por defecto, si se ejecuta este asistente

desde una biblioteca de clases o un proyecto de Windows la opción

"Usar concurrencia optimista" opción también serán seleccionados.

Deje la opción "Usar concurrencia optimista" opción desactivada por el

momento. Vamos a examinar la concurrencia optimista en futuros

tutoriales.

Después de comprobar las opciones avanzadas, haga clic en Siguiente

para pasar a la pantalla final. Aquí se nos pide que seleccione los

métodos para agregar a la TableAdapter. Hay dos modelos para

rellenar los datos:

•Llenar un DataTable con este enfoque se ha creado un método que

toma en un DataTable como parámetro, que se llena basándose en los

resultados de la consulta. La clase DataAdapter de ADO.NET, por

ejemplo, implementa este modelo con su relleno () método.

•Devuelve una DataTable con este enfoque, el método crea y llena el

DataTable para usted y lo devuelve como el valor de retorno métodos.

Usted puede tener el TableAdapter implementar uno o ambos de estos

patrones. También puede cambiar el nombre de los métodos

establecidos aquí. Vamos a dejar las dos casillas marcada, a pesar de

que sólo va a utilizar el último modelo a lo largo de estos tutoriales.

187


Además, vamos a cambiar el nombre del lugar genérico GetData

método para GetProducts .

Si está activada, la casilla de verificación final,

"GenerateDBDirectMethods," crea Insert () , Update () y Delete () los

métodos de TableAdapter. Si deja esta opción sin marcar, todas las

actualizaciones se deben hacer a través del TableAdapter único

Update () método, que tiene en el DataSet, DataTable, un único objeto

DataRow o una matriz de DataRow. (Si ha desactivado la "Generar

instrucciones Insert, Update y Delete" desde las propiedades

avanzadas en la Figura 9 establecimiento de esta casilla no tendrá

ningún efecto.) Vamos a dejar esta opción está activa.

Completar el asistente, haga clic en Finalizar. Después se cierra el

asistente que se devuelven al Diseñador de DataSet que muestra el

DataTable que acabamos de crear. Usted puede ver la lista de

columnas de la Productos DataTable ( ProductID , ProductName , y así

sucesivamente), así como los métodos de la ProductsTableAdapter

( Fill () y GetProducts () ).

188


El siguiente código de ejemplo muestra como se utiliza el DataSet

tipeado, asi como las implementaciones básicas de mostrar, insertar,

modificar y actualizar, de una tabla llamado usuarios de un formulario

web.

Se muestra el formulario de ejemplo

189


Algunas anotaciones:

190

Imports datosPartial Class usuario2 Inherits System.Web.UI.Page ' declaro un adapter del DataSet tipeado Dim ada As New datosTableAdapters.usuarioTableAdapter ' llena datos a una tabla de memoria directamente del adapter Dim usuarios As datos.usuarioDataTable = ada.GetData() Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged Me.textnombre.Text = Me.GridView1.Rows(Me.GridView1.SelectedIndex).Cells(2).Text textdireccion.Text = Me.GridView1.Rows(Me.GridView1.SelectedIndex).Cells(3).Text Textpassword.Text = Me.GridView1.Rows(Me.GridView1.SelectedIndex).Cells(5).Text End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click ' creo un nuevo registro con los campos de la tabla Dim nuevousuario As datos.usuarioRow = usuarios.NewRow ' le pongo los valores que tiene cada campo nuevousuario.nombre = textnombre.Text nuevousuario.direccion = textdireccion.Text nuevousuario.fecha_ing = Me.Calendar1.SelectedDate nuevousuario.password = Textpassword.Text usuarios.Rows.Add(nuevousuario) ada.Update(usuarios) Me.GridView1.DataBind() End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click 'actualizar usuarios.FindByid(Me.GridView1.Rows(Me.GridView1.SelectedIndex).Cells(1).Text).nombre = textnombre.Text usuarios.FindByid(Me.GridView1.Rows(Me.GridView1.SelectedIndex).Cells(1).Text).direccion = textdireccion.Text usuarios.FindByid(Me.GridView1.Rows(Me.GridView1.SelectedIndex).Cells(1).Text).fecha_ing = Me.Calendar1.SelectedDate.Date usuarios.FindByid(Me.GridView1.Rows(Me.GridView1.SelectedIndex).Cells(1).Text).password = Textpassword.Text ada.Update(usuarios) Me.GridView1.DataBind() End Sub

Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click ' eliminar usuarios.FindByid(Me.GridView1.Rows(Me.GridView1.SelectedIndex).Cells(1).Text).Delete()

ada.Update(usuarios)

• El imports Datos, se es la utilización de el dataset,

precisamente al crearlo se le denomino Datos.

• Para utilizar los métodos de llenado o actualización, es

necesario crear el datatable por medio de este código

Dim ada As New datosTableAdapters.usuarioTableAdapter

• Y ahora para poder llenar hacer uso del llenado de los datos se

crea un objeto de taba para utilizarlo directamente en las

actualizaciones

Dim usuarios As datos.usuarioDataTable = ada.GetData()

191

diseÑo de pÁginas web bajo la plataforma net

Documents