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

Trang 1
 3.3.3 To Data Model vi Microsoft Entity Framework
3.3.4 S dng Linq to Sql trong ASP.NET MVC

1.5 URLs v Routing

1.6 View Master Page v User Control Page

1.a.1 View Master Page

1.a.2 User Control Page

3.7 HTML Helpers

1.a.1 HTML Helpers l g ?

1.a.2 Cc phng thc c sn trong HTML Helpers

1.a.3 B sung cc phng thc ng trong HTML Helpers

3.8 Validation Form Data

1.a.1 Model State l g ?

1.a.2 Validation Helpers

1.a.3 Validating with the IDataErrorInfo Interface

1.a.4 Style Validation Message

3.9 Model Binders v Action Filters

1.a.1 Model Binders

1.a.2 Action Filters

1.10 Chng thc Users

1.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 Cng ngh Sc mnh Yu im

Jurassis CGI n gin (la chn duy Chy bn ngoi web

nht vo thi im ny) server

Bronze age IDC (Microsoft Internet Chy bn trong server Ch l ng gi nhng

database connector) cu truy vn SQL v
template cho cc kt
qu c nh dng.

1996 ASP (Active Server Mc ch chung Thng dch thi gian

Page) thc

2002/ 2003 ASP.NET 1.0/1.1 - Giao din c - Chim nhiu

trng thi bandwidth.
2005 ASP.NET 2.0
- c bin - HTML kh nhn
2007 ASP.NET Ajax
dch
2008 ASP.NET 3.5 - Khng kh
- khuyn khch nng test.
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 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.

Trang 3
 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 code-
behind 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

- 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

Trang 4
 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 SP 1

+ Microsoft ASP.NET MVC

+ Visual Studio 2008 SP 1

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 ASP.NET 2.0 ASP.NET MVC

Kin trc chng trnh Kin trc m hnh WebForm Kin trc s dng vic phn
Business Database. chia chng trnh thnh
Controllers, Models, Views

C php chng trnh S dng c php ca Cc s kin c iu khin

webform, tt cc s kin v bi controllers, cc controls
controls do server qun l. khng do server qun l.

Truy cp d liu S dng hu ht cc cng Phn ln dng LINQ to SQL

ngh truy cp d liu trong class to m hnh truy cp
ng dng. i tng.

Debug Debug chng trnh phi thc Debug c th s dng cc

hin tt c bao gm cc lp unit test kim tra cc phng
truy cp d liu, s hin th, thc trong controller.
iu khin cc controls/

Tc phn ti. Tc phn ti chm khi Phn ti nhanh hn do khng

trong trang c qu nhiu phi qun l ViewState
cc controls v ViewState qun l cc control trong
qu ln. trang.

Tng tc vi Kh khn D dng

javascript.

URL Address Cu trc a ch URL c Cu trc a ch rnh

dng mch theo dng
Controllers/Action/Id
<filename>.aspx?&<cc tham
s>

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 .

+ Enhanced Model Validation support both server and client thng qua b

Trang 12
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 Kiu tr v

View() ViewResult: miu t mt view ca ASP.NET MVC.

PartialView() PartialViewResult: miu t mt phn(fragment) ca ASP.NET MVC view.

Redirect() RedirectResult: Miu t chuyn hng n controller action hoc URL khc

Content() ContentResult: gi ni dung th v cho trnh duyt.

File() FileResult: miu t mt file c ti xong

RedirectToRoute() RedirectToRouteResult: miu t chuyn hng hot ng n controller action

hoc URL s dng cng gi tr nh tuyn (route )

RedirectToAction() 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 * Nh vy, qua cch

v d trn ta bit c cch hot ng ca controller nhng

Trang 20
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 Hnh 3.12
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
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

Trang 23
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)

Hnh 3.18 Ni dung c bn ca mt view

- Trong view frmDangKi.aspx chng ta va to cha 2 tag <asp:content>,

Trang 24
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

Trang 31
 Hnh 3.35

Trang 32
 - 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 33
 - 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 34
 - 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 35
 - 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 36
 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

Hnh 3.51

Trang 37
 - 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 38
 - 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 39
 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 40
 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 41
 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 42
 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 43
 - 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 44
 - 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 45
 - 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.

Trang 46
 - 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).
- 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.

Trang 47
 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

- 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.

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

- Kt qu thu c l:

c. Thit lp master page t Controller: S thun li ca phng thc ny

Trang 49
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

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

d. Cc trang master page lng nhau:

Trang 50
- Bc 1: To master page 1

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

- Bc 3: to view s dng master page 2

Trang 51
 - Bc 4: chy th v thu c kt qu

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).

Trang 52
- Bc 2: To controller k tha t controller trn

- Bc 3: Ly d liu trong view

Trang 53
 - 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 54
 - 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 55
- 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 56
 - 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 57
 Bc 3: To mt view user control dng tr v mt hng trong table

