You are on page 1of 133

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .

NET
Manual del curso

Curso Taller sobre el diseo e implementacin de aplicaciones WEB utilizando la plataforma de desarrollo de Visual Studio .NET Ver 2.0

MCA Eric Alvarez Baltierra


Agosto 2011

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET


Manual del curso

Introduccin al .NET __________________________________________________ 3


ANTECEDENTES: _________________________________________________________ 3 qu NO es .NET ____________________________________________________________ 4 Que es .net_________________________________________________________________ 4 .NET como evolucin de COM ________________________________________________ 7 .NET Framework ___________________________________________________________ 7 CLR - Arquitecturas de Ejecucin de Aplicaciones _____________________________ 10 NET Framework Class Library _____________________________________________ 11 Common Language Specification (CLS) ______________________________________ 13 CLS - Eleccin 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 tambin sus desventajas capa conectada. ___________________________ 21 La capa desconectada ______________________________________________________ 22 Unin entre capa conectada y desconectada___________________________________ 23 Otras clases dependientes de DataSet ________________________________________ 24 Ventajas y tambin 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

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

Crear y editar paginas web. _________________________________________________ 32 Compatibilidad con los navegadores. _________________________________________ 39 Crear un apartado exclusivo para miembros. _________________________________ 41 Configurar un rol. _________________________________________________________ 45 Crear una regla. ___________________________________________________________ 46 Crear cuentas de usuario. __________________________________________________ 48 Crear pginas maestras. ___________________________________________________ 51 Crear formularios. _________________________________________________________ 54 Editar paginas maestras. ___________________________________________________ 55 Crear hiperenlaces. ________________________________________________________ 57 Uso de controles asp.net ____________________________________________________ 62 Controles de navegacin. ___________________________________________________ 66 Crear mapa del sitio. _______________________________________________________ 68 Creacin de un sistema completo de login. ____________________________________ 72 Crear perfiles de usuario. ___________________________________________________ 87 Usar controles de validacin. ________________________________________________ 92

Usar datos en paginas web. ____________________________________________ 97


Control datalist ___________________________________________________________ 97 Trabajar con controles de datos. ____________________________________________ 106 Control gridview__________________________________________________________ 106 Control detailsview _______________________________________________________ 113 Crear formulario maestro - detalles. ________________________________________ 116

Crear un DataSet tipieado ____________________________________________ 121


Primer paso ______________________________________________________________ 121 Conectarse a la base de datos en un servidor de Microsoft SQL Server 2000 o 2005 Server base de datos ______________________________________________________ 122 Creacin de un DataSet tipeado y el Dataadapter ____________________________ 123

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

INTRODUCCIN AL .NET
ANTECEDENTES:
La idea de .NET gira en torno a los servicios web como base para la construccin de aplicaciones basadas en tecnologas de internet para la prxima dcada. Por tanto el diseo de esta nueva plataforma es totalmente diferente al planteamiento de ASP ya que esta ultima se planteaba como la solucion corporativa para la construccin de aplicaciones basadas en componentes COM. Esta fue la base del famoso concepto que inundo la informtica corporativa de mediados de los 90s con la inclusin de los componentes COM y su famoso homologo JavaBeans de la tecnologa 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 aos. Sin duda alguna va a ser uno de los entornos de desarrollo que reinen durante los prximos aos.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

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 Programacin: si bien la plataforma Microsoft .NET incluye lenguajes de programacin de aplicaciones, su concepto es ms amplio y va ms 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 ms amplio y va ms 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 ejecucin de aplicaciones.

Que es .net
Microsoft .NET es una plataforma de desarrollo y ejecucin de aplicaciones. Esto quiere decir que no slo nos brinda todas las herramientas y servicios que se necesitan para desarrollar modernas aplicaciones empresariales y de misin crtica, sino que tambin nos provee de mecanismos robustos, seguros y eficientes para asegurar que la ejecucin de las mismas sea ptima. Los componentes principales de la plataforma .NET son: Un entorno de ejecucin de aplicaciones, tambin llamado Runtime, que es un componente de software cuya funcin 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 programacin de alto nivel, junto con sus compiladores y linkers, que permitirn el desarrollo de aplicaciones sobre la plataforma .NET.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

Un conjunto de utilitarios y herramientas de desarrollo para simplificar las tareas ms comunes del proceso de desarrollo de aplicaciones Documentacin y guas de arquitectura, que describen las mejores prcticas de diseo, organizacin, desarrollo, prueba e instalacin de aplicaciones .NET Por otra parte, .NET representa la evolucin 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).

Componentes principales

Estas son las caractersticas principales de la plataforma Microsoft .NET: Se dice que es una plataforma de ejecucin 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 estn diseadas para ser ejecutadas contra un componente de software llamado Entorno de Ejecucin (muchas veces tambin conocido como Runtime, o , Mquina Virtual). Este componente es el encargado de manejar el ciclo de vida de cualquier aplicacin .NET, inicindola, detenindola, interactuando con el Sistema Operativo y proveyndole servicios y recursos en tiempo de ejecucin. La plataforma Microsoft .NET est completamente basada en el paradigma de Orientacin a objetos .NET es multi-lenguaje: esto quiere decir que para poder codificar aplicaciones sobre esta plataforma no necesitamos aprender un nico lenguaje especfico de programacin 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 misin crtica, entendindose por esto que permite la creacin y ejecucin de aplicaciones de porte corporativo que sean crticas para la operacin de tipos variados de organizaciones. Si bien tambin es muy atrayente para desarrolladores no profesionales, estudiantes y entusiastas, su verdadero poder radica en su capacidad para soportar las aplicaciones ms grandes y complejas. .Net fue diseado de manera tal de poder proveer un nico modelo de programacin, uniforme y consistente, para todo tipo de aplicaciones (ya sean de formularios Windows, de consola, aplicaciones Web, aplicaciones mviles, etc.) y para cualquier dispositivo de hardware (PCs, Pocket PCs, Telfonos Celulares Inteligentes, tambin llamados SmartPhones, Tablet

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

PCs, etc.). Esto representa un gran cambio con respecto a las plataformas anteriores a .NET, las cuales tenan modelos de programacin, bibliotecas, lenguajes y herramientas distintas segn el tipo de aplicacin y el dispositivo de hardware.

Objetivos del .NET

Uno de los objetivos de diseo de .NET fue que tenga la posibilidad de interactuar e integrarse fcilmente con aplicaciones desarrolladas en plataformas anteriores, particularmente en COM, ya que an hoy existen una gran cantidad de aplicaciones desarrolladas sobre esa base. .NET no slo se integra fcilmente con aplicaciones desarrolladas en otras plataformas Microsoft, sino tambin con aquellas desarrolladas en otras plataformas de software, sistemas operativos o lenguajes de programacin. Para esto hace un uso extensivo de numerosos estndares globales que son de uso extensivo en la industria. Algunos ejemplos de estos estndares son XML, HTTP, SOAP, WSDL y UDDI.

Figura 2

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

.NET como evolucin de COM


