apuntes asp en sharp develop

8/15/2019 Apuntes ASP en Sharp Develop

1/47

Diseño y Desarrollo de un sitio web utilizandoASP.NET MVC 4, EF, no!"out#s y $ootstra%& T'A AP()CAC)*N MVC+ )NT'&DCC)*N Todos los sitios web est-n !re!iendo -s r-%ido en estos d/as, y una 0ez 1ue !re!e, es uy di2/!il dees!ribir, or3anizar y antener. A edida 1ue a3re3aos nue0as 2un!ionalidades o desarrollador de un%roye!to, las 3randes a%li!a!iones web !on un diseño de!iente %ueden salir de !ontrol. As/ 1ue la idea deeste art/!ulo es el de diseñar una ar1uite!tura web 1ue debe ser si%le, 2-!ilente !o%rensible %or!ual1uier diseñador web 5%rin!i%iante a interedio6 y los otores de b7s1ueda. Para este art/!ulo 1ueestoy tratando de diseñar un sitio web %ara las %ersonas antener sus datos de !onta!to en l/nea. Sinebar3o, en el 2uturo, la isa a%li!a!i8n %uede ser utilizada %or la 3ran !ounidad en todo el undo!on la 2un!ionalidad y 8dulos añadido. As/, el diseño debe ser 2-!ilente ada%table a n de 9a!er 2renteal 2uturo !re!iiento del ne3o!io. En este art/!ulo 0oy a 9ablar sobre la !rea!i8n y el diseño de la inter2azde usuario 5)6 de tal anera %ara 1ue la inter2az de usuario se %uede se%arar de la l83i!a de ne3o!io, yse %ueden !rear de 2ora inde%endiente %or !ual1uier diseñador : desarrollador. Para esta %arte 0aos a

utilizar ASP.Net MVC, no!"out ;1uery y $ootstra%. -s adelante en este art/!ulo 0aos a dis!utir -ssobre el diseño de bases de datos y la a%li!a!i8n de la l83i!a de ne3o!io utilizando !a%as estru!turadasutilizando S>?, Entity Fraewor", y el !astillo de @indsor %ara la inye!!i8n de de%enden!ias.

(A SEPA'AC)*N DE P'E&CPAC)*N+ &$;ET)V& P')MA')&

El !on!e%to !la0e es el %aso de la ayor %arte o toda la l83i!a. (a l83i!a no deber/a obli3arse a una%-3ina.


2/47

S)ETE P'&ECT&S EN NA S&(A S&(C)*N+ ES (& NECESA')&