- Bc 4: kt qu thu c

Trang 58
 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 59
 + 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 60
 - 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 61
 + 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 62
 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

Trang 63
thuc tnh ny khng m ha chui HTML.
+ 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

Trang 64
cho lp TagBuilder m ta xy dng trn, di y l mt s phng thc c bit dnh cho
vic xy dng chui HTML.
+ 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 65
 + 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 66
+ Bc 2: Khai bo form nhp liu.

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

Trang 67
 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 68
 + Bc 2: Khai bo s dng trong action testModelState trong home
controller

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

* 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 ,

Trang 69
 + 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:

- 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:

Trang 70
 - 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:
+ 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

Trang 71
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:

- 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.

Trang 72
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
+ 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

Trang 73
cho php ta truyn file c upload n mt controller action.

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,

Trang 74
OnResultExecuted, OnResultExecuting

+ 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

Trang 75
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)

+ 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

Trang 76
 + 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)

* 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

Trang 77
mi c kh nng s dng action controller no , ta c th s dng tnh nng ny. V d

* 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.

Trang 78
 - C 2 cch chng ta c th to 1 khi test mi
+ 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 79
 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 80
 + 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 81
Vi mc ch trn, ta xy dng khi test nh sau:

Trang 82
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 83
- 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 84
- 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 85
- 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 86
b. Trin khai web trn localhost bng trnh qun l IIS

- Vo trnh qun l IIS, chn nh hnh bn di

Trang 87
- 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.

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

Trang 88
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 89
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.

c. XML: Thng s dng nh l nh dng truyn d liu.

Trang 90
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 Description

Open(method,url,async) 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");
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.

Trang 91
 Property Description

responseText 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 Description

Onreadystatechange Lu tr hm, hm ny s c gi t ng khi trng thi ca

readyState thay i.

Trang 92
 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();
}
}
- 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)

Trang 93
 {
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();
}
}
func
tion
stat
eCha
nge(
)
{
if (xmlhttp.readyState==4)
{
if (xmlhttp.status==200)
{

Trang 94
 // 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</h 2> <
/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 d ng javascript tool kit

- 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
- 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.

Trang 95
 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
Nhng bn cn cn add tag <script> vo phn head ca trang view hoc master
page Vd:

< html >

< head runat="server" >

Trang 96
 <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?</h 2>

< 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:

.5 em;" >

Results will appear here

< /div >

< 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

Trang 97
 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 98
Trang 99
 c. Passing Options to Ajax.ActionLink

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

html.ActionLink

Trang
100
 - 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)

LoadingElementid String Nu ch ra id ca phn t html s c hin th

OnBegin String 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

OnComplete string tn c hm javascript se duoc goi khi request bt ng b

c hon thnh, bt chp n co thnh cng hay khng

OnSucess String 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

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

UpdateTargelid String Ch ra id ca the html, ni ni dung t server se c

ghi vo

url String

d. Running JavaScript Functions Before or After Asynchronous Requests

Trang
101
 - 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 M t Kiu tr li

get_data() Ly ton b html tr li t server( nu request String

thnh cng)

get_insertionMode() La chn insert default, top,sau. 0 ,1, 2

get_loadingElement() thnh phn html tng ng loadingElementid Dom element

get_request Xut ra request asp.net ajax

get_response() Ly response ca server

get_updateTarget() Th html tng ng cp nht ni dung Dom element

e. Detecting Asynchronous Requests

Trang
102
 -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

-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?</h 2> < %

using(Ajax.BeginForm("GetTime", new AjaxOptions {

UpdateTargetId = "myResults" })) { %> < p > Show me

the time in:

< select name="zone" >

< option value="utc">UTC</option >

Trang
103
< 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:

. 5 em;" > 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

g. Invoking JavaScript Commands from an Action Method

Trang
104
 -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</h 2>

< 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 >

< % } % >
</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:

Trang
105
[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)

{
// 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 >

Trang
106
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
< 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 >

Trang
107
 $(.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
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 >

Trang
108
- 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.
- 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) Tr li chui str vi xa i khon trng au v cui

$inArray(val,arr) 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()

Trang
109
- 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.

< h2>The Seven Summits</h 2>

< 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 >

Trang 110
110
 < % } % >

< /table >

< /div >

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

- 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.

Trang 111
111
 By gi chng ta s nng cp n trong 3 cch.
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

Trang 112
112
 - Bn add khi code ny vo tag <head> ca trang
$("#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
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

if(symbol == "GOOG") return new JsonResult {

Data = new StockData {

Trang 114
114
 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</h 2> < % 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

$("form[action$='GetQuote']").submit(function() {

Trang 115
115
 $.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

public ContentResult GetQuote(string symbol)

// Return some XML data as a string

Trang 116
116
 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(),

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 =

Trang 117
117
 $("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:

B sung thm hai th mc l Controllers v Views

Trang 118
118
 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
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

Trang 119
119
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