Fundamentos Aplicaciones Web

7/17/2019 Fundamentos Aplicaciones Web

http://slidepdf.com/reader/full/fundamentos-aplicaciones-web 1/38

FUNDAMENTOS DEL DESARROLLO DE APLICACIONESWEB

Introducción al desarrollo con ASP.NET

Más que una evolución sobre ASP, ASP.NET es una auténtica revolución en el mundodel desarrollo Web, y no sólo en el ámbito relacionado con Microsot. !o que me"ordeine al desarrollo combinado con ASP.NET y #isual Studio es que ha equiparado lacreación de aplicaciones para Internet a lo que era común en entornos de escritorio,salvando las in$erentes diicultades que ello conlleva de orma trans%arente al%ro&ramador.

!os %ro&ramadores de ASP.NET dis%onen de todo lo que 'siem%re' $an disrutado los%ro&ramadores de Windo(s) dise*adores visuales, asistencia avan+ada contetual,códi&o com%ilado de alto rendimiento, trans%arencia acerca de dónde se e"ecuta cada

%arte del códi&o, enlace a datos, re"illas, etc...

Las páginas ASPXSi nos vamos a lo undamental es %osible crear una %á&ina ASP.NET usando el bloc denotas y sin saber nada de la %lataorma .NET y de sus dierentes es%acios de nombre.

!as %á&inas de servidor de ASP.NET son en esencia archivos de texto que contienen-TM! y etiquetas y que tienen una extensión '.aspx' . Por ello se les denomina demodo &enérico páginas ASPX .

Al i&ual que las %á&inas ASP clásicas so%ortan el uso de etiquetas <% %> %aradelimitar bloques de códi&o. e $ec$o, %or com%atibilidad, se %uede usar en &ranmedida todo lo que conocemos de ASP /.0, lo cual no quiere decir que sea lo másrecomendable. Sin embar&o %ara amiliari+arnos $aremos un e"em%lo sencillo.



Figura 3.1.1.- Página !P" sencilla

El códi&o de la i&ura no se distin&ue de una %á&ina ASP clásica salvo %or la etensióndel arc$ivo 1.asp# en lu&ar de .asp2. Sin embar&o si nave&amos $asta esta %á&ina1ubicada en el ra3+ de nuestro servidor 44S2 veremos que el resultado es el quees%erábamos)

Figura 3.1.$.- esultado del código anterior

e todos modos, aunque no %odamos %ercibirla, ya eiste una sustancial dierencia conuna %á&ina ASP) el %eque*o ra&mento de códi&o que $emos incluido se $a com%iladoantes de e"ecutarlo, en lu&ar de $aberse inter%retado como en ASP. 5bviamente eneste caso no orece venta"a al&una, %ero es im%ortante conocer esta caracter3stica%ues nuestras a%licaciones obtendrán un mayor rendimiento %or el mero $ec$o de serASP.NET.

Más códigoSi&uiendo con el e"em%lo vamos a a*adir un %oco más de códi&o %ara com%robar $astaque %unto son com%atibles las %á&inas ASP6 con el códi&o ASP.

Si lo modiicamos %ara que ten&a el si&uiente as%ecto)



Figura 3.1.3.- &ás código a'adido a la página !P"

A$ora durante la car&a 1o la recar&a2 de la %á&ina veriicamos si se le está %asando un%arámetro %or P5ST, en cuyo caso sustituimos la ca"a de teto %or un saludo alnombre que se le esté %asando)

Figura 3.1.4.- Resultado de la ejecución.

Estp!ndo" p!#o$$$ %!n &' (!)os )!*o#ado+Este e"em%lo nos $a servido %ara ver qué ASP6 si&ue siendo com%atible en cierta

medida con ASP, y que sólo %or este $ec$o ya me"oraremos la escalabilidad de las%á&inas. e todos modos el cambio de la etensión del arc$ivo sólo uncionará en las%á&inas más sencillas. En códi&o no trivial tenemos una %robabilidad tendente a 7 deque no $aya esa suerte.Además, aunque as3 uera, no $abr3amos &anado demasiado) se&uir3amos con códi&ode cliente y de servidor entreme+clado y di3cil de mantener y no tendr3amos nin&unade las venta"as que $emos mencionado antes.



Si bien %odemos escribir códi&o ASP.NET de la manera correcta sólo con el bloc denotas, la me"or orma de desarrollar %á&inas Web con ASP.NET es usando Visual

Studio 2010, que como veremos ense&uida nos orece una orma visual de traba"o "unto con una se%aración estricta entre el códi&o y la intera+ de usuario, que es lo que%retend3amos.

E, !nto#no d! d!sa##o,,o- .isa, Stdio /010#isual Studio 8070 es el entorno de desarrollo de a%licaciones Web %ara la versión 9.0de la %lataorma .NET. 5rece todo ti%o de $erramientas %ara acilitar el traba"o del%ro&ramador) dise*adores &ráicos de %á&inas y clases, asistentes de uso de bases dedatos, un servidor (eb de desarrollo, ayuda a la escritura de códi&o, y en &eneral todolo que se es%era de un entorno de desarrollo rá%ido moderno y muc$o más todav3a.

Para crear un nuevo %royecto ASP.NET utilice el men: Archivo·uevo·Sitio !e". Al

$acerlo a%arecerá un diálo&o como el de la i&ura)

Figura 3.1.5.- El dilogo de nue!o "ro#ecto $e% &a"lica%le a 'isual Studio()1)*.



Nota)!as %lantillas dis%onibles en el diálo&o de nuevo %royecto (eb %uededierir de%endiendo de la versión de #isual Studio 8070 que utilice. Porsim%licidad se muestra el diálo&o de la versión #isual Web evelo%erE%ress, el más sim%le.

En él tenemos la o%ortunidad de ele&ir qué tipo de pro#ecto vamos a crear 1%ordeecto un sitio (eb de ASP.NET2, en qué u"icación $%sica queremos crearlo 1lonormal será en nuestro disco duro %ero %odr3amos ele&ir un sitio &estionado %or ;TP o-TTP2 y con qué lengua&e de prograación.

Eisten dierentes len&ua"es que nos sirven %ara crear el códi&o de nuestras %á&inas.ado que en la %ráctica todos tienen las mismas ca%acidades esco&er uno u otro esuna cuestión de eSección %ersonal. ado que este curso está orientadoundamentalmente a %ro&ramadores que vienen de ASP o #<=, vamos a ele&ir #isual<asic 8070 como len&ua"e de todos nuestros e"em%los. En cualquier caso todo loe%licado %ara éste es %erectamente válido %ara los otros len&ua"es y le servirá i&ualsi se decide %or ellos.

E2p,o#ando !, !nto#noTras crear un %royecto nuevo, el entorno tiene un as%ecto similar a este)

Figura 3.1.+.- El entorno de desarrollo de 'isual Studio tras crear un "ro#ecto&a"lica%le a 'isual Studio ()1)*.



Antes de a%render a mane"ar #isual Studio 8070 vamos a %onernos en situaciónconociendo los distintos elementos que orman %arte del entorno.

E2p,o#ado# d! so,cion!sEste elemento contiene un árbol con los %royectos en los que estamos traba"ando y los

dierentes arc$ivos y car%etas que orman %arte de ellos.Nada más crear un nuevo %royecto Web sólo eiste una car%eta llamada pp()ata, yuna %á&ina ASP6 creada de orma %redeterminada que está vac3a y es con la quecomen+aremos a traba"ar.!os botones de la %arte su%erior se usan %ara reali+ar diversas acciones sobre elelemento que ten&amos seleccionado. Por e"em%lo en el caso de la %á&ina %odemosabrir su dise*o o su códi&o %resionandores%ectivamente el tercer y cuarto botones %or laderec$a.

3#!a d! doc)!ntos

Figura 3.1.,.- rea de docuentos ostrando un editor de /T0.

Es la +ona situada en el centro del entorno de desarrollo. >ontiene los dierenteseditores de códi&o as3 como dise*adores de diversos ti%os 1de intera+ de usuario, declases, de )ata!ets...2. Es en donde %asaremos la mayor %arte del tiem%o traba"ando.



Cad#o d! (!##a)i!ntas

Figura 3.1.2.- uadro de erraientas # detalle de un algunos gru"os de ste.

El cuadro de $erramientas contiene los dierentes elementos que %odemos utili+ar %arala deinición de la intera+ de usuario de nuestra a%licación, as3 como al&unos otroscom%onentes no visuales que también se %ueden arrastrar $acia el dise*ador visual de

%á&inas Web. Está situado %or deecto en el lateral i+quierdo del entorno.