Es todo a!er!a de su de!isi8n ... ϑ (a %ro%uesta diseñada o2re!er- al3unos de los bene!ios -s

rele0antes, 1ue in!luyen+

• (a se%ara!i8n de Preo!u%a!i8n+ El diseño debe %eritir 1ue las !a%as !laras y denidas si3ni!a

se3re3ar a%li!a!i8n en -reas distintas !uya 2un!ionalidad no se su%er%one. de tal anera 1ue lainter2az de usuariodiseñadores %ueden !on!entrarse en su traba#o sin tener 1ue lidiar !on la l83i!ade ne3o!io 5A%%li!ation.@eb6, y el desarrollador del n7!leo s8lo %uede traba#ar en la l83i!a dene3o!io %rin!i%al 5A%%li!ation.DT& o A%%li!ation.Mana3er6.

• Produ!ti0idad+ Es -s 2-!il %ara a3re3ar nue0as !ara!ter/sti!as al so2tware eGistente, ya 1ue la

estru!tura ya est- en ar!9a, y la ubi!a!i8n %ara !ada nue0a %ieza de !8di3o se !ono!e deanteano, %or lo 1ue !ual1uier %roblea %uede ser 2-!ilente identi!ados y se%arados %ara 9a!er


3/47

2rente a la !o%le#idad y al al!anzar los 2a!tores de !alidad de in3enier/a ne!esarios, !oo H Hrobustez, ada%tabilidad, !a%a!idad de anteniiento y reutiliza!i8n.

Ca%a!idad de anteniiento+ Es -s 2-!il antener la a%li!a!i8n, debido a des%e#ar y estru!tura denidadel !8di3o es 0isible y !ono!ido, %or lo 1ue es -s 2-!il en!ontrar los errores y anoal/as, y odi!arlos!on un ries3o /nio.

• Ada%tabilidad+ (as nue0as !ara!ter/sti!as tB!ni!as, un 2rente tan di2erente terina, o la adi!i8n de

un otor de re3las de ne3o!io es -s 2-!il de lo3rar, ya 1ue su ar1uite!tura de so2tware !rea una!lara se%ara!i8n de las %reo!u%a!iones.

'eutiliza!i8n+ (a reutiliza!i8n es otro oti0o de %reo!u%a!i8n en el diseño de !ual1uier a%li!a!i8n, ya 1uees uno de los %rin!i%ales 2a!tores %ara disinuir el !osto total de %ro%iedad, y nuestro diseño debe!onsiderar 9asta 1uB %unto %odeos 0ol0er a utilizar la a%li!a!i8n web !reada y di2erentes !a%as.En la 7ltia se!!i8n de este art/!ulo, 0aos a dis!utir la 2un!ionalidad de !ada !a%a del indi0iduo endetalles.

IE''AM)ENTAS TECN&(&JKA

Para al!anzar la solu!i8n nal, ne!esitaos 9erraientas aba#o : dll+

• Visual Studio =>L=• ASP.NET MVC 4 !on 'azor View En3ine• Entity Fraewor" .>• Castillo de @indsor %or D)• S>?:=>L=• no!"out.#s y #


4/47

PANTA((A =+ C'EA' NEV& C&NTACT&

Esta %antalla debe a%are!er una %antalla en blan!o %ara %ro%or!ionar 2un!ionalidad 1ue. =.L El usuariodebe ser !a%az de entrar en su : su %rier nobre, a%ellido y dire!!i8n de !orreo ele!tr8ni!o. =.= suariodebe %oder añadir !ual1uier !antidad de n7eros de telB2ono, 9a3a !li! en A3re3ar n7eros. =. suariodebe %oder 1uitar !ual1uier n7ero de telB2ono. =.4 suario debe %oder añadir !ual1uier n7ero dedire!!iones 9a!iendo !li! en Añadir nue0a dire!!i8n. =. suario debe %oder eliinar !ual1uierdire!!i8n. =.O Ia3a !li! en el bot8n de 3uardar debe 3uardar los datos de !onta!to en la base de datos y elusuario 0ol0er- atr-s en la %-3ina (ista de !onta!tos.=. Ia3a !li! en el bot8n Vol0er al Perl deb/anre3resar al usuario a la %-3ina de !onta!to de lista. bo!eto ini!ial+


5/47

PANTA((A + ACTA()QAC)*N DE C&NTACT& ER)STENTE

Esta %antalla debe ostrar la %antalla !on los datos de !onta!to de in2ora!i8n sele!!ionados. .L Elusuario debe ser !a%az de odi!ar su : su %rier nobre, a%ellido y dire!!i8n de !orreo ele!tr8ni!o. .=

El usuario debe %oder odi!ar : borrar : Añadir !ual1uier !antidad de n7eros de telB2ono, 9a3a !li! enA3re3ar n7eros o eliinar enla!e. . El usuario debe %oder odi!ar : borrar : A3re3ar !ual1uiern7ero de dire!!iones 9a!iendo !li! en Añadir nue0a dire!!i8n o eliinar enla!e. .4 Ia3a !li! en el bot8nde 3uardar debe a!tualizar los datos de !onta!to en la base de datos y el usuario 0ol0er- de nue0o en la%-3ina (ista de !onta!tos.. Ia3a !li! en el bot8n Atr-s %ara Perl deb/an re3resar al usuario a la %-3inade !onta!to de lista. $o!eto ini!ial+


6/47

PA'TE L+ C'EAC)*N DE AP()CAC)&NES @E$ 5 N&C&T. ;S, ASP.NET MVC $&&TST'AP6+ PA'A D )SEAD&'ES

Antes del sa1ue ini!ial %or %arte de ), 0aos a 0er 1uB bene!ios nos estaos utilizando no!"out#s y$ootstra% #unto !on ASP.NET MVC 4. ¿Por qué Knockoutjs: no!"out es un %atr8n MVVM 1ue traba#a !onun odelo de 0ista #a0as!ri%t. (a raz8n %or la 1ue esto 2un!iona bien !on MVC es 1ue la serializa!i8n 9a!iay desde odelos de #a0as!ri%t en ;S&N es uy si%le, y tabiBn se in!luye !on MVC 4. nos %eritedesarrollar ri!a inter2az de usuario !on u!9o enos !odi!a!i8n y !ada 0ez 1ue odi!aos nuestrosdatos, inediata 'ee#a en la inter2az de usuario. ¿Por Bootstrap: Twitter $ootstra% es un ITM( si%le yeGible, CSS y ;a0as!ri%t %ara los !o%onentes de inter2az de usuario %o%ulares e intera!!iones. Viene !on9a!es de estilos CSS, !o%onentes y %lu3ins ;a0as!ri%t. Pro%or!iona so%orte de %lata2ora !ruzada, lo 1ueeliina las %rin!i%ales in!onsisten!ias de diseño. Todo si%leente 2un!ionaU na buena do!uenta!i8n yel sitio web de Twitter $ootstra% en s/ es una uy buena re2eren!ia %ara e#e%lo de la 0ida real. , %or7ltio, e a9orra un ont8n de 0e!es, ya 1ue redu#o el tie%o de desarrollo a la itad !on uy enos!asi !ero %robleas !on el na0e3ador de %ruebas y. Al3unos otros bene!ios 1ue %odeos obtenerediante el uso de este ar!o son+

• 'e#illa L=Coluna, diseño #o, uido o diseño sensible.• CSS $ase %ara la ti%o3ra2/a, el !8di3o 5el resaltado de sintaGis !on Joo3le %retti2y6, tablas,

2orularios, botones y utiliza i!onos %or Jl%y9i!ons.


7/47

• Co%onentes @eb de inter2az de usuario, !oo botones, en7s de na0e3a!i8n, Eti1uetas,

Miniaturas, Alertas, barras de %ro3reso y is!el-neos.• Plu3ins ;a0as!ri%t %ara Modal, des%le3able, S!rolls%y, Tab, Toolti%, Po%o0er, Alerta, $utton, Colla%se

Carousel y Ty%e9ead.

En los %asos si3uientes, 0aos a traba#ar a tra0Bs de la distribu!i8n y el diseño %ara !onstruir la inter2azde usuario %ara el re1uisito anterior utilizando datos !ti!ios #a0as!ri%t.

PAS& L+

Crear un nue0o %roye!to !oo solu!i8n en blan!o el nobre !oo A%li!a!i8n

PAS& =+

Ia3a !li! en la !ar%eta de la solu!i8n y A3re3ar nue0o %roye!to de ti%o ASP.NET MVC 4 !oo %lantillas dea%li!a!iones de )nternet !on 0istas al otor !oo 'azor. Des%uBs del %aso = la estru!tura del %roye!todebe ser siilar a la ia3en de aba#o


8/47


9/47

PAS& +

Ia3a !li! dere!9o sobre re2eren!ias y 9a3a !li! en Adinistrar %a1uetes NuJet. Es!riba $ootstra% en labarra de b7s1ueda a !ontinua!i8n, 9a3a !li! en el bot8n )nstalar.

PAS& 4+


10/47

añadir deba#o de la l/nea de !8di3o en el ar!9i0o en la !ar%eta $undleCon3.!s A%%WStart añadirno!"out#s y $ootstra% %ara !ada %-3ina

bundles.Add (nuevo ScriptBundle ("~ / paquetes / knockout"). Incluir (

"~ / scripts / knockout- {version} .s"))!

bundles.Add (nuevo StleBundle ("~ / #ontent / css") Inclua ("~ / #ontent /

bootstrap.css").)!

TabiBn en W(ayout, ar!9i0o !s9tl en Vistas : !ar%eta !o%artida a3re3ar deba#o de la l/nea %arare3istrar ar!9i0os "no!"out !oo+

$ Scripts.%ender ("~ / paquetes / knockout")

PAS& +

Añadir un nue0o nobre de la !ar%eta !oo !onta!to dentro Vistas y, a !ontinua!i8n añadir )ndeG.!s9tl!oo nue0o Ver %-3ina. A !ontinua!i8n, a3re3ue un nue0o nobre de !ontrolador 1ueConta!tController.!s dentro de la !ar%eta del !ontrolador, y añadir un nue0o ar!9i0o en la !ar%eta S!ri%tsConta!t.#s. Consulte a !ontinua!i8n la ia3en.


11/47

PAS& O+

Finalente odi!ar el a%a de rutas %or de2e!to en 'oute.!on3 señalar !onta!tar !ontrolador !oo+

routes.&ap%oute (

no'bre "e*ault"+

url "{controlador} / {acci,n} / {id}"+

predeter'inados nuevo controlador {"#ontacto"+ action "ndice"+ id rl0ara'eter.1ptional}

)!

tabiBn odi!ar el ar!9i0o W(ayout.!s9tl interior Vista : S9ared se37n la sintaGis $ootStra%. A!ontinua!i8n se uestra el !8di3o odi!ado+

23 1#4506 7t'l8

29t'l lan: "es"8

29ead8


12/47

2&eta c7arset "4;-


13/47

PAS& ?+

En %rier lu3ar 0aos a !rear un dato de %erl !ti!ias !oo atriz en Conta!t.#s 5-s tarde 0aos a

bus!arla a la base de datos6, y lue3o 0aos a utilizar estos datos %ara rellenar la !uadr/!ula.

var u''0ro*ile H

{

"0ro*ileI" +

"Fo'bre" "Anand"+

"Apellido" "0ande"+

"#orreo electr,nico" "anand$anandpande.co'"

}+

{

"0ro*ileI" J+

"Fo'bre" "Kuan"+

"Apellido" "#ena"+

"#orreo electr,nico" "o7n$cena.co'"

}

L

A !ontinua!i8n, 0aos a !rear ProlesViewModel, una !lase de odelo de 0ista 1ue antienen %erles, unarre3lo 1ue !ontiene una !ole!!i8n ini!ial de datos DuyProle. Ten3a en !uenta 1ue se trata de un"o.obser0ableArray, y es el e1ui0alente obser0able de una serie re3ular, lo 1ue si3ni!a 1ue %uede

dis%arar auto-ti!aente las a!tualiza!iones de la inter2az de usuario !ada 0ez 1ue se a3re3an oeliinan eleentos. %or 7ltio teneos 1ue a!ti0ar no!"out utilizando "o.a%%ly$indin3s 56.

var 0ro*iles=ie>&odel *unction () {

var sel* esto!

var re*res7 *unction () {

sel*.0ro*iles (u''0ro*ile)!


14/47

}!

// propiedades de datos pMblica

sel*.0ro*iles ko.observableArra (HL)!

re*res7 ()!

}!

ko.applBindin:s (nuevo 0ro*iles=ie>&odel ())!

PAS& X+

A !ontinua!i8n 0aos a es!ribir !8di3o en la %-3ina )ndeG.!s9tl, 1ue se su%one 1ue ostrar la (ista de%erles.Teneos 1ue utilizar la uni8n de YtbodyZ eleento 2orea!9, %or lo 1ue 0a a 9a!er una !o%ia desus eleentos se!undarios %ara !ada entrada de la atriz de %erles, y lue3o %oblar 1ue YtbodyZ !onal3unas ar!as de de!ir 1ue 1uieres una esa la 5YtrZ6 %ara !ada entrada.

24able class "raas de tabla tabla tabla de borde de tabla condensada"8

24r8

2478 Fo'bre 2/ t78

2478 Apellido 2/ t78

2478 6'ail 2/ t78

2/ 4r8

24bod datos-bind "*oreac7 0er*iles"8

24r "8

24d datos-bind "te@t Fo'bre"8 2/ td8

24d datos-bind "te@t Apellido"8 2/ td8

24d datos-bind "te@t 6'ail"8 2/ td8

2/ 4r8

2/ 4bod8

2/ 4able8

2Script src "~ / Scripts / #ontact.s"8 2/ script8

Si e#e!uta la a%li!a!i8n a9ora, deber/a 0er una tabla si%le de la in2ora!i8n del %erl !oo+ 'e!ordar%ara el estilo de tabla 1ue estaos usando la !lase !ss de Manos a la &bra. En el e#e%lo anterior, es


15/47


PAS& L>+

A9ora teneos 1ue añadir Editar y Eliinar la 2un!ionalidad %ara !ada la, y un bot8n -s en la %artesu%erior %ara !rear un nue0o %erl. As/ 1ue 0aos a 9a!er+

• Añadir uno -s Yt9Z y YtdZ en nuestra %lantilla de la tabla y se unen es !li!" e0ento !on 2un!i8nreo0eProle en #s.

• Modi!ar la Nobre añadir enla!e %ara Editar Perl y lue3o unirse a su e0ento !li!" !on 2un!i8n

EditProle.• A3re3ar un bot8n %ara Crear nue0o %erl y enlazarlo !on un !li! del e0ento usando la 2un!i8n

!reateProle.As/ !8di3o nal 9a!ia 2uera %ara )ndeG.!s9tl es+

2Input tpe clase "bot,n" "btn btn btn-pequeGo-pri'aria" value "nuevo contacto"

bind-data "click N root.create0ro*ile" /8

29r /8


24r8

2478 Fo'bre 2/ t78

2478 Apellido 2/ t78

2478 6'ail 2/ t78

2478 2/ t78

2/ 4r8

24bod datos-bind "*oreac7 0er*iles"8

24r8

24d class "no'bre"8 2a datos bind"te@t ;irstFa'e+ click

Nparent.edit0ro*ile"8 2/a8 2/ td8

24d datos-bind "te@t Apellido"8 2/ td8

24d datos-bind "te@t 6'ail"8 2/ td8

24d8 2bot,n class "btn 'ini-btn btn-peli:ro" bind-data "7a:a clic en N

parent.re'ove0ro*ile"8 quitar 2/ button8 2/ td8

2/ 4r8

2/ 4bod8

2/ 4able8

2Script src "~ / Scripts / #ontact.s"8 2/ script8

la salida es+ Nin3uno del bot8n a3re3ado y enla!e 2un!ionar-, %or1ue no 9eos es!rito nin37n !8di3o%ara eso, as/ 1ue 0aos a arre3lar eso en el %r8Gio %aso.


16/47

PAS& LL+

Añadir e0entos %ara !reateProle, EditProle y reo0eProle en Conta!t.#s

sel*.create0ro*ile *unction () {

alert ("#rear un nuevo per*il")!

}!

sel*.edit0ro*ile *unction (per*il) {

("per*il tis 6ditar con id per*il co'o" O pro*ile.0ro*ileId) alerta!

}!

sel*.re'ove0ro*ile *unction (per*il) {

i* (con*ir' ("P6stCs se:uro que quieres borrar este per*ilQ")) {

sel*.0ro*iles.re'ove (per*il)!

}

}!

A9ora !uando e#e!utaos nuestra a%li!a!i8n y 9a3a !li! en el bot8n Eliinar, a !ontinua!i8n, se eliinar-ese %erl de la atriz a!tual. Coo denios esta atriz !oo obser0able, la inter2az de usuario seantendr- en sinton/a !on los !abios en la atriz. PruBbalo 9a!iendo !li! en el bot8n


17/47

pMblica Action%esult #reate6dit ()

{

volver =er ()!

}

• n nue0o ar!9i0o #s nobrado !oo CreateEdit.#s dentro de la !ar%eta S!ri%ts.• Modi!ar !reateProle y EditProle Btodo de Conta!t.#s, %or lo 1ue a%untar- a la %-3ina

CreateEdit.


>indo>.location.7re* R/ #ontacto / #reate6dit / R!

}!


