Tutorial para La Creación de Un Sitio Web Con Autenticación Mediante Formulario

Tutorial para la
creacin de un sitio
Web con autenticacin
mediante formulario
Usando varios mtodos para realizar
la autenticacin

Publicado el 03/Mar/2005
Actualizado el 05/Dic/2006
Autor: Guillermo 'guille' Som

Votar en
PanoramaBox

En este artculo te voy a explicar de forma sencilla (o al menos paso a paso)
cmo crear una aplicacin Web que utilice un formulario Web (Web Form) para
realizar la autenticacin (o autorizacin) de los usuarios que quieran navegar
por el sitio Web que la utilice.

Nota del traductor: (o sea del Guille)
En un principio pens usar a lo largo de este
artculo la palabra autentificacin como
traduccin de authentication, que es como
viene en tres de los cuatro diccionarios de
ingls/espaol que he consultado, (en el
cuarto, el ms antiguo, ni viene), adems de
que en el diccionario de la Lengua Espaola, (al
menos el que tengo yo), la entrada
de autenticar te manda a autentificar. Si bien,
comprobando en el diccionario en lnea de la
RAE, tanto autenticar como autentificar te
mandan a la misma entrada: autenticar.
Por otro lado, autentificacin no existe en el
diccionario en lnea de la RAE, sin
embargo autenticacin si que aparece
como: Accin y efecto de autenticar.
Adems en la documentacin de Visual Studio
.NET utilizan autenticacin o autenticar, as que
es posible que los diccionarios de ingls
consultados estn equivocados o no estn al
da...
Por estas razones, y para no "desentonar"
demasiado, finalmente he optado por usar
autenticar y autenticacin; si eres de los mos
y siempre has usado autentificacin para
referirte al proceso de "acreditarse" en un sitio
Web... ve cambiando el chip... que sino, nos
vamos a confundir con tanto juego de
palabras... y finalmente esto va a parecer que
no es autntico... je, je.

La comprobacin de esa autenticacin la haremos de tres formas:
1- Usando cdigo directo, es decir, en el propio cdigo de la aplicacin
tendremos los nombres y las claves.
Nivel de seguridad 0: esto ni se te ocurra hacerlo en una aplicacin "de
verdad".
2- Los nombres de los usuarios y las claves estarn en el fichero
Web.config.
Para mayor nivel de seguridad no guardaremos la clave, sino que guardaremos
un valor HASH que nos servir para comprobar si la clave es "buena".
Para este caso, necesitaremos una pequea utilidad para generar ese valor
HASH.
3- Los nombres y claves se guardan en una base de datos.
Para un buen nivel de seguridad, se recomienda que las claves se guarden
como valores HASH, no guardadas directamente... el problema en este caso es
que ni nosotros podremos saber la clave del usuario, salvo que en lugar de
dejar que se genere automticamente usemos una utilidad como la indicada en
el punto anterior...

Crear una aplicacin Web con Visual Studio .NET
Empecemos creando una aplicacin Web con Visual Studio .NET, en estos
ejemplos he usado la versin 2003 y para el cdigo mostrado en el artculo
usar Visual Basic .NET, despus (si el tiempo me lo permite) te mostrar el de
C#.

Nota:
Aunque he preferido usar el Visual Studio para
crear la aplicacin, (es ms cmodo y te
permite crear el diseo de los formularios y
dems), realmente no es necesario, pero,
como te digo, as resultar ms fcil y la gente
de Microsoft seguramente seguir poniendo
publicidad en mi sitio... je, je.

Los pasos a seguir:
- Creacin del proyecto y de la pgina de Login
- Crea un nuevo proyecto en Visual Studio, selecciona el lenguaje que quieras
(ya te digo que en el artculo te mostrar el cdigo de VB) y elije el de
Aplicacin Web.
- Te pedir un nombre para crearlo en el localhost, yo he usado pruebaLogin.
- Cuando Visual Studio termine de crear el sitio, se mostrar el proyecto
"inicial" que el Visual Studio, en la figura 1 podemos ver el explorador de
soluciones:

Figura 1. La solucin recin creada
- De este proyecto podemos eliminar los ficheros Global.asax y Styles.css
(aunque puedes dejar el .css si sueles usar estilos... yo no uso estilos y en este
ejemplo lo borrar).
- Al fichero WebForm1.aspx le vamos a cambiar el nombre por Login.aspx
- Aadimos dos etiquetas, dos cajas de textos y un botn, tal como vemos en
la figura 2.

Figura 2. El formulario de Login
- La caja superior se llama txtUsuario, la del password: txtPassword y el
botn: btnLogin
- Selecciona la caja de password y en la ventana de propiedades, asigna a la
propiedad TextMode el valor Password, esto har que se no se vea lo que es
usuario escribe. Ver figura 3.

Figura 3. Indicar que la caja de textos se usar para introducir una
clave
- Cada formulario Web (pgina .aspx) realmente tiene asociada una clase (es
una clase!), por tanto vamos a hacer que el nombre de la clase del formulario
Login.aspx se llame tambin Login, ya que el nombre que tendr ser el que le
dio el VS al crearla, es decir, la clase se llama WebForm1 y el queremos que se
llame (si es posible) de la misma forma que el formulario.
- Lo que debes hacer es mostrar el cdigo, por tanto selecciona el fichero
Login.aspx del explorador de soluciones y pulsa F7 o bien pulsa en el primer
icono del toolbar (barra de herramientas) que se muestra en la ventana del
explorador de soluciones (ver figura 1).
- Ahora tendremos a la vista el cdigo de esa pgina Web. Esta es una de las
razones por las que es preferible usar el Visual Studio en lugar, de por ejemplo
el WebMatrix, las cosas estn en el mismo sitio que en cualquier aplicacin... y
es ms intuitivo... (pero este comentario no quita que te muestre despus
cmo hacerlo todo "a pelo").
- Seleccionamos la palabra WebForm1 (figura 4) y la cambiamos por Login
(figura 5)

Figura 4. Cambiamos el nombre predeterminado...

Figura 5. ...por el mismo que tiene el WebForm: Login

- Ahora vamos a escribir el cdigo para comprobar el nombre del usuario y el
password, pero por medio de cdigo.
- Antes de nada, vamos a aadir dos nuevas pginas:
- Una ser la usada para que el usuario navegue por nuestro sitio, esta pgina
la vamos a llamar Default.aspx (que es el nombre normal que usa el VS)
- La otra la llamaremos Candemor.aspx (je, je, en honor al Chiquito de la
Calz (o Calzada) que es malagueo...), que ser la usada para mostrar al
usuario un aviso de que no est autorizado para entrar en el sitio.
- Para aadir una nueva pgina, en el men Proyecto, selecciona Agregar Web
Forms... esto mostrar un dilogo como el mostrado en la figura 6, escribe el
nombre de la pgina (el primer caso:Default)

Figura 6. Aadir un nuevo formulario Web

Nota:
Por ahora no te preocupes de lo que haya que
mostrar en ese formulario Web.
- Aade un nuevo formulario al que le daremos el nombre Candemor.
- Ya que tenemos en modo diseo este ltimo formulario, vamos a aadirle
una etiqueta y en la propiedad Text escribiremos algo as: "Pecador de la
pradera, no ests autorizado a entrar en este sitio".
- Cambia el tamao de la fuente para que se vea bien. Ver figura 7. La
etiqueta se adaptar al tamao que sea necesario, pero puedes cambiarlo... no
te explico como que eso se supone que ya lo sabrs... bueno, vale, usa los
cuadritos que hay en cada lado de la etiqueta y juega con ellos...

Figura 7. Propiedades de la etiqueta con texto grande y en negrita