Edito# d! p#opi!dad!sAl i&ual que en #isual <asic =.0, ;ront%a&e y otros entornos, el editor de %ro%iedadesnos %ermite a"ustar los valores de las %ro%iedades en tiem%o de dise*o de los ob"etosque $ayamos seleccionados.Este editor sirve %ara a"ustar las %ro%iedades de todos los ob"etos que %odamos utili+aren el entorno) tanto de los controles que se arrastran sobre un dise*ador como de los%ro%ios arc$ivos del e%lorador de soluciones y las etiquetas -TM! o 6M!, etc...



Al&unas %ro%iedades se editan directamente en eles%acio dis%onible y otras lan+an un asistente o undise*ador que nos ayuda con la tarea.

Se %ueden ver las %ro%iedades ordenadasalabéticamente o bien a&ru%adas en dierentescate&or3as 1o%ción %or deecto2. Además de las%ro%iedades también se %ueden a"ustar los &estoresde eventos de los ob"etos usando el %en:ltimo botón%or la derec$a. En la %arte inerior se obtiene unaconcisa ayuda sobre cada %ro%iedad seleccionada.

Ba##as d! (!##a)i!ntas 4 )!n5s

Se sit:an en la %arte su%erior y dan acceso al resto de las caracter3sticas de la$erramienta de traba"o. Se&:n el conteto en el que nos encontremos las barras de$erramientas que veremos serán distintas. #isual Studio se encar&a de mostrar yocultar la in&ente cantidad de barras dis%onibles mostrando en cada caso sólo las quenecesitemos. Esto racionali+a el acceso a los elementos de la intera+ que de otromodo ser3an inmane"ables.

T#a6a*o con 7o#),a#ios W!6 4 cont#o,!sEl entorno de traba"o que $emos e%lorado es muy intuitivo y ácil de utili+ar. En lamayor %arte de los casos vamos a $acer uso :nicamente de los tres dise*adores que$emos visto en el v3deo de la Sección anterior) dise*ador visual de ormularios Web,dise*ador de -TM! y editor de códi&o de #<.NET.

>reemos un e"em%lo sencillo desde cero %ara ver cómo se traba"a. !ue&o estudiaremosla estructura de los arc$ivos &enerados %ara com%render su uncionamiento. El

e"em%lo es el mismo que $emos creado en la %rimera Sección del módulo %eroutili+ando el modo de %ro&ramar de ASP.NET y no el códi&o 'es%a&uetti' t3%ico de ASPclásico que $emos utili+ado antes.

C#!ando ,a int!#7a8 g#á9ca d!, !*!)p,oesde #isual Studio cree un nuevo %royecto de sitio Web. Abra el dise*ador de la%á&ina %or deecto que se crea 1)e*ault.asp# 2 $aciendo doble clic? sobre ella. A*adaun control de ti%o etiqueta 1(a"el 2 en la %arte su%erior y estable+ca su %ro%iedad )ext



con el valor '+,ienenido a !P./0 ', eli&iendo un ti%o de letra de tama*o &rande ycolor ro"o.

@usto deba"o a&re&ue un control )ext*ox , y estable+ca su %ro%iedad 4 como'Nombre', !idth como $22p# y +ax(ength a":stela a 2.

A continuación introdu+ca un botón 1*utton2 y as3&nele el teto 'Saludar' 1%ro%iedad)ext 2 y otór&uele el nombre de 'cmd!aludar '.

Por in a*ada una etiqueta más con el nombre l4l!aludar , y a"uste su %ro%iedadVisi"le a False %ara que no se vea en el ormulario (eb una ve+ que lo e"ecutemos.

>uando acabe el as%ecto del ormulario deber3a ser muy similar a éste)

Figura 3.1.6.- As"ecto del eje"lo tras a%er a7adido los controles.

Nota)Si no tiene claro cómo $acerlo vea el %rimer v3deo de esta Sección al %iede este documento en donde se desarrolla el e"em%lo com%leto.

R!spondi!ndo a, !:!nto d!, 6otónPara saludar al usuario con el nombre que introdu+ca en el cam%o de teto debemosres%onder a la %ulsación del botón. En ASP clásico tendr3amos que enviar un ormularioa otra %á&ina 1o a la misma2 y ver qué valores no es están %asando %ara actuar enconsecuencia. En ASP.NET esto no es necesario ya que traba"aremos se&:n el clásico

%aradi&ma orientado eventos, res%ondiendo a las acciones del usuario.

En este caso debemos interce%tar la %ulsación del botón %or %arte del usuarioverdadB. Pues lo :nico que tendremos que $acer es escribir un mane"ador %ara elevento ,lic- del botón, al&o que resultará amiliar e intuitivo a los %ro&ramadores de#<=. Para ello $a&a dobleCclic sobre el botón en el dise*ador. Esto $ará que se abra eleditor de códi&o y que automáticamente a%are+ca un mane"ador de eventos %ara elevento >lic?, que es el %redeterminado de los botones)



Figura 3.1.1).- 0anejador del e!ento lic8 generado autoticaente "or eleditor.

Al i&ual que en #<= desde el códi&o del evento 1que se e"ecutará en el servidor,Datención2 %odemos $acer reerencia a cualquier control de la %á&ina y acceder a susmétodos y %ro%iedades. e este modo se %uede escribir el si&uiente códi&o sim%le)

Es decir, se concatena un saludo al nombre introducido en el cam%o de tetoasi&nándoselo como teto a mostrar a la etiqueta oculta, y se $ace visible ésta usandosu %ro%iedad 5isi4le.

Si e"ecutamos a$ora el e"em%lo 1%resionando ;F o el botón corres%ondiente en la barrade $erramientas2 veremos que unciona sin %roblemas)



Figura 3.1.11.- Nuestro eje"lo antes # des"us de "resionar el %otón.

Nótese que no $emos a*adido ormulario al&uno, ni tam%oco @avaScri%t, y que enrealidad %ara nosotros es trans%arente el modo en como se &estionan los eventos eincluso que lo que estamos creando sea una a%licación Web. No $emos usado -TM! y1$asta cierto %unto2 nos da i&ual que el códi&o se e"ecute en el servidor o en el cliente.

P!#o$$$ %Có)o 7nciona !sto po# d!6a*o+Si ec$amos un vista+o al códi&o de la %á&ina &enerada veremos que, a%arte del -TM!que es más o menos obvio que deber3a $aber dados los controles que $emos utili+ado,eiste también bastantes l3neas de códi&o @avaScri%t y al&unos cam%os ocultos.

!os cam%os ocultos se utili+an %ara almacenar inormación sobre la %á&ina y el códi&o@avaScri%t se ocu%a de su mantenimiento y de enviar el ormulario al servidor antedeterminadas acciones del usuario 1simulando los eventos2.

Gno de los cam%os ocultos más im%ortantes es el que se reiere al VieState.

Figura 3.1.1(.- Viestate de una "gina sencilla.

El 5ie6!tate C que se %odr3a traducir como 'Estado de #isuali+ación' C reco&e demanera automática el estado y el contenido de los controles de una %á&ina. Estainormación se utili+a %ara de"arlos como estaban en cada recar&a de la %á&ina.>uando %resionamos el botón de nuestro e"em%lo la %á&ina se recar&a y todo lo quecontiene debe estar i&ual que antes de $acerlo o no %odr3amos asimilarlo a unormulario. A ece%ción de una %eque*a demora %or el via"e de ida y vuelta al servidor,%ara el usuario no debe $aber sensación de recar&a de la %á&ina. El 5ie6!tate seencar&a de ello.

Nota)A cada via"e de ida y vuelta de nuestra %á&ina al servidor comoconsecuencia de un evento en el cliente se le denomina Post*ac- . Se%uede averi&uar si la car&a actual de la %á&ina es la %rimera o se tratade un Post,ac7 consultando el valor booleano de la %ro%iedad /sPost*ac- de la %á&ina 1&e.IsPost4ac7 2.

>omo se a%recia en la i&ura se trata de inormación sobre la "erarqu3a de controles dela %á&ina codiicada %ara su env3o al servidor. Al recibirla, la clase Page de la que$ereda nuestra %á&ina se encar&a de decodiicarlo, %rocesarlo e iniciali+ar de nuevo elestado de cada control se&:n la inormación acilitada, sin necesidad de traba"o %ornuestra %arte.



Por otra %arte, %ara determinar qué evento se $a %roducido, se em%lean también doscam%os ocultos y un %oco de @avaScri%t)

Figura 3.1.13.- a"os ocultos de in9oración so%re e!entos

Figura 3.1.14.- :a!aScri"t asociado a la noti9icación de e!entos al ser!idor.

