ASP.NET en breve
[Introducción básica a ASP.NET]

Fecha: 11/Jun/2004 (Junio 11 de 2004)
Autor: Gabriel Flores gabofr@yahoo.com

 .

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

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 propiedad Style 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 evento Click del objeto btnCalcula y se le está diciendo que el evento responda con el código expuesto en el método btnCalcula_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 propiedad Text del TextBox txtResultado.


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.

ir al índice

Fichero con el código de ejemplo: gflores_aspnetenbreve.zip - 1.35 KB