Dattatec - Centro de Información

Creando nuestro primer sitio Web con ASP.net

Publicado: 19. ene, 2010 en Microsoft, Programación |  Enviar a un amigo

Nos iniciaremos en ASP.net creando un sitio Web desde cero, donde, en la página principal desplegaremos el contenido de una tabla de nuestra base de datos sin necesidad de crear una sola línea de código.

Esta artículo fue publicado originalmente en la edición de enero de 2009 de DattaMagazine, la revista de tecnología de Dattatec.
Autor: Matías Iacono – matias.iacono@dattamagazine.com

En el artículo anterior nos introdujimos en el mundo de ASP.net, analizando algunas de las principales características tales como costos de herramientas de desarrollo, facilidad de uso, aumento en la velocidad de desarrollo, entre otros.
También hablamos sobre alguno de los componentes listos para ser usados en nuestros desarrollos, en especial, el componente GridView, el cual nos permitía mostrar tablas de nuestra base de datos de forma fácil y rápida.
En esta ocasión nos iniciaremos en ASP.net creando un sitio Web desde cero, donde, en la página principal desplegaremos el contenido de una tabla de nuestra base de datos sin necesidad de crear una sola línea de código.

Antes de empezar.

Antes de comenzar es necesario que tengamos en cuenta algunas cuestiones relacionadas a la configuración y funcionamiento de nuestros sitios Webs en ASP.net; como primera medida es recomendable contar con Internet Information Services (IIS). IIS es el servidor Web de Microsoft, el mismo que trabaja bajo sistemas operativos Windows. Podemos encontrar IIS en versiones de Windows XP Professional, Windows 2000 y 2003 Server, así como en Windows Vista Home Premium o superior. La función de IIS es la de “hospedar” o manejar nuestras páginas para que puedan ser visitadas por otros usuarios. Además, será necesario contar con el Microsoft .Net Framework instalado en nuestro equipo (como desarrolladores) y en el servidor, donde se alojarán definitivamente nuestras páginas.
Hoy no tocaremos estos aspectos de instalación y configuración de IIS y el .Net Framework y los dejaremos para un siguiente artículo. Aún así, no debemos pensar que nos será imposible trabajar con nuestras páginas esto debido a que las herramientas de Microsoft para el desarrollo Web traen consigo un pequeño servidor llamado “Casini”, el mismo que se ejecutará en el momento en que queramos visualizar nuestro trabajo de manera local. Así, todas las pruebas que hagamos podremos ejecutarlas y manipularlas. Al mismo tiempo, al instalar cualquiera de las herramientas de desarrollo, también, se instalará el .Net Framework con la versión adecuada para que tanto la herramienta como el producto desarrollado trabajen de manera armónica.
De esta manera, estamos listos para crear nuestro primer sitio Web de ASP.net.

Creando el sitio Web.

Debido a que nuestro sitio Web es un conjunto de páginas Webs, este puede ser creado en cualquier lugar. Mediante el menú Archivo > Nuevo Proyecto, podremos acceder a todas las opciones relacionadas a distintos tipos de proyectos o aplicaciones que queramos crear.
En la imagen 1, vemos la ventana que nos permitirá seleccionar el tipo de proyecto, y las características del mismo.

Los distintos proyectos no solamente nos permitirán crear sitios Webs, si no, otro tipo de elementos necesarios en el desarrollo de aplicaciones Webs actuales. Podemos listar algunos como Servicios Web, Controles Web, Aplicaciones Web con A.J.A.X., entre otros.
Una vez seleccionado el tipo de proyecto, Aplicación Web ASP.net para nuestro caso, podremos especificar el lugar físico donde está se alojará. Esta carpeta será, de ahora en adelante, nuestra carpeta de trabajo.
Al finalizar el proceso de creación tendremos nuestro sitio Web de ASP.net listo para desarrollar.

GridView y nuestra base de datos.

Una vez creado el sitio Web, una de las primeras cosas que podemos notar es un archivo llamado “Default.aspx”. Esta es la página inicial de nuestro sitio Web y con la que trabajaremos en este ejemplo. Como detalle, las páginas en ASP.net poseen la extensión “.ASPX”, y si bien la extensión difiere de “.HTML” o “.HTM”, el resultado de la misma será HTML, lo que garantizará que cualquier navegador de Internet pueda procesarla y visualizarla.
Otra peculiaridad es la de la carpeta “App_Data”. Esta carpeta es usada comúnmente para alojar en ella archivos para el manejo de datos, ya sean documentos de texto, archivos XML, o bases de datos de SQL Server Express.