>uando se eect:a al&una acción el @avaScri%t de la %á&ina se encar&a de rellenarestos cam%os y %rovocar un Post,ac7 de la %á&ina. El evento es detectado en elservidor a través de estos cam%os ocultos y se &estiona adecuadamente %or ASP.NET,que se encar&a de notiicar los eventos.

!os mecanismos de 5ie6!tate y de Post,ac7 son los res%onsables de que, a eectos%rácticos, %odamos traba"ar en la Web utili+ando el %aradi&ma de %ro&ramaciónorientada a eventos.

D4ma&3nate tener que &estionar eso t: mismo con códi&o %ro%io

Ot#as pa#t!s d!, 7nciona)i!nto d! ASP$NET a t!n!# !nc!nta

E, a#c(i:o )ac(in!$con9gEste arc$ivo contiene inormación de coni&uración de todos los %royectos ASP.NET.Es %or ello ló&ico %ensar que aqu3 se reunirá aquella inormación com%artida %or todoslos %royectos Web, y que la inormación de coni&uración de cada a%licación, deberáa&re&arse en el arc$ivo 8e4.con*ig.



E, a#c(i:o W!6$con9gEste arc$ivo contiene los %arámetros y o%ciones de coni&uración de las a%licaciones deASP.NET. >ada a%licación Web contendrá su arc$ivo de coni&uración.-asta la versión de ASP.NET 9.0, este ic$ero $a crecido enormemente debido ala*adido de o%ciones sucesivas que se $an reali+ado como %or e"em%lo A"a.A %artir de la versión de ASP.NET 9.0, este ic$ero y su inormación se $a reducidoconsiderablemente, ya que muc$as de las o%ciones a&re&adas $an ido a otro ic$ero deconi&uración llamado machine.con*ig.

E*!cción d! na ap,icación ASP$NET po# p#i)!#a :!8 4 !, inicioato)áticoGn detalle a tener en cuenta es que las a%licaciones Web de ASP.NET necesitan sere"ecutadas %or %rimera ve+ %ara que se %re%are y com%ile, y esté lista y dis%onible de

orma más á&il en %eticiones %osteriores.

Esto se a%recia muc$o me"or si e"ecutamos una %á&ina Web de una a%licación WebASP.NET que muestre una inormación de teto en %antalla, y si volvemos a e"ecutaresa misma %á&ina Web. El tiem%o de es%era de la si&uiente %etición será muc$omenor.Para resolver esta %roblemática, se %od3a e"ecutar las %á&inas ASP.NET %reviamente oacudir al códi&o de iniciali+ación del método A%%licationH!oad que se encuentra en elarc$ivo 9lo4al.asa# %ara reali+ar dierentes o%eraciones que aciliten ese despertar .

A %artir de ASP.NET 9.0, se %uede $acer uso de la escalabilidad de inicio automáticoque tiene este ob"etivo y que se e"ecuta en 44S I.F ó su%erior y en sistemas o%erativosWindo(s Server 800/ J8 ó su%erior.

>on el inicio automático, %odemos %oner en uncionamiento un con"unto dea%licaciones Web iniciali+ándolas de orma que las %eticiones -TTP %uedan serace%tadas directamente.

Para llevar a cabo esta tarea, deberemos a&re&ar en el arc$ivo application:ost.con*ig

los si&uientes %arámetros)

<applicationPools>

<add name="MyApplicationPool" startMode="AlwaysRunning" />

</applicationPools>



L;)it! d! ta)a<o !n ,as URLsEn ASP.NET el l3mite de lon&itud de una GJ! es de 8=0 caracteres, tama*o basado enel l3mite de directorios y ic$eros de NT;S.

En ASP.NET 9.0, ese l3mite %uede incrementarse o decrementarse como deseemos.

Esto se lo&ra utili+ando dos nuevos atributos httpuntime de coni&uración.

Gn e"em%lo de uso de este atributo es el que se indica a continuación)

<httpRuntime maxRequestPathLength="!"

max#uery$tringLength="%&" />

>on el atributo ma#equestPath;ength modiicamos las rutas sin incluir el %rotocolo yel nombre del servidor.

>on el atributo ma#uer=!tring;ength %ermitimos cadenas de b:squeda más lar&as ocortas de%endiendo del valor dado.

D!n!gación d! ca#act!#!s !n URLsGna nueva caracter3stica de ASP.NET 9.0 y versiones %osteriores es la %osibilidad dedene&ar caracteres es%eciales en una GJ!.

Esto se lo&ra $aciendo uso del atributo requestPathInalidhars, e indicando en eseatributo, el caracter o caractes es%eciales que %rovocarán un error de ti%o 900 1<adrequest2.

En el si&uiente e"em%lo, se indica los %arámetros de coni&uración que $abr3a que%oner %ara dene&ar el acceso a una GJ! con unos determinados caracteres)

<httpRuntime requestPath'n(alid)hars="<*>*+*,*-*.**0" />

Los a#c(i:os d! código>entremos nuevamente nuestra atención en los arc$ivos de códi&o de servidor que

tenemos en #isual Studio 8070. Eisten dos) uno que deine la intera+ de usuario yotro %ara la ló&ica de la a%licación. #eamos cómo están ormados y cuál es el neo deunión entre ellos.

E, a#c(i:o $asp2 d! int!#7a8 d! sa#io$En realidad todo el códi&o se e"ecuta en el servidor y, %or %oco intuitivo que sea %araun %ro&ramador Web tradicional, el evento desencadenado %or la %ulsación se &estionaen el servidor, no en el cliente. #eamos cómo unciona.



Para crear la intera+ de usuario sólo $emos tenido que arrastrar controles Web desdeel cuadro de $erramientas al dise*ador. Por detrás lo que $a estado ocurriendo es queel códi&o -TM! de la %á&ina $a estado creciendo $asta ser como el si&uiente)

Figura 3.1.15.- ódigo /T0 de la inter9a; de usuario ASP<.

#emos que, sin que conscientemente lo $ayamos $ec$o, se $a creado un ormulario1Form12 que al carecer de un atributo 0I? se enviará a si mismo. Este ormulario1y otros elementos tienen asi&nado el atributo runatserver . Kste se usa %araindicar que son controles de servidor y que, como tales, deberán estar dis%onibles %arael códi&o que se e"ecuta en el servidor, como %or e"em%lo nuestro mane"ador delevento.

Nota)En las %á&inas ASP6 sólo se recomienda el uso de un ormulario, que esademás el ormulario que incluye automáticamente el entorno dedesarrollo. !o cierto es que no se trata de limitación al&una %uesto quela iloso3a de desarrollo es com%letamente distinta a la tradicional y nolos vamos a necesitar.

El resto de elementos que a%arecen son etiquetas -TM! normales 1%.e"<4r@> %aracambio de l3nea2 y unas etiquetas es%eciales que llevan el %rei"o asp. Este %rei"oindica que son controles (eb de ASP.NET, y como tales son ob"etos de las clases

contenidas en el es%acio de nombres !=stem.8e4.AI.8e4ontrols. Al com%ilar la%á&ina ASP.NET instancia dic$as clases y las %one a dis%osición de nuestro códi&o%asando todo ello inadvertido %ara nosotros.

E, a#c(i:o $:6 d! ,ógica d! ,a ap,icaciónPor otro lado eiste un arc$ivo con etensión .vb, de%endiente, se&:n el e%lorador de%royectos, del arc$ivo .as% anterior.



Figura 3.1.1+.- Arci!o .!% de lógica de la a"licación

Kste contiene la 'ló&ica' de la a%licación, es decir, lo que $ace que una intera+ de

usuario se com%orte de un determinado modo. En nuestro caso contiene el mane"adordel evento con lo que deseamos que ocurra al %resionar el botón. En una a%licaciónreal %odr3a contener multitud de cosas más.

Nota)Aunque es muy tentador abusar de la ca%acidad de crecimiento de estosarc$ivos de códi&o, suele ser muc$o más recomendable re%artir todaaquella uncionalidad que no se reiera a la intera+ de usuario 1es decir,lo que no sean eventos normalmente2 en otros arc$ivos y clasesdesli&ados de %á&inas asp# . #eremos cómo $acerlo en breve en estecurso.

esde este arc$ivo de códi&o %odemos res%onder a cualquier evento de los controlesde intera+ de usuario o de la %ro%ia %á&ina, y acceder a sus métodos y %ro%iedades.

Lracias a la eistencia de estos dos arc$ivos %odemos inde%endi+ar el as%ecto de laa%licación 1la intera+2 de lo que queremos $acer con ella. e $ec$o incluso se %odr3a%ro&ramar con dos equi%os distintos, cada uno encar&ado de una cosa. Esta constituyetambién una de las &randes venta"as de ASP.NET.

