Esta entrada pretende mostrar como se crea un proyecto web con VS.NET, pero además algunas características de los proyectos web.
Glosario
- ViewState: es un contenedor de variables que viaja en cada petición entre el servidor y el cliente mediante un campo Hidden. EL viewSate permite almacenar información de estado de la página como , los valores de los controles, el ID de la sesión (no siempre), Variables del usuario. Este contenedor tiene la particularidad de que solo es visible por la página que hace la petición o se re-transmite al cliente y debe ser reconstruido en cada petición.
Indice
Parte 1- Pasos para crear el primer proyecto
- Primera página
- Componentes de un proyecto web
- Ejecutando un proyecto web
- Ciclo de vida de una página web en .NET
- Utilizando los eventos comunes de los controles de usuario
Pasos para crear el primer proyecto
Como se muestra a continuación, la creación de un proyecto web básico es bastante fácil y rápido; lo primero que se debe hacer es seleccionar el tipo de proyecto:
Primera página
Como muestra la siguiente imagen, inmediatamente después de seleccionar y aceptar el tipo de proyecto "Aplicación web ASP.NET", el entorno presenta una página lista para ser ejecutada (Default.aspx).
En la imagen se han hecho 5 divisiones que corresponden a:
1) Es donde se podrá ver el código ASPX (HTML) de la página
2) Es Donde se puede ver como está quedando gráficamente la página construida
3) Aquí se podrá cambiar el modo de vista para ver solo el diseño de la página, solo el código o como en este caso una combinación de ambas.
4) El panel llamado "Explorador de soluciones" permite ver todos los archivos que hacen parte del proyecto
5) El panel de "Propiedades" permitirá cambiar las propiedades de los controles de forma cómoda.
Además de los anteriores también se cuenta con paneles como "Cuadro de herramientas" (lado izquierdo), el cual contiene todos los controles de usuario que se pueden poner en la página.
Componentes de un proyecto web
Como se mencionó anteriormente el "Explorador de soluciones" permite ver todos los archivos del proyecto, a continuación se detallara la función de cada uno:
- Properties: Contiene la información de configuración del proyecto: NameSpace, Versión del FrameWork a utilizar, Algunas opciones de despliegue, entre otras cosas.
- References: aquí se podrá encontrar y agregar (mediante el botón secundario) , las librerías que permiten dar cierta funcionalidad al aplicativo, por ejemplo la conexión con base de datos.
- Acount: es una carpeta que contiene formularios para que el usuario inicie sesión o se registre, si se desea puede ser borrada.
- App_Data: es una carpeta que podrá contener una base de datos, si se desea se puede eliminar.
- Scripts: es una carpeta con los scripts js (javascript), no debería ser borrada ya que estos scripts pueden ser de mucha utilidad.
- Styles: Aquí se deben puede encontrar la hoja de estilos (CSS), es recomendable dejarla y poner todos los estilos del sitio en esta carpeta.
- About y Default.aspx: son páginas de ejemplo creadas por el VS.NET, pueden ser eliminadas. Adicionalmente, se puede ver que cada página está compuesta por 3 archivos, el aspx propiamente un aspx.cs que contendrá la lógica que se programe y un aspx.designer.cs, el cual también es un archivo de código que VS creará y editará de forma automática cada vez que se agregue o elimine un control a la página.
- Global.Asax: este archivo contiene algunos eventos generales al sitio, por ejemplo, cuando un usuario abre sesión, cuando el usuario sierra sesión, cuando el aplicativo incia, entre otros.
- Site.Master, es una página que sirve de marco para todas las demás, de forma que todas las páginas que hereden de ella tendrán el mismo estilo y distribución visual.
- web.config: este archivo no se debe eliminar ya que contiene información muy relevante para el proyecto como cadenas de conexión, restricciones de seguridad, referencias a librerías entre otros. También puede ser usado para almacenar parámetros de configuración que el desarrollador del aplicativo puede usar durante la ejecución de las páginas.
Ejecutando un proyecto web
Para ejecutar el proyecto creado basta con dar click en el botón que muestra la página o bien presionar la tecla "F5"
lo cual presentará lo siguiente:
Ciclo de vida de una página web en .NET
Hasta aquí, todo muy fácil y muy bonito!!, sin embargo para construir un sitio web funcional es necesario hacer algunas cosas más. Y antes de hacer algunas cosas más, se debería saber como funcionan las páginas que se crean en .NET.A continuación se verá un fragmento del código de una página con su respectiva explicación (Normalmente no se usan todos los métodos aquí expuestos):
| using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace Mi_Primera_Aplicacion { public partial class _Default : System.Web.UI.Page { protected void Page_PreInit(object sender, EventArgs e) { /* * Este es el primer paso que da .NET cuando construye una página * Se usa principalmente para la gestión de controles dinámicos. * En este punto ya es posible saber si la página se procesa por * primera vez o es un re-proceso (usando la propiedad: IsPostBack). * * No se deben asignar valores a los controles que luego pueden * ser modificados en los eventos siguientes. */ } protected void Page_Init(object sender, EventArgs e) { /* * En este momento se inicializan los controles, es un buen * momento para asignar valores a las propiedades de estos. */ } protected void Page_InitComplete(object sender, EventArgs e) { /* * Ocurre cuanto termina de inicalizar los controles y permite * asignar valores al ViewSate mediante programación sin que se * pierdan en cada PostBack (procesamiento de las página). */ } protected void Page_PreLoad(object sender, EventArgs e) { /* * Cuando se llega a este evento, la página ya ha cargado la * información del ViewState que tiene de si misma y además * ya ha procesado los datos que el cliente envión en el PostBack. */ } protected void Page_Load(object sender, EventArgs e) { /* * Este evento aparece siempre que se crea una nueva página. * * En este punto todos los controles ya tiene su respectivo valor * y pueden ser analizados sin sorpresas. * * Micrsosoft lo promueve como un buen método para establecer * conexiones a bases de datos. * * Es importante considerar que este evento se dispara antes de los * eventos de los controles, así, cada vez que se haga un click o * se cambie el valor seleccionado de un combo o cualquier otro, * este evento estará para asegurar el valor de los controles y * luego se invocará el evento que corresponda con lo que haya pasado * en el cliente. */ } /* ---- Eventos de control o de los controles ---- */ /* * Los eventos de los controles son las funciones que se llaman cada * vez que alguno de los controles de usuario, en el navegador * (Botones, listas, combos, checkbox, etc), así lo solicita, normalmente * porque su valor a cambiado. */ protected void Page_LoadComplete(object sender, EventArgs e) { /* * Este método se ejecuta luego de todos los eventos de los controles * es útil para asignar valores finales luego de los procesamientos * realizados. */ } protected void Page_PreRender(object sender, EventArgs e) { /* * Aquí ya se tienen todos los controles listos y debería ser * el ultimo momento para cambiar valores antes de que se empiece * construya la página tal como la vería el cliente en su navegador. * * Luego de este evento también se disparan eventos equivalentes * para cada control. */ } protected void Page_PreRenderComplete(object sender, EventArgs e) { /* * Se dispara luego de que los controles enlazados a datos llamen * sus métodos DataBind(). */ } protected void Page_SaveStateComplete(object sender, EventArgs e) { /* * Aquí ya se ha guardado el ViewState y todos sus valores, * aunque pueden ser alterados y esos cambios sean vistos por * el cliente, los cambios no podrán ser recuperados en el próximo * PostBack. */ } protected void Page_Render(object sender, EventArgs e) { /* * Aquí se crean el marcado de los controles tal como los verá el cliente */ } protected void Page_Unload(object sender, EventArgs e) { /* * Es el último evento antes de entrar la página al cliente. * es útil para tareas de limpieza o para cerrar conexiones. * * En este evento ya no se permite ningún cambió a la página * ya que todos los controles se han representado según los datos * contenidos. */ } } } |
Referencias:
No hay comentarios:
Publicar un comentario