Una de las tantas excelentes características de las herramientas de desarrollo es que podemos crear bases de datos y manipularlas desde la misma herramienta. Esto, si no contáramos con una base de datos existente, con sólo apretar el botón izquierdo del mouse sobre la carpeta “App_Data”, podremos agregar una nueva base de datos. Y, a la izquierda de la herramienta podremos acceder a la misma para agregar, quitar, o editar tablas y registros.
Para este ejemplo, asumiremos que contamos con una base de datos, ya sea una versión de SQL Server Express, o cualquier otro motor que pueda ser accedido desde nuestra computadora.
Para agregar un nuevo GridView simplemente deberemos arrastrarlo (o hacer doble click) sobre el componente de la lista de componentes en la caja de herramientas de la izquierda.
Una vez realizado esto, el componente estará incluido en nuestra página esperando por la conexión a la base de datos.

Prácticamente todos los componentes en ASP.net poseen una lista de propiedades configurables accesibles desde el mismo componente una vez adicionado a nuestra página. Estas configuraciones pueden ser encontradas seleccionando el componente, el mismo que mostrará un botón con una fecha. Al hacer click sobre éste, la lista de opciones más comunes será mostrada.
Básicamente, lo que necesitamos hacer es enlazar nuestro GridView con una fuente de datos, y para ello es necesario definir dicha fuente de datos. Si no contamos con una, al seleccionar la fuente de datos se nos mostrará la opción de crear una nueva. Como acto seguido, deberemos seleccionar el tipo de base de datos a la cual queremos conectarnos. Entre algunas de las opciones podremos encontrar archivos XML, bases de datos Access, bases de datos SQL Server, entre otras.
Dependiendo del motor de bases de datos que estemos usando, esta será nuestra selección. En cualquier caso, el resultado siguiente será similar para cualquier modelo elegido.

Se nos pedirá seleccionar la base de datos de la cual obtener datos, al mismo tiempo que se guardará la cadena de conexión para su uso posterior.
A continuación, si la conexión fue satisfactoria, podremos observar la lista de tablas, procedimientos almacenados, vistas y funciones disponibles en dicha base de datos, lo que nos servirá para poder especificar el lugar de donde obtener la información.
También podremos seleccionar aquellos campos que querremos mostrar en la página. De cualquier manera, si somos hábiles en el desarrollo de consultas SQL, también podremos crearlas por nuestra cuenta.
Como siguiente y último paso, el asistente nos otorgará la posibilidad de probar nuestra consulta y así validar que los datos traídos son los que estamos buscando.
Notaremos que al momento de finalizar con el asistente, el componente GridView se reformateará, acomodando cada columna a su equivalente en la consulta SQL previamente realizada.
También podremos ver que dentro de las propiedades del componente, nuevas opciones aparecerán, tales como “ordenamiento”, “paginado”, entre otras.
La ventaja radica en que con sólo hacer uso del mouse, podremos mejorar la experiencia del usuario agregando paginado u ordenamiento a nuestro conjunto de datos.
Finalmente, podremos darle al componente una apariencia visual más atractiva. Si bien podremos modificar los valores individualmente, si quisiéramos obtener un resultado rápido, en la opción “Auto Formato” encontraremos una serie de temas de colores listos para ser aplicados al componente.
En este punto, ya tenemos un componente GridView, el cual mostrará un tabla HTML, con columnas y filas, enlazado a una fuente de datos, con capacidades de paginado y ordenado por columnas, y además, con un esquema de colores atractivo.

Conclusiones.

El componente GridView, así como la mayoría de componentes ASP.net goza de la posibilidad de enlazarse a datos casi automáticamente. Con una serie de clicks podemos configurar toda una página Web, su comportamiento e interacción con el usuario, así como el manejo de datos, la autenticación, entre otros.
En este artículo vimos los pasos a seguir para generar una lista de datos en forma de tabla (columnas por registros), desde una base de datos, paginando sus resultados y dando la capacidad de ordenar cada columna independientemente. Este trabajo suele tomar varias horas en otras tecnologías, algo que con ASP.net puede tomar no más de 5 minutos.

Encontrá más artículos de Matías Iacono en DattaMagazine.com.

Tags: ASP, ASP.net, crear sitio web en ASP, Matías Iacono, Microsoft, Programación