%En dónd! s! !nc!nt#a !, n!2o !nt#! int!#7a8 4 ,ógica+Tras esta %re&unta tan a%arentemente ilosóica se encuentra una res%uesta muysencilla) la directiva de %á&ina 3Page y la eistencia de clases parciales en .NET

8.0.

Si nos i"amos en el códi&o de la %á&ina ASP6 de la i&ura anterior, la %rimera l3nea esuna directiva BPage con diversos atributos.

• Auto4vent!ire5p) indica si los eventos se deben &enerar de ormaautomática o no. A los eectos de este curso no $ablaremos más de él.



• ,ode6ile) este atributo es es%ec3ico de #isual Studio y le indica cuál es elarc$ivo de códi&o 1.vb2 que contiene la deinición de la ló&ica de la %á&ina.

• /nherits) indica de qué clase $eredará la clase autoC&enerada %or ASP.NET%ara &estionar los contenidos de la %á&ina ASP6 actual 1re%ase el %rimer v3deode este módulo acerca de códi&o com%ilado2.

Nota)Inherits es un atributo nuevo en ASP.NET 8.0, y arrastrado a ASP.NET/.F ó su%erior, que modiica el modelo utili+ado en #isual Studio 8008 y800/ %ara crear códi&o de ló&ica de ne&ocio %ara las %á&inas,denominado code-4ehind . Si $as traba"ado al&o con estas versionesanteriores te sor%renderá ver este cambio y lo muc$o que con él sereduce el códi&o necesario %ara crear las %á&inas ASP6, ya que no $ayque declarar los controles ni iniciali+arlos en el códi&o de ló&ica.

Si a$ora os i"amos en el códi&o de ló&ica de la %á&ina 1i&ura /.7.70 anterior2,veremos que se deine parcialente una clase ()e*ault . este es el neo de uniónentre ambos arc$ivos.

>uando ASP.NET &enera la %á&ina %rimero com%leta automáticamente el códi&o de laclase ()e*ault con otra ipleentación parcial de ésta en la que se deinen loscontroles de la %á&ina 1el códi&o que $a desa%arecido res%ecto a las versionesanteriores del entorno2. !ue&o deine una nueva clase es%ec3ica %ara la %á&ina que$ereda de ()e*ault y es en ella donde iniciali+a los controles y $ace el neo entre laintera+ y la ló&ica. Es %or este motivo que a$ora los mane"adores de eventos de laclase se declaran con accesibilidad protected , %ara que %uedan utili+arse desde la clasederivada.

Nota)A esta novedosa orma de se%arar 1y al mismo tiem%o unir en tiem%o dee"ecución2 la intera+ de la ló&ica $ay quien la denomina code7"eside , como $omena"e al $asta a$ora utili+ado 'codeCbe$ind' deASP.NET 7..

Nota)Todo lo e%licado es muy ácil de veriicar si se accede a la car%etatem%oral de ASP.NET tal y como se demostró en el %rimer v3deo de estemódulo. En él encontraremos los arc$ivos de códi&o auto&enerados%or .NET en los que %odremos com%robar l3nea %or l3nea todo lo que $ecomentado. Se trata de una iniciativa muy didáctica.

os controles de ASP.NETASP.NET orece una &ran cantidad de controles que se %ueden usar en los desarrollosde a%licaciones Web. urante la Sección anterior $emos %odido ver al&unos de ellos en



uncionamiento mientras que su%imos de la eistencia de otros al verlos en el cuadrode $erramientas.

En esta Sección vamos a conocer desde un %unto de vista &eneral los ti%os decontroles eistentes y a%renderemos, con más detalle, la utili+ación unos controlesmuy :tiles) los controles de validación.

Los cont#o,!s =TML-asta a$ora $emos visto lo sencillo que resulta traba"ar con controles de servidorarrastrándolos y soltándolos en los ormularios Web. !os controles que $emos utili+adose deinen usando una sintais es%ecial 1<aspC...>2 y como $emos %odido com%robarres%onden a un com%ortamientocom%le"o.

Antes de ASP.NET cuando necesitábamosusar un control en una %á&inaem%leábamos al&uno de los deinidos en-TM!) controles de ti%o <input>,<te#tarea> o <img> entre otros. >onASP.NET dis%onemos también de la%osibilidad de usarlos.

esde el cuadro de $erramientasdis%onemos del &ru%o 8)+( 1ver i&uraad"unta2 que son controles equivalentes a

los de -TM!.

Podemos arrastrarlos y soltarlos sobrenuestro ormulario al i&ual que los otros,%ero al contrario que éstos no see"ecutarán %or deecto en el servidor.Sólo a%arecerá su sintais -TM! %ura y dura.

Se trata de controles muy :tiles en determinadas ocasiones en las que no necesitamostodas las venta"as que nos orecen los controles de servidor, %or e"em%lo)

O No vamos a acceder a sus métodos y %ro%iedades desde el servidor.O ui+á no necesitamos que manten&an su estado o res%ondan a evento al&uno.O El uso del cam%o oculto #ie(State %uede car&ar la %á&ina en eceso si $ay muc$oscontroles, %or no mencionar que $ay que crear clases en el servidor que losre%resenten cuando se %rocesa la %á&ina. Todo ello reduce la res%uesta de la %á&ina.



Por su%uesto %odemos convertirlos en controles de servidor sim%lemente asi&nando suatributo runat , as3)