>indo>.location.7re* R/ #ontacto / #reate6dit /R O pro*ile.0ro*ileId!

}!

E#e!u!i8n de la a%li!a!i8n a9ora 0a a traba#ar %ara todos los e0entos en la lista de !onta!tos 5L

%antalla6. !rear y editar debe rediri3ir a la %-3ina CreateEdit !on los %ar-etros re1ueridos.

PAS& L+

En %rier lu3ar 0aos a e%ezar !on la adi!i8n de in2ora!i8n del %erl a esta %-3ina CreateEdit. Por 1ueteneos 1ue 9a!er+ Teneos 1ue lle3ar Prole)D de url es as/, añadir %or deba#o de dos l/neas en la %artesu%erior de la %-3ina CreateEdit.#s

var url >indo>.location.pat7na'e!

var 0ro*ileI url.substrin: (url.lastInde@1* (R/R) O )!

e*inir un 'aniquT de per*il co'o 'atri en #reate6dit.s

#ontraer U #opiar c,di:o

var u''0ro*ile H

{

"0ro*ileI" +

"Fo'bre" "Anand"+

"Apellido" "0ande"+

"#orreo electr,nico" "anand$anandpande.co'" }+

{

"0ro*ileI" J+

"Fo'bre" "Kuan"+

"Apellido" "#ena"+


}

L


18/47

Perl, un si%le !onstru!tor de la !lase ;a0aS!ri%t 1ue ala!ena FirstNae de un %erl, A%ellido y Correosele!!i8n.

var 0er*il *unction (per*il) {

var sel* esto!

sel*.0ro*ileId ko.observable (per*il pro*ile.0ro*ileId )!

sel*.;irstFa'e ko.observable (per*il pro*ile.;irstFa'e RQR)!

sel*.?astFa'e ko.observable (per*il pro*ile.?astFa'e RQR)!

sel*.6'ail ko.observable (per*il pro*ile.6'ail RQR)!

}!

ProleColle!tion, una !lase de odelo de 0ista 1ue tiene el %erl 5un ob#eto ;a0aS!ri%t 1ue %ro%or!ionadatos de %erl6, #unto !on la uni8n de los e0entos sa0eProle y ba!"ToProle(ist.

var 0ro*ile#ollection *unction () {

var sel* esto!

// Si 0ro*ileI es + Si:ni*ica #rear nuevo per*il

i* (0ro*ileI ) {

sel*.pro*ile ko.observable (nuevo per*il ())!

}

else {

var currentpro*ile N .:rep (u''0ro*ile+ *unci,n (e) {return e.0ro*ileId

0ro*ileI!})!

sel*.pro*ile ko.observable (nuevo per*il (currentpro*ile HL))! }

sel*.back4o0ro*ile?ist *unction () {>indo>.location.7re* R/ contactoR! }!

sel*.save0ro*ile *unction () {

alert (";ec7a de a7orrar es" O KS1F.strin:i* (ko.toKS (sel*.pro*ile ())))!

}!

}!

nalente, a!ti0ar no!"out utilizando "o.a%%ly$indin3s 56.