- Muestra el formulario Default (en la ventana del explorador de soluciones,
haz dobleclick en Default.aspx (o la seleccionas y pulsas Shift+F7)
- Aade una etiqueta al formulario y en el texto le pones: "Bienvenid@ al
sitio de tutorialLogin". El tamao de la letra la dejo a tu eleccin.
- Ahora s, vamos a escribir el cdigo para validar los usuarios.

Autenticar a los usuarios
Como te coment al principio, vamos a ver tres mtodos (o ejemplos) para
comprobar los usuarios que quieren usar nuestro sitio Web.

- Primer ejemplo de autenticacin: Usando cdigo directamente
- La comprobacin se har al pulsar en el botn, por tanto vamos a escribir el
cdigo dentro del evento Click del botn.
- Haz que se muestre el formulario, pulsa Shift+F7 (maysculas y la tecla F7)
si es que ests en la ventana del cdigo o pulsa en el segundo icono del toolbar
que hay en el explorador de soluciones.
- Selecciona el botn y haz doble click en l, esto crear el evento
predeterminado del botn (evento Click) y nos mostrar el cdigo.
- Escribe esto (o lo que quieras), dentro de ese mtodo de evento:
- Para que no te de error, haz una importacin del espacio de
nombres: System.Web.Security
Private Sub btnLogin_Click(ByVal sender As System.Object,
ByVal e As System.EventArgs) _
Handles btnLogin.Click
' Prueba 1. Escribiendo el cdigo de comprobacin a
"pelo"
Dim aceptado As Boolean = False
'
Select Case txtUsuario.Text.ToLower
Case "pepe"
If txtPassword.Text = "Jose" Then
aceptado = True
End If
Case "rafa"
If txtPassword.Text = "Rafael" Then
aceptado = True
End If
Case "pili"
If txtPassword.Text = "Pilar" Then
aceptado = True
End If
Case "guille"
If txtPassword.Text = "Guillermo" Then
aceptado = True
End If
Case Else
' esto no es necesario porque el valor inicial es
False,
' pero nunca est de ms, adems que as quin vea
el cdigo
' sabe lo que queremos hacer.
aceptado = False
End Select
'
' si es un usuario de los "previstos"
' redirigirlo a la pgina "principal", por defecto:
Default.aspx
If aceptado Then

FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text,
False)
Else
' sino.. a la de error de login
Response.Redirect("Candemor.aspx")
End If
End Sub
Listado 1. El cdigo del botn btnLogin
- Lo que hacemos en este cdigo, aunque creo que est claro, es:
- Comprobar si el nombre indicado coincide con la clave, para cada usuario
tenemos que hacer una comprobacin!
- Si el usuario es correcto, asignamos un valor verdadero a la
variable aceptado.
- En caso contrario (Case Else) asignamos un valor falso.
- Comprobamos si aceptamos o no al usuario, de ser s, lo redirigimos a la
pgina que solicit, o a Default.aspx si no solicit ninguna, sino que
simplemente entr a la de Login, que es lo que har el Visual Studio al ejecutar
la aplicacin.
- Si no est autorizado lo redirigimos a la pgina de error, en nuestro
caso Candemor.aspx, para ello usamos Response.Redirect que es lo que
hay que usar en ASP/ASP.NET para mandar a alguien a otra pgina... la que
sea, no tiene porqu ser del tipo .aspx.
- Vamos a probarlo:
- Pulsa F5 (si no has hecho nada raro debera mostrarte la pgina de Login)
- Escribe un usuario, por ejemplo "pepe" y en la clave escribe "juan"
- Te mandar a la pgina Candemor.aspx
- Ahora pulsa en el navegador hacia atrs (o bien cierra la ventana y vuelve a
pulsar F5)
- En esta ocasin escribe en el nombre "pepe" y en el password escribe "Jose"
(con la J en maysculas), pulsa en el botn y te mandar a la pgina
Default.aspx.
- Es decir, todo funciona a las mil maravillas... medalla! aplausos!, etc.
- Si desde el punto 16.1 no te funciona... es que algo has hecho mal... o bien
no has escrito bien el cdigo (el VS te mostrar un mensaje de error indicando
ese caso) o tambin puede ser que al "juguetear" hayas cambiado algo ms...
por ejemplo qu pgina debe mostrarse.
- En este primer ejemplo, la pgina de inicio debe ser Login.aspx, por tanto, si
ese es el caso del error, haz lo siguiente:
- En el explorador de soluciones selecciona Login.aspx
- Pulsa con el botn secundario (el derecho para los diestros) y del men
despegable (figura 8), selecciona Establecer como pgina de inicio.

Figura 8. Establecer la pgina de inicio de la aplicacin Web

- Compliquemos un poco la cosa, que esto da la impresin que es coser y
cantar (para el que sepa coser y/o cantar).
- Ya que sabemos cmo se puede poner una pgina como de inicio, es decir, la
que "posiblemente" el usuario indicar en el navegador. Vamos a suponer que
el usuario quiere entrar directamente en la pgina Default.aspx.
Se supone que para que alguien vea esa pgina debe estar autentificado (o
autorizado), a ver que pasa...
- Selecciona la pgina Default.aspx en el explorador de soluciones y pulsa con
el botn derecho del ratn e indica que esa es la pgina de inicio (figura 8).
- Pulsa F5
- Que ha pasado aqu?
- Ha entrado sin que hagamos Login...
- Pues s... ya que no le hemos dicho en ningn momento que este es un sitio
"reservado".
- Obliguemos al usuario a "loguearse" (autenticarse) para poder entrar
en cualquier pgina.
- Cierra el explorer para "terminar" la aplicacin.
- Abre el fichero Web.config (doble click en el explorador de soluciones, esto
ya no lo vuelvo a repetir)
- Busca la "entrada" authentication:
<authentication mode="Windows" />
- Sustityelo por esto otro:
<authentication mode="Forms">
<forms loginUrl="Login.aspx" />
</authentication>
- Guarda los cambios y pulsa F5 para ver que todo funciona bien.
- Cachis la mar!... que pasa aqu?
- Por qu no pide que el usuario se autentifique?
- Porque estamos autorizando a todos los usuarios, por tanto el ASP.NET
"piensa" que si estamos autorizando a todos los usuarios para qu pedir que se
autentifique... as que los deja pasar.
- Pero como de lo que se trata es de que se tenga que autenticar el usuario...
veamos nuevamente el fichero Web.config, en esta ocasin busca
authorization, estar de esta forma:
<authorization>
<allow users="*" /> 
</authorization>
- Cambia todo ese cdigo por este otro (he quitado los comentarios para
simplificar):
<authorization>
<deny users="?" /> 
</authorization>
- El deny users="?" le indica a ASP.NET que solo se permitan usuarios
autentificados.
- A ver si ahora... guarda los cambios y pulsa F5
-BIEN!
- Antes de mostrarte la pgina Default.aspx te pide que te autentifiques, para
ello te manda a la pgina de Login y si escribes correctamente el nombre y la
contrasea te enva a la pgina "solicitada".
- El problema es que si no escribes bien la clave... ya no te manda a la pgina
de error (Candemore.aspx).
- Por qu?
- ... pinsalo un poco y ahora te digo la respuesta...
- Sita el ratn aqu para ver la respuesta.
- Efectivamente esa es la razn... (bueno, vale... te lo digo... que no te da
tiempo a leerlo):
No se muestra la pgina de error (Candemore.aspx) porque para que
el usuario pueda ver cualquier pgina de nuestro sitio (salvo la de
Login) debe estar autorizado, y la nica forma de darle autorizacin es
que se autentifique.
- Para subsanar este problemilla, vamos a aadir una etiqueta a la pgina
Login.aspx.
- En esta etiqueta (a la que le he dado el nombre LabelAviso) inicialmente
mostraremos un mensaje indicando que escriba el nombre y la contrasea
para entrar.
- Si no es correcto el nombre/password mostraremos el mensaje que pusimos
en Candemore.aspx o el que se te ocurra para indicar que no son correctos los
datos introducidos, pero no le des pista de dnde se ha equivocado! al
enemigo, ni agua! y si es un intruso... cuanto menos sepa mejor.
- Eso que te he resaltado en el prrafo anterior es algo que siempre deberas
tener en cuenta: no des informacin de los fallos, salvo que ests
probndolo t y sepas que nadie ms los ver.
- Ya que si, por ejemplo, le dices: "pepe" tu clave no es correcta... el intruso
puede llegar a pensar que hay un usuario llamado pepe y podr hacer sus
"cbalas" para averiguar la clave... y puede que acierte!
- Seguridad ante todo!
- Tenemos que modificar el cdigo del evento Click del botn btnLogin para
que en lugar de llamar al formulario Candemore.aspx se muestre el texto:
LabelAviso.Text = "Pecador de la pradera, no ests autorizado a entrar en este
sitio"
- Por supuesto, despus de este cambio, la pgina Candemore.aspx ya no la
necesitamos ms.
Si quieres puedes borrarla (seleccinala en el explorador de soluciones, usa el
botn derecho y selecciona Eliminar) o bien quitarla del proyecto (no se borra),
para ello desde el men desplegable, selecciona Excluir del proyecto.

Nota:
Si a la etiqueta LabelAviso le has indicado que
tenga el texto en negrita y X-Large, pero al
probarla ves que te muestra el texto normal...
(me acaba de pasar), haz que se muestre el
esa pgina en modo formulario (no el cdigo) y
pulsa en la ficha HTML (que estar al lado de la
de Diseo), eso te mostrar el cdigo HTML
usado en la pgina, busca la etiqueta en
cuestin, (<asp:label id="LabelAviso" ...) y
antes del cierre (/>) aade esto:
Font-Bold="True" Font-Size="X-Large"
As se mostrar en negrita y en letras grandes.

- Esto sera todo lo que habra que hacer para poder comprobar si el usuario es
quin dice ser.

Nota:
Si quieres probar, desde "fuera" del Visual
Studio .NET, que todo funciona bien, puedes
abrir el Explorer y escribir esto en la direccin
(suponiendo que el nombre indicado para la
aplicacin es pruebaLogin):
http://localhost/pruebaLogin/Default.aspx
Debes asegurarte de compilar primero la
aplicacin (Generar>Generar aplicacin)