Entorno de Ejecucin (Runtime) COM: Windows .NET: Common Language Runtime Libreras de Funcionalidad COM: Algunas (ADO, FSO, etc.) .NET: Muy extensa (.NET Framework Class Library) Lenguajes de Programacin 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 produccin. El .NET framework tiene tres variantes principales, todas descargables gratuitamente desde Internet .NET Framework Redistributable Package: este es el mnimo 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 aplicacin han finalizado. Componentes Est compuesto por: El entorno de ejecucin de la plataforma .NET Las bibliotecas de funcionalidad reutilizable .NET Framework SDK: esta versin contiene herramientas de desarrollo de lnea de comandos (compiladores, depuradores, etc.), documentacin de referencia, ejemplos y manuales para desarrolladores de aplicaciones. Normalmente sta variante se instala en los entornos de desarrollo de aplicaciones, y es ms til a los programadores que a los usuarios finales. Para poder instalar la

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

versin SDK (Software Development Kit) es necesario instalar previamente el Redistributable Package. .NET Compact Framework: esta es una versin reducida del .NET Framework Redistributable, especialmente pensada para ser instalada en dispositivos mviles como Pocket PCs y SmartPhones.

Sistemas compatibles

El .NET Framework puede ser instalado en cualquier sistema operativo de la familia Windows superior a Windows 98. Para ms informacin 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 ms informacin 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 ejecucin de una aplicacin .NET sea posible. En el caso de las aplicaciones de escritorio (tambin llamadas De Formularios Windows) y las aplicaciones de consola (aplicaciones cuya interfaz de usuario es una consola de comandos), el Framework debe estar presente del lado del cliente (computadora donde se ejecuta la parte de la aplicacin que

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

interacta con el usuario), y en el servidor slo en caso de que la aplicacin sea distribuda 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 conexin de red al servidor, el cual debe tener instalado el .NET Framework. Veremos ms sobre aplicaciones Web a lo largo del curso. Para las aplicaciones mviles, que se ejecutan sobre Windows Mobile en algn dispositivo tipo Pocket PC o SmartPhone, es necesario tener instalado el .NET Compact Framework en el dispositivo.

Imagen 4

Partes del framework

En la figura4 se pueden apreciar las distintas partes que componen al .NET Framework, includas el entorno de ejecucin 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 ms comunmente utilizada para el desarrollo de todo tipo de aplicaciones. Algunos ejemplos de la funcionalidad provista por la BCL son el manejo de colecciones, cadenas de texto, entrada/salida, threading, operaciones matemticas y dibujos 2D.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

ADO.NET, que contiene un conjunto de clases que permiten interactuar con bases de datos relacionales y documentos XML como repositorios de informacin persistente. ASP.NET, que constituye la tecnologa dentro del .NET Framework para construir aplicaciones con interfaz de usuario Web (es decir, aplicaciones cuya lgica 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 estndares como HTTP y HTML). Windows Forms (o simplemente WinForms), que constituye la tecnologa 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 Ejecucin de Aplicaciones

Figura 5 El modelo de ejecucin que propone la plataforma .NET se suele definir como virtual, o de mquina virtual, ya que las aplicaciones no son desarrolladas directamente contra las APIs de programacin expuestas por el sistema operativo, ni es ste el que se encarga de su ejecucin y ciclo de

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

10

vida, sino que .NET provee un entorno de ejecucin (el CLR) que corre por sobre el sistema operativo y que es el encargado de ejecutar las aplicaciones y proveerles servicios en tiempo de ejecucin. A los componentes de software que se ejecutan de esta manera se los conoce comnmente como componentes manejados, ya que su ejecucin es controlada por un entorno intermedio. En la figura 5 podemos ver las diferencias entre las arquitecturas de ejecucin de los componentes tradicionales (como los COM) y los componentes manejados.

ventajas

Una de las principales ventajas de contar con una plataforma virtual es que no estn atadas de ninguna forma con el sistema operativo y la plataforma de hardware subyacente. Es sabido que una aplicacin compilada para que utilice directamente las APIs y servicios expuestas por un sistema operativo x muy difcilmente pueda ser ejecutada en otro sistema operativo distinto sin ser recompilada. Las aplicaciones manejadas, en cambio, descansan la tarea de su compilacin a un cdigo de mquina especfico en el entorno de ejecucin. De esta manera, si existen distintos entornos de ejecucin intermedia para diferentes Sistemas Operativos, la misma aplicacin puede ejecutarse en todos ellos si necesidad de recompilarse.

NET Framework Class Library


Conjunto de Tipos bsicos (clases, interfaces, etc.) que vienen includos en el .NET Framework Los tipos estn organizados en jerarquas lgicas de nombres, denominados NAMESPACES Los tipos son INDEPENDIENTES del lenguaje de desarrollo Es extensible y totalmente orientada a objetos

Importancia

De muy poco servira a los desarrolladores el contar con una plataforma de ejecucin de aplicaciones tan sofisticada y robusta como el CLR sin tener adems un conjunto de funcionalidades y componentes empaquetados listos para aprovechar y reutilizar en sus aplicaciones. Justamente ese es el propsito de la .NET Framework Class Library (Biblioteca de Clases del .NET Framework), que provee cientos de tipos bsicos (clases e interfaces principalmente) orientados a objetos, extensibles mediante herencia, independientes del lenguaje de programacin de alto nivel que se desee utilizar y organizados en namespaces jerrquicos.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

11

Figura 6

NameSpaces

En la figura 6 se aprecian los principales namespaces de la biblioteca de clases .NET: System: raz 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 tecnologa 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.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

12

Common Language Specification (CLS)


Uno de los objetivos de diseo de la plataforma .NET fue el ser independiente del lenguaje de programacin elegido para el desarrollo de aplicaciones. Para lograr esto es que se cre la Especificacin de Lenguaje Comn (o CLS, por sus siglas en ingls), que define y estandariza un subconjunto de todas las caractersticas soportadas por el CLR y que son necesarias en la mayora de las aplicaciones. Todos los componentes desarrollados y compilados de acuerdo con la especificacin CLS pueden interactuar entre si, independientemente del lenguaje de programacin 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 aplicacin 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 acadmico han desarrollado ms de 20 lenguajes compatibles con la especificacin CLS

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

13

CLS - Eleccin 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 Los tipos de aplicaciones .NET son INDEPENDIENTES del lenguaje que elija Un punto importante a destacar es que la eleccin del lenguaje de alto nivel en el que debe escribirse una aplicacin .NET prcticamente ha sido reducida a una cuestin de gustos personales y comodidad con la sintaxis. No hay prcticamente motivos tecnolgicos sobresalientes que inclinen la balanza hacia algn 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 programacin de alto nivel ste fue escrito, ya que lo que el recibe como entrada es cdigo MSIL.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

14

Figura 7 La figura 7 representa el modelo de compilacin y ejecucin de aplicaciones .NET, al cual muchas veces se denomina de compilacin diferida, o de compilacin en dos etapas. Esto es asi ya que el primer paso para poder ejecutar una aplicacin dentro del CLR es compilar su cdigo fuente para obtener un assembly con cdigo 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 cdigo MSIL a cdigo nativo que hace uso especfico 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 ejecucin, con excepcin de C++ .NET, que es el nico lenguaje al que se le ha dejado la capacidad de emitir tambin cdigo 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.

Compilacin

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

