Trang 1

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 2
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 3
1. Con ng pht trin Web
Thi gian Cng ngh Sc mnh Yu im
Jurassis CGI n gin (la chn duy
nht vo thi im ny)
Chy bn ngoi web
server
Bronze age IDC (Microsoft Internet
database connector)
Chy bn trong server Ch l ng gi nhng
cu truy vn SQL v
template cho cc kt
qu c nh dng.
1996 ASP (Active Server
Page)
Mc ch chung Thng dch thi gian
thc
2002/ 2003 ASP.NET 1.0/1.1 - Giao din c
trng thi
- c bin
dch
- khuyn khch
lp trnh hng i
tng.
- Cu trc file ln
- Chim nhiu
bandwidth.
- HTML kh nhn
- Khng kh
nng test.
2005 ASP.NET 2.0
2007 ASP.NET Ajax
2008 ASP.NET 3.5
* 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 4
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 5
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 ).


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



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 9
Trang 8

Hnh 2.5: ng dng mc nh do visual to ra

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.
2.4 So snh gia ASP.NET webform v ASP.NET MVC

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

Trang 11

- 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

V d:
expression) tham chiu n mt mng hay tp hp no .

Trang 12

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
+ Enhanced Model Validation support both server and client thng qua b
liu action (GET, POST, PUT, DELETE) no s c thc thi .

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

+ 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.
+ Lots of new helper functions, utilities, and API enhancements

Trang 14

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

+ Bc 2: To action Create()


+ Bc 3: To trang View

Trang 16

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

Chy th v thu kt qu
+ Bc 4: Chy v kim tra kt qu
tham chiu javascrip l

Trang 17

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 18

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

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:
website th cotroller s p ng bng vic gi action About()

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

Hnh 3.3: code tr v mt ViewResult

Hnh 3.4: code tr v mt RedirectResult
c. Tr v mt ContentResult
a. Tr v mt ViewResult
b. Tr v mt Redirect Result

Trang 20

Hnh 3.5: 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
d. Tr v mt fileResult
Hnh 3.6: code tr v mt ContentResult

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

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.
khi thc thi request Ajax nh sau:

Trang 22

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


V d:
action s khng c yu cu
Hnh 3.11

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

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
li ny bng cch ghi phng thc HandleUnknownAction()
Hnh 3.12

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


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

Hnh 3.20 Cch to ViewData trong controller
Hnh 3.2 1 Cch dng ViewData trong View

Trang 27

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

Hnh 3.23 Cch to strongly typed view

Trang 28
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 29

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

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 32
Hnh 3.35
- To strongly-typed view v trong View Content chn List, nhn
Trang 33
Add

Hnh 3.36

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

Hnh 3.38
- Kt qu
- To strongly-typed view v trong View Content chn List, nhn
Trang 34
Details

Hnh 3.39

Hnh 3.40
c. To mi mu tin

Hnh 3.41
- Kt qu
- Nhp phi chn add view cho action Create trong controller
- To strongly-typed view v trong View Content chn List, nhn
Trang 35
Create

Hnh 3.42

Hnh 3.43

Hnh 3.44
d. Chnh sa mu tin
- in thng tin sn phm mi
- Kt qu

Trang 36

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
- Nhp phi chn add view cho action Edit trong controller

Trang 37

Hnh 3.48
- Kt qu sau khi chnh sa

Hnh 3.49
e. Xa mu tin

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

Hnh 3.51
- Nhp phi chn add view cho action Delete trong controller

Trang 38

Hnh 3.52

Hnh 3.53

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.
- Kt qu trc khi xa
- Xem thng tin mu tin trc khi xa
- Kt qu sau khi xa

Trang 39
- 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 40
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:

- Update lp Product nh sau :
- Tham chiu n th vin System.Data.Linq

Trang 41

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 42

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


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
g. Chy th ta c kt qu
Controller
Bc 1: khi to i tng kt ni c s d liu

Trang 43

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)



c. Thm mi sn phm
- Khai bo action Create() trong controller CRUD
trong lp SqlProductRepository nh sau:
- Khi thc hin thao tc update c s d liu ta thc hin nh sau :
- Kt qu

Trang 44

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


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


- Kt qu t c sau khi thm mi l :
- Khai bo s dng trong action Delete ca controller CRUD

Trang 45

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

- 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:
- Kt qu khi chy chng trnh
- Khi to mi mt ng dng ASP.NET MVC, ta c file Global.asax nh sau :

Trang 46

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

Bi v, /DailySpecials/March-31 ph hp vi route u tin nn route u tin s
c thc hin.
kim tra tng route, v dng khi c route u tin ph hp.

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


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.
- Kt qu ta c c ni dung trang master page nh sau :

