Tm hiu cng ngh ASP.

NET MVC
Mc lc Phn I. 1. Lch s pht trin Web 2. L do ra i ca ASP.NET MVC 2.1 Gii thiu ASP.NET truyn thng 2.2 Nhc im ASP.NET truyn thng 2.3 Gii thiu ASP.NET MVC (model-view-controller) 2.3.1 Ngun gc ASP.NET MVC 2.3.2 Cc thnh phn cu thnh ASP.NET MVC 2.3.3 Cu trc mc nh ca mt d n ASP.NET MVC 2.4 So snh gia ASP.NET v ASP.NET MVC 2.5 MVC2 3. Tm hiu cc thnh phn bn trong ASP.NET MVC 3.1 Controllers v Actions 3.1.1 Controllers l g ? 3.1.2 Controller Actions l g ? 3.2 Views 3.2.1 Views l g ? 3.2.2 To Views nh th no ? 3.2.2 S dng Views nh th no ? 3.3 Models 3.3.1 Models l g ? 3.3.2 To Database 3.3.3 To Data Model vi Microsoft Entity Framework
Trang 1

3.3.4 S dng Linq to Sql trong ASP.NET MVC 3.5 URLs v Routing 3.6 View Master Page v User Control Page 3.6.1 View Master Page 3.6.2 User Control Page 3.7 HTML Helpers 3.7.1 HTML Helpers l g ? 3.7.2 Cc phng thc c sn trong HTML Helpers 3.7.3 B sung cc phng thc ng trong HTML Helpers 3.8 Validation Form Data 3.8.1 Model State l g ? 3.8.2 Validation Helpers 3.8.3 Validating with the IDataErrorInfo Interface 3.8.4 Style Validation Message 3.9 Model Binders v Action Filters 3.9.1 Model Binders 3.9.2 Action Filters 3.10 Chng thc Users 3.11 S dng Unit Test trong ASP.NET MVC 5. Trin khai ng dng ASP.NET MVC 6. Tch hp Ajax vo ASP.NET MVC 7. S dng jQuery trong ASP.NET MVC 8. Kt hp gia MVC v WebForms Phn II: Xy dng module website thc nghim: NHANLUCQUOCTE.EDU.VN

Trang 2

1. Con ng pht trin Web Thi gian Jurassis Cng ngh CGI Sc mnh n gin (la chn duy nht vo thi im ny) Chy bn trong server Yu im Chy bn ngoi web server Ch l ng gi nhng cu truy vn SQL v template cho cc kt qu c nh dng. Thng dch thi gian thc - Chim nhiu bandwidth. - HTML kh nhn - Khng kh nng test.

Bronze age

IDC (Microsoft Internet database connector) ASP (Active Server Page) ASP.NET 1.0/1.1 ASP.NET 2.0 ASP.NET Ajax ASP.NET 3.5

1996 2002/ 2003 2005 2007 2008

Mc ch chung - Giao din c trng thi - c bin dch - khuyn khch lp trnh hng i tng. - Cu trc file ln

* CGI l mt chun c ngha l kt ni mt web server vi mt chng trnh c kh nng thc thi c lp, v n tr v kt qu ng. 2. L do ra i ca ASP.NET MVC 2.1 Gii thiu ASP.NET truyn thng: - Da trn nn .NET h tr a ngn ng nh C#, VB.NET, - Microsoft hng n vic giu i giao thc HTTP (n i bn cht bn trong) v code HTML bng vic a ra m hnh UI (user interface) nh l cc i tng control pha server (mi control c trng thi ca ring mnh, t ng sinh m HTML khi cn, v t ng kt ni vi cc s kin pha client). - Cc nh pht trin Web khng cn phi lm vic vi cc request v response trong tng HTTP c lp. Thay th n chnh l thut ng StateFull UI (tm dch l trng thi

Trang 3

giao din ngi dng). Cc nh pht trin Web ch cn ko-th, v tng tng ra iu g s xy ra trn server khi thit k giao din Web. 2.2 Nhc im ASP.NET truyn thng: khi ng dng Webforms (dng cng ngh ASP.NET) c s dng trong thc t sinh ra nhng nhc im sau: -ViewState: l c ch chnh duy tr trng thi qua mi ln request, iu ny dn n mt khi lng d liu ln c truyn i gia client-server. - Chu k sng ca 1 trang web: l c ch kt ni gia trnh iu khin s kin client v server, iu ny c th tr nn phc tp, v d ph v. - Cc control b gii hn trn m HTML: vi control server sinh m HTML, nhng khng phi l m HTML m ta mong mun. V d vi control servers sinh ra gi tr ID phc tp, v kh truy xut bi JavaScript. - Cm nhn sai trong vic phn tch code ra khi m HTML bng cch to codebehind bn di trang: Trong thc t th cc nh pht trin Web khuyn khch nn trn vic trnh by code (v d: vic qun l control pha server) vi tnh logic trong ng dng ca h (v d: thao tc c s d liu) vi nhau. Tt hn ht l khng nn tch ring chng ra v kt qu thng l kh hiu v d v. - Khng th kim th: Khi ln u tin cc nh thit k ASP.NET a ra nn thit k ca h, h khng th lng trc vic kim th s tr thnh xu hng pht trin phn mm hin nay. V kin trc h xy dng th hon ton khng ph hp cho vic kim th t ng. * V phin bn ASP.NET 2.0 thm vo mt s components chun nhm gim sinh ra s lng code bn khng mong mun (bn cn vit chng). V nm 2007, Microsoft cho ra i Web 2.0/Ajax, h tr nhiu hn trong vic tng tc vi client. V phin bn mi nht ca ASP.NET l phin bn 3.5 vi mt s tnh nng mi c thm vo nh tch hp mt s controls mi, ASP.NET dynamic data gip vic to ra database t ng n gin hn nh (lit k, sa, cc mu tin trong database). Xa hn na trong Visual Studio 2010 ASP.NET 4.0 s cho cc nh pht trin web ty chn cc thnh phn ID ca HTML, nhm gim rc ri v cc gi tr ID phc tp v kh d on trc. 2.3 Gii thiu ASP.NET MVC: ASP.NET MVC l nn tng cng ngh mi nht ca Microsoft hin nay l ASP.NET MVC, n c thit k t suy ngh l lm th no xy dng mt phn mm tt (phn mm tt l phn mm bn mun to ra v n d dng c thay i Stephen Walther). ASP.NET MVC c thit k lm sao c th b sung cc nguyn l v cc patterns pht trin phn mm khi xy dng cc ng dng web. Bn cnh , n c thit k h tr trong vic kim th. 2.3.1 Ngun gc ASP.NET MVC: * ASP.NET MVC 1.0
Trang 4

- Cng ngh ASP.NET MVC l mi, tuy nhin n c lch s lu i. Nn tng MVC c pht minh bi Trygve Renskaug, ng vit trang giy u tin ni v MVC vo nm 1978. Ban u n c gi l Thing Model View Editor pattern, nhng sau n c t tn li l Model View Controller pattern. - ASP.NET MVC ln u tin xut hin l trong d n m ngun m MonoRail - V ngun gc tht s cho ra i cng ngh Microsoft ASP.NET MVC l do Scott Guthrie (mt trong nhng nh sng to ra ASP.NET) trn chuyn bay n Austin, Texas ni v hi tho Alt.NET vo thng 10-2007. - Cui cng th u nm 2009 phin bn ASP.NET MVC 1.0 (released) c ra i. - iu kin cn xy dng ng dng ASP.NET MVC: + Microsoft.Net Framework 3.5 SP1 + Microsoft ASP.NET MVC + Visual Studio 2008 SP1 2.3.2 Cc thnh phn cu thnh ASP.NET MVC: ng dng MVC (l t vit tt ca Model View Controler) c chia ra lm 3 phn: - Model: Model ca MVC cha tt c cc logic ca ng dng (v d: x l c s d liu,), khng cha trong view hay controller. Model cha gm cc logic ng dng, cc logic nghip v, v logic truy xut c s d liu. Model ca MVC cha m hnh cc lp (m hnh i tng trong min ng dng). - View: View ca MVC cha cc th HTML v view logic - Controller: Controller ca MVC cha tnh logic trong lu iu khin (control-flow).

Trang 5

Hnh 2.1: M hnh MVC (k hiu: tng tc vi) * Li ch ca ng dng web da trn m hnh MVC: - C tnh m rng do c th thay th tng thnh phn mt cch d dng - Khng s dng viewstate, iu ny lm cc nh pht trin d dng iu khin ng dng ca mnh. - H thng nh tuyn mi mnh m - H tr tt hn cho test-driven development (TDD) ci t cc unit tests t ng, xc nh v kim tra li cc yu cu trc khi bt tay vo vit code. - H tr kt hp rt tt gia ngi lp trnh v ngi thit k giao din. - S dng cc tnh nng tt nht c ca ASP.NET. * Nhc im ca ASP.NET MVC - Khng hng n s kin lm cho cc nh pht trin ASP.NET webform kh khn. - Yu cu hiu bit v HTTP, HTML, CSS v JavaScript. - Th vin ca nh phn phi th ba khng mnh bng. 2.3.3 Cu trc mc nh ca mt d n ASP.NET MVC: cc bc to 1 project mc nh bng ASP.NET MVC nh sau: - Khi ng visual studio 2008, chn File -> New -> Project -> ASP.NET MVC Web Application

Trang 6

Hnh 2.2: To mi d n ASP.NET MVC

Hnh 2.3: To b test d n - Sau khi d n khi to xong, ta c cu trc mc nh c to sn bi trnh Visual nh sau:

Trang 7

Hnh 2.4: Cu trc mc nh 1 project ASP.NET MVC * ngha tng th mc ng dng ca ASP.NET MVC - App_Data: cha cc file d liu, th mc App_Data c th cha mt c s d liu cc b. - Content: cha ni dung tnh nh hnh nh v cc file css. - Controllers: cha cc lp controller ca ASP.NET MVC - Models: cha cc lp model ca ASP.NET MVC - Scripts: cha cc file javascript bao gm th vin ASP.NET Ajax v jQuery. - Views: cha cc views ca ASP.NET MVC - Sau khi chy th chng trnh (ctrl+F5) s cho kt qu nh sau:

Trang 8

Hnh 2.5: ng dng mc nh do visual to ra 2.4 So snh gia ASP.NET webform v ASP.NET MVC