15

ACCESO A DATOS: ADO.NET


Introduccin
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 informacin: 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)

Conjunto de clases

Como cualquier otro modelo de acceso a datos, ADO.NET es un conjunto de clases relacionadas entre s que estn especializadas en ofrecer toda la funcionalidad que un programador necesita para realizar acceso a datos y manejarlos una vez los ha obtenido. Las clases genricas expuestas por ADO.NET se encuentran bajo el espacio de nombres System.Data. Este espacio de nombres define clases genricas de acceso a datos que posteriormente son extendidas para ofrecer caractersticas y funciones especficas de cada proveedor.

Figura 8

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

16

Data set

El objeto ms importante a la hora de trabajar con el nuevo modelo de acceso a datos es el DataSet. Sin exagerar demasiado podramos calificarlo casi como un motor de datos relacionales en memoria. Aunque hay quien lo asimila a los clsicos Recordsets su funcionalidad va mucho ms all como se ver en breve.

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

Figura 8

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

17

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 ms comunes que componen a todos los proveedores de acceso a datos de ADO.NET. Ntese que algunos nombres empiezan con las letras Xxx: esto se debe a que los nombres de esas clases varan segn el proveedor especfico que se est utilizando. Por ejemplo, la clase que representa una conexin 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 conexin. Almacena, entre otras cosas, el string de conexin (connection string), y permite conectarse y desconectarse con una base de datos. XxxCommand: permite almacenar y ejecutar una instruccin SQL contra una base de datos, enviando parmetros de entrada y recibiendo parmetros de salida.

Principales clases

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

18