- Segundo ejemplo de autenticacin: Indicando los usuarios en
Web.config
- En el fichero Web.config podemos guardar los nombres de usuarios y las
claves, de forma que sea el propio ASP.NET el que se encargue de comprobar
si debe o no autorizarlo para entrar en nuestro sitio.
- Lo ms recomendable, para que si algn intruso ve ese fichero de
configuracin no sepa que claves corresponden a cada usuario, las claves las
vamos a guardar como un valor HASH, es decir, un valor numrico que ser
nico para cada una de las claves almacenadas.
- Para aprovechar el mecanismo de comprobacin que tiene ASP.NET,
usaremos los valores HASH producidos por los mtodos de encriptacin SHA1 o
MD5.
- Antes de entrar en detalles, veamos dnde habra que poner esos nombres y
claves.
- Como te he comentado antes, esa informacin la escribiremos en el fichero
Web.config, concretamente en la seccin authentication.
Veamos cmo quedara esa seccin con los nombres usados en el mtodo
anterior.
<authentication mode="Forms">
<forms loginUrl="Login.aspx">
<credentials passwordFormat="SHA1">
<user name="guille"
password="251DBBC3BFFC9445DCE9787E4AA4EA9BD6
91E705" />
<user name="pepe"
password="7550D35A69BE9ACA9AF9C29B880DC3ADEA
01BEDC" />
<user name="pili"
password="8A42398D66BBD841D44122167025661DEA
5EDE28" />
<user name="rafa"
password="3E05C90F8530B1BA72519824415D05E08C
F5718B" />
</credentials>
</forms>
</authentication>

- En la seccin credentials el indicamos el tipo de formato usado y despus
cada uno de los usuarios, indicando el nombre y el hash del password.
- Para usar este tipo de autenticacin, debemos sustituir el cdigo del mtodo
Click por este:

Private Sub btnLogin_Click(ByVal sender As System.Object,
ByVal e As System.EventArgs) _
Handles btnLogin.Click
Dim aceptado As Boolean = False
'
' Prueba 2. Usando claves encriptadas con SHA1
If FormsAuthentication.Authenticate(txtUsuario.Text,
txtPassword.Text) Then
aceptado = True
Else
aceptado = False
End If
'
' si es un usuario de los "previstos"
' redirigirlo a la pgina "principal", por defecto:
Default.aspx
If aceptado Then

FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text,
False)
Else
LabelAviso.Text = "No ests autorizado a entrar en
este sitio"
End If
End Sub
Listado 2. El cdigo para autenticar usando hash encriptadas con SHA1

- Como puedes comprobar es una forma muy cmoda de realizar las
comprobaciones, ya que dejamos que sea el propio ASP.NET el que se
encargue de comprobarlo.
- Es importante saber, que se pueden usar los dos mtodos explicados de
forma conjunta.
En este caso, si primero comprobamos con las claves Sha1, en la parte Else
podemos aadir las comprobaciones "literales" mostradas anteriormente. Pero
como te dije, no es conveniente incluir esos nombres directamente en el
cdigo, aunque si lo pensamos bien, tampoco habra mayor problema, ya que
ese cdigo se incluir solamente en la DLL compilada.
- La parte en la que los nombres y claves de los usuarios estn en una base de
datos, lo dejaremos para otra ocasin.
Nota del 05/Dic/2006:
Aunque no lo he publicado para usar en una aplicacin Web,
(pero lo indicado en los siguientes links es igualmente vlido)
eso de comprobar el usuario y la clave usando una base de
datos lo puedes ver en estos artculos, segn uses Visual Basic o
C#:
Comprobar usuario y clave usando una base de datos (Visual
Basic)
Comprobar usuario y clave usando una base de datos (C#)

- Ahora lo que nos interesa es poder generar los valores hash para cada clave
que queramos tener.
- El cdigo a usar sera el siguiente:

Private Sub btnCrearSHA1_Click(sender As System.Object, e
As System.EventArgs) _
Handles btnCrearSHA1.Click
txtClaveSHA1.Text = _
FormsAuthentication.HashPasswordForStoringInConfigFile(txtC
lave.Text, "SHA1")
End Sub
Listado 3. Generar el valor hash para una clave indicada

Nota:
Si modificas el fichero Web.config fuera del
Visual Studio .NET ten en cuenta de guardarlo
en formato UTF-8, ya que si has incluido
palabras acentuadas, ees, etc., no se vern
adecuadamente al abrirlo usando UTF-8 (que
es como lo abre el ASP.NET para leer el
contenido) e incluso puede producir un error.

En la prxima parte crearemos una pgina Web en la que podremos generar
esos valores, pero solamente si el usuario es: "guille".
Tambin aadiremos un control creado por nosotros para que contenga ciertos
valores que podrn usar todos los usuarios (normalmente una serie de links
que lo redirija a otras pginas de nuestro sitio).
Mientras publico la continuacin de este artculo, puedes ir haciendo esto que
he comentado, as practicas... je, je, je.

Consideraciones para usar este cdigo (o
aplicacin Web)
Todo esto que hemos hecho es una aplicacin Web, es decir
el cdigo que tendramos que "publicar" en nuestro sitio
Web.
Los puntos importantes a tener en cuenta son:
1- La DLL generada debes copiarla en el directorio \BIN del
sitio Web.
Ese directorio "debe estar forzosamente" en la raz del sitio...
no puede estar dentro de otro directorio.
Hay que aclarar que realmente la librera si puede estar en
otro directorio, pero ese otro directorio debe estar dentro del
directorio \bin que forzosamente tiene que estar en el "raz"
de nuestro sitio.
Para saber cmo incluir la DLL en un subdirectorio del
directorio \bin, consulta este artculo de Gustavo Bonansea:
Cargar automticamente assemblies fuera del directorio bin
2- El fichero Web.config debes copiarlo en el directorio raz
del sitio Web.
Esto supone que solamente podrn acceder a tu sitio Web si
el usuario est registrado.
Por tanto, no uses el fichero Web.config con la informacin
de autenticacin salvo que quieras que TODOS los visitantes
de tu sitio se tengan que autenticar.
3- Relacionado con el punto anterior, la comprobacin de que
los usuarios tienen que hacer login para ver cualquier cosa,
solo es cierto si todas las pginas son de ASP.NET (extensin
.aspx)
4- En el caso de que quieras tener las dos cosas... pginas
"libres" y pginas "privadas" todo esto que te he explicado
no te servir de nada... lo siento.
5- La solucin al punto 4 es que crees una "subweb" y en esa
subWeb solo admitas a los usuarios que hayas autorizado o
bien modificar el fichero Web.config para indicar qu
directorios o pginas son las "privadas" o las "pblicas", pero
esto seguramente lo veremos en otra ocasin.
6- Quiero aclararte tambin que lo que debes publicar en el
sitio Web son las pginas con extensin .aspx (no las
.aspx.vb o .aspx.cs), el mecionado fichero Web.config y la
DLL generada.

Bueno, lo dejamos aqu hasta el prximo da en que modifiquemos el cdigo
para usar las cosillas que te he indicado anteriormente... y seguramente
aadir algunas ms, como por ejemplo usar una clase (o mdulo) para
contener cierta informacin global a todos los usuarios.
Hasta ese momento, espero que todo esto te vaya siendo de utilidad.
Esa es siempre la intencin.
Nos vemos.
Guillermo
Nerja, madrugada del 3 de Marzo de 2005

La primera aplicacin ASP .NET
MVC
Por Eduard Toms

06 de abril de 2011
Valoracin:
0 votos
9 Comentarios
ASP, .NET
Vamos a ver cmo paso a paso realizar el, ya tpico, Hola
Mundo usando ASP.NET MVC.
Creacin del proyecto
Una vez instalado ASP.NET MVC 3, nos aparece un nuevo tipo de proyecto en
Visual Studio: ASP.NET MVC 3 Application:

Le damos el nombre que queramos (en este caso MvcHelloWorld) y el directorio
donde se va a generar y listos.
En el siguiente paso nos preguntar si queremos una aplicacin "Emtpy" o
"Internet Application", y seleccionamos "Empty". La diferencia es que en el
segundo caso ya se nos genera un conjunto de controladores y vistas por defecto,
y ahora este cdigo nos liara ms que ayudara as que vamos a obviarlo. Con
"Empty" empezamos con una aplicacin ASP.NET MVC vaca.
El desplegable "View Engine" tiene dos valores: Razor y ASPX. Esto hace
referencia a la tecnologa con la cual se implementan las vistas. Si seleccionamos
ASPX nuestras vistas sern archivos .aspx, mientras que si usamos Razor
nuestras vistas sern archivos .cshtml (o .vbhtml si usamos Visual Basic). Razor
es una sintaxis nueva mucho ms compacta que ASPX y es, por tanto, la que
vamos a usar nosotros.
Finalmente le damos a "Ok" y eso nos va a crear nuestro proyecto vaco.

Estructura de un proyecto ASP.NET MVC
Incluso en una aplicacin vaca, Visual Studio nos habr creado varias carpetas, y
algunos archivos:

ASP.NET MVC sigue lo que se conoce como convention over configuration, es
decir: en lugar de usar archivos de configuracin para ciertas tareas, se usan
convenciones predefinidas. Y esas convenciones son reglas como las siguientes:
1. Las vistas se ubican en la carpeta View
2. Los controladores son clases cuyo nombre termina en Controller
Las carpetas que nos crea Visual Studio por defecto son las siguientes:
1. Content: Para tener contenido esttico (imgenes, hojas de estilo, )
2. Controllers: Para ubicar nuestros controladores
3. Models: Para ubicar las clases del modelo.
4. Scripts: Para tener archivos con cdigo javascript
5. Views: Donde van las vistas de la aplicacin
Creacin del controlador y de la accin
Vamos a crear un controlador que se encargue de recibir la peticin del navegador
(y que devuelva la vista que diga "Hola Mundo").
Para ello click con el botn derecho sobre la carpeta "Controllers" y seleccionar
Add ' Controller. Visual Studio nos preguntar el nombre del controlador:

Podemos ver que por defecto el nombre termina con Controller. Modificamos para
que en lugar de Default1Controller sea HomeController y le damos a Add. Eso nos
crear una clase HomeController en la carpeta Controllers con el cdigo:
public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
return View();
}

}
Cosas que debemos observar:
1. La clase deriva de Controller
2. Tiene un mtodo pblico que devuelve un ActionResult y que se llama Index. Esto es una
accin. Cualquier mtodo pblico de un controlador es por defecto una accin.
En ASP.NET MVC toda peticin del navegador debe ser enrutada a una peticin
(mtodo pblico) de un controlador. Por defecto se sigue la convencin de que las
URLs estn en la forma http://servidor/controlador/accion. Es decir, para invocar la
accin Index, del controlador Home, usaremos la URL: http://servidor/Home/Index.
Fijaos en un detalle importante: la clase se llama HomeController pero el nombre
del controlador es Home (sin Controller)
Creacin de la vista asociada
El cdigo de la accin que genera Visual Studio (return View();) lo que hace es
devolver la vista asociada a dicha accin. Y aqu debemos tener presente otra
convencin de ASP.NET MVC. Como se ha dicho antes las vistas cuelgan de la
carpeta /Views. Por defecto, las vistas de un controlador:
1. Estn en una subcarpeta con el nombre del controlador
2. Se llaman igual que la accin
Es decir, la vista de la accin Index del controlador Home, estar en la carpeta
/Views/Home y se llamar Index.
As pues creamos la carpeta (Add New Folder) Home dentro de Views y para
aadir la vista, click con el botn derecho sobre la carpeta recin creada en el
Solution Explorer y Add ' View. Eso nos despliega el dilogo de nueva vista:

Le ponemos "Index" como nombre y le damos a Add. Con eso Visual Studio nos
habr generado un archivo Index.cshtml (situado en /Views/Home) con el cdigo:
@{
ViewBag.Title = "Index";
}

<h2>Index</h2>
Ahora modificamos el cdigo HTML para aadir el Hello World:
@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

Hola mundo. Saludos desde <strong>ASP.NET MVC</strong>
Y listos! Con esto ya tenemos nuestra aplicacin lista.
Para probarla basta ejecutarla (con F5) y comprobar los resultados:

Un ltimo detalle: Si os fijis la URL es simplemente http://localhost, sin nada ms
y se est mostrando nuestra vista. Qu ha ocurrido? Pues que, por defecto si no
se incluye controlador se asume que es "Home" y si no se entra accin se asume
que es Index. Pero si entramos la URL completa vemos que tambin funciona:

Por otra parte si entramos un nombre de controlador o de accin que no existe,
recibimos un 404 (pgina no encontrada):

Un saludo a todos!

18com
14 dic 2010
193.457 Lecturas
Tutorial de desarrollo web con
ASP.NET
Tags: ASP, Desarrollo Web, ASP.NET, guia, tutorial
ASP.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

11com
16 dic 2010
90.982 Lecturas
Tutorial ASP.NET: Nuestra primera
pgina web
Tags: ASP.NET, tutorial
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
06
07
<%--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;
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
}
</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>
</html>
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
3
4
5
6
7
protected void btnAceptar_Click(object sender, EventArgs e)
{
lblResultado.Text = txtNombre.Text;
txtNombre.Text = string.Empty;
}
</script>
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
</head>
<body>
<div>
08
09
10
11
12
13
14
15
<br/>
<asp:Label ID="lblResultado" runat="server"
Text="[Resultado]"></asp:Label>
</div>
</form>
</body>
</html>
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.
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
<%--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 funcin desde el botn.
?
1
2
3
4
5
6
protected void Page_Load(object sender, EventArgs e)
{
this.btnAceptar.Attributes.Add("OnClick", "javascript:return
fnAceptar();");
}
</script>
Aqu asignamos la funcin fnAceptar al evento OnClick del
botn. El cdigo completo quedara de esta forma.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%--Directiva--%>

{
fnAceptar();");
}
</script>

<head id="Head1" runat="server">
<%--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>
</head>
<body>
25
26
27
28
29
30
31
32
33
34
<div>
<asp:Button ID="btnAceptar" runat="server" Text="Aceptar"/>
<br/>
<asp:Label ID="lblResultado" runat="server" ></asp:Label>
</div>
</form>
</body>
</html>
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
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("}");
11
12
13
14
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
07
08
09
10
11
12
13
14
15
<%--Directiva--%>

{
if (!IsPostBack)
{
fnAceptar();");
RegistrarScript();
}
}
private void RegistrarScript()
{
const string ScriptKey = "ScriptKey";
if (!ClientScript.IsStartupScriptRegistered(this.GetType(),
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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);
}
}
</script>
<head id="Head1" runat="server">
</head>
<body>
<div>
<asp:Button ID="btnAceptar" runat="server" Text="Aceptar"/>
<br/>
<asp:Label ID="lblResultado" runat="server" ></asp:Label>
</div>
</form>
</body>
41
42
43
44
45

</html>

7com
6 ene 2011
25.550 Lecturas
Tutorial ASP.NET: 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
2
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 <asp />
runat="server: Nos indica que se trata de un control de servidor.
onclick="btnAceptar_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
2
3
TextBox txt = new TextBox();
txt.ID = "txtNombre";
txt.Text = "MDW";
Ahora este mismo textbox lo vamos a incluir en un Panel.
?
1
2
3
Panel pnl = new Panel();
pnl.ID = "Panel";
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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Controles.aspx.cs" Inherits="Controles" %>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title></title> </head>
<body> <form id="form1" runat="server"> <div>
<asp:Label ID="lblCantidad" runat="server" Text="Ingrese un numero"></asp:Label> <asp:TextBox ID="txtCantidad"
runat="server"></asp:TextBox> <asp:Button ID="btnProceso" runat="server" Text="Button"
onclick="btnProceso_Click" /> </div>
</form> </body>
</html>
Ahora creamos otro archivo llamado Controles.aspx.cs y copiamos el siguiente cdigo.
?
01
02
03
04
05
06
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

[Guia ASP.NET Por Maestros del web]
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public partial class Controles : System.Web.UI.Page {
}
protected void Page_Load(object sender, EventArgs e) {
}
protected void btnProceso_Click(object sender, EventArgs e) {
Table tbl = new Table(); try
{
int cantidad = Convert.ToInt32(txtCantidad.Text.Trim());
Label lbl; for (int i = 0; i < cantidad; i++) {
lbl = new Label(); lbl.ID = "IdLabel" + i.ToString(); lbl.Text = "Label
Nro: " + i.ToString() + " ";
AgregarLabel(tbl, lbl); Page.Controls.Add(tbl);
}
} catch (Exception ex) {
Label lbl = new Label(); lbl.ID = "error"; lbl.Text = ex.Message;
AgregarLabel(tbl, lbl); Page.Controls.Add(tbl);
}
private void AgregarLabel(Table t,Label l) {
}
}
TableCell tc = new TableCell(); TableRow tr = new TableRow();
tc.Controls.Add(l); tr.Cells.Add(tc); t.Rows.Add(tr);
Acabamos de ver como generamos controles de servidor por programacin, ahora vamos a ver como
trabajamos con eventos en forma dinmica.
?
1
2
3
4
5
6
7
8
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Controles.aspx.cs" Inherits="Controles" %>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<asp:Label ID="lblCantidad" runat="server" Text="Ingrese un numero"></asp:Label> <asp:TextBox ID="txtCantidad"
runat="server"></asp:TextBox> <asp:Button ID="btnProceso" runat="server" Text="Button"/>
</div>
</form> </body>
</html>
Aqu tenemos el mismo formulario a diferencia que el botn no tiene el evento OnClick. Ahora lo vamos
a hacer en tiempo de ejecucin. Esto es equivalente aonclick="btnProceso_Click" pero por
programacin.btnProceso.Click += new EventHandler(btnProceso_Click);
Este cdigo lo vamos a agregar en el evento Page_Load que se ejecuta cada vez que se carga la pgina.
?
1
2
protected void Page_Load(object sender, EventArgs e) { if(!IsPostBack)
btnProceso.Click += new EventHandler(btnProceso_Click);}
Se agrega un concepto nuevo en el evento Page_Load IsPostBack. Se usa para saber si ya se ha
ejecutado el mtodo Page_Load. Como en este caso slo necesitamos que se declare el slo una vez
preguntamos si es la primera vez que se ejecuta medianteif(!IsPostBack).
Las veces posteriores que se cargue la pgina no entrarn en ese IF. El signo ! es el negado de la
funcin, es como preguntar NO ES POSTBACK?
Captulo 1: Tutorial de desarrollo web con ASP.NET
Captulo 2: Primera aplicacin web en ASP.NET
Captulo 3: Ejecutar cdigo JavaScript en ASPNET
Captulo 4: Archivos Web.Config y Global.asax
Captulo 5: Utilizacin de Cdigo detrs del modelo o cdigo en lnea
Captulo 6: Controles de servidor y eventos
En el prximo captulo que se publica el martes veremos: Controles de Usuarios Reutilizables.

3com
11 ene 2011
24.245 Lecturas
Tutorial ASP.NET: Controles de
usuarios reutilizables
ASP.NET nos provee controles WEB y HTML pero puedes crear tus propios controles personalizados
y reutilizables para tu aplicacin. Los controles de usuario tiene la extensin.ascx, cuya sintaxis
declarativa es similar a la que se emplea para crear pginas web ASP.NET. Hasta el momento usbamos
la declarativa @ Page ahora necesitamos usar @ Control para identificarlo como control de
usuario personalizado.
Algo muy interesante de los controles de usuarios adems que le podemos agregar toda la funcionalidad
que queramos, podemos usuarios en cualquier WebForms del sitio y al estar centralizados cualquier
modificacin que realicemos en nuestros Control se ver reflejado en todo el sitio donde estemos usando
el control.
Ejemplo en cdigo de un control de usuario:
Vamos a llamar a nuestro control UCTextBox.ascx
?
1
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="UCTextBox.ascx.cs" Inherits="UCTextBox" %>
Con la directiva @ Control ASP.Net ya entiende que se trata de un control de usuario y su
correspondiente CodeBehind llamado UCTextBox.ascx.cs.
Hasta el momento slo le estamos diciendo a ASP.NET que este es un control de usuario, an no le
indicamos que har este control. Ahora vamos a agregar un control de servidorTextBox y lo vamos a
personalizar.
?
1 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Para que el ejemplo sea sencillo vamos a darle una funcionalidad nueva que el textbox que nos provee
ASP.NET no tiene. Determinar si el contenido del TextBox es numrico y hacer algo al respecto.
Vamos a agregar algunas propiedades ms al TextBox:
?
1
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"
ontextchanged="TextBox1_ TextChanged"></asp:TextBox>
Propiedades necesarias para el ejemplo:
ontextchanged="TextBox1_TextChanged" : como vimos en el captulo de eventos, vamos a
ejecutar ese mtodo cuando cambie el contendido del textbox.
AutoPostBack="True" : al estar seteado en True hace que se realice un postback y vaya al
servidor.
Contenido del UCTextBox.ascx.cs
?
01
02
03
04
05
06
07
08
09
10
11
12
13
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
public partial class UCTextBox : System.Web.UI.UserControl {
}
//Atributo
private bool _esnumerico = false; //Propiedad public bool EsNumerico {
get { return this._esnumerico; } set { this._esnumerico = value; }
}
protected void TextBox1_TextChanged(object sender, EventArgs e) {
14
15
16
17
18
19
20
21
22
23
24
25
if (this.EsNumerico && !IsNumeric(TextBox1.Text.Trim())) {
this.TextBox1.Text = string.Empty; return;
}
//Metodo publico que evalua si el valor ingresado es numero o no.
public bool IsNumeric(object Expression) {
bool isNum; double retNum;
isNum = Double.TryParse(Convert.ToString(Expression), System.Globalization.NumberStyles. Any,
System.Globalization.NumberFormatInfo.InvariantInfo, out retNum);
}
}
}
return isNum;
Cmo funciona?
Todo est atado a la propiedad pblica bool EsNumerico en caso que este seteada en TRUE el
control va a responder de determinada manera.
El EventHandler TextBox1_TextChanged pregunta si EsNumerico es verdadero y adems el
contenido del textbox no es nmero entonces limpia el control y no continua con la accin.
?
1
2
3
4
5
protected void TextBox1_TextChanged(object sender, EventArgs e) {
if (this.EsNumerico && !IsNumeric(TextBox1.Text.Trim())) {
this.TextBox1.Text = string.Empty; return;
}
}
Ahora vamos a ver como insertar este Control de usuario en un WebForm. De la misma forma que lo
hacemos con un Control web lo hacemos con un Control de usuario pero con algunas variantes.Lo
primero que debemos hacer es declarar el Control de usuario en el ASPX.
?
1 <%@ Register src="UCTextBox.ascx" tagname="UCTextBox" tagprefix="uc1" %>
El tagprefix es importante ya que ese tag reemplazara al asp que tienen los controles web que nos brinda
ASP.NET.
?
1 <uc1:UCTextBox ID="UCTextBox1" runat="server" />
Ahora en nuestra pagina web veremos implementado el Control de usuario.
Qu ms nos falta? debemos determinar si la propiedad publica EsNumerico la dejamos enFALSE que
es como la seteamos por default o en TRUE para que tome acciones sobre el contenido del textbox.
Agregamos esta lnea en el Page_Load del webform.
?
1
this.UCTextBox1.EsNumerico = true;
Muchas veces necesitamos cargar un control de usuario dinmicamente y en tiempo de ejecucin. Para
ellos usaremos la siguiente sintxis.
?
1 Control MiControl = LoadControl("UCTextBox.ascx");
Captulo 7: Controles de usuarios reutilizables
En el prximo captulo que se publica el jueves veremos: Crear una pgina de login, autenticacin y
seguridad .