Trang 49

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


c. Thit lp master page t Controller: S thun li ca phng thc ny
- Kt qu thu c l :

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


d. Cc trang master page lng nhau:
- Bc 2: Chy th v thu c kt qu sau

Trang 51



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

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 4: chy th v thu c kt qu

Trang 53

- Bc 3: Ly d liu trong view

- Bc 2: To controller k tha t controller trn

Trang 54

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

- Bc 4: Kt qu thu c

Trang 55

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

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

Trang 56

b. Truyn d liu t controller n ViewUserControl

- V kt qu thu c l
- Bc 1: Thay i ni dung trang user view control nh bn di

Trang 57

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
- Bc 2: Kt qu thu c

Trang 58


- Bc 4: kt qu thu c
Bc 3: To mt view user control dng tr v mt hng trong table

Trang 59

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 60
+ 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 61

- 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 2: khai bo s dng trong View
+ Bc 1: Xy dng mt danh sch cc phn t cho dropdownlist

Trang 62


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:

2. cc view c th nhn thy cc phng thc helper bn va mi to,
c 2 cch thc hin

+ cch 2: import trc tip vo trong view cn s dng helper bn va mi
to
+ Bc 3: Kt qu
1 . Xy dng phng thc nutSubmit() tnh thuc lp Helpers tnh nh sau:
+ cch 1: khai bo namespace trong file web.config

Trang 63

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

+ bc 2: khai bo s dng trong View


2. S dng lp HtmlTextWriter: HtmlTextWriter c xem nh l s thay th
PageLinks()
+ bc 3: kt qu t c

Trang 65
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 2: Khi to d liu

+ Bc 3: khai bo s dng trong View
+ Bc 1: Xy dng phng thc helper BulletedList( )

Trang 66


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.
+ Bc 4: Kt qu

Trang 67


+ Bc 3: nhp th d liu l kim tra kt qu
+ Bc 2: Khai bo form nhp liu.

Trang 68

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


* 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

Trong ,
controller
+ Bc 3: Chy th v c kt qu nh sau :
tr d liu khng hp l nh sau:

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

- 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

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.
trn form i vi thuc tnh ny v d nh:
thuc tnh exclude na

Trang 73

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

c. S dng HTTP Posted file da trn Model Binder: Model binder ny
Trong action ny, chng ta s kt hp cc field ca form vi i tng ca class Product
UpdateModel() vn lm vic.

Trang 74


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,
cho php ta truyn file c upload n mt controller action.

Trang 75



3.10 Chng thc Users
a. To users
- Chng thc users c s dng khi chng ta ch cho php cc user hp
OnResultExecuted, OnResultExecuting
+ Bc 2: Khai bo s dng trong Controller
+ Bc 3: Chy ch debug, ta c kt qu nh sau :

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

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
mun chng thc ch i vi mt s user no ta dng nh sau:

Trang 78
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 79
- 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

+ 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
- Kt qu sau khi to khi test mi

Trang 80

3. Thay i class class tr thnh public

* 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.
4 . Thm thuc tnh TestClass vo lp mi to

Trang 81
+ 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 82



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

Trang 83
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 84

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

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


- Sau khi chn xong, nhn vo nt Create Virtual Directory
- Kt qu sau khi visual studio thc hin a web ln localhost.
- Xut hin ca s thuc tnh, v cu hnh nh hnh bn di

Trang 87

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

Trang 88

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

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 90

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 91
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 92
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 93
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 94
{
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 95
// 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 96

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" >
S l a chn ca bn c th hin .

Trang 97
<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 98
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 99


Trang
100

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

Trang
101
- 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
102
- 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
thnh cng)
String
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
103
-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
104
< 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
105
-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
106
[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
107

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
108
$(.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
109
- 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 110
110
- 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 111
111
< % } % >
< /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 112
112
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 113
113
- 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 114
114

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 115
115
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 116
116
$.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 117
117
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 118
118
$("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 119
119
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

truy xut n cc System.Web.Mvc helpers, System.Linq, v System.Collections.Generic
each required assembly is referenced for compiltion).
Bc 2: Thm tham chiu namespace n section system.web/pages, iu ny cho php

Trang
120

dng so khp URL t request n nhng Route thch hp chng hn nh

sau:
t ViewPage.
Cui cng, chng ta cn ng k UrlRoutingModule HttpModule. Module ny c tc
Controller/Action.
Sau khi thit lp xong cc thuc tnh, chy th ng dng web, ta thu c kt qu nh

Trang
121

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