Estas dos clases se utilizan tanto en escenarios conectados como desconectados. XxxDataReader: permite acceder a los resultados de la ejecucin de un comando contra la base de datos de manera read-only (slo lectura), forwardonly (slo 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 corazn del soporte a escenarios desconectados de ADO.NET. El DataSet es una representacin en memoria de una base de datos relacional, que permite almacenar un conjunto de datos obtenidos mediante un DataAdapter. El DataAdapter acta 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 conexin 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. Ntese 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 conexin con los orgenes de datos. As, como ya se dijo, la clase genrica Connection se utiliza para establecer conexiones a los orgenes 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 despus. Estas clases son abstractas, es decir, no tienen una implementacin 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, adems de otras particularidades que se deben contemplar. Un proveedor de datos de ADO.NET es una implementacin concreta de las clases conectadas abstractas que hemos visto, que hereda de stas y que tiene en cuenta ya todas las particularidades del origen de datos en cuestin.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

19

As, por ejemplo, las clases especficas 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 clsico no hay una nica clase Connection o Command que se use en cada caso, si no que existen clases especializadas para conectarse y recuperar informacin 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 cdigo independiente del origen de datos. Todo lo contrario. La plataforma .NET ofrece facilidades de escritura de cdigo genrico basadas en el uso de herencia e implementacin de interfaces. De hecho la versin 2.0 de .NET ofrece grandes novedades especficamente en este mbito.

Proveedores nativos

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 travs 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 estn utilizando (ODBC u OLEDB). Un programador novel puede sentir la tentacin de utilizar siempre el proveedor puente para OLEDB y as escribir cdigo 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 ODBC .NET Data System.Data.Odbc Provider OLE DB .NET Data Provider Descripcin Permite conectar nuestras aplicaciones a fuentes de datos a travs de ODBC. System.Data.OleDb Realiza la conexin utilizando un proveedor OLEDB, al igual que el ADO clsico. System.Data.OracleClient Proveedor de datos para acceder a Oracle. Permite la conexin optimizada a SQL Server 7.0 o posterior, incluyenbdo la ltima versin SQL Server 2005.

Oracle Client .NET Data Provider SQL Server .NET System.Data.SqlClient Data Provider

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

20

Proveedores de terceros

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 mtodos, pueden ser diferentes. Existen, por supuesto, proveedores para tipos de orgenes 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 orgenes de datos nosotros siempre podremos realizarlo mediante ODBC u OLEDB si tenemos necesidad.

En resumen

Con la capa conectada de ADO.NET realizamos la conexin y comunicacin con los orgenes de datos. Cada proveedor de datos implementa su propia versin de las clases Connection, Command, DataReader y DataAdapter (entre otras). Las clases derivadas de Connection se utilizan para realizar la conexin y enviar y recibir informacin. 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 comunicacin establecido por Connection.

Ventajas y tambin sus desventajas capa conectada.


Algunas Ventajas: Al haber una nica conexin a la base de datos por usuario, o incluso a veces por aplicacin, establecida permanentemente, puede llegar a resultar ms sencillo administrar la seguridad y el acceso al servidor de datos. Lo mismo ocurre con el control de concurrencia: en un escenario donde mltiples usuarios se estuvieran conectando y desconectando permanentemente para realizar distintas acciones, este control sera ms difcil de llevar. Siempre la aplicacin tiene acceso a los datos actualizados

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

21

Algunas Desventajas: Se requiere una conexin 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 simultneamente 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 conexin 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. Adems, 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 conexin. A veces nicamente necesitamos un almacn de datos temporal pero que ofrezca caractersticas avanzadas de gestin y acceso a la informacin. Por otra parte las conexiones con las bases de datos son uno de los recursos ms escasos con los que contamos al desarrollar. Su mala utilizacin es la causa ms frecuente de cuellos de botella en las aplicaciones y de que stas no escalen como es debido. Esta afirmacin es especialmente importante en las aplicaciones Web en las que se pueden recibir muchas solicitudes simultneas 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 informacin entre capas de una aplicacin. stas pueden encontrarse distribuidas por diferentes equipos, e incluso en diferentes lugares del mundo gracias a Internet. Por ello es necesario disponer de algn modo genrico 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 ms es lo que nos otorga el uso de los objetos DataSet, ncleo central de la capa desconectada de ADO.NET. Nota: Otra interesante caractersticas de los DataSet es que permiten gestionar simultneamente 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.

Conexiones recursos escasos

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

22

Data Set

Los DataSet, como cualquier otra clase no sellada de .NET, se pueden extender mediante herencia. Ello facilita una tcnica avanzada que consiste en crear tipos nuevos de DataSet especializados en la gestin de una informacin concreta (por ejemplo un conjunto de tablas relacionadas). Estas nuevas tipos clases se denominan genricamente DataSet Tipados, y permiten el acceso mucho ms cmodo a los datos que representan, verificando reglas de negocio, y validaciones de tipos de datos ms estrictas. Los objetos DataSet no dependen de proveedor de datos alguno y su funcionamiento es independiente de cmo hayan sido obtenidos los datos que contienen. Este es el concepto ms 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 conexin (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 conexin. Nota: Aunque este es el comportamiento habitual de una aplicacin 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 informacin, tratarla y no almacenarla en lugar alguno. De todos modos lo ms frecuente es realizar el proceso descrito.

Unin 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 conexin) y sirve de nexo entre ellos. Un DataAdapter sabe omo manejar correctamente los objetos proporcionados por su proveedor especfico (fundamentalmente los vistos: Connection, Command y DataReader) y proporciona mtodos para trasegar informacin desde el servidor a DataSets desconectados y viceversa haciendo uso de dichos objetos especficos del proveedor. As, por ejemplo, el mtodo 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 modo su mtodo Update se utiliza para conciliar automticamente con el origen de datos los datos modificados en un DataSet mientras no haba conexin.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

23

Otras clases dependientes de DataSet


Como hemos dicho antes un DataSet podra asimilarse a un pequeo 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 creacin y actualizacin, 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 relacin 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 informacin 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 relacin existente entre dos objetos DataTable.


Normalmente se suelen utilizar un identificador comn a ambas tablas aunque pueden ser combinaciones de ms de uno de ellos. De este modo se sabe cmo obtener informacin de una tabla a partir de informacin en otra. Por ejemplo el identificador de una factura (su nmero, por ejemplo) puede servir para relacionar su registro con los registros de detalle de factura que estn 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.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

24

Este tipo de funcionalidad es particularmente til para escenarios de usuarios mviles, que salen de su oficina con una laptop, un SmartPhone o una PocketPC y desean poder continuar trabajando por ms que no tengan conectividad fsica con el servidor de base de datos ubicado en la red interna de la empresa.

Ventajas y tambin 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 aplicacin Mayor escalabilidad en el acceso a datos y utlizacin ms ptima de recursos del servidor, ya que se mantiene en un mnimo indispensable la cantidad y duracin 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 ms 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.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

25

DataSet tipados
La clase DataSet, como cualquier otra clase no sellada de .NET, puede ser extendida mediante herencia para aadirle 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 insercin, que verifique las relaciones con otros datos o que los transforme o controle el acceso a los mismos. Nosotros slo tendramos 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 gestin 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 ms rpida y sencilla de acceder a los datos que albergan. Adems Visual Studio nos permite crear este tipo de DataSet de forma visual y usando asistentes. En el vdeo se ilustra la manera de conseguirlo.

Conocer la Base de datos

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 genricos y no saben nada acerca de los datos que albergan. Los tipados slo sirven para albergar una informacin muy concreta. Ganan en especializacin y pierden en versatilidad. Para agregar un DataSet tipado a nuestro proyecto slo hay que presionar con el botn secundario sobre la carpeta App_Code y en el dilogo que aparece elegir el icono de DataSet. La extensin 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 diseo y un asistente como el de la figura 9.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

26

Figura 9.- Primer paso del asistente de configuracin de un TableAdapter.

Cuatro funciones bsicas

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 mtodos son, por defecto, los mismos que los de un DataAdapter normal (Fill, Update...). Con l dispondremos de mtodos para recuperar informacin, crear nuevos registros, actualizarlos y eliminarlos, slo que los correspondientes comandos estarn creados de manera automtica o asistindonos en ello. As, por defecto, se definen un par de mtodos para obtener los datos subyacentes rellenando un DataSet que se le pase (mtodo Fill) o devolviendo directamente un DataTable (mtodo GetData). Adems el mtodo Update sirve para conciliar automticamente los cambios del un DataSet tipado con la base de datos original. No vamos a analizar desde el texto la definicin de estos objetos adaptadores pero puede conocerlo viendo el vdeo de esta leccin. Truco: Podemos ver el cdigo que se genera de manera automtica para crear el DataAdapter si hacemos doble-clic sobre l desde el examinador de objetos de Visual Studio (CTRL+ALT+J). Esto har que se abra el archivo de cdigo auto-generado por ASP.NET desde la ubicacin real de ejecucin (normalmente una ruta del estilo C:\Windows\Microsoft.NET\....). Es muy DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET 27

interesante echarle un vistazo a este cdigo 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 coleccin de tablas, lo cual lo hace ms fcil de usar. Cada una de las tablas del DataSet lleva asociado como mnimo 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 informacin y el TableAdapter acta 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 ms complicada la actualziacin y se suelen usar nicamente para recuperar datos. la alternativa habitual es tratar de replicar la estructura fsica de la base de datos en la estructura en memoria del DataSet de modo que se tiene acceso estructurado a la misma informacin 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 cdigo: ds.Clientes(0).Nombre que nos dara el nombre del primer cliente de la tabla de clientes en el DataSet 'ds'. esta propiedad nombre adems ya sera un campo de tipo String que es el tipo adecuado para la informacin albergada, por lo que se simplifica mucho su uso. En un DataSet normal para obtener lo mismo tendramos que haber escrito: ds..Tables(0).Rows(0)("Nombre").ToString() que obviamente es mucho menos legible. La cosa no termina aqu ya que adems se definen clases especficas 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

Cdigo

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

28

de datos y que hemos usado en la lnea de ejemplo. As, para aadir un cliente podramos escribir: Dim cliente As New Cliente cliente.Nombre = "Pepe" .... ds.Clientes.AddClientesRow(cliente) Ntese que el mtodo Add del DataTable se ha sustituido por uno con nombre especializado que nos ayuda a saber mejor por donde pisamos, pero su funcin es idntica. Para rellenar una tabla de un DataSet tipado se usa su correspondiente TableAdapter as: Dim clientes Dim ta As New ta.Fill(clientes.Clientes) As New ClientesDS ClientesTableAdapters.ClientesTableAdapter()

clientes.Clientes(0).Nombre = "Pepe" .... o tambin usando el mtodo GetData para obtener la tabla directamente si slo nos interesa esa parte concreta del DataSet (que puede constar de varias tablas): Dim clientes Dim ta As New clientes = ta.GetData() clientes(0).Nombre = "Pepe" .... Para un mismo DataTable tipado se pueden definir diversos TableAdapter especializados aparte del bsico que permite llenar todos los datos: para filtrar podr diversos parmetros 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 informacin de manera muy cmodo. Adems es un modo muy sencillo de separar la funcionalidad de la base de datos del resto del cdigo. As, si se hace necesario en el futuro, se puede exponer esta parte de manera independiente mediante un, por ejemplo, un servicio Web que utilice el DataSet tipado y sus TableAdapters para acceder a los datos desde una ubicacin remota. As Clientes.ClientesDataTable ClientesTableAdapters.ClientesTableAdapter()

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

29

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 aplicacin, una herramienta para construir Sitios Web dinmicos y enlazados a Bases de Datos, usando tecnologas como XHTML, XML, CSS, ASP.NET, as como .NET Framework 2.0, SQL Server 2005, y lenguajes de programacin como C# y VISUAL BASIC. Esta Aplicacin 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 tambin va a ser el primer acercamiento al lenguaje ASP.NET.

Cuadro 1- Pgina principal de VWD 2005.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

30

Crear la estructura de un sitio web.


Da clic en el comando File situado en la barra de herramientas y selecciona la opcin New Web Site

Cuadro 2- New Web Site.


Notaras que se abrir en modo cdigo HTML; en la ventana de Solution Explorer se crearon dos archivos, uno es una pagina vaca llamada Default.aspx que es la 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

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

31

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 imgenes o Paginas Web existentes al nuevo directorio, solo da clic derecho sobre de este y pulsa la opcin Add New Item o Add Existing

Item.

Crear y editar paginas web.


Para empezar a escribir en nuestra pgina web solo tienes que cambiar a vista diseo 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 opcin Toolbars Formating.

Cuadro 4.1 Barra

de Formato de Texto.

INSERTAR IMGENES. DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET 32

Previamente tienes que haber creado un directorio para guardar tus imgenes (ver cuadro 3). Para insertar una imagen en tu pgina 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 cdigo fuente, o bien como a continuacin se muestra en el siguiente cuadro:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

33

Se mostrara el siguiente cuadro:

Cuadro 5.2 Style Builder.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

34

VWD 2005 posee una tecnologa llamada IntelliSence esto nos sirve para cuando estamos trabajando en modo cdigo ya que es una lista con las distintas etiquetas que podemos utilizar, sea en lenguaje que sea.

Cuadro 5.4 IntelliSence. Para poner una imagen detrs del texto tendrs que aplicarle un estilo a la imagen como se muestra en la siguiente pantalla, selecciona la pestaa Posicin del Generador de Estilos, y en el rubro ndice z escribe -1.

Cuadro 5.5 Posicin.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

35

Observa el resultado de esta operacin:

Cuadro 5.6 Imagen de fondo. Si

prefieres que se vea en equilibrio con el texto, aplica un estilo a la imagen, selecciona la pestaa Diseo y en el rubro Permitir Flujo de Texto elige la opcin que desees.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

36

s.

Esta pantalla muestra un ejemplo de las distintas formas en las que puedes colocar tus imgenes.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

37

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

Cuadro 5.9 Horizontal Rule.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

38

Compatibilidad con los navegadores.


Antes de hacer una aplicacin pblica tenemos que probar y/o comprobar como funciona la aplicacin con los distintos navegadores, para esto VWD 2005 Express Edition nos presenta la siguiente opcin: en la barra de herramientas selcciona el comando Tools Options Aparecera la siguiente pantalla:

Esta opcin nos presenta la forma de cmo 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:

Cuadro 6.1 Guardar.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

39

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 Cuadro 6.2 View in Browser. 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.

Cuadro 6.3 Browse With...

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

40

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 podrn 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).