<input id="1utton2" type="3utton" (alue="3utton" runat="ser(er" />

>omo vemos es un botón corriente de -TM! al que se la $a a*adido el atributo runat .Sólo con esto $emos conse&uido que el control esté dis%onible desde nuestro códi&o deservidor 1como en el e"em%lo2 y disrutaremos de todas las cualidades conocidas)acceso a sus %ro%iedades y métodos, conservación del estado, etc...

En el área de dise*o del ormulario es muy ácil distin&uir los controles de servidor delos -TM! %orque los %rimeros tienen un %eque*o trián&ulo verde que los marca. En lasi&uiente i&ura todos los controles se e"ecutan en el servidor ece%to el botón 'button'de la derec$a.

Figura 3.(.1.- =istinción entre ontroles de ser!idor # /T0

!os controles -TM!, en cualquier caso, son muc$o más sencillos que los otros controlesWeb. Tienen menos %ro%iedades y eventos, los cuales se suelen corres%onder ademáscon los mismos que tienen en -TM!Q@avascri%t. Son más adecuados cuando no

requerimos una &ran leibilidad y queremos car&ar la %á&ina lo m3nimo %osible.

Esta i&ura ilustra la "erarqu3a de los controles -TM! en ASP.NET)



Figura 3.(.(.- :erar>u?a de los controles /T0

Todos ellos, obviamente, $eredan de la clase ?4Dect , %ero también $eredan de la clasebase -tml>ontrol que está contenida en el es%acio de nombresS#ste.!e".5/.,ontrol .

Sus %ro%iedades se corres%onden con los atributos -TM! del control corres%ondiente,%or lo que la nomenclatura utili+ada no es consistente con la utili+ada en el resto de la%lataorma ASP.NET.

Los cont#o,!s W!6Son controles nativos de ASP.NET. Aunque al&unos %arecen asimilables a controles-TM!, todos van muc$o más allá en cuanto a caracter3sticas y ca%acidades. e $ec$o,aunque al&unos son relativamente sencillos 1como una etiqueta, un botón o un cuadrode teto2, eisten controles muy com%le"os que ser3a di3cil recrear desde cero con-TM! y @avaScri%t. Por e"em%lo el control calendario, las re"illas de datos, los controlesmaestroCdetalle, validadores, etc...

Sus métodos y %ro%iedades tienen nombres consistentes con el resto de la %lataorma.Por e"em%lo, %ara i"ar el teto de un botón o de una etiqueta se usa la misma

%ro%iedad )ext . Para establecer el color de ondo todos usan *ac-,olor . Esto $aceque sea más ácil el desarrollo %orque no $ay que memori+ar nomenclaturas dierentes%ara cada control.

Adaptación ato)ática a, c,i!nt!!os controles Web que vienen con ASP.NET tienen otra caracter3stica que los $ace:nicos y es la ada%tación automática al nave&ador. ASP.NET detecta con qué cliente seestá accediendo 1un nave&ador moderno o anti&uo, un PA, 4nternet E%lorer o



Netsca%e, etc...2 y de orma autónoma ada%ta el códi&o que muestra a las ca%acidadesy restricciones concretas del nave&ador utili+ado.

Esta ada%tación tiene en cuenta el so%orte de -TM! y @avaScri%t, %ero tambiéncuestiones como si se deben usar etiquetas básicas en lu&ar de $o"as de estilo >SS%ara el as%ecto.

En esta nueva versión /.F de ASP.NET va un %aso más allá %ermitiendo la ada%taciónautomática de los controles a dierentes nave&adores y dis%ositivos incluso móviles1teléonos y PA de cualquier marca2. A esta caracter3stica se la conoce comorenderi9ación adaptativa.

Figura 3.(.3.- Renderi;ación ada"tati!a@ un iso calendario en unna!egador # !isto desde un ó!il AP.

!a renderi+ación ada%tativa tiene im%licaciones im%ortantes ya que 1$asta cierto%unto2 no $ay que tener en cuenta de antemano si un desarrollo será %ara unnave&ador concreto o incluso %ara dis%ositivos móviles basados en WAP. Por otra %arte,y tal ve+ más im%ortante, está el $ec$o de que no $ay que a%render todo un con"untodierente de $abilidades %ara %oder %ro&ramar %ara dis%ositivos móviles. DPodemosreutili+ar lo que estamos a%rendiendo en este curso.

!a si&uiente i&ura muestra la "erarqu3a de al&unos controles Web de servidor incluidos

con ASP.NET /.F)



Figura 3.(.4.- :erar>u?a de controles e% de ser!idor.

Cont#o,!s d! t!#c!#as !)p#!sasA%arte de los controles que vienen con ASP.NET /.F también es %osible utili+ar desdenuestras a%licaciones cualquier otro control Web dise*ado %or terceras em%resas.Eisten ininidad de ellos de todos los ti%os, al&unos realmente %otentes.

Figura 3.(.5.- Algunos eje"los de controles e% de terceras e"resas.



En $tt%)RR(((.as%.netRcommunityRcontrolC&alleryR %odrá encontrar un etensocatálo&o clasiicado de controles Web de servidor.

Cont#o,!s p#opios>omo no %odr3a ser de otra manera, ASP.NET no nos limitará a la $ora de crear

controles %ro%ios %ara reutili+ar uncionalidad en nuestras a%licaciones o incluso %aravenderlos a otras em%resas.

Eisten dos ti%os de controles que %odremos crear)

• ontroles e%) son controles como los que $emos visto $asta a$ora yequi%arables en todos sus as%ectos a los controles nativos de ASP.NET /.F.

• ontroles de usuario) %ermiten la reutili+ación de %artes com%letas de laintera+ de usuario y de la ló&ica asociada a ésta, aunque el so%orte %araconi&urarlos en tiem%o de dise*o es muc$o más reducido que en el caso de losanteriores. Sin embar&o son muy áciles de crear y orecen un método sencillo

de enca%sular uncionalidades que incluyan intera+ de usuario.

!a creación de controles Web 1%rimer ti%o2 es una cuestión com%le"a que se sale delámbito de este curso, %or lo que no los estudiaremos. Sin embar&o en la si&uienteSección veremos la orma de crear nuestros %ro%ios controles de usuario.

4nvesti&ue %or su cuenta la uncionalidad de al&unos de los controles dis%onibles enASP.NET. Es la me"or orma de a%render. escubrirá que la mayor3a son muy áciles deutili+ar y sus %ro%iedades y métodos son de uso sencillo. e"e de momento losenla+ados a datos %ues serán ob"eto de un módulo %osterior y suelen tener máscom%licación.

Cont#o,!s d! A*a2 > A*a2 Cont#o, Too,?itentro de >odePle, se %uede encontrar un %royecto de nombre A"a >ontrol Tool?itque %ro%orciona más de /0 controles que tienen como misión etender con másuncionalidad a los controles de ASP.NET estándar.

Estos controles tienen su mayor interés en la %arte cliente, donde el usuario interact:acon la a%licación Web, sin embar&o, son a*adidos y coni&urados en el servidor.

!o más destacable de estos controles es que %ro%orcionan una intera+ de usaurio conmayores %osibilidades que las que a%orta los controles estándar de ASP.NET.

!a :nica caracter3stica a tener en cuenta es que estos controles requieren de un control!cript&anager .

!os controles de A"a >ontrol Tool?it, %ueden ser utili+ados en #isual Studio 800F o%orterior. !a :nica cosa a tener en cuenta es que a veces, de%endiendo del entorno dedesarrollo seleccionado, deberemos ele&ir un %aquete de ensamblados u otro.

http://www.asp.net/community/control-gallery/

http://ajaxcontroltoolkit.codeplex.com/

http://ajaxcontroltoolkit.codeplex.com/

http://www.asp.net/community/control-gallery/



Para usar estos controles, deberemos descar&arnos el ensamblado corres%ondiente delenlace que indicamos anteriormente, e irnos al cuadro de $erramientas y seleccionar elensamblado %ara que a&re&ue all3 los controles de usuario a utili+ar.Gna ve+ $ec$o esto, %odremos arrastrar y soltar el control o controles deseados en elormulario Web.

Al a*adir un control a nuestro ormulario Web, éste inserta automáticamente uncontrol !cript&anager .

Más adelante veremos como utili+ar A"a con el A"a >ontrol Tool?it en nuestrasa%licaciones Web.

Cont#o,!s W!6 d! :a,idaciónentro de la %létora de controles de ASP.NET eiste un &ru%o '#alidación' que, comoes ácil ima&inarse, contiene una serie de controles que %ermiten reali+ar de maneracómoda la validación de datos introducidos %or los usuarios.

!o $abitual en las a%licaciones Web es reali+ar una do"le validación. Por un lado sesuele im%lementar una %rimera validación en el cliente 1es decir, en el nave&ador delos usuarios2 utili+ando %ara ello códi&o @avaScri%t. Esto %ermite una %rimera barreraque no im%lica el env3o de datos innecesarios al servidor. >omo %rinci%ales desventa"asde usar @avaScri%t %ara la validación se encuentran la de ser códi&o tedioso de escribiry, sobre todo, que es muy ácil evitarla.<astar3a con que un usuario no tuviese@avaScri%t $abilitado %ara que nouncionara en absoluto.

Por otra %arte también se suele reali+aruna se&unda copro"ación en el

servidor . En aras de la se&uridad, comomáima de cualquier desarrollodeber3amos tomar siem%re la si&uiente)'@amás deberé iarme de nada que melle&ue de un ori&en uera de mi control'. En este caso aunque $ayamos $abilitado una%rimera validación en el cliente con @avascri%t no debemos iarnos en absoluto de queésta se $aya reali+ado. Por ello debemos validar todos los datos siem%re en el servidor.Si $ay que quitar una validación que sea siem%re la del cliente.

Esta doble validación suele ser bastante en&orrosa y su%one un esuer+o de desarrolloadicional que ser3a estu%endo %oder obviar. Pensando en acilitarnos este ti%o de tareasASP.NET nos orece los controles de validación.

Estos controles %ermiten deinir re&las de validación en la entrada de datos. ic$asre&las se asocian con otros controles que orman %arte del ormulario (eb, y secombinan entre ellos %ara es%eciicar m:lti%les restricciones sobre los datosintroducidos.



!as condiciones t3%icas son, %or e"em%lo, que un cam%o no se %uede quedar vac3o, quetiene que estar com%rendido dentro de un ran&o determinado o incluso que debecum%lir con una e%resión re&ular que indiquemos. Por su%uesto es %osible tambiéndeinir re&las %ro%ias %ersonali+adas.

!a principal venta&a de estos controles es que %ermiten la deinición de re&las devalidación de orma declarativa, es decir, no $ace alta escribir códi&o %ara usarlos.Ello acilita muc$o el desarrollo y el mantenimiento de las re&las de validación.

Gna ve+ que deinamos las re&las %ara un ormulario los controles de validación seencar&an automáticamente de validarlas tanto en el cliente coo en el servidor .En el lado cliente se convertirán en códi&o @avaScri%t muy %arecido al que nosotrosusar3amos, actuando de %rimera barrera y evitando via"es innecesarios al servidor. !ascom%robaciones del lado del servidor nos evitan %roblemas cuando, %or el motivo quesea, no $an actuado las validaciones en el cliente.

Nota)Se %uede desactivar la validación en el lado del cliente de un controlestableciendo su %ro%iedad 4na"le,lientScript a False. Podemosdes$abilitar la validación del lado cliente de todos los controlesestableciendo la %ro%iedad ,lient)arget de la %á&ina actual con lacadena E)o6n;eelE desde el evento de car&a de la %á&ina. >on ello sólose reali+ará la validación en el servidor.

Uso d! ,os cont#o,!s d! :a,idaciónPara $acer uso de uno de estos :tiles controles basta con arrastrarlos al ormulario.#eremos que al $acerlo se muestran como si ueran etiquetas normales, aunque con elteto de color ro"o. Este es el as%ecto que tendrán si se $ace necesaria su actuación.

Mientras no se %roduce una situación en la que la validación racasa serán invisibles.Toda esta uncionalidad se consi&ue utili+ando @avaScri%t, es decir, que no se env3anada al servidor 1no se $ace un post-4ac7 2.

>ada control de validación que arrastremos se debe asociar al control del que deberá'estar %endiente'. Por su%uesto es %osible arrastrar varios validadores y asociarlos aun mismo control %ara as3 veriicar varias condiciones. !o contrario no es cierto, esdecir, no se %uede usar un solo validador %ara veriicar varios controles. El control averiicar se asi&na mediante la %ro%iedad ,ontrol)oValidate del control de validación.

Aunque su utilidad es bastante intuitiva, la si&uiente tabla indica el uso a%ro%iado de

cada uno de los controles dis%onibles)