2com
13 ene 2011
68.114 Lecturas
Tutorial ASP.NET: Crear una
pgina de login, autenticacin y
seguridad
Tags: ASP.NET, tutoriales
Vamos a ver como ASP.NET nos brinda controles de servidor complejos que nos facilitan la
implementacin de funcionalidades complejas en nuestras aplicaciones. Un buen ejemplo es el control
de Login.
?
1 <asp:Login ID="Login1" runat="server"></asp:Login>

Antes de comenzar a ver cmo funciona y lo simple que es hacerlo funcional, vamos a ver las
propiedades principales que ofrece para adaptarlo a nuestras necesidades.
?
1
2
3
4
<asp:Login ID="Login1" runat="server"
LoginButtonText="Ingresar"
PasswordLabelText="Contrasea:" RememberMeText="Recordarme la proxima
vez." TitleText=""
UserNameLabelText="Usuario:">
5
</asp:Login>
Propiedades que utilizamos son:
LoginButtonText : Nos permite modificar el texto del botn.
PasswordLabelText : Texto de la solicitud de contrasea.
UserNameLabelText : Texto de la solicitud de nombre de usuario.
RememberMeText : Texto de recordatorio.
Ahora nuestro control nos queda de esta manera.

Ahora que ya pudimos cambiar el idioma usando las propiedades que nos ofrece el control, vamos a ver
cmo le damos funcionalidad a travs de sus eventos.
El Evento principal es Authenticate ah evaluamos si el usuario y contrasea provistos son
correctos de la siguiente forma: Agregamos el
EventHandleronauthenticate="Login1_Authenticate" a nuestro control LOGIN. Ahora quedar
de esta forma en el webform.
?
1
2
<asp:Login ID="Login1" runat="server" onauthenticate="Login1_Authenticate" LoginButtonText="Ingresar"
PasswordLabelText="Contrasea:" RememberMeText="Recordarme la proxima vez." TitleText=""
UserNameLabelText="Usuario:"> </asp:Login>
Ahora veremos el cdigo que se ejecutar al querer autenticarse.
?
1
2
protected void Login1_Authenticate(object sender, AuthenticateEventArgs e) {
bool Autenticado = false;
Autenticado = LoginCorrecto(Login1.UserName, Login1.Password);
3
4
5
6
7
8
9
e.Authenticated = Autenticado; if (Autenticado) {
Response.Redirect("Default.aspx");
}
private bool LoginCorrecto(string Usuario, string Contrasena) { if
(Usuario.Equals("maestros") && Contrasena.Equals("delweb"))
return true; return false;
}
En este ejemplo estoy prefijando en el cdigo un usuario y password (maestros,delweb). En estos
casos el mtodo privado LoginCorrecto por lo general va a una base de datos donde estn
almacenados los usuarios y passwords y recin ah se verifica si es correcto.
Otros controles relacionados a login son:

CreateUserWizard que nos da todas las facilidades para dar de alta nuevos usuarios.

Captulo 8: Crear una pgina de login, autenticacin y seguridad.
En el prximo captulo que se publica el martes veremos: Utilizacin de estilos en ASP.NET (CSS).
ASP.NET nos permite factorizar la informacin de estilo y
diseo en un grupo separado de ficheros. Un Tema se
puede aplicar a cualquier sitio de forma que afecte a la
apariencia y entorno de las pginas y controles del sitio.
Los cambios en el Estilo de un sitio pueden administrarse
realizando cambios al Tema, sin tener que editar las
pginas de forma individual.
Los Temas tambin se pueden compartir con otros
desarrolladores. Hay varias formas de aplicar ESTILOS a
una pgina web en ASP.NET pero no todas son las ms
ptimas. Todo control de servidor tiene atributos que nos
permiten cambiar su aspecto.
?
1
2
3
4
5
6
7
8
9
<asp:Label ID="Label1" runat="server"
BackColor="#FF6600"
BorderColor="#00CC00"
BorderStyle="Solid"
Font-Bold="True"
Font-Names="Arial"
Font-Size="10pt"
ForeColor="White"
Text="Mi label"></asp:Label>
Aplicando este diseo nuestro Label se ve de esta forma.

Aplicar estilos mediante atributos tiene sus ventajas y
desventajas.
Por un lado la comodidad y velocidad de aplicar un estilo
particular a un control determinado. Pero por el otro, al no
estar centralizado, no te permite reutilizar el estilo para
aplicar a otros controles y si has aplicado este estilo a
varios controles y deseas cambiarlo debers hacerlo uno
por uno.
La mejor opcin es utilizar Hojas de estilo Cascading
Style Sheets (CSS) factorizar los ajustes de estilo de
forma separada de las propiedades de los controles.
Veamos cmo podemos aplicar el mismo estilo utilizando
hojas de estilo CSS. Lo primero que vamos a hacer es
crear un archivo con la extensin CSS. (StyleSheet.css).
En este archivo tendremos la definicin del estilo.
Agregamos la siguiente definicin a nuestro archivo .css:
?
01
02
03
04
05
06
07
08
09
10
.MiLabel
{
border-color: #00CC00;
border-style: solid;
background-color: #FF6600;
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
}
Luego creamos la referencia a la hoja de estilo en
nuestro aspx.
?
1 <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Y por ltimo indicamos a nuestro control LABEL que utilizara
la clase MiLabel.
?
1
2
<asp:Label ID="Label1" runat="server"
CssClass="MiLabel" Text="Mi label"></asp:Label>
De esta manera cada control que necesitemos aplicarle el
mismo estilo simplemente deber indicarle a la
propiedad CssClass el nombre del estilo que se desea
aplicar.
Captulo 9: Utilizacin de estilos en ASP.NET (CSS)
En el prximo captulo que se publica el jueves
veremos: Trabajando con XML y Web Services.

4com
20 ene 2011
34.365 Lecturas
Tutorial ASP.NET: Trabajando con
XML y Web Services
Los servicios web XML permiten intercambiar datos en forma de mensajes XML entre sistemas
heterogneos. Los servicios web se crean utilizando el entorno de aplicacin ASP.NET, lo que permite a
estos tener acceso a numerosas caractersticas de .NET Framework.
Cmo crear un web services usando el IDE de ASP.NET?
1.- Lo primero que debemos hacer es agregar un nuevo tem de tipo WebService a la solucin.
Hacemos botn derecho sobre el proyecto, Add new tem.

De la lista de tems seleccionamos Web Service que por default nos propone un nombre. Lo vamos a
cambiar para no confundir los conceptos. Nuestro Web Services se llamarwsMDW.asmx

Ahora vamos a tener en nuestro proyecto dos archivos nuevos.
wsMDW.asmx
wsMDW.cs: este archivo va a contener los mtodos y objetos que necesitamos publicar.
wsMDW.cs
Esta es la estructura base de la clase wsMDW. Esta clase hereda
de System.Web.Services.WebService y de esta forma la identificamos como Web Services.
?
01
02
03
04
05
06
07
08
using System;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class wsMDW : System.Web.Services.WebService {
public wsMDW ()
09
10
11
{ } AQUI VAN LOS METODOS WEB QUE VAMOS A PUBLICAR
}
Nuestro primer mtodo web:
Vamos a agrega un mtodo llamado FechaYHora que nos va a devolver la fecha y hora del servidor.
?
1
2
3
[WebMethod] public string FechaYHora() {
return DateTime.Now.ToString();
}
Vemos que tiene la misma apariencia de un mtodo comn y corriente.
Las dos grandes diferencias son que este mtodo est dentro de una clase que Hereda
de System.Web.Services.WebService y tiene el Decorate [WebMethod] que lo identifica como
Mtodo web.
Perfecto, ahora nos preguntamos qu tiene que ver XML en todo eso. Sencillamente lo que responde un
Web Services es en formato XML. Vamos a ejecutarlo presionando F5 desde el IDE de ASP.NET

Ahora clickeamos sobre el link FechaYHora lo invocamos y veremos en pantalla la respuesta que nos
da el web services.
El resultado es este XML con el tag string cuyo valor es la fecha y hora del momento en que se ejecuto
el mtodo web.
?
1
2
<?xml version="1.0" encoding="utf-8" ?>
<string xmlns="http://tempuri.org/">29/10/2010 11:18:26 p.m.</string>
De la misma forma se crean y prueba otros mtodos web que reciban o no parmetros. Ahora veamos un
ejemplo simple de un mtodo web que recibe parmetros.
Podemos probar con el clsico HOLA.
?
1
2
3
4
[WebMethod]
public string Hola(string Nombre)
{
return "Hola " + Nombre; }

Presionamos sobre el link Hola y nos va a pedir el parmetro NOMBRE que definimos en
nuestro mtodo web.

Agregamos un nombre, invocamos y veamos la respuesta.
?
1
2
<?xml version="1.0" encoding="utf-8" ?>
<string xmlns="http://tempuri.org/">Hola Fernando</string>
De esta forma testeamos web services. Ahora nos interesa ver como los podemos utilizar dentro de
nuestra aplicacin. Lo primero que vamos a hacer es generar una referencia web de la siguiente forma.
1.- Hacemos botn derecho sobre el proyecto y agregamos una referencia web.

En esta ventana nos da 3 opciones.

2.- Como el web services est dentro del proyecto vamos a seleccionar la primera opcin.

Ah se van a listar todos los web services que tengamos en nuestro proyecto.
3.- Seleccionamos el Servicio wsMDW y nos va a mostrar un preview y nos solicita un nombre.
Pondremos ServicioWeb

4.- Por ltimo, agregamos el servicio presionando el botn Add reference y se agrega la referencia a
nuestro proyecto.
Como vemos se creo una nueva carpeta App_WebReferences, ServicioWeb y el archivo
wsMDW.discomap

Ahora que ya tenemos referenciado nuestro web services en el proyecto podemos consumirlo.
Supongamos que queremos invocar el mtodo FechaYHora y mostrarlo en pantalla. Para eso, vamos a
crear un nuevo webform llamado ConsumoWS.aspx, y agregamos un Label donde vamos a mostrar la
respuesta del mtodo.
ConsumoWS.aspx
?
1
2
3
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="ConsumoWS.aspx.cs" Inherits="ConsumoWS" %>
<html> <head runat="server">
4
5
6
7
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div>
</form> </body>
</html>
Ahora la llamada al mtodo web la hacemos desde el CodeBehind.
ConsumoWS.aspx.cs
Agregamos estas lneas al mtodo Page_Load
?
1
2
3
4
ServicioWeb.wsMDW miws = new
ServicioWeb.wsMDW();
Label1.Text = miws.FechaYHora();
}
As de simple se crea y consume un web services realizado en ASP.NET
Captulo 9: Utilizacin de estilos en ASP.NET (CSS)
Captulo 10: Trabajando con XML y Web Services

