PDF de programación - Guía ASP.NET: Desarrollo de sitios y aplicaciones web dinámicas

Sobre el autor

2

Fernando Giardina

Es de origen argentino, inició su carrera desarro-
llando en lenguaje C y Oracle programador IVRs
con experiencia en la automatización de proce-
sos y sistemas de CRM. Además, se especializó en
Java, Perl, PHP y .NET para el desarrollo de apli-
caciones web.

Sobre la guía

3

Guía de ASP.NET:
Desarrollo de sitios y aplicaciones web dinámicas

Versión 1 / abril 2011

Nivel: Intermedio

La Guía ASP.NET se encuentra en línea en:

http://www.maestrosdelweb.com/editorial/tutoria-desarrolloweb-asp-net/

Un proyecto de Maestros del Web

 Edición: Stephanie Falla Aroche
 Diseño y diagramación: Iván Mendoza

Este trabajo se encuentra bajo una licencia Creative Commons

Atribución-NoComercial-CompartirIgual 3.0 Unported (CC BY-NC-SA 3.0)

Contacto

http://www.maestrosdelweb.com/sitio/correo/

Redes sociales

Facebook: http://www.facebook.com/maestrosdelweb
Twitter: http://www.twitter.com/maestros

Indice

Indice

4

1. Indice ..................................................................................................................... 4
2. Introducción a ASP.NET ...........................................................................................5
3. Nuestra primera página web ................................................................................. 8
4. Ejecutar código JavaScript en ASP.NET ................................................................. 15
5. Archivos Global.asax y Web.Config ...................................................................... 22
6. Controles de servidor y eventos ......................................................................... 28
7. Utilización de estilos en ASP.NET (CSS) ................................................................ 39
8. Acceso a datos, consultar y guardar información desde WebForms ................... 48
9. Estructura de clases y objetos .............................................................................. 57
10. Utilización de Master Pages ..................................................................................61
11. Utilización de Ajax................................................................................................ 69
12. Otras guías ............................................................................................................ 73

1

Introducción a
ASP.NET

6

Capítulo I
Introducción a ASP.NET

ASP.NET es un modelo de desarrollo web unificado creado por Microsoft para el desarrollo de sitios y
aplicaciones web dinámicas con un mínimo de código, forma parte de .NET Framework1 que contiene
las librerías necesarias para la codificación. Se pueden usar distintos lenguajes de programación para
realizar aplicaciones web en ASP.NET, pero nos vamos a enfocar en el lenguaje C# (C Sharp) el más utili-
zado para este tipo de desarrollos.

Requisitos para el desarrollo en ASP.NET

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

Adicionalmente a la programación web es necesario tener algún tipo de soporte para el almacena-
miento de datos (SQL Server, Oracle, etc.) pero para esta guía vamos a mantener la información en
soportes que estén al alcance de todos.

Editor de código

Se requiere de un editor de texto estándar (Notepad, Notepad++) pero existen herramientas con un
entorno de desarrollo integrado (IDE) que nos facilita el acceso a las librerías del Framework y nos
brinda un entorno amigable para la creación de aplicaciones web en ASP.NET como el Visual Studio.

En el transcurso de la Guía ASP.NET utilizaremos IDE para abordar los ejemplos. Descarga la versión
Express2.

.NET Framework

Es un conjunto de clases que actuarán como soporte de las aplicaciones ASP.NET instaladas en nuestro
equipo. Es de distribución gratuita y se puede descargar desde la página de Microsoft. (Incluido al Visual

1 http://www.microsoft.com/net/
2 http://www.microsoft.com/express/Downloads/

Guía ASP.NETMaestros del web 7

Studio .NET).

Servidores Web

Una aplicación ASP.NET además de contar con el .NET Framework instalado necesita de un Servidor
Web. Utilizaremos el IIS (Internet Information Server) que viene como complemento de instalación de
Windows. Si dentro de nuestros servicios en ejecución no contamos con Internet Information Server
debemos agregarlo al equipo donde instalaremos nuestras aplicaciones.

Guía ASP.NETMaestros del web 2

Nuestra primera
página web

9

Capítulo 2
Nuestra primera página web

En la introducción de la Guía ASP.NET explicamos los requisitos básicos necesarios para el desarrollo,
ahora que cuentas con un equipo IIS, .Net Framework y un entorno de desarrollo procederemos a crear
nuestra primera aplicación web en ASP.NET.

Mi primera aplicación ASP.NET

