Tutorial de desarrollo web con ASP.NETASP.NET es un modelo de desarrollo Web unificado creado por Microsoft para el desarrollo de sitios y aplicaciones web dinmicas con un mnimo de cdigo. ASP.NET forma parte de.NET Framework que contiene las libreras necesarias para la codificacin. Se pueden usar distintos lenguajes de programacin para realizar aplicaciones web en ASP.NET, pero nosotros nos vamos a enfocar en el lenguaje C# (C Sharp) que es el ms utilizado para este tipo de desarrollos. Requisitos de desarrollo ASP.NET Para desarrollar aplicaciones ASP.NET, es necesario tener:

Un editor de cdigo. .NET Framework. Un servidor Web como IIS (Servicios de Internet Information Server)

Adicionalmente a la programacin web es necesario en muchos casos contar con algn soporte para el almacenamiento de datos. Lo ideal es contar con un motor de base de datos (SQL Server, Oracle, etc.) pero para esta gua vamos a persistir la informacin en soportes que estn al alcance de todos. Editor de cdigo Para programar pginas en ASP.NET alcanza con tener un editor de texto estndar (Notepad, Notepad++) pero existen herramientas con un entorno de desarrollo integrado (IDE) que nos facilita el acceso a las libreras del Framework y nos brinda un entorno amigable para la creacin de aplicaciones web en ASP.NET como el Visual Studio. En esta gua utilizaremos este IDE para abordar los ejemplos. Podemos descargar la versin Express en: http://www.microsoft.com/express/Downloads/. .NET Framework Es un conjunto de clases que actuarn de soporte de las aplicaciones ASP.NET que tengamos instaladas en nuestro equipo. Es de distribucin gratuita y se puede descargar desde la pgina de Microsoft. (Incluido al Visual Studio .NET).

Servidores Web Una aplicacin ASP.NET adems de contar con el .NET Framework instalado necesita de un Servidor Web. Vamos a utilizar el IIS (Internet Information Server). El IIS viene como complemento de instalacin de Windows; si dentro de nuestros servicios en ejecucin no contamos con Internet Information Server debemos agregarlo al equipo donde instalaremos nuestras aplicaciones. Captulos del Tutorial Te recordamos que este es un Tutorial de desarrollo web con ASP.NET estructurado en 15 captulos que se irn publicando dos veces a la semana con la teora necesaria para comprender cmo funciona esta tecnologa, los ejercicios prcticos para que vayas aplicando el cdigo y este espacio para plantear tus dudas sobre cada captulo.

Nuestra primera pgina web En el primer captulo del Tutorial de desarrollo web con ASP.NET vimos una introduccin y los requisitos para el desarrollo. Ahora, ya contamos con un equipo con IIS, .NET Framework y un entorno de desarrollo, vamos a crear nuestra primera aplicacin web en ASP.NET. Mi primera aplicacin ASP.NET ? 01 02 03 04 05 protected void btnAceptar_Click(object sender, EventArgs e) 06 { 07 08 09 } 10 lblResultado.Text = txtNombre.Text; txtNombre.Text = string.Empty;

11 12 13 14 Mi primera aplicacion - Maestros del Web

15 16 17 18 19 20 21 22 23 24

25 26 27 Cmo probamos nuestra primera aplicacin? 1.- Abrimos el Bloc de Notas, copiamos el cdigo.

2.- Guardamos el archivo con el nombre Default.aspx

3.- Creamos nuestro espacio virtual en el IIS

a.- Abrimos el IIS y creamos un nuevo directorio virtual. b.- Ingresamos el nombre que tendr nuestra aplicacin web.

c.- Indicamos el directorio donde guardamos nuestra pagina web Default.aspx.

Seguimos hasta el final para que quede creada nuestro directorio virtual. Listo, ya tenemos nuestra primera aplicacin ASP.NET instalada para probar. Ahora abrimos nuestro browser y escribimos en la barra de direccin: http://localhost/MiPrimeraAplicacionWeb/Default.aspx

Estructura de nuestra aplicacin web. La estructura de nuestra primera aplicacin es la ms simple. 1.- Contiene una directiva:

Le estamos indicando que la pagina usar lenguaje C# (C Sharp) 2.- Cdigo en lnea: ? 1 2 protected void btnAceptar_Click(object sender, EventArgs e) 3 { 4 5 6 } 7 lblResultado.Text = txtNombre.Text; txtNombre.Text = string.Empty;

El tag script est indicando que el cdigo se ejecutar del lado del servidor. En esta porcin del cdigo van las acciones que ejecutaremos en nuestra aplicacin; en este caso slo tenemos una nica accin asociada al botn Aceptar. 3.- Cdigo HTML para la creacin de objetos en pantalla. ? 01 02 03 04 05 06 07 08 09 10 11 Mi primera aplicacion - Maestros del Web

12

13 14 15 En pantalla vemos tres objetos 1. Un TextBox llamado txtNombre (Para ingresar un nombre). 2. Un Botn llamado btnAceptar y con el evento OnClick definido (Ejecutamos la accin de pegar contenido). 3. Un label de resultados llamado lblResultado. (Mostramos los resultados luego de ejecutar el evento del botn). Creacin de un proyecto ASP.NET con Visual Studio 1.- Abrimos Visual Studio .NET y creamos un nuevo proyecto web.

2.- Seleccionamos el tipo de proyecto que deseamos realizar.

a.- Seleccionamos ASP.NET Web Site, b.- Indicamos la ruta donde vamos a guardar el proyecto: c:\MaestrosDelWeb\GuiaASPNET c.- Determinamos el lenguaje que vamos a utilizar. Visual C#. Por ltimo presionamos el botn OK para crear la solucin. 3.- Una vez creada la solucin el IDE genera el primer template.

En la pantalla de edicin de cdigo copiamos y pegamos el cdigo anterior y ya tenemos nuestra primera pgina web dentro del entorno de desarrollo integrado.

Para ejecutar la aplicacin dentro del entorno de desarrollo presionamos la tecla F5 y nos pregunta si deseamos habilitar el modo de debug. Presionamos OK.

A continuacin se abre nuestro Browser predeterminado ejecutando la aplicacin en modo debug. Al trabajar con un entorno de desarrollo no es necesario crear un espacio virtual en el IIS ya que la misma aplicacin se encarga de preparar el ambiente. Ejecutar cdigo JavaScript en ASPNET En el primer captulo del Tutorial de desarrollo web con ASP.NET vimos una introduccin y los requisitos para el desarrollo, en el segundo creamos nuestra primera aplicacin web en ASP.NET y en el tercero vamos a ejecutar cdigo JavaScript en ASPNET.

Agregaremos funcionalidad JavaScript a la ya codificada en C#. Una forma sencilla de implementar JavaScript en ASP.NET es agregando un atributo al control del servidor que queremos que ejecute una funcin JavaScript. Dentro del TAG HEAD escribimos lo siguiente. ? 1 2 3 4 5 6 7 } function fnAceptar() { alert('El Contenido del TextBox es: ' + document.getElementById("txtNombre").value); document.getElementById("txtNombre").value = '';

Ahora necesitamos indicarle a ASP.NET que necesitamos ejecutar esa funcin desde el botn. ? 1 2 protected void Page_Load(object sender, EventArgs e) 3 { 4 5 } 6 Aqu asignamos la funcin fnAceptar al evento OnClick del botn. El cdigo completo quedara de esta forma. ? 01 02 03 04 this.btnAceptar.Attributes.Add("OnClick", "javascript:return fnAceptar();");