7com
25 ene 2011
47.934 Lecturas
Tutorial ASP.NET: Acceso a datos,
consultar y guardar informacin
desde WebForms
Una de las funcionalidades ms importantes y necesarias que debe tener una pgina web es el acceso a
datos, ADO.NET nos ofrece libreras completas para poder trabajar con acceso a datos. Por lo general
para guardar y leer informacin se utilizan bases de datos tales como SQL Server, MySQL, Oracle y
dems.
A modo de ejemplo nosotros vamos a trabajar con un repositorio de datos ms accesible, como por
ejemplo: Excel.
Vamos a leer y guardar informacin en un archivo de Excel trabajndolo desde ASP.NET. Lo primero
que debemos hacer es crear un libro de Excel como vemos en la imagen. Ahora la llamaremos
Personas, y le daremos ttulos a las tres primeras columnas: Nombre, Apellidoy Edad.
Nuestro libro de Excel lo llamaremos LibroExcel.xlsx y lo vamos a guardar en el raz del disco
C. C:\LibroExcel.xlsx

Es importante la creacin correcta de este libro de Excel ya que lo vamos a utilizar como base de datos.
Donde cada hoja ser una tabla y cada columna con titulo sern los campos. Ahora que tenemos nuestra
base de datos llamada LibroExcel con la tabla Personas y sus campos: Nombre, Apellido y Edad.
Trabajando con DATOS desde ASP.NET
Vamos a crear un WebForm llamado ADO.aspx y le colocamos:
3 objetos: Label
3 objetos: TexBox
1 botn
1 GridView
?
01
02
03
04
05
06
<@ Page Language="C#" AutoEventWireup="true" CodeFile="ADO.aspx.cs" Inherits="ADO" %>
<title></title>
<style type="text/css">
.style1{width: 100%;}
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
.style2{width: 86px; }
</style>
</head>
<body>
<div>
<table class="style1">
<tr>
<td class="style2">
<asp:Label ID="lblNombre" runat="server" Font-Names="Arial" Font-Size="10pt"
Text="Nombre"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtNombre" runat="server" Width="205px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2">
<asp:Label ID="lblApellido" runat="server" Font-Names="Arial" Font-Size="10pt"
Text="Apellido"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtApellido" runat="server" Width="205px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2">
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<asp:Label ID="lblEdad" runat="server" Font-Names="Arial" Font-Size="10pt"
Text="Edad"></sp:Label>
</td>
<td>
<asp:TextBox ID="txtEdad" runat="server" Width="40px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2">
 </td>