ontrol Btilidad

Re>uiredFiled'alidator #eriica que el control asociadono se encuentra vac3o.



Range'alidator Lenera un mensa"e de errorcuando el contenido de su controlasociado está uera de un ran&ode valores dado. Permite validarintervalos numéricos 1enteros o

decimales o monedas2, ec$as ycadenas de teto.

RegularEC"ression'alidator

>om%ara un teto introducido %orel usuario con una e%resiónre&ular.

o"are'alidator Permite com%arar el valorintroducido %or el usuario conuna constante o con el valor de la%ro%iedad de otro control.

usto'alidator Se usa %ara im%lementar ló&icade validación %ro%ia tanto en elcliente como en el servidor.

Ta%la 3.(.1.- ontroles de !alidación # su utilidad.

El control ValidationSuar# 1aba"o de todo en el &ru%o de controles de la i&uraanterior2 se usa %ara mostrar un resumen de todo lo que está mal en un ormulario enlu&ar de mostrar cada uno de los mensa"es de error individualmente.

No todos los controles se %ueden validar con los controles de validación. e $ec$o sóloun %eque*o subcon"unto de todos los controles Web son adecuados %ara un usocon"unto. En cualquier caso los incluidos cubren la mayor %arte de las necesidadesnormales de introducción de datos, y son los si&uientes)

ontrol Ti"o Pro"iedad

/tlin"utTeCt Entrada de teto #alue

/tlTeCtArea Entrada de teto #alue

TeCtDoC Entrada de teto Tet

/tlSelect !ista de seSección #alue

istDoC !ista de seSección Selected4tem.#alue

=ro"=o$nist !ista de seSección Selected4tem.#alue



RadioDuttonist

<otones deseSección

Selected4tem.#alue

/tlIn"utFile Env3o de arc$ivos #alue

Figura 3.(.(.- ontroles >ue se "ueden !alidar # las "ro"iedades >ue se!alidan en ellos.

A%arte de mostrar la inormación de error al usuario, en los eventos de la %á&ina&estionados en el servidor %odemos com%robar el valor de la %ro%iedad /sValid delob"eto Page. Ksta será False si al&uno de los controles de validación ubicados en la%á&ina no $a %asado la %rueba de veriicación. Esto es muy :til %ara reali+ar accionescom%lementarias en el servidor en caso de $aber errores.

Sabiendo todo esto es ácil utili+ar cualquiera de los controles de este ti%o. >onsulte elv3deo de esta Sección %ara ver una %ráctica de uso.

.a,idado#!s p!#sona,i8adosTal ve+ el validador que necesite más e%licación es el ,ustoValidator . >omo su%ro%io nombre indica se usa %ara crear normas de validación %ro%ias que no seada%ten a nin&una de las contem%ladas con los demás controles. Para conse&uirlo sedeinen unciones de validación en el cliente y en el servidor.

!as unciones de validación en el cliente se escriben en @avaScri%t o en #<Scri%t yse asocian con el control mediante la %ro%iedad ,lientValidation6unction. la uncióndeinida %uede tener cualquier nombre %ero debe tomar dos ar&umentos, as3)

4unction mi5alidador6origen* argumentos7

8

9

El %rimer ar&umento, origen, obtiene una reerencia al control de validación 1unelemento <span><@span> de -TM! que contiene el mensa"e a mostrar2 que nos%ermite mostrarlo u ocultarlo o cambiar el contenido del mensa"e. El se&undoar&umento es más im%ortante %uesto que se trata de un ob"eto con dos %ro%iedades)Value y /sValid . !a %rimera contiene el valor a validar que está etra3do del controlasi&nado en la %ro%iedad ontrol0o5alidate. !a se&unda se usa %ara indicar si la

validación $a tenido éito o no.

Por e"em%lo, %ara validar que el n:mero introducido en un control es im%ar,arrastrar3amos un control ustom5alidator al ormulario Web, asi&nar3amos su%ro%iedad ontrol0o5alidate %ara que a%unte a un cam%o de teto, y establecer3amosla %ro%iedad lient5alidationFunction con el valor '#alida4m%ar' que es el nombre de launción @avaScri%t. A continuación incluir3amos en la cabecera de la %á&ina unra&mento de @avaScri%t como este)



<script language=":a(ascript">

4unction 5alida'mpar6origen* args7

8

i4 6args;5alue , == 7 //$i es di(isi3le entre es par

args;'s5alid = 4alse

else

args;'s5alid = true

9

</script>

A$ora todav3a alta la validación en el servidor que de $ec$o es la más im%ortante.Su uncionamiento es i&ual de sencillo. -ay que &estionar el evento ServerValidate

del control ustom5alidator . Este evento obtiene ar&umentos del ti%oServerValidate4ventArgs que son uncionalmente equivalentes a los que acabamosde ver en el caso del cliente, es decir, dis%onen de las %ro%iedades 5alue e Is5alid .Para rematar nuestro e"em%lo con la validación en el servidor sólo es necesario escribirel si&uiente códi&o #<.NET)

>omo se %uede observar es uncionalmente idéntico al códi&o que escribimos %ara elcliente en @avaScri%t.

Nota)Este control de validación %ersonali+ada ya eist3a en versionesanteriores de ASP.NET. En éstas el evento de validación no se notiicabacuando el control a validar estaba vac3o. Para conservar la com%atibilidadel control >ustom#alidator de ASP.NET /.F traba"a de la misma manera.Sin embar&o es %osible or+ar la validación incluso con el cam%o vac3o siestablecemos la %ro%iedad Validate4pt#)ext del ustom5alidator a0rue.



Co,oca# !, 7oco !n !, !##o#5tra acción muy com:n a la $ora de validar datos en un ormulario es colocar el ocosobre el control que contiene inormación errónea. e este modo se acilita al usuariola introducción del nuevo valor %ues no tiene que activar el control con el ratón.Podemos $acer que los controles de validación $a&an esto %or nosotros con sólo

establecer a 0rue su %ro%iedad Set6ocus:n4rror . Esta caracter3stica es nueva enASP.NET 8.0 y %or lo tanto en ASP.NET /.F.

ontroles de usuario>omo ya $emos adelantado en la Sección anterior, a%arte de la com%le"a creación decontroles Web %ersonali+ados del estilo de los que vienen con ASP.NET, eiste unaorma rá%ida y sencilla de reutili+ar %artes com%letas de uncionalidad e intera+ deusuario. Para ello no es necesario tener %roundos conocimientos de la %lataorma.NET. Ni siquiera $acen alta conocimientos de -TM!. Se trata de los controles deusuario.

En esta Sección veremos qué son, cómo se crean y cómo se utili+an.

Cont#o,!s d! sa#io!os controles de usuario son tan áciles de crear que, de $ec$o, ya conoce casi todo loque necesita %ara construirlos. Se crean eactamente i&ual que los ormularios Web ydis%onen de un dise*ador visual idéntico que %ermite arrastrar otros controles sobre susu%ericie. e $ec$o cualquier ormulario Web 1%á&ina ASP62 %uede transormarsedirectamente en un control reutili+able con sólo unos %ocos cambios de sintais.

Para a*adir un nuevo control de usuario %ulse con el botón secundario sobre el nodora3+ del %royecto en el e%lorador de soluciones y esco"a la o%ción ' gregar

elemento...'. En el diálo&o que a%arece 1ya sobradamente conocido2 seleccione elicono corres%ondiente a ,ontrol de usuario !e", como se ilustra en la si&uientei&ura)



Figura 3.3.1.- =ilogo "ara a7adir un nue!o control de usuario.

Si se i"a en la i&ura detenidamente verá que, salvo %or el icono ele&ido, no $aydierencia al&una con a*adir un nuevo ormulario Web. e $ec$o la :nica dierencia

eistente en este %unto es la etensión quese le otor&ará al arc$ivo resultante, que es.ascx en lu&ar de .as%.

El arc$ivo resultante se distin&ueácilmente en el e%lorador de %royectos%orque #isual Studio le asi&na un iconodierente 1vea la i&ura lateral2.

Al i&ual que un ormulario Web corrienteun control de usuario dis%one de undise*ador visual con doble vista 1)ise'o y?rigen2 y de un editor de códi&o asociadoen caso de $aber esco&ido la se%aración decódi&o e intera+ 1o%ción marcada en lai&ura anterior2.