Hnh 2.5: Khung nn ASP.NET .Net Framework: h tr cc loi ng dng nh desktop, web v cc ng dng console. ASP.NET framework l mt phn ca .NET framework, c xy dng nhm h tr cc ng dng Web (caching, authentication v authorization). Trong , Microsoft c 2 hng pht trin web trn nn ASP.NET l ASP.NET Webforms v ASP.NET MVC. V ASP.NET MVC ch l s thay i v mt t duy, n khng hon ton thay th cho c ng dng ASP.NET Web Forms, v vic chn hng no xy dng mt website l ty thuc vo cc nh pht trin.
Trang 9

* S khc bit ca ASP.NET MVC vi ASP.NET 2.0 Tnh nng Kin trc chng trnh ASP.NET 2.0 Kin trc m hnh WebForm Business Database. S dng c php ca webform, tt cc s kin v controls do server qun l. S dng hu ht cc cng ngh truy cp d liu trong ng dng. Debug chng trnh phi thc hin tt c bao gm cc lp truy cp d liu, s hin th, iu khin cc controls/ Tc phn ti chm khi trong trang c qu nhiu cc controls v ViewState qu ln. Kh khn Cu trc a ch URL c dng <filename>.aspx?&<cc tham s> ASP.NET MVC Kin trc s dng vic phn chia chng trnh thnh Controllers, Models, Views Cc s kin c iu khin bi controllers, cc controls khng do server qun l. Phn ln dng LINQ to SQL class to m hnh truy cp i tng. Debug c th s dng cc unit test kim tra cc phng thc trong controller. Phn ti nhanh hn do khng phi qun l ViewState qun l cc control trong trang. D dng Cu trc a ch rnh mch theo dng Controllers/Action/Id

C php chng trnh

Truy cp d liu

Debug

Tc phn ti.

Tng tc vi javascript. URL Address

2.5 ASP.NET MVC 2

Trang 10

- ASP.NET MVC 2 ch c th chy trn nn asp.net 3.5 sp1 v asp.net 4. Chng ta ch c th trin khai asp.net mvc 2 trn visual studio 2010 hoc visual studio 2008 sp1. c h tr bi cc h iu hnh nh: Windows 7; Windows Server 2003; Windows Server 2008; Windows Vista - Cc c tnh mi trong asp.net MVC 2: + New Strongly Typed HTML Helpers: H tr din t lambda (lambda expression) tham chiu n mt mng hay tp hp no .

V d:

Trang 11

Ngoi ra, ASP.NET MVC2 cn h tr thm mt s strongly-typed HTML nh bn di:

+ Overriding the HTTP Method Verb: HTTP verbs cho php ta quyt nh liu action (GET, POST, PUT, DELETE) no s c thc thi.

Trang 12

+ Enhanced Model Validation support both server and client thng qua b th vin javascript c tch hp sn trong ASP.NET MVC 2 + Auto-Scaffold UI Helpers with template customization: You can ensure more maintainability as you modify your applications using strongly-typed helpers such as Html.TexBoxFor. The new templated helpers let you easily associate HTML elements for edit and display with data types improving productivity. + Asynchronous Controllers support + Support for rendering sub-sections of a page/site using Html.RederAction + Lots of new helper functions, utilities, and API enhancements

+ Improved Visual Studio tooling support + Areas Support: cho php chng ta d dng phn vng, v gom nhm cc chc nng thng qua ng dng MVC.

Trang 13

+ DataAnnotation Validation Support: k t phin bn ASP.NET MVC 2, microsoft xy dng sn cc DataAnnotation Validation nhm qun l cc li (rules) trong cc lp model v viewmodel bn trong ng dng vi 4 lut ( validation rules) c xy dng sn nh: [Required], [StringLength], [Range], v [RegularExpression]. + Bc 1: Khai bo lp Person ko theo cc validation rules

Trang 14

+ Bc 2: To action Create()

+ Bc 3: To trang View

Trang 15

+ Bc 4: Chy v kim tra kt qu

Tuy nhin, validation rules trn mi ch thc hin pha server, khi , bt c validation rules th i hi ngi dng phi nhn nt submit. Nhng ASP.NET MVC 2 xy dng kin trc validation rules rt tuyt vi bao gm c vic h tr validation rules c pha server ln client. Tt c nhng g chng ta cn lm l thm hai tham chiu javascrip l

Chy th v thu kt qu

Trang 16

Ngoi ra, ASP.NET MVC cn cho php ta t to cc thuc tnh Validation, v d, chng ta mun xy dng validation rule cho thuc tnh Email, n gin, ta ch cn k tha t lp RegularExpressionAttribute

V cch s dng th ging nh v d lm trc Ni tm li, ASP.NET MVC 2 b sung rt nhiu c tnh mi, nu c nhu cu tm hiu thm, chng ta c th tham kho ti website: http://www.asp.net/learn/whitepapers/what-is-new-in-aspnet-mvc. 2.6 ASP.NET MVC 3 - ASP.Net MVC 3 ch c th chy trn nn asp.net 4, chng ta ch c th trin khai asp.net mvc 3 trn visual studio 2010. tm hiu thm v k hoch ra i ASP.NET MVC 3 cng cc c tnh mi m n c th h tr, chng ta c th tham kho ti website: http://aspnet.codeplex.com/wikipage?title=Road %20Map&referringTitle=MVC. 3. Tm hiu cc thnh phn bn trong ASP.NET MVC 3.1 Controllers v Actions 3.1.1 Controllers l g ? - Controllers m nhn vic x l logic pha ng dng bao gm vic nhn gi tr u vo ca ng dng, pht sinh cc lnh thc thi, nhn d liu t min model, v a ngi dng i n nhng UIs khc nhau.
Trang 17

Hnh 3.1: HomeController c to ra bi Visual * T hnh 3.1 ta rt ra nhn xt rng: khi user request vo trang index.aspx th controller s x l yu cu ca user bi action Index(), khi user request mun xem thng tin website th cotroller s p ng bng vic gi action About()

Hnh 3.2: Controller p ng request t user 3.1.2 Controller Actions l g ? - Sau khi controller xc nh v gi action no th action c nhim v tr kt qu v cho trnh duyt. Mt controller c th tr v mt view, mt file, hoc a chng ta n mt action khc * Controller action lun tr v mt ActionResult. B khung ASP.NET MVC bao gm cc kiu tr v nh sau:
Trang 18

Phng thc View() PartialView() Redirect() Content() File() RedirectToRoute() RedirectToAction()

Kiu tr v ViewResult: miu t mt view ca ASP.NET MVC. PartialViewResult: miu t mt phn(fragment) ca ASP.NET MVC view. RedirectResult: Miu t chuyn hng n controller action hoc URL khc ContentResult: gi ni dung th v cho trnh duyt. FileResult: miu t mt file c ti xong RedirectToRouteResult: miu t chuyn hng hot ng n controller action hoc URL s dng cng gi tr nh tuyn (route ) Tr v mt RedirectToRouteResult

Mt s v d: a. Tr v mt ViewResult

Hnh 3.3: code tr v mt ViewResult b. Tr v mt Redirect Result

Hnh 3.4: code tr v mt RedirectResult c. Tr v mt ContentResult

Trang 19

Hnh 3.5: code tr v mt ContentResult d. Tr v mt fileResult

Hnh 3.6: code tr v mt ContentResult

Hnh 3.7: Kt qu chy th code ContentResult

Trang 20

* Nh vy, qua cch v d trn ta bit c cch hot ng ca controller nhng lm th no cotroller nhn bit hai hm cng tn, gi action no hot ng khi thao tc form d liu, hoc yu cu cc phng thc c bit khi mt nhn request t Ajax a. s dng AcceptVerbs: Thuc tnh AcceptVerbs ngn chn mt action c yu cu m khng c thao tc HTTP Post hoc Get. V d

Hnh 3.8 Ngoi ra, giao thc HTTP cn h tr mt s thao tc HTTP khc na nh: options, head, put, delete, trace, connect. Chng ta c th thc thi cc thao tc HTTP trn khi thc thi request Ajax nh sau:

Hnh 3.9 b. s dng ActionName: ActionName c dng trin khai mt action vi tn khc hn l tn phng thc ca n. ActionName l hu ch khi: - Khi controller cn ghi phng thc cng tn - Khi mt controller c cc phng thc khc nhau nhng chng ta mun nhng phng thc ny hot ng nh mt phng thc cng tn.
Trang 21

V d:

Hnh 3.10 c. s dng ActionMethodSelector: i khi chng ta mun xy dng cc thuc tnh ca ring mnh v controller c th gi mt action n thuc tnh ca chng ta. n gin chng ta ch cn xy dng thuc tnh k tha lp ActionMethodSelectorAttribute. V d: u tin ta xy dng mt lp n gin c t tn l AjaxMethod, lp ny ghi phng thc IsValidForRequest(). Nu kt qu tr v l false th phng thc action s khng c yu cu

Hnh 3.11

Trang 22

Hnh 3.12

Hnh 3.13 *Ngoi l iu khin cc action khng tn ti (handling unknown action): Khi mt action no c khai bo trong controller, trong khi action ny khng thc thi c khi n pht sinh li 404 Resource Not Found HTTP. Tuy nhin, chng ta c th x l li ny bng cch ghi phng thc HandleUnknownAction()

Hnh 3.14

Hnh 3.15 3.2 Views

Trang 23

3.2.1 Views l g ? View trong ng dng ASP.NET MVC c xem l giao din ca ng dng, View c tc dng tr v cho trnh duyt trang HTML khi ngi dng gh thm website ca chng ta. Views cha cc tag tng t nh HTML, chng ta c th t mi th vo trong view nh hnh nh, iframes, java applets, flash v silverlight. 3.2.2 To Views nh th no ? Cch to view d nht l nhp chut phi vo action no trong controller chn Add View

Hnh 3.16 Thm mt view mi t controller action

Hnh 3.17 S dng hp thoi View (View Dialog)

Trang 24

Hnh 3.18 Ni dung c bn ca mt view - Trong view frmDangKi.aspx chng ta va to cha 2 tag <asp:content>, tag <asp:content> u tin s xut hin trong tag <title> ca vn bn HTML, tag <asp:content> th hai s xut hin trong tag <body> ca vn bn HTML. * Lu : chng ta c th tch hp cc scrip vo trong view thng qua <% %>

Hnh 3.19 Cch chn scripts vo trong view 3.2.2 S dng Views nh th no ? - i lc chng ta mun truyn thng tin qua li gia View v Controller, n gin chng ta s dng c ch ViewData c h tr bi ASP.NET MVC . Trong , ViewData c th miu t bt k loi thng tin no nh strings, objects v cc mu tin c s d liu -ViewData ging nh kiu t in, n bao gm cp thuc tnh kha v gi tr, trong , kha phi l chui, cn gi tr c th l bt k kiu d liu g. - Khi s dng ViewData, chng ta ch cn p kiu v kiu d liu mong mun, v n c th cha bt k kiu d liu no nn khi gn d liu cho ViewData, ViewData t dng gn v kiu objects - V d:

Trang 25

Hnh 3.20 Cch to ViewData trong controller

Hnh 3.21 Cch dng ViewData trong View

Hnh 3.22 Kt qu thu c Nu nh chng ta khng mun s dng view bng cch p kiu, chng ta c th to mt strongly typed view, khi t in viewdata trin khai mt thuc tnh c t tn l Model

Trang 26

Hnh 3.23 Cch to strongly typed view

Hnh 3.24 B sung strongly typed view vo trong view

Hnh 3.25 Cch s dng strongly typed data trong view 3.3 Models 3.3.1 Models l g ? - Models cha tt c cc x l mang tnh nghip v, tnh logic trong truy xut c s d liu, cng nh tnh hp l trong ng dng. Ni cch khc, model cha tt c cc logic ng dng, ngoi tr logic view v controller. 3.3.2 To Database: minh ha cch to DataModel, trc ht chng ta cn bit cch to c s d liu bao gm cc bc sau: - Nhp phi chut vo th mc App_Data, chn Add, chn NewItem

Trang 27

Hnh 3.26 - Chn Item Sql Server Database, v g Products.mdf vo textbox Name, chn Add

Hnh 3.27 - Sau khi thm mi c s d liu, n s nm trong th mc App_Data, trong ca s Server Explorer, nhp phi chut vo th mc Tables, chn Add New Table, Table gm 4 ct. Ct u tin l Id l kha chnh v mang gi tr t ng tng

Hnh 3.28 3.3.3 To Data Model vi Microsoft Entity Framework - Nhp phi chut vo th mc Model trong ca s Solution Explorer, chn Add, New Item. - Trong hp thoi Add New Item, trong Categories nhp vo mc Data, trong Templates nhp chn ADO.NET Entity Data Model, trong mc name g DataModelProducts.edmx

Trang 28

Hnh 3.29 - Trong bc choose model contents chn item Generate From Database, nhp Next

Hnh 3.30 - Trong bc Choose your data connection, nhp products.mdf cho data connection, v g ProductsDBEntities cho vic thit lp tn kt ni.

Trang 29

Hnh 3.31 - Trong bc Your Database Object, chn table Products v nhp tn namespace l ProductsModel.

Hnh 3.31 - Sau khi nhn nt finish, kt qu l

Hnh 3.32

Trang 30

Hnh 3.33 * Gii thiu cc thao tc trn c s d liu s dng ProductsDBEntities v class Product

Hnh 3.34 Khai bo i tng thao tc trn CSDL a. Hin th tt c mu tin c trong c s d liu: - Nhp phi vo action Index trong controller Home chn Add View

Hnh 3.35
Trang 31

- To strongly-typed view v trong View Content chn List, nhn Add

Hnh 3.36 - Kt qu

Hnh 3.37 b. Hin th mt mu tin duy nht - Nhp phi chn add view cho action Details trong controller

Hnh 3.38
Trang 32

- To strongly-typed view v trong View Content chn List, nhn Details

Hnh 3.39 - Kt qu

Hnh 3.40 c. To mi mu tin - Nhp phi chn add view cho action Create trong controller

Hnh 3.41
Trang 33

- To strongly-typed view v trong View Content chn List, nhn Create

Hnh 3.42 - in thng tin sn phm mi

Hnh 3.43 -Kt qu

Hnh 3.44 d. Chnh sa mu tin

Trang 34

- Nhp phi chn add view cho action Edit trong controller

Hnh 3.45 - To strongly-typed view v trong View Content chn List, nhn Edit

Hnh 3.46 - Kt qu trc khi chnh sa

Hnh 3.47 - Chnh sa thng tin sn phm

Trang 35

Hnh 3.48 - Kt qu sau khi chnh sa

Hnh 3.49 e. Xa mu tin - Nhp phi chn add view cho action Delete trong controller

Hnh 3.50 - To strongly-typed view v trong View Content chn List, nhn Delete

Trang 36

Hnh 3.51 - Kt qu trc khi xa

Hnh 3.52 - Xem thng tin mu tin trc khi xa

Hnh 3.53 - Kt qu sau khi xa

Hnh 3.54 3.3.4 S dng Linq to Sql trong ASP.NET MVC - Linq to sql c Microsoft gii thiu nm 2007 nh l mt phn ca .NET 3.5, n c thit k gip chng ta gim ti mt s lng ln on code cn vit khi thao tc truy xut c s d liu, v gip chng ta thot khi gnh nng trong vic to v duy tr stored procedure cho mi loi query chng ta cn thc thi. N l mt cng c ORM(Objectrelational mapping), n cha tt bng Nhibernate, nhng i khi n d dng s dng.
Trang 37

- Cch s dng Linq to Sql rt n gin, t trong mi trng Visual Studio, chng ta ko v th cc tables v stored procedures vo trong tm bc(ca s do visual to ra khi thao tc ko th c s d liu), sau , chng ta s dng cc cu lnh truy vn Linq bn trong code C#, v nhn ly cc thc th ny t data context (n chuyn cu truy vn t Linq sang Sql lc thc thi), thay i chng bn trong C#, sau gi SubmitChanges() vit nhng thay i ny ngc tr li c s d liu. - V d: a. To c s d liu (dng cng c Sqlserver Express 2005). Sau khi to xong c s d liu to c c nh sau:

b. Xy dng lp newProduct c cc thuc tnh tng ng vi cac column trong bng Products. Trong ca s Solution Explorer, nhp phi th mc Models chn Add, Class, t tn class l newProduct.

Trang 38

c. To mt interface c phng thc c gi l IproductRepository, c dng to ra mt view hng i tng lu tr ngm nh cc gi tr ca newProduct.

d. trnh vit cc cu truy vn Sql hoc stored procedure, chng ta cn ci t v s dng Linq to Sql. Do chng ta nh ngha thc th nh l mt lp C# (Product), by gi chng ta c th nh x n n cc bng tng ng trong c s d liu bng cch thm mt s thuc tnh mi nh sau: - Tham chiu n th vin System.Data.Linq

- Update lp Product nh sau:

Trang 39

e. To lp SqlProductsRepository, y l lp dng kt ni n c s d liu tht s ca chng ta.

f. Lit k cc sn phm c trong c s d liu

Trang 40

g. Chy th ta c kt qu

* B sung cc thao tc CRUD (Create, Read, Update, Delete) cho Controller

Bc 1: khi to i tng kt ni c s d liu

Bc 2: thc hin cc thao tc CRUD a. Lit k d liu c sn (thao tc Read): thao tc ny khng c g khc so vi thao tc lit k d liu c sn khi s dng k thut Microsoft Entity Framework khi thao tc c s d liu

Trang 41

b. Cp nht d liu (thao tc Update): thao tc ny khc vi thao tc trong Microsoft Entity Framework nh sau: - Chng ta b sung phng thc SaveProduct(newProduct product) trong lp SqlProductRepository nh sau:

- Khi thc hin thao tc update c s d liu ta thc hin nh sau:

- Kt qu

c. Thm mi sn phm - Khai bo action Create() trong controller CRUD

Trang 42

- Trong trng hp chng ta mun form lun post n action Edit ta b sung thm tham s nh hnh bn di

- Kt qu t c sau khi thm mi l:

d. Xa bt sn phm - Chng ta b sung phng thc DeleteProduct(newProduct product) trong lp SqlProductRepository nh sau:

- Khai bo s dng trong action Delete ca controller CRUD

Trang 43

- Kt qu khi chy chng trnh

3.5 URLs v Routing - Khi chng ta request mt trang t ng dng ASP.NET MVC, th request s c chuyn tip n mt controller no trong ng dng. V thc hin iu ny chng ta cn n tnh nng gi l Routing trong ng dng ASP.NET MVC - Khi to mi mt ng dng ASP.NET MVC, ta c file Global.asax nh sau:

- Tp tin Global.asax cha hai phng thc chnh c t tn l Application_Start() v RegisterRoutes(). Trong , phng thc Application_Start() ch c gi mt ln duy nht khi ng dng ASP.NET ln u tin chy, v cng vic ca n n gin l gi phng thc RegisterRoutes() - Phng thc RegisterRoutes() th c s dng cu hnh tt c cc routes trong ng dng, v n c route mc nh l:

Trang 44

- Chng ta cu hnh route mi bng vic gi phng thc MapRoute(), phng thc ny chp nhn cc tham s sau: + Name: tn ca route + URL: mu(pattern) url dnh cho route + Defaults: gi tr mc nh cho cc tham s route + Constraints: tp cc rng buc nhm gii hn cc request nhm tm ra route ph hp nht. + Namespaces: tp cc namespace nhm gii hn cc lp nhm tim ra route ph hp nht. - Phng thc MapRoute() c th c ghi , chng ta c th gi phng thc MapRoute() m khng cn s h tr ca cc tham s Defaults, Contraints, hoc namespace. - Tham s URL dnh cho route Default c mu(pattern) nh sau {controller}/ {action}/{id}. Do , route mc nh dnh cho URL c nhng dng nh sau: + /Product/Insert/23 + /Home/Index/1 + /Do/Something/Useful - V n khng so khp vi URL sau: /Product/Insert/Another/Item. (V mu url mc nh c 3 phn, trong khi ta request url 4 phn). - Mu URL {controller}/{action}/{id}, vi tham s controller, action l c bit. ASP.NET MVC framework dng tham s controller quyt nh loi controller MVC no c s dng iu khin request t client. Trong khi , tham s action miu t action no c controller s dng response li request do client yu cu. - Nu chng ta thm vo cc tham s khng c t tn controller hoc action, th chng c s dng nh nhng tham s c truyn n cc controller action. - Theo mc nh, tham s controller c gi tr mc nh l Home, tham s action c gi tr l Index, v tham s id c gi tr l (chui rng).

Trang 45

- V d: vi website http://www.mysite.com/product, cc tham s c gi tr tng ng l Controller = Product, Action = Index, Id = , v cc gi tr ny cng p dng cho url: http://www.mysite.com, hoc ta c url sau: ~/Archive/12-25-1966, khi route c cc gi tr tham s nh sau:

- S dng rng buc HttpMethod: i khi chng ta mun ngn cn URL c bit no khi vic truy xut khi thc thi mt HTTP Get, khng phi l thc thi HTTP Post.