Nota:

2005 posee la herramienta de administracion del sitio web WAT. Esta herramienta permite administrar el accseso dentro de nuestras pginas del sitio web. Para usarla da clic en el comando Website de la barra de herramientas y elige la opcion

VWD

ASP.NET Configuration

Cuadro 7.1 WAT. 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

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

41

Se abrir la siguiente pantalla:

Tenemos que asegurarnos que exista conexin con SQL SERVER 2005 para configurar nuestro sitio de miembros; para esto dar clic en la pestaa

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

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

42

Mostrara la siguiente pantalla:

Cuadro 7.2 ASP.NET

Nota: Asegrate que est marcada la opcin AspNetSqlProvider y pulsa sobre test para llevar a cabo una comprobacin de que el sistema funciona.
Despus de unos segundos donde verificara tal conexin aparecer el siguiente mensaje si la conexin a la base de datos es correcta:

Cuadro 7.3 Provider Management. Pulsamos ok para volver a la pgina de administracin y ahora damos clic sobre la pestaa Security para crear la autenticacin.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

43

Cuadro 7.4 Security. Posteriormente indicaremos la forma en que accedern nuestros usuarios, si de red o localmente, elegirimos desde internet.

Cuadro 7.5 Acceso.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

44

Configurar un rol.
Los miembros del grupo ya no seran annimos porque ya van a estar registrados con una cuenta, lo que hara que tomen el papel de rol de

m i e m b r o s
d e l s i s t i

Cuadro 8 Roles.

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.

Cuadro 8.1 New Rol.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

45

Le das un nombre al Rol, nosotros le pondremos miembros, da clic en Add Role, veremos como nos agrega el rol, despus pulsamos el botn back.

Crear una regla.


Nuestra primera regla va a distinguir a los miembros del sitio de los usuarios annimos que son los que van a acceder a las partes pblicas del sitio.

Cuadro 9 Access Rules. Mostrar la siguiente pantalla:

Cuadro 9.1 Add New Access Rule. DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

46

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. Slo 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 pestaa Security de nuestro administrador en la opcion Manage access rules.

Cuadro 9.2 Manage Access rules.

Abrira la siguiente pantalla:

Cuadro 9.3

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

47

Crear cuentas de usuario.


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

Nos mostrar la siguiente pantalla:

Cuadro 10.1 Create Users

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

48

Primero se debe de escribir la respuesta de seguridad y despues la contrasea. La contrasea debe de tener como mnimo siete caracteres, y uno de ellos debe ser un caracter que no sea alfabtico ni numrico; esto es para crear contraseas que tengan ms seguridad.

Cuadro 10.2 New User

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

Cuadro 10.3 Created user. Si deseas manejar los usuarios sigue los pasos que se muestran en las siguientes pantallas:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

49

Cuadro 10.4 Mostrara la siguiente pantalla:

Cuadro 10.5 Observa como en el Solution Explorer aparece un nuevo archivo llamado web.config. El archivo web config contiene el cdigo 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.

Cuadro 10.6 web.config

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

50

Crear pginas 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 aadir nuevo item y seleccionamos Master Page

Cuadro 11 Master Page. Ya creada la pagina maestra debemos empezar por definir el croquis del diseo, para ello pulsamos en el comando Layout y seleccionamos insertar table y escogemos la opcin templetes.

Puedes desees.

elegir

el

modelo

que

Cuadro 11.1 Insertar Table. DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET 51

Mostrara la siguiente pantalla:

Lo que nos muestra ahora en el modo diseo 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.

Cuadro 11.2 Place Holder.

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: Vers todas las opciones que Style Builder te ofrece para dar un diseo profesional a tu Master Page como se muestra en la pantalla siguiente.

Cuadro 11.3 Style Builder.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

52

Cuadro 11.4 Ejemplo.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

53

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.

Cuadro 12 Formulario. Nos mostrara la pantalla siguiente donde indicaremos cual es la Master Page que vamos a usar.

Cuadro 12.1

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

54

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 imgenes una de ellas es seleccionar la imagen que vamos a agregar y arrastrarla al sitio que queramos.

Cuadro 13

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

Cuadro 13.1 - Ejemplo Login.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

55

Puedes agregar una tabla si lo necesitas, esto es posible mediante el Cuadro de Herramientas, la pestaa Estndar y selecionas el objeto Table

Cuadro 13.2 Insertar una Tabla.

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

Y nos mostrara el Generador de Estilos visto ya anteriormente, donde podras modificar las propiedades de esta. Cuadro 13.3 Tabla. 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.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

56

Crear hiperenlaces.
Para crear un enlace selecciona una palabra o una imagen donde quieras que este el enlace y da clic en

Convertir en hipervnculo.

Mostrar la siguiente pantalla donde indicaremos el tipo de hipervinculo y la ruta hacia donde queremos que este nos lleve.

Cuadro 14.1

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

57

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 slo se cambiar el texto ya que el enlace ser el mismo.

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

Cuadro 14.3 Aparecer el siguiente cuadro de dialogo:

Cuadro 14.4

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

58

AADIR 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, slo tienes que seleccionar un texto o una imagen y dar clic en el comando Formato de la barra de herramientas, seleciona la opcin Insertar

Marcador

Cuadro 14.5 Marcadores.