el mismo modo están dis%onibles %araarrastrar sobre la su%ericie de dise*o los mismos controles (eb que en el caso de losormularios Web.



!a %rimera dierencia con una %á&ina ASP6 la encontramos al ver las etiquetas queconstituyen la %arte de intera+ de usuario del control. En los ormularios a%arece al%rinci%io una directiva <%BPage %>, %ero en los controles la directiva se llama ;

<3,ontrol <= si bien se usa de un modo muy similar)

Figura 3.3.(.- ódigo origen de un control de usuario so%re el >ue se anarrastrado tres controles e%.

5tra dierencia undamental de un control con una %á&ina es que $ereda de la clase

5ser,ontrol y no de Page. Sin embar&o ambas clases base $eredan a su ve+ de laclase )eplate,ontrol , %or lo que conservan multitud de caracter3sticas en com:n.

Figura 3.3.3.- ódigo de la clase code-%eside de un control de usuario. en el>ue se !e >ue sta ereda de Bserontrol .

e $ec$o la similitud es tal que el entorno de desarrollo le asi&na al mane"ador delevento ;oad del control el nombre Page(;oad 1en lu&ar de, %or e"em%lo,Aserontrol(;oad 2 como se observa en la i&ura.

D!9nición d! ,a 7nciona,idad p56,ica d!, cont#o, d! sa#io

Todo a %artir de a$ora es eactamente i&ual que en el caso de los ormularios Web.Podemos arrastrar cualquier control Web desde el cuadro de $erramientas sobre lasu%ericie del control, asi&nar sus %ro%iedades y recibir %ostCbac?s que &eneraneventos en los controles que $emos incluido.

Por su%uesto, como en esencia un control de usuario no es más que una clase de .NET,%odemos etenderla a*adiéndole nuestros %ro%ios métodos y %ro%iedades. Todos losmiembros %:blicos que a&re&uemos estarán dis%onibles desde la %á&ina que alber&ue



al control del mismo modo que lo están las %ro%iedades y métodos de cualquier controlWeb normal. Esto es muy :til %ara enca%sular el acceso a ciertas uncionalidades que$ayamos incluido.

Por su%uesto los controles que coloquemos en la su%ericie del control se veránadecuadamente en la %á&ina que lo conten&a y se com%ortarán del modo es%erado,esto es, recibiendo eventos, conservando su estado en el 5ie6!tate, etc...

Uso d! ,os cont#o,!s d! sa#ioA$ora que ya sabemos crear controles de usuario veamos la orma de usarlos desdelos ormularios Web.

El modo más sencillo de incluir un control de usuario en una %á&ina ASP6 essim%lemente arrastrándolo desde el e%lorador de %royectos sobre su su%ericie dedise*o. Esto $ará que se visualice el control com%leto dentro de la %á&ina)

Figura 3.3.4.- ontrol de usuario arrastrado so%re la su"er9icie de un9orulario e% &los "untos rojos se usan "ara destacarlo no esta%an en la iagen original*.

Nota)#isual Studio 8070 orece un mayor so%orte en tiem%o de dise*o %aralos controles de usuario que %ermite ver el contenido del control ya"ustar sus %ro%iedades desde el e%lorador de %ro%iedades. Enversiones anteriores de #isual Studio .NET lo :nico que se ve3a de estoscontroles era un cuadro de color &ris con su nombre y eran %or tantomás di3cil traba"ar con ellos y enca"arlos en un dise*o &eneral.

>uando observamos el códi&o de la %á&ina ASP6 desde la que estamos utili+ando elcontrol de usuario, vemos que al %rinci%io de ésta se $a incluido una directiva

>egister )

ui+á el atributo más im%ortante de esta directiva sea el :ltimo, )agPre$ix . El valorasi&nado a él será el que se utilice %ara distin&uir de manera :nica un control deusuario dentro de la %á&ina. e este modo se %ueden utili+ar sin %roblemas controlesde usuario con el mismo nombre en una misma %á&ina. As3, se&:n la l3nea anterior



%odr3amos deinir en la %á&ina un control del ti%o &icontrol usando una sintais comoesta)

!as %ro%iedades que $ayamos deinido %ara la clase &icontrol se %ueden establecermediante atributos 1al i&ual que 4 en la l3nea anterior, %or e"em%lo2 siem%re que setrate de ti%os sim%les.

Podemos modiicar la directiva Je&ister %ara incluir un %rei"o que nos &uste más o seamás descri%tivo que el que #isual Studio $a %uesto %or deecto.

Ca#ga diná)ica d! cont#o,!s d! sa#io5tro modo de $acer uso de los controles de usuario es car&arlos dinámicamente se&:nlos necesitemos. El método (oad,ontrol de la clase Page o del ormulario de la %á&inaes el que nos va a ayudar a conse&uirlo. Sólo $ay que %asarle como ar&umento el

nombre del arc$ivo AS>6 que contiene la deinición del control de usuario, de modosimilar a este)

im c As )ontrol

c = Me;Load)ontrol6"Micontrol;ascx"7

Me;orm;)ontrols;Add6c7

En lu&ar de usar un ti%o &enérico 1ontrol 2 como en este ra&mento también %odemosusarlo como el verdadero ti%o del control y as3 llamar a sus métodos y %ro%iedadesantes de a*adirlo al ormulario)

im c As )ontrol

im mi) As Micontrol

c = Me;Load)ontrol6"Micontrol;ascx"7

mi) = )?ype6c* Micontrol7

mi);5alor'nicial = "1ien(enido a esta p@gina"

Me;orm;)ontrols;Add6mi)7

En este e"em%lo $emos usado el control con su verdadero ti%o %ara %oder asi&nar la%ro%iedad 5alorInicial antes de a&re&arlo a la %á&ina.



Tcnicas de tra%ajo # consejos !ariosPara inali+ar con este intenso módulo de undamentos de las a%licaciones ASP.NETvamos a comentar al&unas técnicas de traba"o comunes que le serán de ayuda en suque$acer diario.

T'cnicas d! t#a6a*o 4 cons!*os :a#ios

Na:!gación !nt#! páginasAntes de nada me %arece necesario comentar que en las a%licaciones ASP.NET seutili+an se&uramente muc$as menos %á&inas que en el caso de que la mismaa%licación estuviese escrita con ASP clásico. Esto se debe a que, &racias a los %ostCbac? y los corres%ondientes eventos de servidor se enca%sula más la uncionalidad enun sólo arc$ivo. Por e"em%lo en una a%licación ASP /.0 clásica %ara reco&er los datosde un usuario con muc$a %robabilidad escribir3amos dos 1o incluso tres o cuatro2%á&inas) la %á&ina -TM! con el ormulario, la %á&ina ASP a la que se env3an los datosdel ormulario y %uede que una %á&ina o dos %ara inormar al usuario del éito o del

racaso de su acción. En ASP.NET todo esto se resolver3a con una sola %á&ina ASP6, unevento de servidor y %robablemente mostrando y ocultando controles Web desde dic$oevento.

Por su%uesto una a%licación estará ormada de todos modos %or un n:mero más omenos elevado de %á&inas a las que se debe diri&ir al usuario. Eisten diversasmaneras de diri&ir a un usuario $acia otra %á&ina o recurso de la a%licación.

!a %rimera de ellas, y la más sencilla, consiste en utili+ar controles del ti%o 8#per(in-

que tiene este as%ecto en el cuadro de $erramientas) . Estableciendo su

%ro%iedad avigate5rl estaremos indicando a qué %á&ina queremos enviar al usuariocuando %ulse sobre el enlace resultante. Si la %á&ina es una de las que %ertenecen anuestra a%licación será muy ácil seleccionarla &racias al diálo&o es%ecial que a%arece%ara ello)



Figura 3.4.1.- =ilogo de seSección de "ginas de nuestra a"licación.

Además si a"ustamos la %ro%iedad 0e#t de este control ese será el teto que semuestre %ara el enlace de la %á&ina. Es %osible utili+ar un &ráico en lu&ar de teto%ara el enlace si se utili+a la %ro%iedad /age5rl .