ko.applBindin:s (nuevo 0ro*ile#ollection ())!

PAS& L4+

A !ontinua!i8n 0aos a es!ribir !8di3o en la %-3ina CreateEdit.!s9tl, 1ue se su%one %ara ostrar lain2ora!i8n del %erl. Teneos 1ue utilizar el !on la uni8n de los datos del %erl, %or lo 1ue 0a a 9a!er


19/47

una !o%ia de sus eleentos se!undarios %ara un %erl deterinado y, a !ontinua!i8n, asi3nar los 0aloresa%ro%iados.El !8di3o %ara CreateEdit.!s9tl es la si3uiente+

24able class "tabla"8

24r8

247 colspan ""8 In*or'aci,n del per*il 2/ t78

2/ 4r8

24r8 2/ tr8

24bod datos-bind Rcon per*il8

24r8

24d8

2Input class -bind datos "entrada :rande" "valor no'bre R'arcador de

posici,n " Fo'bre "/8

2/ 4d8

24d8

2Input class -bind datos "entrada :rande" "valor Apellido R'arcador de

posici,n " Apellido "/8

2/ 4d8 24d8

2Input class -bind datos "entrada :rande" "valor 6'ail R'arcador de

posici,n " 6'ail "/8

2/ 4d8

2/ 4r8

2/ 4bod8

2/ 4able8

2#lase button "btn btn btn-pequeGo D@ito" bind-data Rclick save0ro*ileR8 Vuardar

per*il 2/ button8

2Input class "btn btn btn-pequeGo-pri'aria" tpe "button" value "=olver al 0er*il?ista" bind-data "click N root.back4o0ro*ile?ist" /8

2Script src "~ / scripts / #reate6dit.s"8 2/ script8

E#e!u!i8n de la a%li!a!i8n ostrar- las si3uientes %antallas+ Para !rear Nue0o+ Para re3istro eGistente !onel %erl )d L+ A!tualiza!i8n de !ual1uier re3istro eGistente y 9a3a !li! en 3uardar !on dar salida a!ontinua!i8n+ Se37n el re1uisito de esta %antalla, ya lo 9eos 9e!9o+ =.L El usuario debe ser !a%az deentrar en su : su Nobre, A%ellido y Dire!!i8n de !orreo ele!tr8ni!o =.O Ia3a !li! en el bot8n de 3uardardebe 3uardar los datos de !onta!to en la base de datos y el usuario 0ol0er- de nue0o en la %-3ina (ista de!onta!tos. =. Ia3a !li! en el bot8n Atr-s %ara Perl deb/an re3resar al usuario a la lista de !onta!tos .

%-3ina En si3uiente %aso 0aos a tratar de !onse3uir a !ontinua!i8n re1uisito+ =.= El usuario debe %oderañadir !ual1uier !antidad de n7eros de telB2ono, 9a3a !li! en A3re3ar n7eros. =. El usuario debe%oder 1uitar !ual1uier n7ero de telB2ono


20/47


21/47

PAS& L+

Para al!anzar el re1uisito no. =.= y =., teneos 1ue 9a!er+ Denir un P9oneTy%e ani1u/ y datosP9oneDT& !oo una atriz en CreateEdit.#s. %9oneTy%eData se utiliza %ara enlazar des%le3able %aradenir el ti%o de telB2ono %ara un n7ero de telB2ono %arti!ular.

var p7one4peata H

{

"07one4peId" +

"Fo'bre" "4elD*ono del trabao"

}+

{

"07one4peId" J+

"Fo'bre" "4u Fo'bre"

}

L!

var 07one41 H

{

"07oneId" +

"07one4peId" +

"0ro*ileI" +

"FM'ero" "-JJJ-"

}+

{

"07oneId" J+

"07one4peId" J+

"0ro*ileI" +

"FM'ero" "WWW-XXX-YYYY"

}

L!

Perl, un si%le !onstru!tor de la !lase de ;a0aS!ri%t 1ue ala!ena una in2ora!i8n de l/nea tele28ni!a1ue in!luye el ti%o de telB2ono es de!ir, si su telB2ono del traba#o o P9one Ioe, et!, #unto !on eln7ero de telB2ono.

07oneline var *unction (telD*ono) {

var sel* esto!

sel*.07oneId ko.observable (telD*ono p7one.07oneId )!

sel*.07one4peId ko.observable (telD*ono p7one.07one4peId )!

sel*.Fu'ber ko.observable (telD*ono p7one.Fu'ber RR)!

}!

Modi!ar la !lase 0iewodel ProleColle!tion tabiBn sostiene %9oneNubers #unto !on la uni8n de lose0entos addP9one y reo0eP9one.


22/47

var 0ro*ile#ollection *unction () {

var sel* esto!

// Si 0ro*ileI es + Si:ni*ica #rear nuevo per*il

i* (0ro*ileI ) {

sel*.pro*ile ko.observable (nuevo per*il ())!

sel*.p7oneFu'bers ko.observableArra (Hnueva lTnea tele*,nica ()L)!

}

else {


0ro*ileI!})!

sel*.pro*ile ko.observable (nuevo per*il (currentpro*ile HL))!

var current0ro*ile07one N .:rep (07one41+ *unci,n (e) {return e.0ro*ileId

0ro*ileI!})!

sel*.p7oneFu'bers ko.observableArra (ko.utils.arra&ap (current0ro*ile07one+

*unci,n (telD*ono) {

devolver el telD*ono! }))!

}

sel*.add07one *unction () {

sel*.p7oneFu'bers.pus7 (nueva lTnea tele*,nica ())

}!

sel*.re'ove07one *unction (telD*ono) {sel*.p7oneFu'bers.re'ove (telD*ono)}!




}!

}!

PAS& LO+

A !ontinua!i8n 0aos a añadir una se!!i8n -s 1ue añadir la in2ora!i8n del telB2ono en la %-3inaCreateEdit.!s9tl, 1ue se su%one %ara ostrar la in2ora!i8n del telB2ono. Coo un %erl %uede tener

telB2ono 7lti%le de di2erentes ti%os, Por lo tanto, 0aos a utilizar el 2orea!9 0in!ulante %ara los datos den7eros de telB2ono, %or lo 1ue 0a a 9a!er una !o%ia de sus eleentos se!undarios %ara un %erldeterinado, y lue3o asi3nar los 0alores a%ro%iados. Añadir a !ontinua!i8n la se!!i8n en CreateEdit.!s9t #usto des%uBs )n2ora!i8n Perl y antes en el bot8n Juardar.


24r8

247 colspan ""8 In*or'aci,n del telD*ono 2/ t78

2/ 4r8


23/47

24r8 2/ tr8

2tbod datos-bind R*oreac7 p7oneFu'bersR8

24r8

24d8

2Select-bind data "opciones p7one4peata+ valor 07one4peId+

options=alue R07one4peIdR+ options4e@t RFo'breR+ options#aption RSeleccione 4ipo

4elD*ono ...R"8 2/ select8

2/ 4d8

24d8

2Input class -bind datos "entrada :rande" "value Fu'ber R'arcador de

posici,n " FM'ero "/8

2/ 4d8

24d8

2a class"btn-btn btn pequeGa dan:er" 7re*RZR datos bindR click

Nparent.re'ove07oneR8 [ 2/a8

2/ 4d8

2/ 4r8

2/ 4bod8

2/ 4able8208

2#lase button "btn btn btn pequeGa-pri'aria" bind-data Rclick add07oneR8 AGadir nuevo

telD*ono 2/ button8

2/ 08

A9ora la salida %ara a3re3ar nue0o !onta!to es+ %ara editar !onta!to eGistente es+ As/ 1ue a9ora nos1uedaos s8lo !on el re1uisito de aba#o+ . =.4 suario debe %oder añadir !ual1uier n7ero de dire!!iones9a!iendo !li! en Añadir nue0a dire!!i8n =. El usuario debe %oder eliinar !ual1uier dire!!i8n Paso L+ Elre1uisito no. =.4 y =. son siilares a 3u/a tele28ni!a de la )n2ora!i8n, a !ontinua!i8n es el !8di3o nal%ara CreateEdit.#s y ar!9i0os CreateEdit.!s9tl+ Para CreateEdit.#s


24/47

var url >indo>.location.pat7na'e!

var 0ro*ileI url.substrin: (url.lastInde@1* (R/R) O )!

var u''0ro*ile H

{

"0ro*ileI" +

"Fo'bre" "Anand"+

"Apellido" "0ande"+

"#orreo electr,nico" "anand$anandpande.co'"

}+

{ "0ro*ileI" J+

"Fo'bre" "Kuan"+

"Apellido" "#ena"+


}

L!

var 07one4peata H

{

"07one4peId" +


25/47


26/47

"Address?ine" "J 9i:7>a Y"+

"Address?ineJ" "Suite Z J"+

"0aTs" "66.."+

"6stado" "4e@as"+

"#iudad" "9ouston"+

"#,di:o 0ostal" "


27/47

else {

// 0ara obtener in*or'aci,n del per*il


0ro*ileI!})!

sel*.pro*ile ko.observable (nuevo per*il (currentpro*ile HL))!

// FM'eros de telD*onos

var current0ro*ile07one N .:rep (07one41+ *unci,n (e) {return e.0ro*ileId

0ro*ileI!})!

sel*.p7oneFu'bers ko.observableArra (ko.utils.arra&ap (current0ro*ile07one+

*unci,n (telD*ono) {

devolver el telD*ono!

}))!

0ara // irecci,n

var current0ro*ileAddress N .:rep (Address41+ *unci,n (e) {return e.0ro*ileId

0ro*ileI!})!

sel*.addresses ko.observableArra (ko.utils.arra&ap (current0ro*ileAddress+

*unci,n (direcci,n) {

la direcci,n del re'itente!

}))! }

sel*.add07one *unction () {sel*.p7oneFu'bers.pus7 (nueva lTnea tele*,nica ())}!

sel*.re'ove07one *unction (telD*ono) {sel*.p7oneFu'bers.re'ove (telD*ono)}!

sel*.addAddress *unction () {sel*.addresses.pus7 (nuevo Address?ine ())}!

sel*.re'oveAddress *unction (direcci,n) {sel*.addresses.re'ove (direcci,n)}!



