ASP.NET en breve Fecha: 11/Jun/2004 (Junio 11 de 2004) |
. |
Objetivo
Hacer una página ASP.NET sencilla para un mejor entendimiento de .NET Framework, ASP.NET y C#
ASP.NET
Es la máquina para hacer aplicaciones Web basada en el .NET Framework de Microsoft. De una manera muy sencilla se puede usar el poder de los lenguajes del .NET Framework para aplicaciones que se corren desde navegadores Web en una Intranet o por Internet, incluso desde dispositivos móviles.
En este artículo haremos una página sencilla para darnos una idea general de ASP.NET, la sintaxis del lenguaje C# y su funcionamiento a grandes rasgos.
Prerequisitos
- Habilitar IIS en una máquina con Windows 2000, XP o 2003 Server
- Tener instalado el .NET Framework
- Registrar las librerías de ASP.NET en IIS ejecutando aspnet_regiis –i desde la línea de comando. Dicha utilería se encuentra ubicada en [CarpetaDeWindows]Microsoft.NETFramework[Version]. Por ejemplo:
Hello World
El clásico ejemplo para mostrar un lenguaje de programación nuevo es muy sencillo de implementar en ASP.NET. Escriba el siguiente código desde Notepad o cualquier editor de texto. Este archivo debe grabarse con extensión ASPX para que sea interpretado como página de ASP.NET:
<%@Page Language="C#"%> <html> <body> <h1>hello world, <% Response.Write(DateTime.Now.ToString()); %></h1> </body> </html>Las partes importantes de este código son
<%@Page>
que le dicen al browser características de ASP.NET para su correcto “procesamiento”. La otra es lo que se encuentra entre las llaves<%
y%>
. Este es código C# directo y lo que hace es regresar la hora y fecha actual. Para probarlo, coloque el archivo en una carpeta web de la PC (por ejemplo el wwwroot) y acceda a ella desde cualquier navegador (por ejemplo http://localhost/holamundo.aspx)Página ejemplo
Se compone de etiquetas que el navegador Web (browser) interpreta para poder ser presentados en pantalla. Las principales para nuestro ejemplo son las etiquetas
<html>
y<body>
<html><title>ASP.NET en breve</title> <body bgcolor="ivory" style="font-family:verdana;font-size:smal"> </body> </html>Agregaremos la directiva
<%@ Page >
para configurar las opciones que la hacen página ASP.NET
<%@ Page Inherits="pxcASPNET.Breve" src="Breve.cs" %> <html><title>ASP.NET en breve</title> <body bgcolor="ivory" style="font-family:verdana;font-size:smal"> </body> </html>La directiva Inherits le dice a ASP.NET qué clase está usando esta página (en la modalidad de CodeBehind), con la directiva src se le dice dónde está esta clase. En este caso se grabará con extensión ASPX el archivo para que el browser la detecte como página con código ASP.NET.
Se agrega un componente llamado
<form>
que contendrá los controles que usaremos en la página:
<%@ Page Inherits="pxcASPNET.Breve" src="Breve.cs" %> <html><title>ASP.NET en breve</title> <body bgcolor="ivory" style="font-family:verdana;font-size:smal"> <form runat="server"> </form> </body> </html>La directiva
runat="server"
le dice a ASP.NET que la ejecución de este objeto se hará del lado del servidor.A continuación se agregan los diferentes controles que usaremos. En nuestro caso, dos Labels, tres TextBoxes y un Button.
<%@ Page Inherits="pxcASPNET.Breve" src="Breve.cs" %> <html><title>ASP.NET en breve</title> <body bgcolor="ivory" style="font-family:verdana;font-size:smal"> <form runat="server"> <b><asp:label runat="server" Text="Operando 1:" /></b> <asp:textbox runat="server" id="txtNombre" /><br> <b><asp:label runat="server" Text="Operando 2:" /></b> <asp:textbox runat="server" id="txtApellido" /><p> <asp:button runat="server" Text="Calcular" id="btnCalcula" /><p> <b><asp:label runat="server" Text="Resultado:" /></b> <asp:textbox runat="server" id="txtResultado" /> </form> </body> </html>En las mismas etiquetas
<asp>
se asignan valores a las propiedades, en este caso, a las propiedades Text qué será lo que se visualizará en la página, y la propiedad id que es como se identifican a nivel código de la clase los controles.Clase
En la clase se especifica el código que actuará a lo que suceda en la página, pero se necesitan especificar también varias directivas C# para su funcionamiento.
Los namespace son agrupaciones lógicas de clases, funciones y demás que a nivel código presentan una forma de acceder a ellos de una manera más organizada, similar a los packages de Java.
Se le puede concebir con cualquier nombre, aunque prácticas de nomenclatura de clases recomiendan poner como prefijo el nombre de la empresa o autor del código. A nuestro ejemplo llamaremos
pxcASPNET
.
namespace pxcASPNET { using System; using System.Web.UI; using System.Web.UI.WebControls; }Con la directiva using importamos las funciones, clases y más elementos de otros namespaces, como en nuestro caso, algunas derivadas de
System
.Aquí se declararon algunos miembros de la clase, como los objetos TextBox y el de Button con el mismo nombre que se le dio con la propiedad id en la página ASPX.
namespace pxcASPNET { using System; using System.Web.UI; using System.Web.UI.WebControls; public class Breve : Page { protected TextBox txtNombre, txtApellido, txtResultado; protected Button btnCalcula; } }Ahora aprovecharemos el evento
OnLoad
de la página para poder inicializar los controles que hemos puesto con ciertas características de apariencia, como su tipo de letra, su color y tamaño. Todo esto se puede lograr accediendo a la propiedadStyle
de los TextBox.
namespace pxcASPNET { using System; using System.Web.UI; using System.Web.UI.WebControls; public class Breve : Page { protected TextBox txtNombre, txtApellido, txtResultado; protected Button btnCalcula; protected override void OnLoad(EventArgs e) { base.OnLoad(e); // Estilo de los text boxes txtNombre.Style["font-family"] = "serif"; txtNombre.Style["border"] = "solid 1px black"; txtNombre.Style["background-color"] = "beige"; txtApellido.Style["font-family"] = "serif"; txtApellido.Style["border"] = "solid 1px black"; txtApellido.Style["background-color"] = "beige"; txtResultado.Style["font-family"] = "serif"; txtResultado.Style["border"] = "solid 1px black"; txtResultado.Style["background-color"] = "beige"; } } }Ahora agregaremos código para manejar lo que pase cuando se presione el botón:
namespace pxcASPNET { using System; using System.Web.UI; using System.Web.UI.WebControls; public class Breve : Page { protected TextBox txtNombre, txtApellido, txtResultado; protected Button btnCalcula; protected override void OnLoad(EventArgs e) { base.OnLoad(e); // Estilo de los text boxes txtNombre.Style["font-family"] = "serif"; txtNombre.Style["border"] = "solid 1px black"; txtNombre.Style["background-color"] = "beige"; txtApellido.Style["font-family"] = "serif"; txtApellido.Style["border"] = "solid 1px black"; txtApellido.Style["background-color"] = "beige"; txtResultado.Style["font-family"] = "serif"; txtResultado.Style["border"] = "solid 1px black"; txtResultado.Style["background-color"] = "beige"; } override protected void OnInit(EventArgs e) { this.btnCalcula.Click += new System.EventHandler(this.btnCalcula_Click); } private void btnCalcula_Click(object sender, System.EventArgs e) { txtResultado.Text = txtNombre.Text + " " + txtApellido.Text; } } }En primer lugar, con la línea
this.btnCalcula.Click += new System.EventHandler(this.btnCalcula_Click);
se agrega un objeto
EventHandler
al eventoClick
del objetobtnCalcula
y se le está diciendo que el evento responda con el código expuesto en el métodobtnCalcula_Click
(que pudo haber sido cualquier otro nombre)En el método
btnCalcula_Click
simplemente se lleva a cabo una concatenación de cadenas de caracteres y se asignan a la propiedadText
del TextBoxtxtResultado
.
Ejecución
El archivo ASPX resultante se debe poner en una carpeta web de la computadora (que puede ser la wwwroot). Cuando el browser acceda a la página (que puede ser, por ejemplo http://localhost/breve.aspx), ésta se compilará y nos presentará el resultado.
Conclusión
Desde luego que desde el IDE de Visual Studio .NET este tipo de tareas es más sencilla, pero el ejemplo se hizo así para demostrar la simpleza con la que una aplicación en ASP.NET puede hacerse. Atrévase a experimentar agregando más elementos web y mayor funcionalidad.
Fichero con el c�digo de ejemplo: gflores_aspnetenbreve.zip - 1.35 KB