Nota)Eisten controles es%eciali+ados en crear árboles de nave&ación en una%á&ina %ero %or deba"o usan enlaces como éstos. !os estudiaremos enun %róimo módulo.

!a otra manera de enviar a los usuarios a una %á&ina %ro%ia o a"ena consiste en $aceruso del método >edirect de la clase 8ttp>esponse del conteto de llamada de la%á&ina. As3 %odremos controlar desde un evento de servidor a dónde enviaremos alusuario. Por e"em%lo, si queremos enviarlo a una %á&ina dierente se&:n lo que $ayaesco&ido en un control de seSección %odr3amos escribir al&o similar a esto en el eventode %ulsación de un botón)

'4 opciones;List'ndex = ?hen

Response;Redirect6"opcion2;aspx"7

lse

Response;Redirect6"opcion;aspx"7

nd '4



El método edirect env3a al nave&ador del usuario una cabecera es%ecial de redirecciónque le indica que, en lu&ar de descar&ar los contenidos de la %á&ina actual, debesolicitar una nueva. Esto %rovoca una nueva %etición de %á&ina desde el nave&ador %orlo que no es la orma de nave&ación de mayor rendimiento 1$ay el doble de via"es alservidor que en un enlace directo2. Sin embar&o dota de &ran leibilidad a la $ora dedecidir qué $acer ante la solicitud de %á&ina de un usuario o %ara rediri&ir al inal de un%roceso e"ecutado en el servidor.

En:;o d! datos !nt#! páginas>omo $emos visto el com%ortamiento normal durante la %ulsación de un botón u otroevento de controles servidor es el de reali+ar un post-4ac7 a la %á&ina actual. Sinembar&o %uede $aber ocasiones en las que, %or el motivo que sea, se necesita reali+arese env3o de datos a otra %á&ina dierente, %ero eso s3, conservando el acceso a todoslos controles y datos de la %á&ina ori&inal 1que como sabemos están contenidos en el5ie6!tate2.

ASP.NET 8.0 $a a*adido una nueva uncionalidad denominada ,ross Page Posting,que %ermite %recisamente esto. Para conse&uirlo lo :nico que $ay que $acer es a"ustarla %ro%iedad Post*ac-5rl del control cuyos eventos queremos &estionar desde otra%á&ina asi&nándole la ruta virtual de ésta :ltima.

!os datos se reciben en la otra %á&ina %ero todav3a tenemos acceso a los datos de la%á&ina ori&inal a través de la %ro%iedad PreviousPage de la nueva. Se trata de unob"eto Pa&e reconstruido a %artir del 5ie6!tate recibido. Si la usamos as3, de modo&enérico, tendremos que utili+ar el método 6ind,ontrol de la clase Page %ara locali+arcualquier control que $ubiese en la %á&ina ori&inal. Por su%uesto si ambas %á&inas%ertenecen al mismo es%acio de nombres 1o lo $emos declarado2 %odemos or+ar el

uso de la %á&ina como la clase ori&inal de ésta usando 0=pe y acceder directamente asus métodos, %ro%iedades y controles.

También es %osible determinar desde una %á&ina si los datos que está recibiendo sonde su %ro%io PostCbac? o %ertenece a otra %á&ina mediante la %ro%iedad /s,rossPagePost*ac- , que es muy similar a la %ro%iedad IsPost,ac7 que ya $emosestudiado.

Esta técnica es de un uso %oco recuente %ero se trata de una novedad %oco conocidaque me $a %arecido interesante incluir aqu3.

T#ans7!#i# !, cont#o, !nt#! páginasA veces %uede ser :til %rocesar el códi&o de una %á&ina y "usto des%ués transerir elcontrol a otra %á&ina e"ecutando también su códi&o. El método )rans$er de la clase8ttpServer e"ecuta dinámicamente el códi&o de una %á&ina desde otra cualquiera.

!a orma de $acerlo es la si&uiente)

$er(er;?rans4er6"otrapagina;aspx"7



Al contrario que el uso de edirect , !erer.0rans*er no cambia la GJ! que el usuario veen su nave&ador ya que desde uera no se observa nin&una variación en la %á&inae"ecutada. Es una e"ecución en el servidor, sin redirección en el cliente.

Este método es análo&o al del mismo nombre en ASP clásico, si bien en ASP.NET suutilidad es menor %uesto que, como veremos, eisten maneras muc$o me"ores y másrecomendables de reutili+ar códi&o de uso com:n en las %á&inas.

R!ti,i8ación d! código !n na ap,icaciónA menudo, al escribir una a%licación, tenemos necesidades similares en diversas %artesde ésta. Por ello ser3a absurdo escribir una y otra ve+ el mismo códi&o dentro de losmane"adores, al car&ar una %á&ina y demás eventos. !o me"or es enca%sular el códi&oen diversos métodos y llamar a éstos cuando sea necesario. Todo esto sonará de%ero&rullo a cualquier %ro&ramador e%erimentado.

En ASP clásico, %or e"em%lo, se sol3an a&ru%ar las unciones de uso com:n dentro de

arc$ivos de inclusión que lue&o se utili+aban en las dierentes %á&inas &racias a unadirectiva <-- include -->. Si bien esto constitu3a una manera básica de reutili+arcódi&o no orec3a la leibilidad de un len&ua"e ca%a+ de crear bibliotecas de ob"etos ymétodos.

En .NET es %osible crear nuevas clases que enca%sulen uncionalidades comunes y quesean reutili+ables en cualquier %unto de la a%licación. En ASP.NET 8.0 eisten una seriede car%etas con nombres es%eciales que cuel&an de la car%eta %rinci%al de la a%licacióny que llevan asociado un com%ortamiento es%ecial. Gna de estas car%etas es App?,ode. <ásicamente, todo el código @ue se colo@ue "a&o esta carpeta se

copila de anera autoática.

Tal y como $emos estudiado anteriormente, cuando se solicita una %á&ina ésta secom%ila de manera automática "unto con su arc$ivo de 'codeCbeside' de orma que, amedida que se accede a las dierentes %artes de una a%licación se va com%ilando %orcom%leto. adas las caracter3sticas de #isual Studio, el códi&o residente en arc$ivosque no sean %á&inas o clases %arciales de 'codeCbeside' no se com%ila ya que "amásnave&amos %or él ni se reerencia desde otras %á&inas. !a ece%ción a esta re&la es elcódi&o que coloquemos en la car%eta pp(ode que se com%ila automáticamente alcomen+ar la a%licación.

Por ello, una buena orma de reutili+ar códi&o entre %á&inas es a&re&ar clases

es%eciali+adas a la car%eta pp(ode. e $ec$o si %resionamos con el botónsecundario sobre el %royecto en el e%lorador de soluciones y a&re&amos un nuevoelemento de ti%o >lase se nos mostrará una advertencia diciendo, &rosso modo, quedebemos a*adirla a pp(ode si queremos que uncione. 4ncluso se creaautomáticamente la car%eta si no lo $emos $ec$o ya con anterioridad)



Figura 3.4.(.- Ad!ertencia "ara colocar código en A""ode &a"lica%le a'isual Studio ()1) ó su"erior*.

4ncluso si intentamos a&re&ar un nuevo elemento a la car%eta A%%H>ode sólo se nosorecerá la %osibilidad de incluir nuevas clases, arc$ivos de teto 1%ara comentarios,%or e"em%lo2 o )ata!ets. Estos :ltimos son ataSets ti%ados que no de"an de serclases con un dise*ador asociado como veremos en el si&uiente módulo.

Gna ve+ creadas nuevas clases en estas car%eta %odemos a*adirle métodos,%ro%iedades y cam%os %ara dotarlas de la uncionalidad que requiramos. Por su%uestoson clases normales de .NET %or lo que %odremos derivarlas de otras clases %ara

obtener uncionalidad '&ratis', $acer que im%lementen interaces o incluirlas dentro demódulos o es%acios de nombres %ara ordenarlas.

Si lo que desea es com%artir códi&o entre distintas a%licaciones o enca%sularuncionalidad en una librer3a inde%endiente, %uede crear un %royecto de ti%o librer3a declases. Este %royecto &enera un arc$ivo .!! que %uede com%artir entre distintasa%licaciones. >on esto %odrá reutili+ar sus clases en tantos %royectos como quiera,incluso en distintos ti%os de %royectos como A%licaciones Web y A%licaciones Windo(s.

Nota)Si dis%one de la versión #isual Web evelo%er no %odrá &enerarbibliotecas !!.

Documents

Fundamentos Aplicaciones Web