<td>
<asp:Label ID="lblMensajes" runat="server" Font-Bold="True" Font-Names="Arial"
Font-Size="10pt" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
<asp:Button ID="btnGuardar" runat="server" onclick="btnGuardar_Click"
Text="Guardar" />
<br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<br />
<br />
</div>
</form>
</body>
</html>
57
58
59
60
Les muestro como se ve este formulario.

La grilla an no tiene datos, por eso no se muestra en pantalla. Este formulario solo tiene una accin y
est asociada al botn:
?
1
2
3
<asp:Button ID="btnGuardar" runat="server"
onclick="btnGuardar_Click"
Text="Guardar" />
El botn lo que hace es guardar el contenido de los campos en nuestra base de datos en Excel. Vamos a
sumar ms facilidades que nos provee .NET para el acceso a datos, utilizaremos la
librera System.Data.OleDb que contiene objetos para conectar y ejecutar acciones sobre la
conexin. Los objetos nuevos son:
?
1
2
3
4
using System.Data.OleDb;
OleDbConnection
OleDbCommand
OleDbDataAdapter
using System.Data; DataTable
Veamos como se utilizan estos objetos de conexin en la prctica.
Las funcionalidades bsicas son dos: Leer y escribir, entonces vamos a armar dos mtodos para
responder a estas necesidades.
Mtodo Leer ():
Necesita una cadena de conexin qu es eso? debemos decirle que proveedor de datos vamos a
necesitar, donde est la fuente y de qu tipo es.
@"Provider=Microsoft.ACE.OLEDB.12.0; Data Source=C:\\LibroExcel.xlsx;
Extended Properties=""Excel 12.0 Xml; HDR=YES;""";
Si no tienen este proveedor instalado lo pueden descargar gratis del centro de descarga de
Microsoft (Access Database Engine). Luego establecemos la conexin y levantamos datos del Excel.
Por ltimo bajamos los datos a un DataTable y lo enlazamos con nuestroGridView para ver los datos
en pantalla.
?
01
02
03
04
05
06
07
08
09
10
private void Leer()
{
string connectionString = @"Provider=Microsoft.ACE.OLEDB.12.0; Data
Source=C:\\LibroExcel.xlsx; Extended Properties=""Excel 12.0 Xml; HDR=YES;""";
OleDbConnection conn = new OleDbConnection(connectionString);
OleDbDataAdapter da = new OleDbDataAdapter("Select * From [Personas$]", conn);
DataTable dt = new DataTable();
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
Mtodo Escribir ():
La forma de acceder a los datos es similar al leer con la diferencia que en lugar de usar
unDataAdapter vamos a usar un DbCommand para insertar los nuevos datos en nuestra base.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
private void Escribir()
{
string connectionString = @"Provider=Microsoft.ACE.OLEDB.12.0;Data
Source=C:\\LibroExcel.xlsx;Extended Properties=""Excel 12.0 Xml;HDR=YES;""";
OleDbConnection conn = new OleDbConnection(connectionString);
string insert = "Insert into [Personas$] (Nombre,Apellido,Edad) Values (?,?,?)";
OleDbCommand insertCommand = new OleDbCommand(insert, conn);
try
{
insertCommand.Parameters.Add("Nombre", OleDbType.VarChar).Value = txtNombre.Text;
insertCommand.Parameters.Add("Apellido", OleDbType.VarChar).Value = txtApellido.Text;
if (IsNumeric(txtEdad.Text))
{
insertCommand.Parameters.Add("Edad", OleDbType.Integer).Value
= Convert.ToInt32(txtEdad.Text);
}
else
{
throw new Exception("La edad debe ser numerica");
}
conn.Open();
int count = insertCommand.ExecuteNonQuery();
}
catch (OleDbException ex)
{
lblMensajes.Text = ex.Message;
}
catch (Exception ex)
26
27
28
29
30
31
32
33
34
{
lblMensajes.Text = ex.Message;
}
finally
{
conn.Close();
}
}
Ya tenemos los dos mtodos mas importantes ahora debemos llamarlos desde el botn (mtodo escribir)
y desde el Page_Load (evento leer).
?
1
2
3
4
5
6
7
8
{
Leer();
}
protected void btnGuardar_Click(object sender, EventArgs e)
{
Escribir();
}
Dentro del mtodo Escribir estamos utilizando el mtodo IsNumeric(txtEdad.Text) que ya vimos
con anterioridad para comprobar si la edad ingresada es numrica. As queda en funcionamiento nuestro
primer contacto con conexin a datos. Cargamos datos en los campos y presionamos el botn Guardar.

Agregamos un nuevo registro.

Nuestro libro de Excel ahora se ver as.

Comentarios desactivados
27 ene 2011
19.704 Lecturas
Tutorial ASP.NET: Estructura de
clases y objetos
Muchas veces necesitamos reutilizar cdigo en nuestros proyectos, utilizar la misma funcionalidad en
varias partes diferentes de nuestro proyecto. La solucin a este problema es introducir cdigo en la
carpeta App_Code donde podemos crear clases con mtodos que pueden utilizarse desde todo el
proyecto y se compila en tiempo de ejecucin.
La carpeta App_Code puede contener todos los archivos y subcarpetas que necesitemos. Se Puede
organizar el cdigo fuente de la forma que creamos ms conveniente, ya que ASP.NET lo compilar en
un solo ensamblado al que podr tener acceso el cdigo de cualquier parte de la aplicacin Web.
Cdigo compartido
En los ejemplos anteriores tuvimos la necesidad de contar con cdigo compartido. Por ejemplo, el
mtodo IsNumeric lo utilizamos en el Captulo 7: Controles de usuarios reutilizables y en el Captulo
11: Acceso a datos(consultar y guardar informacin desde WebForms).
Estructura de una clase: Una clase est compuesta por Atributos, Propiedades, Mtodos y
Eventos. Aunque no necesariamente deba tener todos sus componentes declarados. Podemos crear
clases que slo tengan mtodos o que slo tengan atributos y propiedades.
Ejemplo de una clase bsica: El primer evento de nuestra clase va a ser el constructor, al
instanciar la clase (Objeto) lo primero que se ejecuta es el constructor.
?
1
2
3
4
5
6
public class Herramientas
{
public Herramientas()
{
}
}
Ahora agregaremos un mtodo que nos facilite la reutilizacin de cdigo, como por
ejemplo:IsNumeric().
?
01
02
03
04
05
06
07
08
09
using System;
using System.Web;
public class Herramientas
{
public Herramientas()
{
}
public bool IsNumeric(object Expression)
{
10
11
12
13
14
15
16
bool isNum;
double retNum;
isNum = Double.TryParse(Convert.ToString(Expression), System.Globalization.NumberStyles.Any,
System.Globalization.NumberFormatInfo.InvariantInfo, out retNum);
return isNum;
}
}
Ya tenemos creada nuestra clase Herramientas.cs en la carpeta App_Code. Cmo podemos utilizar
el mtodo IsNumeric() desde cualquier parte de nuestra solucin Web?
Lo primero que debemos hacer es instanciarla.
?
1 Herramientas herr = new Herramientas();
Ahora podemos ver dentro de nuestro objeto herr los mtodos pblicos.

Este mtodo nos devuelve un Booleano: verdadero o falso y nos sirve para evaluar. Vamos a llamar a la
clase Herramientas desde el mtodo Escribir del captulo anterior.
?
1
2
3
4
Herramientas herr = new Herramientas();
if (herr.IsNumeric(txtEdad.Text))
{
}
De esta forma nos evitamos tener que codificar el evento IsNumeric en cada parte del cdigo donde lo
necesitemos.
Clases estticas:
Las clases estticas son clases que no tienen un constructor invocable, por consiguiente no hay que
instanciarlas y se pueden acceder a los mtodos en forma directa.
Veamos el ejemplo anterior pero declarando la clase como esttica y su utilizacin.
?
1
2
3
4
5
6
7
8
9
public static class Herramientas
{
static Herramientas()
{
}
public static bool IsNumeric(object Expression)
{
}
}
Al no tener la necesidad de instanciarla la llamada al mtodo IsNumeric lo hacemos en forma directa
de la siguiente forma.

4com
31 ene 2011
31.492 Lecturas
Tutorial ASP.NET: Utilizacin de
Master Pages
Cuando creamos un sitio web tenemos la necesidad de repetir ciertas partes de una pgina en todo el
sitio o en parte del sitio. Para no estar copiando y pegando las mismas estructuras en todas las pginas lo
que podemos hacer es crear una Master Page y referenciarla en las otras pginas.
Cmo lo hacemos?
La construccin de las pginas maestras son similares a la creacin de web forms con algunas
diferencias.
La extensin del archivo es .master
Usa la directiva @ Master
Contiene un objeto ContentPlaceHolder donde lo utilizara para mostrar el contenido de las
pginas del sitio.
Veamos la estructura de una Master Page:
La llamaremos Main.master
?
01
02
03
04
05
06
07
08
09
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Main" %>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div>
10
11
12
13
14
15
16
17
18
19
<asp:Label ID="Label1" runat="server" Text="Mi sitio Web para Maestros del Web"
Font-Names="Tahoma" Font-Size="14pt"></asp:Label>
<br />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Al igual que los web forms las master pages puede tener su cdigo separado
CodeFile="Main.master.cs"
En nuestro ejemplo vemos que hemos agregado al formulario un Label con un texto

Ya tenemos creada nuestra master page con su ContentPlaceHolder1 donde se mostrar el contenido
del web form.
Para poder indicarle a un web form que queremos que este contenido en la master page debemos agregar
la propiedad MasterPageFile="~/Main.master" a la directiva page.
?
1 <%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs"Inherits="Default3" %>
2
3
4
5
6
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<%--Aqui dentro van los objetos de nuestro web forma--%>
</asp:Content>
Como vemos la estructura de nuestro aspx debe cambiar, ya los tags html no estn porque ya estn en la
master page, entonces slo debemos ubicar los controles dentro deContentPlaceHolder1 de la
siguiente forma.
Tomamos como ejemplo ADO.aspx del captulo anterior, y queda de la siguiente forma.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table>
<tr><td>
<asp:Label ID="lblNombre" runat="server" Font-Names="Arial" Font-Size="10pt"
Text="Nombre"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtNombre" runat="server" Width="205px"></asp:TextBox>
</td>
</tr>
<tr><td>
<asp:Label ID="lblApellido" runat="server" Font-Names="Arial" Font-Size="10pt"
Text="Apellido"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtApellido" runat="server" Width="205px"></asp:TextBox>
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</td>
</tr>
<tr><td>
<asp:Label ID="lblEdad" runat="server" Font-Names="Arial" Font-Size="10pt"
Text="Edad"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEdad" runat="server" Width="40px"></asp:TextBox>
</td>
</tr>
<tr><td>
 </td>
<td>
<asp:Label ID="lblMensajes" runat="server" Font-Bold="True" Font-Names="Arial"
Font-Size="10pt" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
<asp:Button ID="btnGuardar" runat="server"
Text="Guardar" />
<br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</asp:Content>
Si ejecutamos ahora nuestro ADO.aspx lo veremos de la siguiente manera.

Donde el ttulo y los tags HTML estn en la master page y los controles estn en ADO.aspx.

2com
2 feb 2011
52.328 Lecturas
Tutorial ASP.NET: Cmo crear
mens de navegacin
Podemos crear mens de navegacin para su sitio web utilizando el control men deASP.NET.

?
1 <asp:Menu ID="Menu1" runat="server"></asp:Menu>
El control men tiene ciertas propiedades que nos permiten adaptar a nuestro gusto y necesidad. Por
default el control men es un control vertical. Para nuestra pgina vamos a necesitar que sea horizontal.
?
1
2
Orientation="Horizontal"
Orientation="Vertical"
Todo men debe tener tems que nos sirvan de acceso a las diferentes partes del sitio.
?
1
<Items></Items>
Dentro de los tags tems debemos detallar los MenuItems que necesitamos.
?
1
<asp:MenuItem></asp:MenuItem>
Los mens se comportan en relacin a una estructura de rboles normalmente organizados en diferentes
niveles de una jerarqua. La primera rama es el root del men y las siguientes son los sub menes.
?
1
2
3
4
5
6
7
8
9
<asp:MenuItem>
<asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem>
<asp:MenuItem />
<asp:MenuItem />
<asp:MenuItem />
</asp:MenuItem>
</asp:MenuItem>
Vamos a armar un men con tres opciones para nuestro sitio web y lo vamos a incluir en nuestra master
page.
?
1
2
3
4
5
6
7
<asp:Menu ID="Menu1" runat="server" />
<Items>
<asp:MenuItem NavigateUrl="~/Menu1.aspx" Text="Menu1" Value="1"/>
</Items>
</asp:Menu>
ASP.NET permite agregarle estilo al control mediante determinadas propiedades del tab MENU.
?
1
2
3
4
5
6
BackColor="#B5C7DE"
DynamicHorizontalOffset="2"
Font-Names="Verdana"
Font-Size="0.8em"
ForeColor="#284E98"
StaticSubMenuIndent="10px"
Estilos para las acciones:
?
1
2
3
4
5
6
<StaticSelectedStyle BackColor="#507CD1" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
7 <StaticHoverStyle BackColor="#284E98" ForeColor="White" />
Nuestro men y formato se ve de esta forma
?
1

?
1

1com
7 feb 2011
36.217 Lecturas
Tutorial ASP.NET: Utilizacin de
AJAX
ASP.NET AJAX es un conjunto de extensiones que permiten la implementacin de AJAX en web forms
que nos permiten actualizar datos en la pantalla sin necesidad de una recarga completa de la misma. Para
poder usar AJAX en un entorno ASP.NET es necesario tener instaladas las extensiones de AJAX.
Podemos encontrarlas en el centro de descargas de Microsoft:

Una vez instaladas ya podemos comenzar a utilizar los controles AJAX en nuestros formularios
ASP.NET

El control AJAX ms usado es el UpdatePanel que justamente nos permite recargar solo una porcin de
nuestra pgina. El control UpdatePanel necesita del ScriptManager para funcionar.
Cmo se implementa AJAX en nuestro sitio Web?
Una vez instaladas las extensiones de ajax debemos indicarle a nuestro sitio web que deber responder a
controles AJAX. Esto lo hacemos agregando las siguientes lneas en nuestroWeb.Config.
?
01
02
03
04
05
System.Web.Extensions
System.Web.Extensions.Design
<runtime>/code>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<dependentAssembly>
<assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35"/>
06
07
08
09
10
11
12
13
14
<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35"/>
<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>
</dependentAssembly>
</assemblyBinding>
</runtime>
En caso de utilizar la IDE del Visual Studio no sera necesario agregar estas lneas ya que al crear el
proyecto las agrega por default. Uno de los formularios que realizan postback, es decir, que van al
servidor y se vuelven a recargar es el formulario ADO.NET. En este vamos a implementar el
UpdatePanel para que no recargue toda la pgina.
Agregamos el control ScriptManager en la parte inicial del webform o del ContentPlaceHolder. En
nuestro caso que estamos usando Master Page con el webform ADO.aspx.
?
1
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Luego colocamos todo el formulario que creamos (cuadros de textos, labels, botons, grilla, tablas, etc.)
dentro del UpdatePanel.
?
1
2
3
4
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Aqu pondremos todos los controles
</ContentTemplate>
</asp:UpdatePanel></code>
5
Ejecutamos ADO.aspx y veremos que cada vez que va a guardar informacin o leer informacin no va
a recargar toda la pgina, solamente la porcin que est dentro del UpdatePanel.

Tutorial para La Creación de Un Sitio Web Con Autenticación Mediante Formulario

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tutorial para La Creación de Un Sitio Web Con Autenticación Mediante Formulario

Transféré par

Droits d'auteur :

Formats disponibles

Tutorial para la

Vous aimerez peut-être aussi