sel*.pro*ile () Address41 sel*.addresses.!

sel*.pro*ile () 07one41 sel*.p7oneFu'bers.!


}!

}!

ko.applBindin:s (nuevo 0ro*ile#ollection ())!

y, %or CreateEdit.!s9tl


24r8

247 colspan ""8 In*or'aci,n del per*il 2/ t78

2/ 4r8

24r8 2/ tr8

24bod datos-bind Rcon per*il8

24r8


28/47

24d8

2Input class -bind datos "entrada :rande" "valor no'bre R'arcador de

posici,n " Fo'bre "/8

2/ 4d8

24d8

2Input class -bind datos "entrada :rande" "valor Apellido R'arcador de

posici,n " Apellido "/8

2/ 4d8

24d8

2Input class -bind datos "entrada :rande" "valor 6'ail R'arcador de

posici,n " 6'ail "/8

2/ 4d8

2/ 4r8

2/ 4bod8

2/ 4able8


24r8

247 colspan ""8 In*or'aci,n del telD*ono 2/ t78 2/ 4r8

24r8 2/ tr8

2tbod datos-bind R*oreac7 p7oneFu'bersR8

24r8

24d8

2Select-bind data "opciones 07one4peata+ valor 07one4peId+

options=alue R07one4peIdR+ options4e@t RFo'breR+ options#aption RSeleccione 4ipo

4elD*ono ...R"8 2/ select8

2/ 4d8

24d8

2Input class -bind datos "entrada :rande" "value Fu'ber R'arcador deposici,n " FM'ero "/8

2/ 4d8

24d8

2a class"btn-btn btn pequeGa dan:er" 7re*RZR datos bindR click

Nparent.re'ove07oneR8 [ 2/a8

2/ 4d8

2/ 4r8

2/ 4bod8

2/ 4able8

208

2#lase button "btn btn btn pequeGa-pri'aria" bind-data Rclick add07oneR8 AGadir nuevo

telD*ono 2/ button8

2/ 08

29r /8


24r8 2t7 colspan "X"8 irecci,n de In*or'aci,n 2/ t78 2/ tr8

24bod datos-bind "*oreac7 direcciones"8

24r8

24d colspan "X"8


29/47

2Select-bind data "opciones Address4peata+ valor Address4peId+

options=alue RAddress4peIdR+ options4e@t RFo'breR+ options#aption RSeleccione 4ipo de

direcci,n ...R"8 2/ select8

2/ 4d8

2/ 4r8

24r8

24d8

2Input class -bind datos "entrada :rande" "valor Address?ine

R'arcador de posici,n " irecci,n "/8

20 stle "paddin:-top Xp@!"8 2input class -bind datos "entrada :rande"

"valor 6stado R'arcador de posici,n " 6stado "/8 2/ p8

2/ 4d8

24d8

2Input class -bind datos "entrada :rande" "valor Address?ineJ

R'arcador de posici,n " irecci,n J "/8


place7older Rvalor 0aTsR "0aTs" /8 2/ p8

2/ 4d8

24d8 2Input class -bind datos "entrada :rande" "valor #iudad R'arcador de

posici,n " #iudad "/8


"valor #,di:o 0ostal R'arcador de posici,n " #,di:o 0ostal "/8

2a class"btn btn-pequeGa 7re*RZR-btn dan:er" datos bindRclick

Nroot.re'oveAddressR8 [ 2/ p8

2/ 4d8

2/ 4r8

2/ 4bod8

2/ 4able8

2082#lase button "btn btn btn pequeGa-pri'aria" bind-data Rclick addAddressR8 AGadir

nueva direcci,n 2/ button8

2/ 08

29r /8

2#lase button "btn btn btn-pequeGo D@ito" bind-data Rclick save0ro*ileR8 Vuardar

per*il 2/ button8

2Input class "btn btn btn-pequeGo-pri'aria" tpe "button" value "=olver al 0er*il

?ista" bind-data "click N root.back4o0ro*ile?ist" /8

2Script src "~ / scripts / #reate6dit.s"8 2/ script8

As/ 1ue nalente, a%li!a!i8n ostrar- las %antallas !oo %or la eGi3en!ia+ Pantalla L+ (ista de !onta!tos Ver todos los !onta!tos de la %antalla =+ Crear nue0o !onta!to Esta %antalla debe a%are!er una %antallaen blan!o %ara %ro%or!ionar 2un!ionalidad 1ue. Pantalla + A!tualiza!i8n de !onta!to eGistente Esta%antalla debe %antalla !on los datos de !onta!to de in2ora!i8n sele!!ionados.


30/47


31/47

VA()DAC)*N+

Casi 9eos terinado !on el diseño %arte de nuestra a%li!a!i8n .El 7ni!o 1ue 1ueda a9ora, es la 3esti8nde la 0alida!i8n !uando el bot8n el usuario 9a!e !li! en Juardar. (a 0alida!i8n es el %rin!i%al re1uisito ya9ora %arte -s i3norante de un d/a %ara !ual1uier a%li!a!i8n web. Por una !orre!ta 0alida!i8n, el usuario%uede saber lo 1ue 9ay datos 1ue deben re3istrarse. A !ontinua!i8n en este art/!ulo, 0oy a dis!utir

bibliote!a no!"out;S 0alida!i8n 1ue se %uede des!ar3ar usando NuJet. Vaos a 0er al3unos de loses!enarios de 0alida!i8n -s !ounes y la 2ora de lo3rarlo ediante la 0alida!i8n %orno!aut. Escenario 1: Nombre es un campo obligatorio en forma t9is.FirstNae [ "o.obser0able 56eGtendeos 5\re1uerido+ true]6.Escenario 2: El número m!imo "e caracteres para el nombre no"ebe e!ce"er "e #$ % no "ebe ser menos "e & caracteres t9is.FirstNae [ "o.obser0able 56eGtender 5\aG(en3t9+ >, in(en3t9+ ]6.Escenario ': (a e"a" es un campo obligatorio en laforma) % "ebe ser siempre ma%or que 1* % menor que 1$$ . t9is.A3e [ "o.obser0able 56 seeGtienden 5\re1uired+ true, -G+ L>>, in+ L?]6Escenario #: El correo electr+nico es una campoobligatorio % "ebe estar en formato "e correo electr+nico correcta t9is.Eail [ "o.obser0able 56 seeGtienden 5\re1uired+ true, eail+ true]6.Escenario ,: -ec.a "e Nacimiento es un campo


32/47

obligatorio % "ebe estar en formato a"ecua"o fec.a "eesta . .Date&2$irt9 [ "o.obser0able 56eGtender 5\re1uired+ true, 2e!9a+ true]6 Escenario /: El precio es un campo obligatorio % "ebe seren número a"ecua"o o formato "ecimal t9is.Pri!e [ "o.obser0able 56 se eGtienden. 5\re1uired+ true,!antidad+ true]6 Escenario *: Número "e 0eléfono es un campo obligatorio % "ebe estar en buenformato Nota+ n n7ero de telB2ono 0-lido de EE.. tiene el si3uiente 2orato+ LRDDRDDdddd ElL al %rin!i%io de la !adena es o%!ional y tabiBn lo son los 3uiones. G es !ual1uier d/3ito entre = y X,ientras 1ue d %uede ser !ual1uier d/3ito. t9is.P9one [ "o.obser0able 56 se eGtienden 5\re1uired+ true,n^ero de+ true]6. Escenario 3: campo 0o4ate "ebe ser ma%or que el campo -rom4ate

t7is.4oate ko.observable (). e@tend ({

i:ual *unction () {return (valor8 N (RZ ;ro'ateR) val ().)Q val val O "U"}

})!

Escenario 1$: Número "e teléfono "ebe aceptar solamente 5 6 78 $53 "e usuarios

re:e@ var / ^ (Q (H-_L {}) ^)Q (H.-LQ) (H-_L {}) ^ J (H-_L {W}) /

. t7is.07oneFu'ber ko.observable () e@tender ({patr,n re:e@})!


33/47

As/ 1ue, a9ora 9eos 0isto di2erentes ti%os de es!enarios de 0alida!i8n y su sintaGis a9ora 0aos a%onerlo en %r-!ti!a en nuestra a%li!a!i8n. Por esa %riera des!ar3a los "no!"out.0alidation.#s bibliote!autilizando NuJet. En este oento nuestro s!ri%t de 0alida!i8n est- totalente terinada y deber/a tenereste as%e!to+

var 0er*il *unction (per*il) {

var sel* esto!

sel*.0ro*ileId ko.observable (per*il pro*ile.0ro*ileId Q) .e@tend ({required

true})!

sel*.;irstFa'e ko.observable (Q per*il pro*ile.;irstFa'e RR) .e@tend ({required

true+ 'a@?en:t7 X})!

sel*.?astFa'e ko.observable (Q per*il pro*ile.?astFa'e RR) .e@tend ({required


sel*.6'ail ko.observable (Q per*il pro*ile.6'ail RR) .e@tend ({required true+

'a@?en:t7 X+ correo electr,nico true})!

sel*.07one41 ko.observableArra (per*il pro*ile.07one41 HLQ)! sel*.Address41 ko.observableArra (per*il pro*ile.Address41 HLQ)!

}!

07oneline var *unction (telD*ono) {

var sel* esto!

sel*.07oneId ko.observable (telD*ono p7one.07oneId )!

sel*.07one4peId ko.observable (Q telD*ono p7one.07one4peId no de*inido) .e@tend

({required true})!

sel*.Fu'ber ko.observable (p7one.Fu'ber telD*ono RRQ) .e@tend ({required true+

'a@?en:t7 JX+ n`'ero de true})!

}!

Address?ine var *unction (direcci,n) {

var sel* esto!

sel*.AddressId ko.observable (direcci,n address.AddressId )!

sel*.Address4peId ko.observable (Q direcci,n address.Address4peId no de*inido)

.e@tend ({required true})!

sel*.Address?ine ko.observable (address.Address?ine direcci,n RRQ) .e@tend

({required true+ 'a@?en:t7 })!

sel*.Address?ineJ ko.observable (address.Address?ineJ direcci,n RRQ) .e@tend

({required true+ 'a@?en:t7 })!

sel*.#ountr ko.observable (address.#ountr direcci,n RRQ) .e@tend ({required


sel*.State ko.observable (address.State direcci,n RRQ) .e@tend ({required true+

'a@?en:t7 X})!

sel*.#it ko.observable (Q direcci,n address.#it RR) .e@tend ({required true+

'a@?en:t7 X})!

sel*.]ip#ode ko.observable (Q direcci,n address.]ip#ode RR) .e@tend ({required


}!


34/47

Des%uBs de la 0alida!i8n de nuestra solu!i8n nal se %are!e a la %antalla si3uiente des%uBs de 9a!er !li!en el bot8n Juardar+ Iasta a9ora, 9eos 9ablado a!er!a de la !onse!u!i8n de nuestro inter2az deusuario sin !ono!er !ual1uier a%li!a!i8n e2e!ti0a 5bases de datos de intera!!i8n6 es de!ir, la inter2az deusuario se !rea de 2ora inde%endiente %or !ual1uier diseñador : desarrollador sin !ono!er el ne3o!ioa!tual la l83i!a. UUU Eso es 3enial UUU A !ontinua!i8n, 0oy a 9ablar sobre !8o diseñar la base de datos y la2ora de a%li!ar la l83i!a de ne3o!io utilizando !a%as estru!turadas.

PA'TE =+ C'EA' D )SE& DE $ASE DE DAT&S 5S>? '=6+PA'A D$A

Desde el diseño de base de datos %ros%e!ti0a a !ontinua!i8n son las %rin!i%ales 2un!ionalidades 1uedeben ser !u%lidas+

• n !onta!to %uede tener Prier nobre, A%ellido y Correo ele!tr8ni!o.• n !onta!to %uede tener 0arias dire!!iones.• n !onta!to %uede tener 0arios n7eros de telB2ono.

. Para lo3rar la 2un!ionalidad de 3esti8n de !onta!tos, %or deba#o de diseño de base de datos se 9autilizado la rela!i8n entre las tablas son se37n aba#o dia3raa de base de datos+


35/47

PA'TE + D)SE& DE CAPAS (*J)CAS+ PA'A C&'E DESA''&((AD&'ES

Coo se señal8 anteriorente, nuestra estru!tura nal es+ A !ontinua!i8n 0aos a dis!utir la estru!tura3eneral %ara nuestra a%li!a!i8n, en tBrinos del 3ru%o l83i!o de los !o%onentes en !a%as se%aradas,1ue se !ouni!a !on los de-s !on : sin restri!!iones y !ada l83i!a tiene sus %ro%ias etas. (as !a%as

son un estilo ar1uite!t8ni!o, y 1ue resuel0e los %robleas de anteniiento y de e#ora en el lar3o%lazo. As/ 1ue 0aos a %ro!eder !on la adi!i8n de una bibliote!a de !lases en nuestra solu!i8n y lanobraos !oo A%%li!ation.Coon.


36/47

APP()CAT)&N.C&MM&N+

Esta es una a%li!a!i8n de bibliote!a de !lases, !on al3una 2un!ionalidad !o7n y %uede ser utilizado %ordi2erentes !a%as l83i!as. Por e#e%lo, de se3uridad, de re3istro, se3uiiento, 0alida!i8n, et! (os!o%onentes denidos en esta !a%a no s8lo %ueden reutilizar %or otras !a%as en esta solu!i8n, %erotabiBn %uede ser utilizar %or otras a%li!a!iones. Para 1ue sea -s 2-!il !abiar en el 2uturo, %odeosutilizar la inye!!i8n de de%enden!ias y la abstra!!i8n, !on un !abio /nio en nuestra a%li!a!i8n. Pore#e%lo, en esta !a%a 1ue 0aos a utilizar, un !o%onente 0alidador %ara 0alidar la entrada de datos, y(o33er %ersonalizado %ara re3istro de errores . o ad0erten!ia !ontinua!i8n se uestra la !a%tura de%antalla de la !ar%eta des%uBs de añadir la solu!i8n de bibliote!a de !lases !o7n+ A !ontinua!i8n, 0aos

a añadir una bibliote!a de !lases en nuestra solu!i8n y el nobre !oo A%%li!ation.Core.


37/47

APP()CAT)&N.C&'E+

(os !o%onentes de esta !a%a i%leentan la 2un!ionalidad b-si!a del sistea y en!a%sulan toda la

l83i!a de ne3o!io rele0antes. $-si!aente, esta !a%a noralente !ontiene !lases 1ue i%leentan lal83i!a de doinio dentro de sus Btodos. Esta !a%a tabiBn dene una nidad de Contrato de traba#odentro de la !a%a de n7!leo %or lo 1ue ser- !a%az de !u%lir !on el %rin!i%io de P). El ob#eti0o %rin!i%al esdi2eren!iar y se%arar !laraente el !o%ortaiento del doinio : ne3o!io %rin!i%al y los detalles dei%leenta!i8n de in2raestru!tura, tales !oo el a!!eso a datos y re%ositorios es%e!/!os li3ados a unate!nolo3/a %arti!ular !oo &'M, o si%leente las bibliote!as de a!!eso a datos o in!luso as%e!tostrans0ersales de la ar1uite!tura. De este odo, ediante el aislaiento de la 2un!ionalidad de laa%li!a!i8n Core, 0aos a auentar dr-sti!aente la !a%a!idad de anteniiento de nuestro sistea y se%odr/a in!luso ree%lazar las !a%as in2eriores 5a!!eso a datos, &'M, y bases de datos6 !on ba#o i%a!to%ara el resto de la a%li!a!i8n. A !ontinua!i8n, 0aos a añadir una bibliote!a de !lases en nuestra solu!i8ny el nobre !oo A%%li!ation.DA(.

APP()CAT)&N.DA(+

(a res%onsabilidad de CIA es y %ro%or!iona a!!eso a los datos y o%era!iones de %ersisten!ia !ontra labase de datos de ala!enaiento antener 0arias sesiones y la !oneGi8n !on la base de datos 7lti%le,

et! El ob#eti0o %rin!i%al a1u/ es en0ol0er la EF ConteGto !on una inter2az : !ontrato %or lo 1ue %odeosusarlo desde el Pesebre y !a%as de n7!leo sin de%enden!ias dire!tos a EF. (os !o%onentes de%ersisten!ia de datos %ro%or!ionan a!!eso a los datos alo#ados dentro de los l/ites de nuestro sistea5%or e#e%lo, nuestra %rin!i%al base de datos 1ue est- dentro de un !onteGto es%e!/!o ()M)TAD&6, ytabiBn a los datos eG%uestos 2uera de los l/ites de nuestro sistea, !oo los ser0i!ios @eb de eGteriorsisteas. Por lo tanto, tiene !o%onentes !oo 'e%ositorios 1ue %ro%or!ionan di!9a 2un!ionalidad %araa!!eder a los datos alo#ados dentro de los l/ites de nuestro sistea, o a3entes de ser0i!io 1ue!onsuen ser0i!ios @eb eG%uestos %or otros sisteas de ba!"end eGternos. Ade-s, esta !a%a %or lo3eneral tienen !lases base : !o%onentes !on !8di3o reutilizable %ara todas las !lases dere%ositorios. Si3uiente, 0aos a a3re3ar una bibliote!a de !lases en nuestra solu!i8n y el nobre !ooa%li!a!i8n. 'e%ositorio.


38/47

APP()CAT)&N.'EP&S)T&'+Esta es una bibliote!a de !lases y %uede ser a!!esible s8lo %or A%%li!ation.Mana3er. Para !ada %rin!i%alentidad ra/z en nuestro doinio, teneos 1ue !rear un re%ositorio. $-si!aente, re%ositorios son !lases :!o%onentes 1ue en!a%sulan la l83i!a re1uerida %ara a!!eder a las 2uentes de datos de la a%li!a!i8n. Porlo tanto, !entralizar la 2un!ionalidad !o7n de a!!eso a datos %or lo 1ue la a%li!a!i8n %uede tener unae#or !a%a!idad de anteniiento y la diso!ia!i8n entre la te!nolo3/a y la l83i!a de %ro%iedad de la !a%asCore. Mana3er ySi3uiente, 0aos a a3re3ar una bibliote!a de !lases en nuestra solu!i8n y el nobrede !oo a%li!a!i8n. DT&.

APP()CAT)&N.DT&+

De nue0o, esto es una bibliote!a de !lases, 1ue !ontiene di2erentes !lases de !ontenedor 1ue eG%one%ro%iedades y Btodos, %ero no se !ouni!an entre la !a%a de %resenta!i8n 5A%%li!ation.@eb6 y Ser0i!e(ayer 5A%%li!ation.Mana3er6. n ob#eto de trans2eren!ia de datos es un ob#eto 1ue se utiliza %araen!a%sular los datos, y en0iarlo de un subsistea de una a%li!a!i8n a otra. A1u/ 0aos a utilizar dtos %orla !a%a de Mana3er %ara trans2erir datos entre Bl iso y la !a%a de inter2az de usuario. El bene!io%rin!i%al a1u/ es 1ue redu!e la !antidad de datos 1ue ne!esita ser en0iado a tra0Bs del !able en


39/47

a%li!a!iones distribuidas. _Son tabiBn 3randes odelos en el %atr8n MVC. TabiBn %odeos utilizar DT&%ara en!a%sular %ar-etros %ara llaadas a Btodos. Esto %uede ser 7til si un Btodo toa -s de 4 o %ar-etros. A !ontinua!i8n, 0aos a a3re3ar una bibliote!a de !lases en nuestra solu!i8n y el nobre!oo a%li!a!i8n. Mana3er.

APP()CAT)&N.MANAJE'+

Esta es una bibliote!a de !lases y %uede ser a!!esible s8lo %or A%%li!ation.@eb. Para !ada 8dulo 9ay 1uede!larar uno Mana3er. (as %rin!i%ales res%onsabilidades de Mana3er son a!e%tar la soli!itud de !a%a :inter2az de usuario @eb, enton!es !ouni!arse !on los re%ositorios ne!esarios y ani%ular datos en2un!i8n de la !ondi!i8n des%uBs 0uel0a de nue0o la res%uesta. Esta !a%a interedia entre la inter2az deusuario y 'e%ositorios.

APP()CAT)&N.@E$+


40/47

En el art/!ulo anterior, ya 9eos i%leentado esta !a%a usando ;a0as!ri%t datos !ti!ios. Esta es laa%li!a!i8n web ASP.NET MVC inde%endiente, y s8lo !ontiene !o%onentes de inter2az de usuario, !oo9tl, .as%G, !s9tl, MVC, et! Puede tabiBn ser !ual1uier a%li!a!i8n de @indows. Se !ouni!a !onal3unos Btodos de !a%a 3erente, lue3o de e0aluar los resultados y ele3ir si desea ostrar un error o%a3eL o %a3e= et! et! Esta utiliza!i8n !a%a #a0as!ri%t %ara !ar3ar un odelo %ara la %resenta!i8n, %erolos datos se %ro!esan en el ser0idor a tra0Bs de un a#aG . soli!itud, %or lo 1ue el ser0idor s8lo ane#ar lal83i!a de ne3o!io y el #a0as!ri%t 3estiona la l83i!a de %resenta!i8n Para entender e#or !8o las !a%as se!ouni!an entre s/, re!ordeos el re1uisito ini!ial+

PANTA((A L+ ()STA DE C&NTACT&S VE' T&D&S (&S C&NTACT&S

L.L Esta %antalla debe ostrar todos los !onta!tos dis%onibles en la base de datos.

L.= El usuario debe ser !a%az de eliinar !ual1uier !onta!to.L. El usuario debe %oder editar !ual1uier in2ora!i8n de !onta!to.L.4 El usuario debe ser !a%az de !rear un nue0o !onta!to. Para rellenar los datos de la !uadr/!ula, en !ar3ade la %-3ina, lo llaaos JetAllProles 56 Btodo de Conta!tController. Este Btodo de0uel0e eGistentodos los %erles en la base de datos !oo un ob#eto ;S&N, a !ontinua!i8n enlazaos !on sel2.Prolesob#eto ;a0aS!ri%t. A !ontinua!i8n se uestra el !8di3o %ara llaar JetAllProles 56 de !onta!t.#s+


41/47

var 0ro*iles=ie>&odel *unction () {

var sel* esto!

var url "/ contacto / VetAll0ro*iles"!

var re*res7 *unction () {

N .:etKS1F (rl+ {}+ *unci,n (datos) {

sel*.0ro*iles (datos)!

})!

}!

El bot8n aitin:ialo: ({})!

N .aa@ ({ 4ipo R6li'inarR+ url R#ontacto / elete0ro*ile /R O id+

D@ito *unction () {sel*.0ro*iles.re'ove (per*il)! }+

error *unction (err) {

error var KS1F.parse (err.response4e@t)!

. N ("2iv8 2/ div8") 7t'l (6rror.'essa:e) .dialo: ({'odal true+

tTtulo "6rror"+ botones {"1k"

*unction () {N (t7is) .dialo: ("close")! }}}) S7o> ().!

}+

co'pleta *unction () {closeaitin:ialo: ()! }

})!

}}!

Por tanto Crear nue0o bot8n y Editar enla!e, s8lo rediri3ir a la %-3ina CreateEdit !on id !oo > %ara Crearnue0o y %ara editar el %erl id de la la sele!!ionada. A !ontinua!i8n se uestra el !8di3o %ara!reateProle y EditProle de !onta!t.#s+


>indo>.location.7re* R/ #ontacto / #reate6dit / R!

}!


>indo>.location.7re* R/ #ontacto / #reate6dit /R O pro*ile.0ro*ileId!

}!

A !ontinua!i8n se uestra la re%resenta!i8n de un dia3raa de !ouni!a!i8n entre tres !a%as %rin!i%ales


42/47

PANTA((A =+ C'EA' NEV& C&NTACT&

Esta %antalla debe a%are!er una %antalla en blan!o %ara %ro%or!ionar 2un!ionalidades !oo. =.L El usuariodebe ser !a%az de entrar en su : su %rier nobre, a%ellido y dire!!i8n de !orreo ele!tr8ni!o. =.= suariodebe %oder añadir !ual1uier !antidad de n7eros de telB2ono, 9a3a !li! en A3re3ar n7eros. =. suariodebe %oder 1uitar !ual1uier n7ero de telB2ono. =.4 suario debe %oder añadir !ual1uier n7ero dedire!!iones 9a!iendo !li! en Añadir nue0a dire!!i8n. =. suario debe %oder eliinar !ual1uierdire!!i8n. =.O Ia3a !li! en el bot8n de 3uardar debe 3uardar los datos de !onta!to en la base de datos y elusuario 0ol0er- atr-s en la lista de !onta!tos %-3ina.=. Ia3a !li! en el bot8n Vol0er al Perl deb/anre3resar al usuario a la %-3ina de !onta!to de lista.


43/47

PANTA((A + ACTA()QAC)*N DE C&NTACT& ER)STENTE

Esta %antalla debe ostrar la %antalla !on los datos de !onta!to de in2ora!i8n sele!!ionados. .L El

usuario debe ser !a%az de odi!ar su : su %rier nobre, a%ellido y dire!!i8n de !orreo ele!tr8ni!o. .=El usuario debe %oder odi!ar : borrar : Añadir !ual1uier !antidad de n7eros de telB2ono, 9a3a !li! enA3re3ar n7eros o eliinar enla!e. . El usuario debe %oder odi!ar : borrar : A3re3ar !ual1uiern7ero de dire!!iones 9a!iendo !li! en Añadir nue0a dire!!i8n o eliinar enla!e. .4 Ia3a !li! en el bot8nde 3uardar debe a!tualizar los datos de !onta!to en la base de datos y el usuario 0ol0er- de nue0o en la%-3ina (ista de !onta!tos.. Ia3a !li! en el bot8n Atr-s %ara Perl deb/an re3resar al usuario a la %-3inade !onta!to de lista. Coo se dis!uti8 en la a%li!a!i8n anterior, tanto %ara la Nue0a !rea!i8n y EditareGistente re1uisito de 1ue estaos utilizando una sola %-3ina !oo CreateEdit.!s9tl, identi!ando el0alor '( %ara Prole)D es de!ir, si Prole)D en '( es >, enton!es es la soli!itud %ara la !rea!i8n de unnue0o %erl, y si se trata de al37n 0alor, la %eti!i8n es %ara editar el %erl eGistente. Deba#o )denti!a!i8nlos detalles de i%leenta!i8n+ En !ual1uier !aso 5Crear o Editar6, en la %-3ina de !ar3a 1ue ne!esitan%ara ini!ializar los datos %ara P9oneTy%e y AddressTy%e. Para ello !ontaos !on un Btodo enConta!tController !oo )nitializePa3eData 56. A !ontinua!i8n se uestra el !8di3o en CreateEdit.#sini!ializar abas atri!es+


44/47

Address4peata var!

var 07one4peata!

N .aa@ ({

url url#ontact O R/ Initialie0a:eataR+

asTncrono *alse+

4ipo datos RsonR+

D@ito *unction (son) {

Address4peata son.lstAddress4pe41!

07one4peata son.lst07one4pe41!

}

})!


45/47

A !ontinua!i8n, Para Editar %erl 1ue ne!esita %ara obtener los datos del %erl, %ara 1ue ten3aosBtodo JetProle$y)d 56 en nuestro Conta!tController. Modi!aos nuestro !8di3o CreateEdit.#s eGistente!oo+

N .aa@ ({

url url#ontact O R/ Vet0ro*ileBId /R O 0ro*ileI+

asTncrono *alse+

4ipo datos RsonR+

D@ito *unction (son) {

sel*.pro*ile ko.observable (nuevo per*il (KS1F))!

sel*.p7oneFu'bers ko.observableArra (ko.utils.arra&ap (son.07one41+ *unci,n

(telD*ono) {

devolver el telD*ono!

}))!

sel*.addresses ko.observableArra (ko.utils.arra&ap (son.Address41+ *unci,n

(direcci,n) {

la direcci,n del re'itente! }))!

}

})!

Por 7ltio, Para Juardar datos 1ue teneos dos Btodos en la base de datos. MBtodo Si es Crear nue0o la1ue llaareos Sa0eProle)n2ortion 56 de Conta!tController de-s nosotros te llaaos Btodo%dateProle)n2oration 56. Modi!aos nuestro !8di3o CreateEdit.#s eGistente !oo+

N .aa@ ({

4ipo (sel*.pro*ile () 0ro*ileI8 R04R.Q "post")+ cac7e true+

4ipo datos RsonR+

url url#ontact O (sel*.pro*ile () 0ro*ileI8 R/ pdate0ro*ileIn*or'ation id QR O.Q

. sel*.pro*ile () 0ro*ileI R/ Save0ro*ileIn*or'ationR)+

datos KS1F.strin:i* (ko.toKS (sel*.pro*ile ()))+

content4pe Rapplication / son! c7arset 4;-< R+

asTncrono *alse+

D@ito *unction (data) {

>indo>.location.7re* R/ contactoR!

}+

error *unction (err) {

var err KS1F.parse (err.response4e@t)!

errores var ""!

*or (var clave en err) {

i* (err.7as1>n0ropert (clave)) {

errores O ke.replace (". per*il"+ "") O "" O err HclaveL!

}

}

N ("2iv8 2/ div8") 7t'l (errores) .dialo: ({'odal. #ierto+

4Ttulo KS1F.parse (err.response4e@t) .'essa:e+ botones {"1k"


46/47

*unction () {N (t7is) .dialo: ("close")! }}}) S7o> ().!

}+

co'pletar *unction () {

}

})!

C&NC(S)*N

Eso es todo UUU Es%ero 1ue dis2rutes de este art/!ulo. o no soy un eG%erto, y tabiBn 1ue no 9e se3uido lanora de toda la industria en el oento de es!ribir este art/!ulo. eso, en %o!as %alabras, es todo lo1ue sB %ara e%ezar el diseño de ASP.NET MVC 4 a%li!a!i8n. Es%ero 1ue 9ayan dis2rutado este tutorial ya%rendido al3o.Todo !oentario : Voto son -s 1ue bien0enidos .... , Si usted tiene al3una %re3unta nodude en %re3untarEstarB en!antado de 9ablar -s en los !oentarios. Jra!ias %or su tie%oU

C*M& T)()QA' E( C*D)J&

Des!ar3ar ar!9i0o de !oandos de base de datos a1u/+ A%%li!ationWD$.s1l Contiene S


47/47

!adena de !oneGi8n en %roye!to A%%li!ation.@eb.

'EFE'ENC)AS

• 9tt%+::"no!"out#s.!o:• 9tt%s+::3it9ub.!o:eri!barnard:no!"outValidation:wi"i:Con3uration• 9tt%+::twitter.3it9ub.!o:bootstra%:• 9tt%+::do!s.!astle%ro#e!t.or3:@indsor.MainPa3e.as9G• 9tt%+::i!roso2tnlayera%%.!ode%leG.!o:

• 9tt%+::sdn.i!roso2t.!o:enus:library:`X=L4?.as%G

ltia edi!i8n L de enero =>L a las ==+4L %or anandran#an%andey , la 0ersi8n

Des!ar3as

ACTA(Contacto App Manager utilizando

ASP.NET MVC 4

FECIA Jue 17 de enero 201 a la! 7"00 a#

ESTAD& E!ta$le

DESCA'JAS 12.%1

PNTAC)*N

1& puntuacione!

'pina !o$re e!te co#unicado de

E( DE MS ADA Jra!ias señor %or un art/!ulo tan a3radable y !o%leta.

uy buenaUVer todas las !r/ti!as

(os anuncios por "esarrolla"or 9e"ios

ACT)V)DAD

PJ)NAS V)STAS V)S)TAS DESCA'JAS

14&1 &72 1(%

D/as+>
http://www.codeplex.com/site/users/view/anandranjanpandeyhttp://ddmvc4.codeplex.com/releaseshttp://ddmvc4.codeplex.com/releases/view/100506?RateReview=truehttp://ddmvc4.codeplex.com/releases/view/100506#ReviewsAnchorhttp://developermedia.com/http://ddmvc4.codeplex.com/http://ddmvc4.codeplex.com/releaseshttp://ddmvc4.codeplex.com/releases/view/100506?RateReview=truehttp://ddmvc4.codeplex.com/releases/view/100506#ReviewsAnchorhttp://developermedia.com/http://ddmvc4.codeplex.com/http://www.codeplex.com/site/users/view/anandranjanpandey

apuntes asp en sharp develop

Documents