Ngoi ra, ASP.NET MVC cn h tr mt s rng buc (constraint) khc nh: Authenticated, NotEqual, Catch-ALL contrainst. *Lu : nu trong fiel global.axas c nhiu route entry, th h thng khng hng n vic tm route no ph hp nht, thut ton ca n n gin l bt u t trn xung, v kim tra tng route, v dng khi c route u tin ph hp.

Bi v, /DailySpecials/March-31 ph hp vi route u tin nn route u tin s c thc hin. 3.6 View Master Page v User Control Page : 3.6.1 View Master Page: Mc ch chnh ca View Master Page l duy tr b cc trang trn ton b website. a. To mt view master page: Thng thng, master page ph hp cho tt c cc view, chng ta to master page trong th mc \Views\Shared, nhp phi chut chn Add, New Item. Trong danh mc web chn MVC View Master Page, sau nhn nt Add
Trang 46

- Kt qu ta c c ni dung trang master page nh sau:

b. To view content page: sau khi to xong view master page, chng ta c th to mt hay nhiu view content pages da trn master page nh sau: - T mt action controller no trong controller, nhn phi chut chn Add View.

- Chn master page, ci m c p dng cho view

Trang 47

- Kt qu thu c l:

c. Thit lp master page t Controller: S thun li ca phng thc ny l chng ta c th la chn trang master ng ti thi gian chy V d, gi s ta c 2 trang master page l MP1 v MP2, v d sau minh ha bng cch no, chng ta c th la chn trang master vo thi gian chy. - Bc 1: Khai bo thm thuc tnh trong view

Trang 48

- Bc 2: Chy th v thu c kt qu sau

d. Cc trang master page lng nhau: - Bc 1: To master page 1

Trang 49

- Bc 2: To trang master page 2, import master page 1

- Bc 3: to view s dng master page 2

- Bc 4: chy th v thu c kt qu

Trang 50

e. Truyn d liu n master page - Bc 1: To lp c s cho tt c cc controllers (Application controller chng hn), khi , ta ch cn thay i view data ch trong lp controller (vic xy dng ny nhm trnh nguyn l DRY (Dont Repeat Yourself): lm cho code ca chng ta d dng duy tr).

- Bc 2: To controller k tha t controller trn

- Bc 3: Ly d liu trong view

Trang 51

- Bc 4: Kt qu thu c

3.6.2 User Control Page a. To view user control - View user control miu t mt phn ca view. Mt khc, user control cho php chng ta ng gi ni dung trc quan (visual content) m cng mt ni dung c th c hin th trong nhiu view khc nhau. Mt user control c th cha (X)HTML v script. - Nhn phi chut vo th mc \Views\Shared (v chng ta mun s dng user control trn nhiu views khc nhau), chn Add, View
Trang 52

- Gi s view user control ny cha danh sch cc items mi nh sau:

- Sau khi to xong mt user control, chng ta c th s dng n trong view bng cch gi phng thc Html.RenderPartial(). Lu , v Html.RenderPartial() khng tr v chui, do ta dng script <% %> thay v s dng script <%= %>

Trang 53

- V kt qu thu c l

b. Truyn d liu t controller n ViewUserControl - Bc 1: Thay i ni dung trang user view control nh bn di

Trang 54

- Bc 2: Kt qu thu c

c. s dng View User Control nh mt template - Bc 1: To mt controller mi (Ly v mt danh sch cc mu tin trong c s d liu)

- Bc 2: To mt View, dng hin th thng tin

Trang 55

Bc 3: To mt view user control dng tr v mt hng trong table

- Bc 4: kt qu thu c

Trang 56

3.7 HTML Helpers 3.7.1 HTML Helpers l g ? - HTML Helpers trong view, n hon tr li ni dung HTML, phn ln n ch l phng thc tr v mt chui. Chng ta c th xy dng ng dng ASP.NET MVC m khng cn HTML Helpers, tuy nhin, HTML Helpers gip cho cc nh pht trin Web d dng thao tc hn trong vic code HTML. 3.7.2 Cc phng thc c sn trong HTML Helpers - HTML.ActionLink(), n khng lin kt n mt view, thay vo n lin kt n mt action controller.

HTML.ActionLink() helpers c vi phng thc ghi vi cc tham s nh + linkText: tn link + actionName: l tn action controller m link cn hng n + routeValues: tp cc gi tr c truyn n action + controllerName: l tn controller m link cn hng n
Trang 57