<%--Directiva--%>
<%@ Page Language=”C#” %>
<%--Codigo en linea--%>
<script runat=”server”>
protected void btnAceptar_Click(object sender, EventArgs e){
lblResultado.Text = txtNombre.Text;
txtNombre.Text = string.Empty;
}
</script>
<%--HTML para dibujar los controles en pantalla--%>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”><title>Mi primera aplicacion - Maestros del Web</
title></head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:TextBox ID=”txtNombre” runat=”server”></asp:TextBox>
<asp:Button ID=”btnAceptar” runat=”server” Text=”Aceptar”
onclick=”btnAceptar_Click”/> <br/>
<asp:Label ID=”lblResultado” runat=”server” Text=”[Resultado]”></
asp:Label
</div>
</form>
</body>

Guía ASP.NETMaestros del web 10

</html>

¿Cómo probamos nuestra primera aplicación?

1. Abrimos el Bloc de Notas y copiamos el código de arriba de la siguiente forma:
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 aplicación web.
c. Indicamos el directorio donde se guarda nuestra página web Default.aspx.
d. Seguimos las instrucciones para crear nuestro directorio virtual. Al finalizar, tenemos nuestra
primera aplicación ASP.NET instalada para probar. Ahora abrimos el navegador y escribimos en
la barra de dirección: http://localhost/MiPrimeraAplicacionWeb/Default.aspx

1

a

2

b

Paso a paso 11

En pantalla vemos tres objetos
1. Un TextBox llamado txtNombre (para ingre-

sar un nombre).

2. Un botón llamado btnAceptar con el evento
OnClick definido (ejecutamos la acción de
pegar contenido).

3. Un label de resultados llamado lblResultado
(mostramos los resultados luego de ejecutar
el evento del botón).

c

Paso a paso Estructura de nuestra aplicación web
La estructura de nuestra primera aplicación es muy simple.
1. Contiene una directiva:

<%@ Page Language=”C#” %>

Le estamos indicando que la página usará lenguaje C# (C Sharp).

2. Código en línea:

12

<script runat=”server”>
protected void btnAceptar_Click(object sender, EventArgs e)
{
lblResultado.Text = txtNombre.Text;
txtNombre.Text = string.Empty;
}
</script>

El tag script está indicando que el código se ejecutará del lado del servidor. En esta porción del código
van las acciones que ejecutaremos en nuestra aplicación, en este caso sólo tenemos una acción asociada
al botón “aceptar”.

3. Código HTML para la creación de objetos en pantalla.

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”><title>Mi primera aplicacion - Maestros del Web</title></
head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:TextBox ID=”txtNombre” runat=”server”></asp:TextBox>
<asp:Button ID=”btnAceptar” runat=”server” Text=”Aceptar”
onclick=”btnAceptar_Click”/>
<br/><asp:Label ID=”lblResultado” runat=”server” Text=”[Resultado]”></
asp:Label>

Guía ASP.NETMaestros del web 13

2

</div>
</form>
</body></html>

Creación 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#.
d. Por último presionamos el botón OK para crear la solución.

1

3

Paso a paso 3. Una vez creada la solución el IDE genera el primer template.

14

En la pantalla de edición de código copiamos y pegamos el código anterior, ahora tenemos nuestra
primera página web dentro del entorno de desarrollo integrado.

Para ejecutar la aplicación dentro del entorno de desarrollo presionamos la tecla F5 y nos pregunta si
deseamos habilitar el modo de “debug”. Presionamos OK.

A continuación se abre nuestro navegador predeterminado ejecutando la aplicación en modo “debug”.
Al trabajar con un entorno de desarrollo no es necesario crear un espacio virtual en el IIS ya que la
misma aplicación se encarga de preparar el ambiente.

Paso a paso 3

Ejecutar código
JavaScript en
ASP.NET

16

Capítulo 3
Ejecutar código JavaScript en ASP.NET

Luego de crear la primera aplicación web ahora vamos a ejecutar código JavaScript en ASP.NET agre-
gando funcionalidad JavaScript a la ya codificada en C#. Una forma sencilla es agregando un atributo al
control del servidor que deseamos ejecute una función JavaScript.

Dentro del TAG HEAD escribimos lo siguiente:

<%--Codigo JavaScript--%>
<script language=”javascript” type=”text/javascript”>
function fnAceptar() {
alert(‘El Contenido del TextBox es: ‘ + document.getElementById(“txtNombre”).
value);
document.getElementById(“txtNombre”).value = ‘’;
}
</script>

Ahora necesitamos indicarle a ASP.NET que necesitamos ejecutar esa función desde el botón.

<script runat=”server”>
protected void Page_Load(object sender, EventArgs e)
{
this.btnAceptar.Attributes.Add(“OnClick”, “javascript:return fnAceptar();”);
}
</script>

Asignamos la función fnAceptar al evento OnClick del bot