Cuadro 14.8

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

59

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.

Cuadro 14.6 Podemos tambin crear marcadores a otras pginas, por ejemplo si quisiramos crear un marcador que nos lleve a la pgina default.aspx el marcador lo tendramos que crear exactamente igual pero en la pgina default.

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

Cuadro 14.7

Ahora crea el hipervnculo (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":

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

60

Antepones el nombre de la pgina 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 pgina. Posteriormente escribimos el smbolo # 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:

Cuadro 14.9

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

61

Uso de controles asp.net


Aadir un control de servidor es muy simple, solo tienes que arrastrar el control hacia nuestra pgina .aspx, a estos controles podrs aplicarles el

diseo que prefieras mediante las propiedades o un estilo pero para que esto sea posible tendrs que convertir el elemento del control en una plantilla. Nos mostrara la siguiente pantalla:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

62

Observa cmo nos separa cada uno de los elementos que lo conforman, esto facilita su modificacin total en el cuadro de propiedades del mismo.

Cuadro 16.2 - Propiedades

O bien puedes elegir algn formato automtico que VWD 2005 te presenta:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

63

Cuadro 16.3 Formato Automtico

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

Cuadro 16.4 Inicio de Sesin.

Otro elemento importante para el diseo de tu pgina web es el control PasswordRecovery que se muestra en la siguiente pantalla.

Cuadro 16.5 PasswordRecovery.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

64

Las contraseas se enviaran al usuario va e-mail por lo cual en la propiedad From tendrs indicar el correo electrnico desde el que enviarn las respuestas de las contraseas y en la propiedad Subject si lo deseas escribe el tema por defecto que quieras que aparezca en el envo , por ejemplo Restablecimiento de contrasea. Para el uso de este control tendrs que definir un servidor de correo, por ejemplo el SERVER SMTP, el cual se especifica mediante la herramienta de configuracin ASP.NET que veremos mas adelante. Pulsa el icono que se encuentra en el explorador de soluciones, mostrara la siguiente pantalla:

Cuadro 16.6 PasswordRecovery.

El nombre del servidor es localhost, con el puerto 25, desde localhost, no tendr ninguna autenticacin, damos clic en el botn 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 sesin nos permite crear un sistema de registro de identificacin de usuarios completo y totalmente personalizado.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

65

Controles de navegacin.

Cuadro 17 Menu.

Este Control de Navegacin nos permite crear un men desplegable simple de navegacin de enlaces. Nos mostrara la siguiente pantalla: ToolTip, lo que escribas en este rubro aparecer cuando el usuario pase el mouse sobre el elemento creado.

Cuadro 17.1 Editor.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

66

Para agregar un submen da clic al botn remarcado de la siguiente pantalla:

Cuadro 17

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

Cuadro 17.3 TreeView.

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

Cuadro 17.4 Vista Web.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

67

Crear mapa del sitio.


El SiteMap es un archivo de navegacin 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 raz, botn derecho y agregar un nuevo elemento Mostrara la siguiente pantalla:

Cuadro 18

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

68

Observa que ya se ha agregado al Explorador de soluciones, no se presenta en modo diseo porque es solo cdigo XML.

Cuadro 18.1

Si modificamos el cdigo nos quedara algo as:

Cuadro 18.2- Cdigo Sitemap.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

69

Cuadro 18.3- Descripcin.

Ruta de la pgina web

Texto que aparecer en el men.

ToolTi p

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 opcin <Nuevo origen de taos>.

Cuadro 18.3

Mostrara la siguiente pantalla, elegir Mapa del Sitio:

Cuadro 18.4

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

70

Ahora si lo probamos en el navegador observars y comprenders mejor su funcionamiento.

El mapa del sitio que acabamos de ver nos permite definir varios mens para distintos roles, es decir que aparezca un men distinto si es un usuario annimo o si es un usuario de nuestro sitio.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

71

Creacin 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.

Cuadro 19 Creacin de una nueva carpeta.

3. En la barra de men elegimos Sitio Web y hacer clic en Configuracin de ASP.NET.

Cuadro 19.1

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

72

Opcin que nos dar acceso a la Herramienta Administrativa de Sitios Web.

4. Nos situamos en la opcin Proveedor para comprobar la conexin SQL.

Cuadro 19.3

5. Comprobar la conexin SQL dando doble clic en Prueba.

Cuadro 19.4 Realizar una Prueba para comprobar la conexin.

Indicando si la conexin es correcta o no.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

73

6. Ahora dar clic en la opcin Seguridad, en esta opcin podemos agregar nuevas Funciones, Reglas y Usuarios. 7. Seleccionamos en Tipo de Autenticacin desde la opcin Usuario para permitirnos el acceso.

Cuadro 19.5 Tipo de Autenticacin.

8. Seleccionamos la Opcin Desde Internet pulsamos sobre Listo.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

74

Cuadro 19.6

9. En la opcin Funciones damos clic en crear o habilitar funciones.

Cuadro 19.7

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

Cuadro 19.8

Funciones: Estas son grupos de usuario que usted puede predeterminar. Estas funciones permiten otorgar o denegar acceso a carpetas especficas del Sitio Web

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

75

11. Una vez creada la funcin se procede a crear las reglas. 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 aplicacin.
Cuadro 19.9

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

Cuadro 19.20 Seleccionar quienes accedern al Sitio Web.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

76

Pulsamos sobre Aceptar para que se cree la Regla. Esta regla se aplicara para la carpeta mencionada denegando el acceso a los Usuarios Annimos. 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 Administracin de Sitios Web.

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

Cuadro 19.21 Actualizamos nuestro Sitio Web.

Mediante los controles se creara el Sistema de Login. No se crearan pginas 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 pgina.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

77

Cuadro 19.22

Se guarda el archivo creado. Colocamos el archivo guardado dentro de la carpeta Miembros para que solo puedan acceder aquellos Usuarios que estn registrados.

Cuadro 19.23

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

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

78

Cuadro 19.23

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

Cuadro 19.24

Hacer doble clic en el evento de crear Usuario.

Cuadro 19.25

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

79

Mostrndonos la siguiente pantalla, se procede a tipiar un alinea de cdigo en donde indicamos a que Funcin o Miembro pertenecer el Usuario.

Cuadro 19.26

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.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

80

16.

Prueba tu aplicacin 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 Pgina de Bienvenida.

Cuadro 19.27 Mensaje 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

Cuadro 19.28 - Edicin de un Usuario.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

81

Dando clic en Editar los Usuarios podemos editar a los Usuarios existentes desde el formulario que llenamos al inicio de la creacin de la cuenta como se muestra a continuacin: Seleccionar el Usuario deseado para editar. Cambiar las propiedades deseadas para este Usuario.

Cuadro 19.29

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

Cuadro 19.30 Pgina maestra del Sitio Web.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

82

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

Cuadro 19.30 - Login desde la Pgina maestra del Sitio Web.

Llenamos los campos con datos correctos de algn Usuario y damos clic en Inicio de Sesin, enlazndonos a la pgina de Bienvenida.aspx pero desde la pgina Maestra de nuestro Sitio Web.

Cuadro 19.31

Notaremos que ahora el LoginStatus cambia Iniciar Sesin a Cerrar Sesin.

de la opcin de

Estos controles (LoginStatus) los podemos modificar cambiando el texto o quizs colocando una imagen para que nos aparezca al iniciar sesin, todo esto en Propiedades (Cambiar texto, colocar una imagen, etc.)

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

83

Existen otros controles como: LoginName. LoginView. Controlador LoginName Este nos permite mostrar el nombre de usuario que ha iniciado sesin. nicamente arrastra el controlador al lugar que desees. LoginName es un control que difcilmente 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:

Nombre del usuario

Pagina Bienvenida.aspx

Cuadro 19.32 Controlador LoginName.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

84

Controlador LoginView

Este controlador puede contener otros controladores dentro de l, es muy til para saber que paginas tenemos abiertas en algn sitio y cuales estn restringidas.

Al igual que los dems controladores para insertar este controlador simplemente lo arrastramos a la pgina Maestra.

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

Cuadro 19.33

Para los Usuarios que ya estn identificados realizaremos lo siguiente:


Un mensaje de Bienvenida. Nombre del Usuario. Indicador de que se esta Logueado.

Cuadro 19.34

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

85

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

Como los controladores se agregaron en la Pgina Maestra los controladores se mostraran en todas las pginas.
Cuadro 19.35

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

86

Crear perfiles de usuario.


Profile.Nombre.Propiedad Perfil: Conjunto de nombres de propiedades, cada nombre de propiedad representa una unidad de informacin a almacenar, los nombres deben ser cortos, sin espacios en blanco y empezar con una letra mayscula. Podemos tambin 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 aplicacin los permita, para esto tenemos que editar manualmente el archivo web.config de la raz de nuestra

aplicacin, porque recuerda que pueden haber mas archivos web.config.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

87

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

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

88

Para copiar los contenidos de un textbox a una propiedad de perfil: Profile.Apellidos=TxtApellidos.Text; Ahora vamos a darle funcionalidad al botn, para esto da doble clic sobre de este y escribe el siguiente cdigo:

Cuadro 21.3

Puedes probarlo ahora en tu navegador.

Cuadro 21.4

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

89

Para que el usuario pueda editar su perfil crearemos una pgina web donde escribiremos el cdigo para realizar este evento. La pgina web se llamara editarperfil.aspx. editarperfil.aspx tendr el siguiente diseo:

Cuadro 21.5

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

90

Y en el cdigo tendr:

Cuadro 21.6

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

91

Usar controles de validacin.


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

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 validacin.

Cuadro 22

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

Otro control es el RangeValidator el cual permite un rango mximo y mnimo de valores que es necesario incluir, puede ser til para un cdigo postal que tenga que tener como mnimo cinco caracteres o los que sean.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

92

El Control Regular de Validacin se refiere a un modo simblico de definir criterios complejos de validacin, nos permite poder validar la entrada de un campo de texto respecto a un conjunto de caracteres de trminos para el uso de expresiones lgicas, un ejemplo de ello es validar un e-mail, los cuales llevan un nombre antes y despus de un carcter especifico que es el @. nombre@algo.com

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

93

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

94

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

Cuadro 22.3

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 adems puedes comparar una caja de texto con un valor ya predefinido por ti, por ejemplo que el e-mail siempre tenga que ser nombre@algo.com, de lo contrario marcaria un error al usuario.

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

Cuadro 22.4

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

95

El control ValidatorSumary muestra en pantalla la descripcin 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 validacin 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 diseo si as lo deseas.

Cuadro 22.5

Cuadro 22.6 DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET 96

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:

Cuadro 29.1

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

97

Mostrara el cuadro de dialogo para elegir la conexin, da clic en el botn Nueva Conexin y desplegara la siguiente pantalla:

Cuadro 29.2

Prueba la conexin con el botn Test Connection:

Cuadro 29.3

Ya elegido el origen de datos aparecer la siguiente pantalla donde guardaremos la cadena de conexin:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

98

Cuadro 29.4

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

Cuadro 29.5

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

99

Pulsa el botn siguiente para obtener una vista previa de lo que ser el resultado de los campos que seleccionaste:

Cuadro 29.6

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

100

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:

Cuadro 29.7

Cuadro 29.7

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

101

Cuadro 29.8

Como habrs visto el asistente nos ofrece varias formas para mostrar nuestros datos, como lo es la clusula WHERE, ORDER BY, y la opcin Return Only Unique Rows. El siguiente ejemplo te mostrara la funcin que tiene esta ltima opcin:

Cuadro 29.9

Lo que se quiere es que se muestre UserName con su respectivo Email slo una vez por usuario y no que muestre al usuario con su correo tantas veces como este haya realizado una transaccin.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

102

Este es el resultado que muestra si no activamos dicha opcin.

Este es el resultado que muestra cuando activamos dicha opcin.

Cuadro 29.10 Comparativa.

La Clausula WHERE nos muestra todos los datos de una tabla pero definidos por un parmetro.

Cuadro 29.11

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

103

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

Cuadro 29.12

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

104

El resultado de esta operacin ser:

Cuadro 29.13

En la clusula ORDER BY puedes indicar que se muestren los datos bajo un orden establecido por tus criterios.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

105

Trabajar con controles de datos. Control gridview


El control GridView muestra los datos de una tabla o vista, adems puede ser usado para aadir, 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 ms sencilla de mostrar de usar este control, es nicamente arrastrando una tabla creada por nosotros al sitio donde queramos y los datos se vern en un GridView por defecto:

Cuadro 30

Puedes probar esto en el navegador:


DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET 106

Cuadro 30.1

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:

Cuadro 30.2

Si esto lo probamos en el navegador mostrara algo as:

Cuadro 30.3

Si lo que quieres es que se muestren slo algunos datos de la tabla, entonces ahora si tienes que arrastrar el control GridView al

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

107

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.

Cuadro 30.4

Al igual que los dems controles puedes cambiarle el formato

tanto a la tabla como a la fuente.

Cuadro 30.5

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

108

Mostrar la siguiente pantalla donde podrs elegir uno de tantos diseos que VWD ofrece:

O
Cuadro 30.6 Ejemplo.

bien puedes dar clic en la opcin de Editar Columnas y formatear manualmente:

Cuadro 30.7

Recuerda que tambin puedes modificar sus propiedades en su respectivo cuadro de propiedades.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

109

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:

Cuadro 30.8

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

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

110

Posteriormente se tiene que habilitar el AutoPostBack de la lista de tareas de dicho control, y despus agregar un control GridView; en el cual tambin tendrs que indicar una base de datos. Para esto pulsa la opcin nuevo origen de datos y no selecciones las bases de datos que te muestra en las opciones, aunque si, tienes que elegir la misma conexin, 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.

Cuadro 30.10

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

111

Cuando elijas los campos que quieres que se muestren en este control, asegrate que uno de estos campos sea una llave fornea de la tabla que utilizaste para obtener los datos del control DropDownList. Para que este filtro est completo se configura la clusula WHERE. de la siguiente manera:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

112

En vista navegador se mostrara de la siguiente manera:

Cuadro 30.13

Control detailsview
Este control es usado para mostrar, editar, aadir y borrar datos de las tablas, la diferencia principal que presenta con respecto al Gridview es que mientras que el Gridview esta diseado para mostrar mltiples filas y columnas el DetailsList esta diseado para trabajar con un registro de uno por uno.

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

Cuadro 30.14

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.
DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET 113

Cuadro 30.15

Pulsamos el botn de Avanzadas para indicar que queremos que los datos se puedan modificar, eliminar e insertar nuevos.

Cuadro 30.16

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

114

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

Cuadro 30.17

En el navegador se vera algo as:

Cuadro 30.19 Edicin. Cuadro 30.18 Paginacin.

Cuadro 30.20 Insercin.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

115

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:

Control GridView Cuadro 31

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

116

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 opcin Devolver slo filas nicas y en la clausula ORDER BY filtramos por

UserName de forma ascendente.

Cuadro 31.1

Recuerda habilitar la opcin AutoPostBack para que posteriormente este control pueda utilizarse como filtro para el control GridView. Para el segundo control (GridView) elegimos tambin un nuevo origen de datos. Seleccionamos los campos que queremos que se muestren y en la clausula WHERE le indicamos que el filtro sea por medio del control DropDownList. Ver cuadro 30.12 No te olvides de habilitar la opcin de seleccin 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 clusula WHERE se configurara de la siguiente manera:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

117

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 edicin y eliminacin 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 vaca si no que muestre un mensaje:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

118

Cuadro 31.3

Elegimos la opcin de plantilla para datos vacios:

Cuadro 31.4

Y escribimos el texto:

Cuadro 31.5

Y por ltimo pulsamos en la opcin Terminar edicin de plantilla de la lista de tareas.

Cuadro 31.6

Dale un formato y prubalo en el navegador. Antes de que el usuario seleccione una transaccin para mostrar, el control DetailsView mostrara la plantilla:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

119

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

adro 31.8

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

120

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 configuracin 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 dilogo. Elija la plantilla Sitio Web ASP.NET, configure la ubicacin 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 pgina web con un Default.aspx pgina 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 adicin de una base de datos para el Explorador de servidores puede agregar tablas, procedimientos almacenados, vistas, etc, todo desde Visual Studio. Tambin puede ver los datos de la tabla o crear sus propias consultas ya sea a mano o grficamente a travs del Generador de consultas. Adems, cuando construimos los conjuntos de datos con tipo para el DAL tendremos que

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

121

punto de 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 informacin de conexin en ese punto en el tiempo, Visual Studio rellena automticamente 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 configuracin 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 conexin. 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 dilogo Agregar conexin, en el que puede especificar el servidor para conectarse a la informacin de autenticacin y el nombre de base de datos. Una vez que haya configurado correctamente la informacin de conexin de bases de datos y hacer clic en el botn 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.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

122

Creacin de un DataSet tipeado y el Dataadapter


Para empezar a crear nuestra DAL, se inicia mediante la adicin 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 opcin 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 adicin 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 opcin de conjunto de datos de la lista de plantillas y el nombre de Northwind.xsd .

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

123

Figura 4 : optar por aadir un nuevo conjunto al proyecto


Despus de hacer clic en Agregar, cuando se le pida para aadir el conjunto de datos a la App_Code carpeta, seleccione Si. El Diseador de DataSet se mostrar, y el Asistente para la configuracin 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 informacin sobre cmo 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 mtodos GetProducts () , GetProductByCategoryID ( IdCategora ) , y as sucesivamente que vamos a invocar a partir de la capa de presentacin. 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 configuracin 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 botn Nueva conexin en este momento para hacerlo.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

124

A continuacin, tenemos que definir el esquema de la primera DataTable inflexible de tipos y dar el primer mtodo para nuestro TableAdapter utilizar al rellenar el DataSet con tipos declarados. Estos dos pasos se llevan a cabo al mismo tiempo mediante la creacin 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 mtodo a esta pregunta. Una vez que se ha logrado, este mtodo puede ser invocado de nuestra capa de presentacin. El mtodo se ejecutar la consulta definida y rellenar un DataTable con establecimiento inflexible.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

125

Para comenzar a definir la consulta SQL, primero debemos indicar cmo 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 artculo 's, construir una capa de acceso a datos con el Diseador 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 mtodo 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 creacin de una consulta que devuelve todas las columnas y todas las filas de los Productos de la tabla:

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

126

Como alternativa, utilice el Generador de consultas y grficamente construir la consulta, como se muestra en la Figura 9.

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

127

Despus de crear la consulta, pero antes de pasar a la siguiente pantalla, haga clic en el botn Opciones avanzadas. En proyectos de sitios Web, "Generar instrucciones Insert, Update y Delete" es la nica opcin avanzada seleccionada por defecto, si se ejecuta este asistente desde una biblioteca de clases o un proyecto de Windows la opcin "Usar concurrencia optimista" opcin tambin sern seleccionados. Deje la opcin "Usar concurrencia optimista" opcin desactivada por el momento. Vamos a examinar la concurrencia optimista en futuros tutoriales.

Despus de comprobar las opciones avanzadas, haga clic en Siguiente para pasar a la pantalla final. Aqu se nos pide que seleccione los mtodos para agregar a la TableAdapter. Hay dos modelos para rellenar los datos: Llenar un DataTable con este enfoque se ha creado un mtodo que toma en un DataTable como parmetro, que se llena basndose en los resultados de la consulta. La clase DataAdapter de ADO.NET, por ejemplo, implementa este modelo con su relleno () mtodo. Devuelve una DataTable con este enfoque, el mtodo crea y llena el DataTable para usted y lo devuelve como el valor de retorno mtodos.

Usted puede tener el TableAdapter implementar uno o ambos de estos patrones. Tambin puede cambiar el nombre de los mtodos establecidos aqu. Vamos a dejar las dos casillas marcada, a pesar de que slo va a utilizar el ltimo modelo a lo largo de estos tutoriales. Adems, vamos a cambiar el nombre del lugar genrico GetData mtodo para GetProducts .

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

128

Si est activada, la casilla de verificacin final, "GenerateDBDirectMethods," crea Insert () , Update () y Delete () los mtodos de TableAdapter. Si deja esta opcin sin marcar, todas las actualizaciones se deben hacer a travs del TableAdapter nico Update () mtodo, 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 ningn efecto.) Vamos a dejar esta opcin est activa.

Completar el asistente, haga clic en Finalizar. Despus se cierra el asistente que se devuelven al Diseador 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 mtodos de la ProductsTableAdapter ( Fill () y GetProducts () ).

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

129

El siguiente cdigo de ejemplo muestra como se utiliza el DataSet tipeado, asi como las implementaciones bsicas de mostrar, insertar, modificar y actualizar, de una tabla llamado usuarios de un formulario web. Se muestra el formulario de ejemplo

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

130

Imports datos Partial 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) Me.GridView1.DataBind() End Sub End Class

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

131

Algunas anotaciones: El imports Datos, se es la utilizacin de el dataset, precisamente al crearlo se le denomino Datos. Para utilizar los mtodos de llenado o actualizacin, es necesario crear el datatable por medio de este cdigo 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()

DISEO DE PGINAS WEB BAJO LA PLATAFORMA .NET

132

You might also like