+ htmlAttributes: tp cc thuc tnh HTML c thm vo link + protocol: giao thc dnh cho link (v d: HTTPs) + hostname: hostname dnh cho link + fragment: fragment dnh cho link. (v d: link ti mt th div trong view vi id l news, ta s ch nh news cho fragment

- Url.Action() helpers: dng to ra link da trn hnh nh V d:

- Ngoi ra cn c cc HTML Helpers khc nh: BeginForm(), CheckBox(), DropDownList(), EndForm(), Hidden(), ListBox(), Password(), RadioButton(), TextArea(), TextBox().

Trang 58

- Html.BeginForm(): hon tr mt form dng HTML cho view.

Theo mc nh, Html.BeginForm() s tr v mt form dng post back ti cng action controller. Nu mun post n action khc, ta ch vic thay i cc gi tr tham s ca phng thc BeginForm() nh sau: + routeValues: tp cc gi tr c truyn ti action + actionName: tn action m form mun post ti + controllerName: tn controller m form mun post ti. + Method: phng thc HTTP m form post ti (cc gi tr c th c ca n l POST hoc GET, bn khng th s dng cc phng thc HTTP khc bn trong HTML, chng ta phi dng Javascrip) + htmlAttributes: tp cc thuc tnh HTML thm vo form -Html.DropDownList() helper: hon tr mt tp cc mu tin trong c s d liu v dng tag <select> ca HTML. V d: + Bc 1: Xy dng mt danh sch cc phn t cho dropdownlist

+ Bc 2: khai bo s dng trong View

Trang 59

+ Bc 3: Kt qu

3.7.3 B sung cc phng thc ng trong HTML Helpers - ASP.NET MVC ch h tr mt s HTML Helpers, i lc chng ta cn b sung thm mt s helper mi. Tht may, ASP.NET MVC c h tr tnh nng thm mi helpers, gi nh ta xy dng nt submit, cc bc lm nh sau: 1. Xy dng phng thc nutSubmit() tnh thuc lp Helpers tnh nh sau:

2. cc view c th nhn thy cc phng thc helper bn va mi to, c 2 cch thc hin + cch 1: khai bo namespace trong file web.config

+ cch 2: import trc tip vo trong view cn s dng helper bn va mi to

Trang 60

Gi s ta g: <%= Html.nutSubmit("MyHelpers") %> Ta c kt qu l:

* Ngoi ra ta c th xy dng mt s helpers hu ch nh 1. TagBuilder: y l lp rt hu ch trong ASP.NET MVC, chng ta c th s dng chng khi xy dng HTML helpers, n c cc phng thc sau: + AddCssClass(): Cho php chng ta thm mt lp mi n 1 tag + GenerateId()- cho php chng ta thm thuc tnh Id n 1 tag + MergeAttribute()- cho php chng ta thm thuc tnh n tag, v c nhiu phng thc ghi phng thc ny. + SetInnerText()- Cho php chng ta thit lp inner text ca tag, chng ta c th ch nh rng chng ta s to tag bnh thng, tag bt u, tag kt thc, hoc l tag t ng cho chnh n. V lp TagBuilder c 4 thuc tnh quan trng sau: + Attributes: miu t tt c cc thuc tnh ca tag + IdAttributesDotReplacement: miu t c im c s dng bi phng thc GenerateId() + InnerHTML: miu t ni dung bn trong ca tag, vic gn 1 chui n thuc tnh ny khng m ha chui HTML.
Trang 61

+ TagName: miu t tn ca tag V d: + bc 1: Xy dng mt phng thc helper t to c tn l PageLinks()

+ bc 2: khai bo s dng trong View

+ bc 3: kt qu t c

2. S dng lp HtmlTextWriter: HtmlTextWriter c xem nh l s thay th cho lp TagBuilder m ta xy dng trn, di y l mt s phng thc c bit dnh cho vic xy dng chui HTML.
Trang 62

+ AddAtrribute(): Thm thuc tnh HTML, khi phng thc RenderBeginTag() c gi, thuc tnh ny c thm vo tag. + AddStyleAttribute(): Thm thuc tnh style, khi phng thc RenderBeginTag() c gi, thuc tnh ny c thm vo tag. + RenderBeginTag(): hon tr vic m tag HTML + RenderEndTag(): ng tag cui cng c m vi RenderBeginTag(). + Write(): vit text n lung xut d liu(output stream). + WriteLine(): vit mt dng mi n lung xut d liu. V d: + Bc 1: Xy dng phng thc helper BulletedList()

+ Bc 2: Khi to d liu

+ Bc 3: khai bo s dng trong View

Trang 63

+ Bc 4: Kt qu

Ni tm tt, vi kh nng cho php t to cc HTML Helpers, chng ta c th to ra v s helpers hu ch ty vo tng trng hp c th. 3.8 Validation Form Data: Validation form data cho php chng ta kim tra xem liu ngi dng nhp ng d liu c yu cu hay cha. V trong ASP.NET MVC, chng ta miu t li hp l (validation errors) ca form bi thut ng model state dictionary. 3.8.1 Model State l g ?Model state, bn thn n ging nh mt cun t in, cha mt tp cc trng thi mu (Model state), nhm biu din trng thi ca cc thuc tnh c bit. Chng ta truyn li hp l t action controller n view v ngc li, bng vic truyn thng qua t in miu t trng thi mu (model state dictionary). C hai lp controller v view u cha thuc tnh c t tn l ModelSate, thuc tnh ny trin khai t in trng thi mu (exposes the model state dictionary). 3.8.2 Validation Helpers: l mt trong s cc cch bn c th s dng pht hin tnh khng hp l do ngi dng nhp sai. V d + Bc 1: khai bo kim tra li trong action testModelState trong controller Home.
Trang 64

+ Bc 2: Khai bo form nhp liu.

+ Bc 3: nhp th d liu l kim tra kt qu

Trang 65

Nh v d trn ta thy rng, li hp l c thm vo model state vi phng thc AddModelError(), phng thc ny chp nhn 2 tham s: kha v chui thng bo li. Nu bt k li no c thm vo model state, thuc tnh ModelState.IsValid tr v false, ngc li l true. 3.8.3 Validating with the IDataErrorInfo Interface: IdataErrorInfo interface l cch th hai do ASP.NET MVC h tr trong vic gip cc nh pht trin Web kim tra tnh hp l, v Interface IdataErrorInfo c cu trc nh sau:
public interface IDataErrorInfo { // Properties string Error { get; } string this[string columnName] { get; } }

+ Bc 1: k tha interface IdataErrorInfo

Trang 66

+ Bc 2: Khai bo s dng trong action testModelState trong home controller

+ Bc 3: Chy th v c kt qu nh sau:

Trang 67

* Styling validation Error message: ASP.NET MVC cn h tr cho chng ta mt s style css nhm thay i mu sc cc textbox, listbox, gip ngi dng d dng quan st v tr d liu khng hp l nh sau:

Trong , + field-validatioin-error: c p dng cho cc tin nhn li c hon tr bi Html.ValidationMessage() + input-validation-error: c p dng cho cc field ca form c hon tr bi Html.TextBox() hoc Html.TextArea(). + validation-summary-errors: c p dng cho c tag <span> v <ul>, n c hon tr bi Html.ValidationSummary(). 3.9 Model Binders v Action Filters 3.9.1 Model Binders: Mt model binder c tc dng nh x mt request t browser vo trong mt i tng. - V d: ta c mt view cha ng mt form HTML n gin cho vic to mi mt sn phm sau:

Trang 68

- Khi chng ta submit form, iu c ngha l chng ta submit form n action controller Create(newProduct product) trong controller Home nh bn di:

- Nh v d trn ta thy, action controller chp nhn tham s Product. Model binder y l model binder mc nh, tng ng nh vic to i tng mi cho lp Product. Model binder cng iu khin vic gn cc gi tr ca cc field trong form HTML n cc thuc tnh ca lp Product - ASP.NET MVC cung cp cho chng ta 3 loi model binder khc nhau nh sau: + Model binder mc nh (default model binder) + Form collection model binder + HTTP posted file da trn model binder (HTTP posted file base model binder) a. S dng Model Binder default: model binder mc nh tt c th to ra cc loi i tng khc nhau t mt request ca browser, bao gm cc loi nh:

Trang 69

+ Cc kiu thng dng nh: string, decimal, hoc datetime. + Cc class nh Product hoc Customer (nhng class t xy dng) + Mng nh Product, string + Tp hp nh Ienumerable<T>, Icollection<T>, Ilist<T>, T[], Collection<T>, v List<T>. + T in nh Idictinary<Tkey, Tvalue> v Dictionary<Tkey, Tvalue> *S dng cc thuc tnh ca Bind - Chng ta co th s dng cc thuc tnh ca Bind i vi cc control, nhm bo cho model binder bng cch no chuyn mt request vo trong mt i tng, n c cc thuc tnh sau: + Exclude: Cho php chng ta loi b danh sch cc thuc tnh c phn cch bi du phy ra khi binding. + Include: cho php chng ta thm danh sch cc thuc tnh c phn cch bi cc du phy trong binding. + Prefix: cho php chng ta kt giao mt tham s vi mt tin t ca 1 field trong form. * Thng thng chng ta hay s dng thuc tnh Exclude, v d khi ta thao tc c s d liu, trng ID l thuc tnh t tng, nn chng ta khng mun bind mt trng trn form i vi thuc tnh ny v d nh:

- Nu nh chng ta khng mun exclude ProductID t phng thc, chng ta c th exclude ProductID ngay trong lp Product nh sau:

Trang 70

- V khi xy dng action controller Create, chng ta khng cn b sung thuc tnh exclude na

b. s dng Form Collection Model Binder: nh mt s thay th cho model binder mc nh, chng ta c th s dng form collection model binder truyn cc tham s t view n action controller. Trong , form collection model binder miu t mt tp cc trng ca form khng xc nh kiu. V d: Trong action Create() chp nhn tham s l mt form collection. Trong action ny, chng ta s kt hp cc field ca form vi i tng ca class Product

Trong v d trn, phng thc UpdateModel() c tc dng gn cc trng form ti i tng myProduct ca lp Product. Phng thc UpdateModel() h tr mt s tham s sau: + model: i tng hng n vic binding + prefix: ch cc field ca form vi tin t ny mi c th c bound vi model

Trang 71

+ includeProperties: mt mng cc thuc tnh c thm vo khi binding + excludeProperties: mt mng cc thuc tnh c loi tr khi binding. + valueProvider: ngun thng tin c s dng trong sut qu trnh binding. V tht ra, chng ta khng cn truyn tham s form collection n phng thc UpdateModel(), mc d action Create khng cn truyn tham s m phng thc UpdateModel() vn lm vic.

c. S dng HTTP Posted file da trn Model Binder: Model binder ny cho php ta truyn file c upload n mt controller action.

Trang 72

3.9.2 Action Filters - Mt action filter cho php chng ta thc thi code trong mt s tnh hung sau: + Ngay trc khi mt controller action c thc thi + Ngay sau khi mt controller action c thc thi + Ngay trc khi mt kt qu action result c thc thi + Ngay sau khi mt kt qu action result c thc thi. - Mt action filter l mt thuc tnh, chng ta c th p dng cho mt controller action hoc ton b controller. V d cc thuc tnh nh OutputCache, HandleError v Authorize u s dng action filters. - V d, chng ta xy dng mt action filters theo di cc s kin action, sau xut ra ca s output ca Visual Studio. + Bc 1: Xy dng lp LogAttribute k tha t lp ActionFilterAttribute v ln lt ghi cc phng thc nh: OnActionExecuting, OnActionExecuted,
OnResultExecuted, OnResultExecuting

Trang 73

+ Bc 2: Khai bo s dng trong Controller

+ Bc 3: Chy ch debug, ta c kt qu nh sau:

3.10 Chng thc Users a. To users - Chng thc users c s dng khi chng ta ch cho php cc user hp l mi c th truy cp vo website c. Chng ta c 2 cch l, th nht dng website administration tool, th hai l dng Account controller. + Cch 1: T ca s Visual Studio, chn chn Asp.net configuration t mc project. Sau khi website Administration tool khi ng xong, chng ta c th to mi users cng cc quy tc cho cc users. (Lu : hy chc chn l ng dng ca chng ta c bin dch t nht 1 ln, nu khng s xut hin li Could Not Load Type ten_ung_dung khi chng ta clik vo tab security)

Trang 74

+ Cch 2: s dng Account Controller: Nu chng ta cn to users (khng bao gm cc vai tr), chng ta c th s dng Account controller, ci ny c thm mc nh vo ASP.NET MVC khi ln u tin to ng dng MVC. + To ng dng MVC mi, chy n + Nhn vo link [Log On] + Nhn vo link Register + Hon thnh form ng k to user mi. b. Chng thc users: Nu chng ta ch mun nhng user no c vai tr c th no mi c quyn truy cp vo cc action controller, chng ta s dng thuc tnh Authorize c h tr sn trong ng dng MVC (Chng ta c th chng thc trn tng action controller hoc trn ton controller)

Trang 75

* Trong v d trn, ta thc hin chng thc trn tt c cc user, nu chng ta ch mun chng thc ch i vi mt s user no ta dng nh sau:

Nh v d trn ta thy, ch c user abc l c quyn Delete Sn phm. Nu mun cho php nhiu users c kh nng dng action Delete, ta ch cn thm du phy ngn cch cc users chng hn nh: [Authorize(Users=Jack,Jill)] c. Chng thc user bng vai tr ca users: gii hn mt nhm users no mi c kh nng s dng action controller no , ta c th s dng tnh nng ny. V d

Trang 76

* Nh vy cho n by gi, ta vn khng bit nhng user account chng ta to ra ang nm u. Theo mc nh, username v password c lu vo trong csdl SQL Express c t trong file ASPNETDB.mdf, c t trong th mc App_Data. V file ASPNETDB.mdf l file n, hin th ta lm nh sau:

3.11 S dng Unit Test trong ASP.NET MVC - Khi to ng dng ASP.NET MVC mi, Visual nhc nh chng ta thm d n test vo cng thi im to ng dng, v khung test mc nh l Visual Studio Unit Test.

- C 2 cch chng ta c th to 1 khi test mi

Trang 77

+ Cch 1: 1. Nhp phi chut vo th mc Controller, chn Add, New Test. 2. Trong hp thoi Add New Test chon UnitTest. 3. Nhp tn khi Test ca chng ta, nu chng ta ang test cho controller Product, ta t tn l ProductControllerTests.

4. Chn nt OK - Kt qu sau khi to khi test mi

+ Cch 2: 1. Nhp phi chut vo th mc controller, chn add, class. 2. Trong hp thoi Add New Item, t tn lp l MyClass_Test, v chn nt Add

Trang 78

3. Thay i class class tr thnh public 4. Thm thuc tnh TestClass vo lp mi to

* Hiu cc thuc tnh ca Test 1. TestClass: nh du mt lp nh l mt lp cha cc phng thc test 2. TestMethod: nh du mt phng thc nh l phng thc test 3. TestInitialize: nh du mt phng thc, c chy ngay lp tc trc mi phng thc test. - Thng thng th mt khi test u kt thc vi mt assertion. Khung test do Visual Studio Unit Test to ra bao gm ba loi lp m bn c th s dng thc hin assertions l + Assert: lp chnh cho vic thc thi assertions + CollectionAssert: lp ny cha ng cc phng thc assertion c bit cho tp cc i tng.
Trang 79

+ StringAssert: lp ny cha ng cc phng thc assertion cho chui - Trong phn ln cc trng hp, chng ta s dng lp Assert, v d Assert.AreEqual() xc nhn cc gi tr tht s c bng gi tr mong i khng. S dng Assert.IsInstanceOfType() xc nhn mt i tng c bit c kiu c th no khng? - Nu chng ta lm vic vi collection, chng ta c th s dng lp CollectionAssert, v d CollectionAssert.AreEqual() cho php chng ta kim tra xem hai tp hp c cng cc items theo cng trnh t hay khng. Cn CollectionAssert.AreEquivalent() kim tra xem hai tp hp c cng items khng, nhng khng cn thit ging trnh t. - Cui cng, StringAssert cho php chng ta thm nh v chui. V d, StringAssert.Contains() cho php chng ta kim tra xem mt chui c cha chui con c bit no hay khng, cn StringAssert.Matches() cho php chng ta kim tra xem mt chui c ph hp vi mu biu t qui tc c th hay khng? - Visual Studio cung cp cho chng ta 4 ty chn cho vic chy test nh sau: + Chy test ch ng cnh hin ti + Chy tt c cc test trong Solution + Debug test ch ng cnh hin ti + Debug tt c cc test trong Solution - Ng cnh c c xc nh bng v tr con tr chut. V d, nu chng ta nhp vo phng thc myMethod() v la chn test bng current context, khi ch c phng thc myThod() l chy test. - Chy test ch debug l hu ch khi chng ta cn thit lp im nhn cho vic test.

V d: To unit test i vi Controller v action: Gi s mt controller c 2 action l Index() v ViewMaps(), nu chng ta gi action ViewMaps() m khng truyn tham s id, khi chng ta nn quay v action Index()

Trang 80

Vi mc ch trn, ta xy dng khi test nh sau:

Trang 81

5. Trin khai ng dng ASP.NET MVC - Trin khai ng dng web l vic ci t ng dng web ln web server n c th c truy xut bi ngi dng. - Cc yu t cn thit cho vic trin khai ASP.NET MVC l + IIS phin bn 5.1 tr ln + .Net framework phin bn 3.5 5.1 Ci t IIS 7.0 trn window 7 - Vo control panel, chn category Programs (Unistall a program) (Ch ViewBy l Category), xut hin mn hnh nh sau:

- Xut hin hp thoi

Trang 82

- Chn cc checkbox ging nh hnh trn, nhn ok. - Sau khi chn xong, vo control panel, i ch viewby l Large icons, chn mc Administrative Tools

- Nhn vo mc IIS ta thy xut hin trnh qun ly IIS nh bn di

Trang 83

- Sau khi ci xong IIS, m browser, g localhost vo thanh address ta c kt qu sau:

5.2 nh x ng dng web asp.net MVC C 2 cch: a. Trin khai web mvc ln localhost bng chnh cng c visual studio - Nhp phi chut vo project, chn property
Trang 84

- Xut hin ca s thuc tnh, v cu hnh nh hnh bn di

- Sau khi chn xong, nhn vo nt Create Virtual Directory - Kt qu sau khi visual studio thc hin a web ln localhost.

Trang 85

b. Trin khai web trn localhost bng trnh qun l IIS - Vo trnh qun l IIS, chn nh hnh bn di

Trang 86

- Nhp thng tin nh bn di

- Sau khi nhp xong thng tin, nhn ok, sau nhp phi vo th mc va mi to, v chn Convert to Application.

Trang 87

- Cui cng, nhp phi chut vo ng dng web nh hnh bn di, v ta thu c kt qu nh cch lm 1.

6. Tch hp Ajax vo ASP.NET MVC 6.1 Ajax l g ?

Asynchronous JavaScript and XML AJAX l k thut to ra trang web nhanh v ng. AJAX cho php trang web update bt ng b bi s thay i mt s lng nh ca d liu vi thng tin c ly t server. Ngha l n c th upadate mt phn trang web m khng cn load li trang. Cc ng dng s dng ajax: Google Maps, Gmail, Youtube, and Facebook tabs.

6.2 Ajax hot ng nh th no ?

Trang 88

6.3 Ajax s dng kt hp ca a. i tng chnh ca AJAX l XMLHttpRequest. - Hu ht cc trnh duyt iu h tr i tng XMLHttpRequest(IE5 v IE6 s dng ActiveXObject) - i tng XMLHttpRequest c s dng request thng tin t server. - to i tng XMLHttpRequest cho cc trinh duyt bn s dung don code sau
function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET",url,false); xmlhttp.send(null); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("GET",url,false); // Do not send null for ActiveX xmlhttp.send(); } document.getElementById('test').innerHTML=xmlhttp.responseT ext; }

b. JavaScript/DOM : c s dng hin th v tng tc d liu.

Trang 89

c. XML: Thng s dng nh l nh dng truyn d liu. 6.4 Send an AJAX request to a Server gi request n server, bn s dng phng thc open() v send() ca i tng XMLHttpRequest. Method Open(method,url,async) Description Ch ra kiu ca request, url v ch ra request s dng bt ng b hay khng Method : l kiu ca POST, GET. URL : v tr ca file trn server.

Async : ng b hay khng ng b

Send(string)

Send request n server String: ch s dng cho POST request.

Vd: a. GET.
xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send();

nu bn mun send data cho server.

xmlhttp.open("GET","demo_get2.asp? fname=Henry&lname=Ford",true); xmlhttp.send();

b. POST
xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send(); nu bn mun send data cho server. xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.send("fname=Henry&lname=Ford");

Trang 90

6.5 Update Page With the Response From the Server - ly ni dung tr li t server, bn s dng thuc tnh responseText hoc responseXml ca XMLHttpRequest. Property responseText Description Ly d liu tr li t server nh l chui

responseXML

Ly d liu tr li t server nh l XML

Vd: a. Nu d liu tr li t server khng phi l XML th bn s dng thuc tnh responseText.
document.getElementById('test').innerHTML=xmlhttp.responseText ; b. Nu d liu tr li l XML thi bn dng thuc tnh responseXML v bn mun

parse n ra bn c th lm nh sau.
xmlDoc=xmlhttp.responseXML; var txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;

6.6 The onreadystatechange Event: a. The onreadystatechange Event: Khi request c send n server bn mun thc hin mt vai hnh thao tc vi response. + Onreadystatechange l s kin c bt khi readyState thay i + ReadyState cha thuc tnh ca XMLHttpRequest. Property Onreadystatechange Description Lu tr hm, hm ny s c gi t ng khi trng thi ca
Trang 91

readyState thay i.

ReadyState

Cha ng trng thi ca XMLHttpRequest 0: request not initialized 1:server connection established 2:request received 3:processing request 4:request finished and response is ready

Status

200: Ok 400:Page not found

b. AJAX - Creating a Callback Function - To ra mt hm callback s kim tra nu kt qu tra li sng sng s l.
function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); // set the callback function xmlhttp.onreadystatechange=stateChange; xmlhttp.open("GET",url,true); xmlhttp.send(null); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // set the callback function xmlhttp.onreadystatechange=stateChange; xmlhttp.open("GET",url,true); xmlhttp.send(); } } Trang 92

- Hm callback c ng k thng qua thuoc tnh onreadystatechange ca XMLHttpRequest - Hm callback thi tng t nh sau.
function stateChange() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { // process whatever has been sent back here document.getElementById('test').innerHTML=xmlhttp.responseT ext; } else { alert("There was a problem in the returned data"); } } }

vd:
<html> <head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=stateChange; xmlhttp.open("GET",url,true); xmlhttp.send(null); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=stateChange; xmlhttp.open("GET",url,true); xmlhttp.send(); } } Trang 93