05 06 protected void Page_Load(object sender, EventArgs e) 07 { 08 09 } 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 }
Mi primera aplicacion - Maestros del Web function fnAceptar() { alert('El Contenido del TextBox es: ' + document.getElementById("txtNombre").value); document.getElementById("txtNombre").value = ''; this.btnAceptar.Attributes.Add("OnClick", "javascript:return fnAceptar();");

32

33 34 Hasta el momento vimos como conviven cdigo C# y JavaScript en un mismo archivo ASPX. Ya es hora de separar el cdigo en distintos archivos para mejorar el mantenimiento y lectura. Vamos a agregar un archivo JavaScript a nuestro proyecto ASPNET, mover el cdigo JavaScript a ese archivo y referenciarlo desde nuestra pgina aspx.

Llamaremos a nuestro archivo JSCode.js. Abrimos el archivo y copiamos el cdigo JavaScript que inicialmente escribimos en nuestra pgina aspx.

Ahora eliminamos el cdigo JavaScript de la pgina aspx y hacemos referencia al archivo .jsdentro del tag HEAD. De esta forma evitamos llenar nuestro aspx con cdigo que hace difcil la lectura. Tambin se puede separar el cdigo C# de una forma similar al que acabamos de ver con JavaScript, pero lo veremos en unos captulos ms adelante. ClientScript.RegisterStartupScript Una forma de usar cdigo JavaScript desde una pgina ASP.NET es utilizando el mtodoRegisterStartupScript de la clase ClientScript, que nos permite registrar un script en tiempo de ejecucin para su posterior utilizacin. Ejemplo: Creamos la funcin en C#

? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 } private void RegistrarScript() { const string ScriptKey = "ScriptKey"; if (!ClientScript.IsStartupScriptRegistered(this.GetType(), ScriptKey)) { StringBuilder fn = new StringBuilder(); fn.Append("function fnAceptar() { "); fn.Append("alert('El Contenido del TextBox es: ' + document.getElementById(\"txtNombre\").value); "); fn.Append("document.getElementById(\"txtNombre\").value = '';"); fn.Append("}"); ClientScript.RegisterStartupScript(this.GetType(), ScriptKey, fn.ToString(), true); }

Es la misma funcin usada anteriormente fnAceptar() ahora registrndola desde ASP.NET. Luego hacemos la llamada a la funcin desde el Page_Load(). RegistrarScript(); Sin necesidad de un archivo .js ni escribir el cdigo JavaScript en la seccin de HTML. Cdigo completo: ? 01 02 03 04 05 06 protected void Page_Load(object sender, EventArgs e)

07 { 08 09 10 11 12 13 } 14 private void RegistrarScript() 15 { 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 } Mi primera aplicacion - Maestros del Web } const string ScriptKey = "ScriptKey"; if (!ClientScript.IsStartupScriptRegistered(this.GetType(), ScriptKey)) { StringBuilder fn = new StringBuilder(); fn.Append("function fnAceptar() { "); fn.Append("alert('El Contenido del TextBox es: ' + document.getElementById(\"txtNombre\").value); "); fn.Append("document.getElementById(\"txtNombre\").value = '';"); fn.Append("}"); ClientScript.RegisterStartupScript(this.GetType(), ScriptKey, fn.ToString(), true); } if (!IsPostBack) { this.btnAceptar.Attributes.Add("OnClick", "javascript:return fnAceptar();"); RegistrarScript();

34 35 36 37 38 39 40 41 42

43 44 45

Archivos Web.Config y Global.asax El archivo Global.asax es opcional y nos permite manejar eventos de Aplicacin y de Session en nuestra aplicacin ASP.NET. El archivo Global.asax reside en el directorio raz de una aplicacin de ASP.NET. Este archivo se compila en tiempo de ejecucin, no es accesible por URL y debe ubicarse en el directorio raz de la solucin. Template Global.asax: ? 01 02 void Application_Start(object sender, EventArgs e) { 03 // Codigo que se ejectura cuando inicia la aplicacion 04 } 05 void Application_End(object sender, EventArgs e) { 06 // Codigo que se ejectura cuando finaliza la aplicacion 07 }

08 void Application_Error(object sender, EventArgs e) { 09 // Codigo que se ejectura cuando ocurre algun error en la aplicacion 10 } 11 void Session_Start(object sender, EventArgs e) { 12 // Codigo que se ejectura cuando se inicia la sesion. 13 } 14 void Session_End(object sender, EventArgs e) { 15 // Codigo que se ejectura cuando finaliza la sesion. 16 } 17 El uso clsico es el contador de visitas que debe sumar por cada usuario que ingrese al sitio web. El evento que se ejecuta por cada ingreso esSession_Start. Ejemplo: Cdigo en Gobal.asax: Inicializamos una variable en 0 al iniciar la aplicacin y luego por cada inicio de sesin la incrementamos y la cargamos a una variable de sesin para poder acceder a ella desde el resto de la aplicacin. ? 01 private int cnt; void Application_Start(object sender, EventArgs e) { // Codigo que se ejectura cuando inicia la aplicacion 02 cnt = 0; 03 } void Session_Start(object sender, EventArgs e) { // Codigo que se ejectura cuando se inicia la 04 sesion. 05 Session["cv"] = cnt++; 06 C digo de l p gin spx l que ll m remos Cont dorVisit s spx 08 protected void Page_Load(object sender, EventArgs e) { 09 Response.Write(Session["cv"]); 10 } 11

12 13 14

La ventaja de manejarlo de esta forma es que vamos a lograr un contador de visitas reales, es decir, slo sumar cada inicio de sesin en lugar de sumar cada solicitud a la pgina. Para probarlo copiamos el archivo ContadorVisitas.aspx y Global.asax al directorio virtual creado anteriormente en el IIS y lo ejecutamos:http://localhost/MiPrimeraAplicacionWeb/ContadorVisitas.aspx. Web.config El archivo Web.config es el archivo principal de configuraciones de toda aplicacinASP.NET. Es un archivo XML que controla el funcionamiento del sitio web.

Control de seguridad. Conexiones a bases de datos. Estado de las sesiones. Control de errores. Configuraciones personalizadas. Al igual que el global.asax debe ser colocado en la raz de la aplicacin.

Estructura bsica de un archivo web.config: ? 1 2 Agregamos Keys a nuestro web.config para ver cmo usarlos en nuestro sitio. Por ejemplo, si queremos controlar que el contador de visitas vaya a estar activo o no agregamos una key llamada HabilitarContadorVisitas y lo seteamos como verdadero. Nuestras Keys (Claves) vamos a agregarlos en el tag ?

1 Modificamos el evento Session_Start del global.asax para preguntar el estado de la key y controlar el comportamiento del contador de visitas. ? 1 ConfigurationManager.AppSettings.Get("HabilitarContadorVisitas"); C digo del evento Session_Start ? void Session_Start(object sender, EventArgs e) { // Codigo que se ejectura cuando se inicia la sesion.

1 2

if (Convert.ToBoolean(ConfigurationManager.AppSettings.Get("HabilitarContadorVisitas"))) 3{ 4Session["cv"] = cnt++; } Luego copiamos al directorio virtual los archivos modificados y veremos que el contador de visitas siempre nos marcara CERO. Ms adelante usaremos el web.config para establecer nuestra conexin con datos. Utilizacin de cdigo detrs del modelo o cdigo en lnea Los ejemplos que hemos visto hasta el momento son utilizando cdigo en lnea (Code inline). Usar cdigo en lnea es muy prctico ya que nos permite tener los controles del formulario y el cdigo de los eventos en un mismo archivo. La desventaja principal que tiene es que en la mayora de los proyectos se trabaja con ms de un desarrollador y diseador grfico. Para esto es ms til tener la posibilidad de manejar la interfaz de usuario (UI) y la programacin por separado. Cdigo detrs del modelo (Code Behind) Poder manejar cdigo detrs del modelo nos permite organizar los eventos en forma separada. Todo lo relacionado con Interfaz de usuario lo manejamos en el archivo .aspx y el control de los eventos en un archivo separado .cs (para C Sharp). De forma similar a la que manejamos los archivos de JavaScript (.js) donde incluimos todas las funciones y luego las referenciamos en el aspx hacemos con el Code Behind.

Recordemos la primer directiva de nuestra pgina aspx. ? 1 Ah es donde vamos a indicar que el cdigo de eventos va separado de la UI. Lo marcamos de la siguiente manera. ? 1

Qu le estamos diciendo a ASP.NET al incluir esta directive Page a la pgina aspx? Lo vemos punto por punto:

Language="C#" : este atributo le est indicando al compilador que el cdigo estar escrito en lenguaje C Sharp. AutoEventWireup="true" : aqu indicamos si el cdigo ser inline o Behind. Al setearlo en true le estamos indicando que el cdigo ser detrs del modelo (CodeBehind) y ser especificar el nombre del archivo donde deber ir a buscar el cdigo de eventos.

CodeFile="Default2.aspx.cs": Aqu le indicamos el nombre del archivo donde incluiremos el cdigo de eventos. Inherits="Default2": Especificamos que clase va a heredar, esta clase la va a ir a buscar dentro del archivo que indicamos en CodeFile.

Veamos un ejemplo de cdigo utilizando Code Behind. Nuestro ejemplo tendr dos archivos: 1. Default.aspx 2. Default.cs 1. Default.aspx: Incluir todo lo relacionado con interfaz de usuario. 2. Default.cs: Aqu pondremos el cdigo de los eventos que se ejecuten desde el formulario. Default.aspx ? 1

2 3 4 5
7 8 9 Default.cs ? 1 using System; using System.Web.UI.WebControls; 2 public partial class Default : System.Web.UI.Page { 3 } 4 protected void btnAceptar_Click(object sender, EventArgs e) { 5 } 6 lblResultado.Text = txtNombre.Text; txtNombre.Text = string.Empty;

Controles de servidor y eventos Sin saberlo ya hemos estado trabajando con controles de servidor y usando sus eventos en los captulos anteriores. Los controles de servidor son identificados con la etiquetarunat="server" y por medio de su ID nos permite manipularlos y programarlos en tiempo de ejecucin mediante cdigo C Sharp. Muchos de los controles de servidor son similares a controles HTML como los cuadros de texto o botones. Pero hay controles de servidor muchos ms complejos que brindan numerosas funcionalidades: grillas, calendarios, vista de rbol, menes y hasta controles de conectividad.

Qu son los eventos? Bsicamente un evento responde a una accin que sucede en relacin al objeto. Lo ms usual son los eventos que suceden en la interfaz de usuario. Por ejemplo, ya hemos visto un control BOTON y su evento OnClick. El evento OnClick se produce al presionar el botn y se ejecuta el cdigo que ingresamos para ese evento. Agregar controles de servidor en tiempos de diseo: Agregue controles a una pgina Web ASP.NET de la misma manera que agrega cualquier elemento HTML. Puede utilizar un diseador visual y agregar un control del cuadro de herramientas, o bien, puede escribir el elemento que representa el control. ? 1

Los controles de servidor Web se declaran con una etiqueta XML que hace referencia al espacio de nombres asp. El inicio y fin del tag est determinado por

run t="server: Nos indica que se trata de un control de servidor. onclick="btnAcept r_Click: btnAceptar contiene el cdigo que se va a ejecutar cuando se produzca el evento onclick.

Agregar controles de servidor en tiempos de ejecucin: (Mediante programacin) Muchas veces es necesario crear un control en tiempo de ejecucin en lugar de hacerlo en tiempo de diseo. Supongamos que dinmicamente debemos crear varios Combos pero no sabemos la cantidad hasta que la pgina vaya recibiendo informacin. En este caso es necesario crearlo mediante cdigo indicando la cantidad de veces que necesitamos crearlo. Ejemplo de creacin de un TextBox por programacin. ? 1 TextBox txt = new TextBox(); 2 txt.ID = "txtNombre"; 3 txt.Text = "MDW";

Ahora este mismo textbox lo vamos a incluir en un Panel. ? 1 Panel pnl = new Panel(); 2 pnl.ID = "Panel"; 3 pnl.Controls.Add(txt);

Cuando ejecutemos nuestra pgina veremos que en pantalla se crea un cuadro de texto con el contenido MDW dentro de un control PANEL En la siguiente rutina veremos cmo agregar dinmicamente controles de servidor en tiempo de ejecucin. Creamos un archivo llamado Controles.aspx y copiamos el siguiente cdigo. ? 1 2 3 4 5 6 7 8