function stateChange() { if (xmlhttp.readyState==4) { if (xmlhttp.status==200) { // process whatever has been sent back here document.getElementById('test').innerHTML=xmlhttp.responseT ext; } else { alert("There was a problem in the returned data"); } } } </script> </head> <body> <div id="test"> <h2>Let AJAX change this text</h2> </div> <button type="button" onclick="loadXMLDoc('test1.txt')">Click Me</button> <button type="button" onclick="loadXMLDoc('test2.txt')">Click Me</button> </body> </html>

* AJAX AND CLIENT SCRIPT a. V sao bn nn s dng javascript toolkit - C bn, javascript v ajax l cng vic kh, gim bt s kh khn cho cng vic bn c th s dng toolkit ca mt hng th 3 nh l jQuery, Prototype, MooTools, hoac Rico ni n cung cp mt lp tri tng lm mt vi nhim v ph bin - Vd cp nht mt phn ca trang m khng cn phi load ton b trang - Trong s cc javasscript toolkit th Jquery c nh gi l tt nht v th Miscrosoft s tch hp n vo visual studio trong cc phin bn sau

Trang 94

- Mt vi nh pht trin cha bt kp vi su hng ny, v vn cn trnh s dng javascript toolkit hoc javascript, trong nhiu trng hp, javascript th kh tch hp vo trong cc ng dng webforms truyn thng vi hu ht cc th vin javascript ca hang th 3. - Trong asp.net mvc nhng thch thc n gin khng cn tn ti, v th bn c th s dng bt ki th vin javascript no. S la chn ca bn c th hin .

b. ASP.NET MVCs Ajax Helpers * Mvc cung cp mt t HTML helper bn c th d dng thc hin vic cp nht mt phn trang vi s c ch bt ng b a. Ajax.ActionLink() s to ra tag link, tng t nh tc Html.ActionLink(). Khi bn click vo link kt th n s fetches v chn n dung mi vo trang html tn ti b. Ajax.BeginForm() s to ra HTML form, tng t nh Html.BeginForm(). Khi bn submited th n s fetches and chn ni dung m vo trang html tn ti c. Ajax.RouteLink() tng t nh Ajax.ActionLink() d. Ajax.BeginRouteForm() tng t nh Ajax.BeginForm() * Fetching Page Content Asynchronously Using Ajax.ActionLink Trc khi bn c th s dng nhng helper bn phi tham chiu n 2 file javascript - Ch ra ajax.* helper - Th vin ASP.NET AJAX Mt nh 2 file cha trong folder /script ca bt c mt project ASP.NET MVC
Trang 95

Nhng bn cn cn add tag <script> vo phn head ca trang view hoc master page Vd:
<html> <head runat="server"> <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script> <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script> </head> </html> Vd <h2>What time is it?</h2> <p> Show me the time in: <%= Ajax.ActionLink("UTC", "GetTime", new { zone = "utc" }, new AjaxOptions { UpdateTargetId = "myResults" }) %> <%= Ajax.ActionLink("BST", "GetTime", new { zone = "bst" }, new AjaxOptions { UpdateTargetId = "myResults" }) %> <%= Ajax.ActionLink("MDT", "GetTime", new { zone = "mdt" }, new AjaxOptions { UpdateTargetId = "myResults" }) %> </p> <div id="myResults" style="border: 2px dotted red; padding: .5em;">

Results will appear here

</div> Trang 96

<p> This page was generated at <%= DateTime.UtcNow.ToString("h:MM:ss tt") %> (UTC) </p>

-Vi mi link s request d liu t action method gi l Getime ( trong cung mt controller), v truyn i s l zone, link ny s ly d liu response t server v thay th ni dung ca th div c id l myResults. -Nu bn click vo link, s khng c s kin gi xy ra, trnh duyt s request bt ng b nhng khng c action method gi l GetTime, v th server s tr li li 404(thng ip s khng c hin th ). cho n lm vic bn phai to ra mt action method tn l GetTime() nh su.
public string GetTime(string zone) { DateTime time = DateTime.UtcNow.AddHours(offsets[zone]); return string.Format("<div>The time in {0} is {1:h:MM:ss tt}</div>", zone.ToUpper(), time); } private Dictionary<string, int> offsets = new Dictionary<string, int> { { "utc", 0 }, { "bst", 1 }, { "mdt", -6 } };

- Ch khng c gi c bit cho action method. N khng cn bit l service bt ng b n nh l mt phng thc bnh thng.

Trang 97

Trang 98

c. Passing Options to Ajax.ActionLink -Ajax.ActionLink() c mt vi overload, hu ht chng thi tng ng vi mt vi html.ActionLink

Trang 99

-Cc thuc tnh ca Ajax.ActionLink() Thuoc tinh Kieu du lieu Mo t

Confirm

string

Nu ch ra, trnh duyt se yu cu user xc nhn, request bt ng b ch c thc hin khi user nhn ok

httpmethod

string

Ch ra method ca resquest bt ng b, n th khng gii hn cho Get v Post, bn cng c th s dng nhng phng thc khc ca http vd Put hoc Delete

InsertionMode

insertionMode(enum) Liu c thay th ni dung ca phn t ch(thay th defualt) hay l b sng ni dung mi ti vi tr pha trn phn t (insertBefore) hoc pha i(insertAfter) Nu ch ra id ca phn t html s c hin th Tn ca hm javascript s c gi trc khi request bt ng b bt u, bn c th hy request bt ng b bi cch tr li false tn c hm javascript se duoc goi khi request bt ng b c hon thnh, bt chp n co thnh cng hay khng Tn hm javascrip s c gi khi request bt ng b c hon thnh vi s kin l thnh cng xy ra sau s kin OnComplete

LoadingElementid String OnBegin String

OnComplete

string

OnSucess

String

OnFailure

String

Tn ca hm javascript s c gi khi request bt ng b hon thnh vi s kin l fail, c gi sau s kin OnComplete Ch ra id ca the html, ni ni dung t server se c ghi vo

UpdateTargelid url

String String

Trang 100

d. Running JavaScript Functions Before or After Asynchronous Requests - Bn c th s dng OnBegin, OnComplete, OnSuccess v OnFailure to s l request bt ng b. Th t l OnBegin ->OnComplete->OnSuccess hoc OnFailure. Bn c th hy b chui ny bng cch tr li false t OnBegin hoc OnComplete. -Khi bt k mt ca bn hm c gi, chng s nhn mt i s m t mi th vi s kin . -Vd: hin th li khi request b li, bn c th lm nh sau
<script type="text/javascript"> function handleError(ajaxContext) { var response = ajaxContext.get_response(); var statusCode = response.get_statusCode(); alert("Sorry, the request failed with status code " + statusCode); } </script> <%= Ajax.ActionLink("Click me", "MyAction", new AjaxOptions { UpdateTargetId = "myElement", OnFailure = "handleError"}) %>

i s ajaxContext c cc method get_date(), get_insertionMode(), get_loadingElement(), get_Request(), get_Response(), get_updateTarget(). Nhng phng thc bn s dng nhn nhng thng tin ca ng cnh hin ti Tn hm get_data() get_insertionMode() M t Ly ton b html tr li t server( nu request thnh cng) La chn insert default, top,sau. Kiu tr li String 0,1,2 Dom element

get_loadingElement() thnh phn html tng ng loadingElementid get_request Xut ra request asp.net ajax

Trang 101

get_response() get_updateTarget()

Ly response ca server Th html tng ng cp nht ni dung Dom element

e. Detecting Asynchronous Requests -Bn c th ly ni dung html t bt ki mothed, v bn ko cn bit hoc lo lng n l dch v request bt ng b hay khng -D dang xc nh request bt ng b, v mi ln MicrosoftMvcAjax.js to ra mt request bt ng b n cng thm mt i s t bit c gi l X-Requested-With vi gi tri l XMLHttpRequest. -Cch n gin xc nh n bng cch gi phng thc IsAjaxRequest() trong HttpRequestBase. -Vd
public ActionResult GetTime(string zone) { DateTime time = DateTime.UtcNow.AddHours(offsets[zone]); if(Request.IsAjaxRequest()) { // Produce a fragment of HTML string fragment = string.Format("<div>The time in {0} is {1:h:MM:ss tt}</div>", zone.ToUpper(), time); return Content(fragment); } else { // Produce a complete HTML page return View(time); } }

f. Submitting Forms Asynchronously Using Ajax.BeginForm

Trang 102

-i khi bn mun bao gm d liu ngi dng nhp vo trong request bt ng b, cho trng hp ny bn c th s dng Ajax.BeginForm(). N tng t nh Html.BeginForm(), b sng thm AjaxOptions nh bn 12.1 -Vd: bn c th cp nht v d trc vi view template nh sau
<h2>What time is it?</h2> <% using(Ajax.BeginForm("GetTime", new AjaxOptions { UpdateTargetId = "myResults" })) { %> <p> Show me the time in: <select name="zone"> <option value="utc">UTC</option> <option value="bst">BST</option> <option value="mdt">MDT</option> </select> <input type="submit" value="Go" /> </p> <% } %> <div id="myResults" style="border: 2px dotted red; padding: . 5em;"> Results will appear here </div> <p> This page was generated at <%= DateTime.UtcNow.ToString("h:MM:ss tt") %> (UTC) </p>

-Vi khng c thay i action method GetTime() Bn c kt qu nh sau

Trang 103

g. Invoking JavaScript Commands from an Action Method -Nh bn c bit mvc gm c kiu tr v ca action method l javaScriptResult. N cho php bn tr li mt cu lnh javascrip t action method. -Asp.net mvc c xy dng ajax.* helper cho bn lm iu ny v chng s thc thi cu lnh javascript ca bn thy v chn ni dung vo DOM. Ci ny th hu dng khi bn thc hin mt vai hnh ng server v mun cp nht DOM ca pha client cho ph hp d liu server. Vd:
<h2>List of items</h2> <div id="message"></div> <ul> <% foreach (var item in Model) { %> <li id="item_<%= item.ItemID %>"> <b><%= item.Name %></b> <%= Ajax.ActionLink("delete", "DeleteItem", new {item.ItemID}, null) %> </li> <% } %>

Trang 104

</ul><i>Page generated at <%= DateTime.Now.ToLongTimeString() %></i>

- Khi user click vo link delete, n s to ra mt request bt ng b n server v gi action method DeleteItem, v truyn itemId cho n. Action method n s yu cu model layer xa item m request cung cp v su bn mun client cp nhat li DOM. Bn vit code cho DeleteItem nh sau:
[AcceptVerbs(HttpVerbs.Post)] // Only allow POSTs (this action causes changes) public JavaScriptResult DeleteItem(int itemID) { var itemToDelete = GetItem(itemID); // TODO: Actually instruct the model layer to delete "itemToDelete" // Now tell the browser to update its DOM to match var script = string.Format("OnItemDeleted({0}, {1})", itemToDelete.ItemID, JavaScriptEncode(itemToDelete.Name)); return JavaScript(script); } private static string JavaScriptEncode(string str) {

Trang 105

// Encode certain characters, or the JavaScript expression could be invalid return new JavaScriptSerializer().Serialize(str); }

client bn to ra hang OnItemDeleted nh sau

<script type="text/javascript"> function OnItemDeleted(id, name) { document.getElementById("message").innerHTML = name + " was deleted"; var deletedNode = document.getElementById("item_" + id); deletedNode.parentNode.removeChild(deletedNode); } </script>

7. S dng jQuery trong ASP.NET MVC 7.1 Referencing jQuery Vi mi project ASP.NET MVC iu c include th vin jquery trong folder /Script. Ging nh nhiu th vin javascript khc, n nh l mt file .js. s dng n, bn cn tham chiu n n. Vd: bn chn don code ny vo trang master page hoac view don the head
Trang 106

<head runat="server"> <script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script> <!-- Leave rest as before --> </head>

7.2. Basic jQuery Theory Hm quan trng ca jquery l Jquery(). Bn c th s dng n query tt c cc thnh phan DOM trong trang HTML kt vi vi css. Vd: jQuery(DIV.MyClass) n s tm tt c th div trong trang ca bn c s dng class css l MyClass. jQuery() s tr li object ca javascript. Hu ht jQuery API gm mt tp hp ca nhng thng thc wrapped. Vd Jquery(DIV.MyClass).hide() lm cho tt c cc th dia kt hp vi class css l MyClass bin mt. Cho tin l jQuery cung cp mt cu trc ngn gn l $(), n th chnh tng t nh jQuery(). Vd: $(P SPAN).addClass(SuperBig) cng class css SuperBig vo tt c tt c cc th <span> c cha trong th <p> $(.SuperBig).removeClass(SuperBig) removes class css c tn l SuperBig t cc tag c class css l SuperBig $(#options).toggle(). Bt tt hin th phn t vi id ca tag l option. Nu tag ang hin th th n se n tag i v ngc li n se hin tag ln. $(DIV:has(INPUT[type=checkbox]:disabled)).prepend(<i>Hey!</i>) chn tag <i>Hey!</i> vo au ca tat c cc the div cha checkbox c disable $(#options A).css(color,red).fadeOut() tm tt c cc th lin kt <a> c id l option, thay th color ca text thnh mu v thay i opactiy v 0. Nh bn thy n tht s l ngn gn. Nu khng s dng jQuery thi bn phi vit rt nhiu code ca javascript. jQuery cng h tr css 3 cho selector bt chp l trnh duyt c h tr hay khng. 7.3 Waiting for the DOM -Hu ht cc trnh duyt s run code javascript hay khi phn tch c php ca trang, trc khi load trang c hon thnh. N c nhng kh khn, bi v nu bn t code
Trang 107

javascript vo u ca trang bn trong tag <head>, khi code ca bn s ko ngay lp tc thao tc n nhng tc html cui trang, vi vy n s khng nh mun ca bn -Truyn thng, nhng nh pht trin s gii quyt vn ny bng cch khi to code ca bn da vo s kin onload ca tag <body>. Nh vy code ca ban ch s run khi trang c load hon ton. Nhng n cng c nhng hn ch. Th <body> ch c duy nht mt thuc tnh onload, v th bn khng th kt hp nhiu code c lp vi nhau. Onload handler phi ch cho tt c cc DOM c load, gm c media(image). Nh vy n s lm cho chm trang ca bn

-Gii quyt vn ny tt hn l ni cho trnh duyt bit l run code ca bn sm nht khi m DOM sng sng v khng c ch cho media. lm iu bn lm nh su.
<script> $(function() { // Insert your initialization code here }); </script>

- Bn truyn hm javasript cho hm $(). Bn ng k n thc hin sm nht khi m DOM sng sng. Bn c th ng k nhiu hm bn thch, tuy nhin thng th c mt hm $(function(){.}); ny ti v tr top ca view hoac control template, v bn t tt c nhng tc ng jQuery ca bn vo . 7.4. Event Handling - Jquery gii quyt vn v cc api khac nhu ca cc trnh duyt. Jquery cung cp mt mt lp tri tng cc hm javascript API c th lm vic nh nhu trn bt k trnh duyt no Vd: $("img").click(function() { $(this).fadeOut() }) Khi bn click vo image thi hm fadeOut() se c gi 7.5. Global Helpers - jQuery cung cp mt vi thuc tnh v hm ton cc n gin ha Ajax v lm vic vi nhiu trnh duyt v nhng mode khac.

Trang 108

-Vd: mt vi helpers khc l

method

Description

$.browser

Cho bn bit trnh duyt gi th ang c s dng. Bn s tm thy mt ca nhng ci sau s nhn c kt qu l true: $.browser.msie, $.browser.mozilla, $.browser.safari, $.browser.opera.

$.browser.version

Cho bn bit version ca trnh duyt dang s dng

$.support

Xc nh liu trnh duyt c h tr mt vi thuc tnh khc hay khng

$.strim(str) $inArray(val,arr)

Tr li chui str vi xa i khon trng au v cui Tr li v tr u tin ca val trong mang arr. jQuery cung cp hm ny bi v internet Explorer version 7 khng cung cp hm array.indexOf()

- y khng phi l tp hp y ca nhng hm v thuc tnh helper m jQuery cung cp, nhng tp hp y tht s th kh nh.

7.5. Adding Client-Side Interactivity to an MVC View - Gi s bn c class MountainInfo c nh ngha nh sau
public class MountainInfo { public string Name { get; set; } public int HeightInMeters { get; set; } }

-Bn s to ra mt tp hp i tng Mountaininfo nh sau.

Trang 109

<h2>The Seven Summits</h2> <div id="summits"> <table> <thead><tr> <td>Item</td> <td>Height (m)</td> <td>Actions</td> </tr></thead> <% foreach(var mountain in Model) { %> <tr> <td><%= mountain.Name %></td> <td><%= mountain.HeightInMeters %></td> <td> <% using(Html.BeginForm("DeleteItem", "Home")) { %> <%= Html.Hidden("item", mountain.Name) %> <input type="submit" value="Delete" /> <% } %> </td> </tr> <% } %> </table> </div>

-N th khng tuyt vi nhng n vn thc thi tt, khng c javascript no c gi. v

Trang 110

- DeleteItem() action method se hin th v thc thi nh sau:

- thc hin nt Delete n thng s dng nhiu forms vi mi nut Delete th c kt hp vi <form>, v th n c th to ra HTTP POST vi khng c javascript cho nhng URL vi item c delete. By gi chng ta s nng cp n trong 3 cch.

Trang 111

7.6. Improvement 1: Zebra-Striping -y l quy c ph bin ca thit k web, cc hng lun phin nhu thi c mu khc nhau. - lm iu trong bn inh ngha mt class css v su bn la chn b sung class vo nhu sau
<% int i = 0; %> <% foreach(var mountain in Model) { %> <tr <%= i++ % 2 == 1 ? "class='alternate' " %>>

-V bn chn on code vo <head> cua trang

<script type="text/javascript"> $(function() { $("#summits tr:nth-child(even)").css("background-color", "silver"); }); </script>

7.7 Improvement 2: Confirm Before Deletion -Trc khi bn thc hin hnh ng m khng th phuc hi li th tt nht bn nn cung cp cho ngi dng mt cnh bo trc khi bn thc hin hnh ng. Nh l bn cn cnh bo trc khi thc hin xa item. Bn khng cn phi add s kin Onclient() or Onsubmit vo th hmt m bn s dung jquery nhu sau -Bn add khi code ny vo tag <head> ca trang
Trang 112

$("#summits form[action$='/DeleteItem']").submit(function() { var itemText = $("input[name='item']", this).val(); return confirm("Are you sure you want to delete '" + itemText + "'?"); });

7. 8 Improvement 3: Hiding and Showing Sections of the Page -Mt ci b quyt ph bin khc l n mt on nht nh no ca trang cho ti khi bn bit cht chn n c lin quan ti ngi s dng. -Vd: bn mun ct certain trong grid thi n hoc hin tng ng cho check box. N s vt v cho mt kin trc bnh thng nu bn lm iu trn server( asp.net Webform), nu bn lm iu client bn s phi ch n trnh duyt ang chy. -Nhng bn c th b qua vn . jQuery to n kh l n gin. bn b sung code vao phn <head> ca trang.
$("<label><input id='heights' type='checkbox' checked='true'/>Show heights</label>") .insertBefore("#summits") .children("input").click(function() { $("#summits td:nth-child(2)").toggle(); }).click();

Trang 113

7.9 Client/Server Data Transfer with JSON -Thng thng bn khng ch cn truyn d liu n v cho client. Bn c co truyn i tng, mng nhng i tng, hoc l i tng graph. JSON l mt nh dng ph hp cho vic ny. -ASP.NET MVC c h tr cho vic truyn d liu JSON v jQuery c h tr cho vic nhn JSON. -Action method tr li JSON.
public class StockData { public decimal OpeningPrice { get; set; } public decimal ClosingPrice { get; set; } public string Rating { get; set; } } public class StocksController : Controller { public JsonResult GetQuote(string symbol) { // You could fetch some real data here

Trang 114

if(symbol == "GOOG") return new JsonResult { Data = new StockData { OpeningPrice = 556.94M, ClosingPrice = 558.20M, Rating = "A+" }}; else return null; } }

- client bn c th ly c chui JSON s dng $.get() or $.post, v sau phn tch n thnh i tng javascript bi gi hm eval(). Tuy nhin c cch d dng hn jQuery c h tr cho vic ly v phn tich JSON vi hm $getJSON().

<h2>Stocks</h2> <% using(Html.BeginForm("GetQuote", "Stocks")) { %> Symbol: <%= Html.TextBox("symbol") %> <input type="submit" /> <% } %> <table> <tr><td>Opening price:</td><td id="openingPrice"></td></tr> <tr><td>Closing price:</td><td id="closingPrice"></td></tr> <tr><td>Rating:</td><td id="stockRating"></td></tr> </table> <p><i>This page generated at <%= DateTime.Now.ToLongTimeString() %></i></p>

-Sau bn hijaxing code hin th thuc tnh ca StockDate vo table

Trang 115

$("form[action$='GetQuote']").submit(function() { $.getJSON($(this).attr("action"), $(this).serialize(), function(stockData) { $("#openingPrice").html(stockData.OpeningPrice); $("#closingPrice").html(stockData.ClosingPrice); $("#stockRating").html(stockData.Rating); }); return false; });

7.10 Fetching XML Data Using jQuery -Nu thch hn bn c th s dng nh dng xml thay cho nh dng JSON cho v d trn. Khi m bn nhn d liu xml, n th d hn cho vic dung jQuery $.ajax() thay cho $.get(). B v $.ajax() cho php bn s dung datatype:xml la chon ny ni cho bit phan tnh cu trc nh l xml. -u tin bn cn tr li XML t action method. -Vd: bn thay i action method cho cho vd trc nh sau

Trang 116

public ContentResult GetQuote(string symbol) { // Return some XML data as a string if (symbol == "GOOG") { return Content( new XDocument(new XElement("Quote", new XElement("OpeningPrice", 556.94M), new XElement("ClosingPrice", 558.20M), new XElement("Rating", "A+") )).ToString(), System.Net.Mime.MediaTypeNames.Text.Xml); } else return null; }

-Action method s tr li XML nh sau

<Quote> <OpeningPrice>556.94</OpeningPrice> <ClosingPrice>558.20</ClosingPrice> <Rating>A+</Rating> </Quote>

-Tip theo bn ni cho jQuery s thng dch n nh l XML thay vi cho JSON.
$("form[action$='GetQuote']").submit(function() { $.ajax({ url: $(this).attr("action"), type: "GET", data: $(this).serialize(), Trang 117

dataType: "xml", // Instruction to parse response as XMLDocument success: function(resultXml) { // Extract data from XMLDocument using jQuery selectors var opening = $("OpeningPrice", resultXml).text(); var closing = $("ClosingPrice", resultXml).text(); var rating = $("Rating", resultXml).text(); // Use that data to update DOM $("#openingPrice").html(opening); $("#closingPrice").html(closing); $("#stockRating").html(rating); } }); return false; });

8. Kt hp gia MVC v WebForms (s dng cc k thut webform vo trong ng dng MVC nh vic s dng cc control ch ph hp vi webform,): pht trin webform ln m hnh MVC, chng ta cn thc hin cc bc nh sau:
nh x n 3 th vin chun trong m hnh MVC gm: System.Web.Mvc,

System.Web.Routing, v System.Web.Abstraction vo trong th mc \bin. Trong , System.Web.Mvc nm trong th mc C:\Program Files\Microsoft ASP.NET\ASP.NET MVC 2\Assemblies, 2 files cn li nm trong th mc C:\Program Files\Reference Assemblies\Microsoft\Framework\v3. Sau , ta ch cn nh x n n bng cch:

Trang 118

 B sung thm hai th mc l Controllers v Views cp nht t webform ln m hnh MVC chng ta b sung thm mt s file(s) cn thit nh sau:

Cp nht file Web.config np 3 th vin ng ti thi im chy bng vic ng k

UrlRoutingModule

Trang 119

Bc 1: Thay i ni dung th Compilation nh hnh bn di, bc ny m bo cc assembly c yu cu s c tham chiu n trong qu trnh bin dch (make sure that each required assembly is referenced for compiltion).

Bc 2: Thm tham chiu namespace n section system.web/pages, iu ny cho php truy xut n cc System.Web.Mvc helpers, System.Linq, v System.Collections.Generic t ViewPage.

Cui cng, chng ta cn ng k UrlRoutingModule HttpModule. Module ny c tc dng so khp URL t request n nhng Route thch hp chng hn nh Controller/Action.

Sau khi thit lp xong cc thuc tnh, chy th ng dng web, ta thu c kt qu nh sau:

Trang 120

* Kt hp Webform v MVC Bc 1: to mt trang .aspx c ni dung nh bn di

Bc 2: Vit s kin code behind cho trang .aspx ny.

Trong Controller Home ta khai bo s dng nh sau:

Trang 121

Trang 122