Chng 2: Tng quan v Asp.

Net MVC 4
ThS. Dng Thnh Pht
Trang 1
Chng 2:
TNG QUAN V ASP.NET MVC 4
2.1 TNG QUAN
ASP.NET MVC 4 l mt framework xy dng cc ng dng web c kh nng
m rng da trn cc tiu chun bng cch s dng cc mu thit k m hnh v sc
mnh ca framework ASP.NET mi. Framework 4 tp trung vo pht trin ng dng
web trn in thoi di ng d dng hn.
Khi to mt d n mi ASP.NET MVC 4 c mt ng dng d n mu in
thoi di ng chng ta c th s dng cho vic xy dng mt ng dng chuyn
dng cho cc thit b di ng. Ngoi ra, ASP.NET MVC 4 tch hp vi gi in thoi
di ng thng qua mt gi NuGet jQuery.Mobile.MVC.
jQuery Mobile l mt framework da trn nn HTML5 pht trin cc ng
dng web tng thch vi tt c cc nn tng thit b di ng ph bin, bao gm c
Windows Phone, iPhone, Android v.v. Tuy nhin, nu chng ta cn chuyn mn ha
cho nhiu loi thit b khc nhau th ASP.NET MVC 4 cng cho php chng ta to cc
View c th khc nhau cho cc thit b khc nhau v cung cp ti u ha thit b c th.
Vi chng ny s bt u vi kiu d n MVC ASP.NET 4 "Internet
Application" to mt ng dng Photo Gallery. Dn dn s nng cp ng dng
bng cch s dng jQuery Mobile v tnh nng mi ca ASP.NET MVC 4 lm
tng thch vi cc thit b di ng khc nhau v cc trnh duyt web ca my tnh.
Chng ta cng s hc cch vit code mi vi ASP.NET MVC 4 d dng hn
cho vic vit cc phng thc hnh ng bt ng b bi s h tr ca cc loi tr v
ActionResult.
2.1.1 Mc tiu
Trong chng ny, chng ta s hc cch:
Tn dng li th ci tin ca cc d n ASP.NET MVC mu, bao gm c cc
mu d n ng dng trn in thoi di ng mi
S dng thuc tnh viewport ca HTML5 v truy vn media ca CSS ci thin
hin th trn cc thit b di ng
S dng jQuery Mobile y nhanh tin i vi vic ti u ha xy
dng giao din cm ng.
To cc giao din cho cc thit b di ng c th.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 2
S dng cc thnh phn chuyn i View chuyn i gia cc View
ca in thoi di ng v my tnh bn trong ng dng
To b iu khin bt ng b s dng h tr cng vic
2.1.2 iu kin tin quyt
Chng ta phi hon thnh cc bi sau y:
Ci t Microsoft Visual Studio Express 2012 for Web
Ci t thit b gi lp Windows Phone Emulator (bao gm trong Windows
Phone 7.1.1 SDK )
Ty chn - WebMatrix 3 vi Electric Plum Simulator iPhone m rng (ch dnh
cho bi 3, c s dng duyt qua cc ng dng web vi gi lp iPhone)
2.1.3 Cc bi tp
[1]. To mi d n ASP.NET MVC 4 kiu Internet Application
[2]. To ng dng web Photo Gallery
[3]. B sung s h tr thm cho cc thit b di ng
[4]. S dng iu khin bt ng b
Lu : Mi bi c i km bi mt th mc End cha cc gii php hon thin.
Chng ta c th s dng gii php ny nh mt hng dn nu chng ta cn gip
thm trong khi thc hin d n.
2.2 Bi 1: D n ASP.NET MVC 4 Internet Application
Trong bi tp ny, chng ta s khm ph nhng ci tin trong mu d n
ASP.NET MVC 4. Ngoi mu ng dng Internet, hin din trong MVC 3, phin bn
ny hin nay bao gm mt mu ring bit cho cc ng dng in thoi di ng. Trc
tin, chng ta s xem xt mt s tnh nng lin quan ca mi mu. Sau , chng ta s
lm vic trn cc trang c sinh ra ca cc phng php tip cn khc nhau.
2.2.1 Nhim v 1: Khm ph mu d n Internet Application
[1]. M Visual Studio .
[2]. Chn File | New | Project menu.
Trong hp thoi New Project , chn mu C # Visual | Web trn bng bn
tri, v chn ASP.NET MVC 4 Web Application. t tn cho d n l PhotoGallery ,
chn mt th mc (hoc mc nh) v nhn OK .
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 3

To mt d n mi
[3]. Trong hp thoi New ASP.NET MVC Project 4, chn mu d n Internet
Application v nhn vo OK . Hy chc chn rng chng ta chn Razor cho View ca
chng ta.

To mt ng dng ASP.NET MVC mi Internet 4
Lu : c php Razor c gii thiu trong ASP.NET MVC 3. Mc tiu ca
n l gim thiu s lng cc k t v s ln bm phm cn thit trong mt tp tin, cho
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 4
php vit m nhanh. Razor da trn k nng lp trnh C#/VB v a ra c php nh du
mu cho php cng vic xy dng HTML tuyt vi.
[4]. Nhn F5 chy gii php v xem cc trang mu. Chng ta c th kim tra
cc tnh nng sau: Cc mu c i mi, cung cp style hin i hn.

Mu ASP.NET MVC 4 thit k li

Trang lin h mi
Hin th thch nghi
Kim tra thay i kch thc ca s trnh duyt v theo di cch b tr trang t
ng iu chnh kch thc ca s mi. Cc mu ny s dng k thut dng hnh thch
ng lm ng trong c hai nn tng my tnh bn v in thoi di ng m khng
c bt k ty chnh.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 5

ASP.NET MVC 4 d n mu trong kch thc trnh duyt khc nhau Giao din
ngi dng phong ph hn vi JavaScript Mt s ci tin i vi cc d n mu
mc nh l s dng JavaScript cung cp tng tc vi JavaScript nhiu hn.
Cc lin kt ng nhp v ng k s dng theo mu ny c th s dng
validations ca jQuery xc nhn cc trng u vo t pha khch hng.

jQuery Validation
Lu : C 2 phn ng nhp, trong phn u tin, chng ta c th ng nhp bng
cch s dng mt ti khon c ng k t trang web v trong phn th hai, chng
ta c th ng nhp bng cch s dng mt dch v xc thc khc nh google (theo mc
nh b v hiu ha).
[5]. ng trnh duyt kt thc trnh g li v tr v Visual Studio.
[6]. M tp tin AuthConfig.cs nm di th mc App_Start.
[7]. B ghi ch ca dng cui cng ng k c vi Google i vi khch
hng xc thc bi OAuth.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 6

Lu : Thng bo chng ta c th d dng cho php xc thc bng cch s dng
bt k dch v OpenID hoc OAuth nh Facebook, Twitter, Microsoft, vv
[8]. Nhn F5 chy gii php v iu hng n trang ng nhp.
[9]. Chn dch v Google ng nhp.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 7

Chn ng nhp dch v
[10]. ng nhp bng cch s dng ti khon Google ca chng ta.
[11]. Cho php website (localhost) ly thng tin t ti khon Google.
[12]. Cui cng, chng ta s phi ng k trong website kt hp vi ti khon
Google.

Lin kt ti khon Google ca chng ta
[13]. ng trnh duyt ngn chn cc trnh g li v tr v Visual Studio.
[14]. By gi khm ph gii php kim tra mt s tnh nng mi khc c
gii thiu bi ASP.NET MVC 4 trong d n mu.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 8

ASP.NET MVC 4 Internet ng dng D n mu
HTML 5 Markup
Duyt cc View mu tm ra cc nh du ch mi.

Mu mi nh du theo Razor v HTML5 (About.cshtml).
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 9
Cp nht th vin JavaScript
Mu mc nh ca ASP.NET MVC 4 hin nay bao gm KnockoutJS, JavaScript
MVVM framework cho php chng ta to ra cc ng dng web phong ph v p ng
cao bng cch s dng JavaScript v HTML. Ging nh trong MVC3, jQuery v
cc th vin jQuery UI cng c bao gm trong ASP.NET MVC 4.
Lu : Chng ta c th nhn c thm thng tin v th vin KnockOutJS trong
lin kt ny:http://learn.knockoutjs.com/ . Ngoi ra, chng ta c th tm hiu v jQuery
v jQuery UI ti http://docs.jquery.com/.
2.2.1 Nhim v 2: Khm ph mu d n Mobile Application
ASP.NET MVC 4 to iu kin cho vic pht trin trang web cho cc trnh duyt
di ng v my tnh bng. Mu ny c cu trc ng dng tng t nh cc mu
ng dng Internet, nhng style ca n c sa i cho ng vi cc thit b di ng c
cm ng.
[1]. Chn File | New | Project menu.
Trong hp thoi New Project , chn mu C # Visual | Web trn phn panel
bn tri, v chn ASP.NET MVC Web Application 4, t tn d n l
PhotoGallery.Mobile , chn mt th mc lu tr (hoc mc nh), chn "Add
Solution "v nhn OK .
[2]. Trong hp thoi ASP.NET MVC Project 4, chn mu d n ng dng di
ng v bm vo OK . Hy chc chn rng chng ta chn Razor cho cc View.

To mt ASP.NET MVC mi 4 ng dng di ng
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 10
[3]. By gi chng ta c th khm ph cc gii php v kim tra mt s cc tnh
nng mi c gii thiu bi gii php trong mu ASP.NET MVC 4 Mobile Application:
Th vin jQuery Mobile
Cc ng dng d n mu in thoi di ng bao gm cc th vin jQuery Mobile,
l mt th vin m ngun m c kh nng tng thch trnh duyt di ng.
jQuery Mobile p dng tng cng tin b i vi cc trnh duyt di ng c h tr CSS
v JavaScript. Tng cng tin b cho php tt c cc trnh duyt hin th ni dung c
bn ca mt trang web c th hin th c ni dung phong ph.
Cc tp tin JavaScript v CSS ca jQuery gip trnh duyt di ng ph hp vi
ni dung trn mn hnh m khng cn thc hin bt k thay i trong nh du trang.

Th vin di ng jQuery trong d n mu
nh du da trn HTML5

Mu Mobile Application cch s dng HTML5(Login.cshtml v index.cshtml)
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 11
[4]. Nhn F5 chy cc gii php.
[5]. M Windows Phone 7 Emulator .
Trong mn hnh bt u in thoi, m Internet Explorer. Kim tra URL my tnh
bn ang duyt v duyt n URL t in thoi (v d nh http://localhost:
[PortNumber]/).
By gi chng ta c th n trang login hoc trang about. Ch rng style ca
trang web da trn ng dng Metro mi i vi in thoi di ng. D n ASP.NET
MVC 4 c hin th ng trn cc thit b di ng, m bo tt c cc thnh phn ca
trang c th nhn thy v kch hot. Ch rng cc lin kt trn tiu ln bm
c.

Cc trang ca d n mu trong thit b di ng
Mu mi cng s dng th meta Viewport . Hu ht cc trnh duyt di
ng xc nh chiu rng ca s cho cc trnh duyt o (viewport) ci m ln hn
chiu rng thc t ca cc thit b di ng.
iu ny cho php trnh duyt di ng hin th ton b trang web bn trong mn
hnh hin th o. Th meta Viewport cho php cc nh pht trin web thit lp chiu rng,
chiu cao v quy m ca khu vc trnh duyt trn cc thit b di ng . Mu ASP.NET
MVC 4 Mobile Application thit lp View vi chiu rng thit b ("width=device-
width") trong Layout ( Views/Shared_Layout.cshtml ), do tt c cc trang s c
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 12
View ca chng vi chiu rng mn hnh in thoi. Ch rng th meta Viewport s
khng thay i View ca trnh duyt mc nh.
M _Layout.cshtml , nm trong th mc Views | Shared, v hy b th
meta Viewport. Chy ng dng v kim tra s khc bit.

Cc trang web sau khi b th meta viewport
Trong Visual Studio, nhn SHIFT + F5 g li cc ng dng.
Phc hi li th meta viewport.

2.2.2 Nhim v 3: S dng sinh giao din thch ng
Trong nhim v ny, chng ta s hc mt phng php khc lm cho trang
web hin th mt cch chnh xc trn cc thit b di ng v trnh duyt web cng mt
lc m khng cn tu bin bt k iu g. Chng ta s dng th meta Viewport
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 13
vi mc ch tng t. By gi chng ta s p ng mt phng php mnh m khc:
sinh giao din thch ng.
Sinh giao din thch ng l mt k thut s dng CSS3 truy vn a phng
tin ty chnh style p dng cho trang. Truy vn a phng tin nh ngha cc
iu kin bn trong bng nh kiu (nhm cc CSS theo mt iu kin nht nh). Ch
khi iu kin l ng s tht, style mi c p dng cho cc i tng k khai.
S linh hot c cung cp bi k thut sinh giao din thch ng cho php ty
chnh bt k th g hin th cc trang web trn cc thit b khc nhau. Chng
ta c th nh ngha nhiu style chng ta mun trn mt style duy nht m khng cn
vit m logic la chn style. V vy, l cch rt gn gng thch ng kiu trang v
n lm gim s lng m trng lp v logic cho mc ch sinh giao din. Mt khc, bng
thng tiu th s tng khi kch thc ca file CSS tng.
Bng cch s dng k thut sinh giao din thch ng, trang web ca chng ta s
c hin th ng, bt k ca trnh duyt. Tuy nhin, chng ta nn xem xt tng thm ti
bng thng.
Lu : Cc nh dng c bn ca mt truy vn a phng tin l: @media
[Scope: all | handheld | print | projection | screen] ([property:value] and ...
[property:value])
V d truy vn a phng tin: >@media all and (max-width: 1000px)
and (min-width: 700px) {}: i vi cc mn hnh c phn gii t 700px n 1000px.
@media screen and (min-width: 400px) and (max-width: 700px) { ... }: Ch
dnh cho mn hnh. phn gii phi t 400 n 700px.
@media handheld and (min-width: 20em), screen and (min-width: 20em) {... }:
i vi cc thit b cm tay (in thoi di ng v cc thit b) v mn hnh. Chiu rng
ti thiu phi ln hn 20em.
Chng ta c th tm thm thng tin v vic ny trn trang web W3C .
By gi chng ta s tm hiu sinh giao din thch ng lm vic th no,
vic ci thin kh nng c ca mu website mc nh ca MVC ASP.NET 4.
[1]. M gii php PhotoGallery.sln to ti nhim v 1 v chn d n
PhotoGallery. Nhn F5 chy gii php.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 14
[2]. Thay i rng ca trnh duyt, thit lp ca s bng mt na hoc nh
hn 1/4 kch thc ban u ca n. Ch nhng g s xy ra vi cc mc trong tiu :
Mt s thnh phn s khng xut hin trong vng hin th ca tiu .
[3]. M tp tin Site.css t Solution Explorer ca Visual Studio ti th mc
Content. Nhn Ctrl + F m tch hp tm kim Visual Studio v nhp @media tm
v tr xut hin ca n.
[4]. iu kin truy vn @media c nh ngha theo cng vic mu hot
ng theo cch ny: Khi kch thc ca s ca trnh duyt di 850px th cc quy tc
CSS p dng l nhng nh ngha bn trong khi media ny.

nh v cc truy vn media
[5]. Thay th gi tr thuc tnh max-width trong 850px vi 10px , v
hiu ha cc rendering thch ng v nhn Ctrl + S lu thay i. Quay tr li
trnh duyt v nhn CTRL + F5 lm mi trang vi nhng thay i chng ta thc
hin. Ch s khc bit trong c hai trang khi iu chnh rng ca ca s.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 15

Trang tri p dng @media cn trang phi th khng
By gi, chng ta hy xem nhng g xy ra trn cc thit b di ng:

Trang tri p dng @media cn trang phi th khng
Mc d chng ta s nhn thy rng nhng thay i khi trang c kt xut trong
mt trnh duyt web khng phi l rt ng k, khi s dng mt thit b di ng, s
khc bit tr nn r rng hn. pha bn tri ca hnh nh, chng ta c th thy rng
phong cch ty chnh ci thin kh nng c.
Sinh giao din thch ng c th c s dng trong nhiu tnh hung khc
d dng p dng style c iu kin n website v gii quyt cc vn style ph
bin vi cch tip cn gn gng.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 16
Viewport meta tag v CSS truy vn media khng phi l danh ring cho ASP.NET
MVC 4, v vy chng ta c th tn dng li th ca cc tnh nng ny trong bt k ng
dng web no.
6. Trong Visual Studio, nhn SHIFT + F5 g li cc ng dng.
2.3 Bi 2: To ng dng Web Photo Gallery
Trong bi tp ny, chng ta s lm vic trn ng dng Photo Gallery
hin th hnh nh. Chng ta s bt u vi mu d n ASP.NET MVC 4 sau chng
ta s thm mt tnh nng ly hnh nh t mt dch v v hin th chng trong trang
ch.
Trong bi tp sau, chng ta s cp nht gii php nng cao cch n c hin
th trn cc thit b di ng.
2.3.1 Nhim v 1: To mt dch v Photo gi
Trong nhim v ny, chng ta s to ra mt m hnh dch v nh ly ni
dung s c hin th trong th vin nh. lm iu ny, chng ta s thm mt
Controller mi ch n gin l s tr v mt tp tin JSON cha d liu ca mi bc nh.
[1]. M Visual Studio nu n cha c m.
[2]. Chn File | New | Project menu. Trong hp thoi New Project , chn
mu C # Visual | Web trn phn panel bn tri, v chn ASP.NET MVC Web
Application 4. t tn d n PhotoGallery, chn mt th mc lu tr (hoc
mc nh) v nhn OK . Ngoi ra, chng ta c th tip tc lm vic vi d n ny
c to ra trc .
[3]. Trong hp thoi New ASP.NET MVC 4 Project , chn mu d n Internet
Application v nhn vo OK . Hy chc chn rng chng ta chn Razor cho cc
View ca d n.
[4]. Trong Solution Explorer , kch chut phi vo th mc App_Data ca d
n ca chng ta, v chn Add | Existing Item . Duyt th mc
Source/Assets/App_Data v chn thm tp tin Photos.json vo d n.
[5]. To mt b iu khin mi vi tn PhotoController . lm iu ny, kch
chut phi vo trn th mc Controllers > Add > Controller. Hon thnh tn
cho Controller v chn mu Empty MVC controller sau nhp vo Add .
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 17

Thm PhotoController

[6]. Thay th phng thc Index thnh Gallery hnh ng v tr v ni ung
t tp tin JSON gn y chng ta thm vo d n.

[7]. Nhn F5 chy gii php v sau duyt n URL sau y kim
tra dch v nh: http://localhost:[port]/photo/gallery ([port] gi tr ph thuc vo port
hin ti ni m ng dng c a ra). URL ny cn ly ni dung ca tp tin
Photos.json.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 18

Kim tra cc dch v hnh nh
Trong thc t thc hin, chng ta c th s dng ASP.NET Web API thc
hin cc dch v th vin hnh nh. ASP.NET Web API l mt framework gip d
dng xy dng dch v HTTP phc v nhiu dng client khc nhau bao gm c trnh
duyt v cc thit b di ng. ASP.NET Web API l mt nn tng l tng cho
vic xy dng cc ng dng RESTful trn NET Framework..
2.3.2 Nhim v 2: Hin th Photo Gallery
Trong nhim v ny, chng ta s cp nht trang Home hin th b su tp nh
bng cch s dng dch v gi chng ta to ra trong nhim v u tin ca bi tp ny.
Chng ta s thm tp tin m hnh v cp nht cc View ca th vin nh.
[1]. Trong Visual Studio, nhn SHIFT + F5 g li cc ng dng.
[2. To lp Pht trong th mc Models. lm iu ny, kch chut phi vo
th mc Models, chn v nhp vo Class . Sau , t tn cho Photo.cs v nhp vo Add.
[3]. Thm cc thnh vin sau y vo lp Photo.

Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 19
[4]. M tp tin HomeController.cs t th mc Controllers .
[5]. Thm bng cch s dng cc bo co sau y.

[6]. Cp nht hnh ng Index s dng HttpClient ly d liu th vin nh
v sau s dng JavaScriptSerializer tun t ha v truyn cho View.

[7]. M tp tin Index.cshtml nm di th mc Views/Home v thay th tt
c cc ni dung vi m sau y. M ny duyt qua tt c cc hnh nh ly t dch v
ny v hin th chng trong danh sch c th t.

[8]. Trong Solution Explorer , kch chut phi vo th mc Content ca d n
ca chng ta, v chn Add | Existing Item . Duyt n th mc Source/Assets/Content
ca bi lab ny v thm tp tin Site.css. Chng ta s phi xc nhn thay th ca n.
Nu chng ta c tp tin Site.css m, chng ta s phi xc nhn ti li tp tin ny.
[9]. M File Explorer v sao chp ton b th mc Photo nm di Source/Assets
ca bi lab ny vo th mc gc ca d n ca chng ta trong Solution Explorer.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 20
[10]. Chy ng dng. Chng ta s thy trang ch hin th cc bc nh trong b
su tp.

Photo Gallery
[11]. Trong Visual Studio, nhn SHIFT + F5 g li ng dng.
2.4 Bi 3: B sung h tr cho thit b di ng
Mt trong nhng cp nht quan trng trong ASP.NET MVC 4 l s h tr cho
pht trin in thoi di ng. Trong bi tp ny, chng ta s khm ph tnh nng mi
ASP.NET MVC 4 cho cc ng dng in thoi di ng bng cch m rng gii php
PhotoGallery m chng ta to ra trong bi tp trc.
2.4.1 Nhim v 1: Ci Mobile jQuery cho d n ASP.NET MVC 4
[1]. M gii php Begin nm th mc/Source/Ex3-MobileSupport/Begin.
Nu khng, chng ta c th tip tc s dng gii php End thu c bng cch hon
thnh bi tp trc.
1) Nu chng ta m gii php Begin, chng ta s cn phi ti v mt s gi
NuGet trc khi tip tc. lm iu ny, hy nhp vo menu Project v chn
Manage NuGet Packages.
2) Trong hp thoi Manage NuGet Packages, nhp vo Restore ti v cc
gi b thiu.
3) Cui cng, dch gii php bng cch nhp vo Build | Build Solution .
Lu : Mt trong nhng li th ca vic s dng NuGet l chng ta khng cn
phi km theo tt c cc th vin trong d n ca chng ta nn gim quy m d n.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 21
Vi Power Tools NuGet, bng cch xc nh cc phin bn gi trong file
Packages.config, chng ta c th ti v tt c cc th vin cn ln u tin chng ta
chy cc d n. y l l do ti sao chng ta s phi thc hin cc bc sau khi chng ta
m mt gii php hin c t bi lab.
[2]. M Package Manager Console bng cch nhn vo Tools > Package
Manager Library > Package Manager Console .

M NuGet Package Manager Console
[3]. Trong Console Package Manager chy lnh sau ci t cc gi
jQuery.Mobile.MVC .
jQuery Mobile l mt th vin m ngun m xy dng ti u ha cho giao
din web cm ng. NuGet jQuery.Mobile.MVC gi bao gm nhng ci h tr s
dng jQuery Mobile vi mt ng dng ASP.NET MVC 4.
Lu : Bng cch chy lnh sau y, chng ta s c ti v th vin
jQuery.Mobile.MVC t Nuget.
I nstall-Package jQuery.Mobile.MVC
Lnh ny s ci t jQuery Mobile v cc tp tin helper, bao gm:
Views/Shared/_Layout.Mobile.cshtml : l mt layout cho in thoi di ng
c ti u ha cho mn hnh nh. Khi trang web nhn c mt yu cu t mt trnh
duyt di ng, n s thay th layput ban u (_Layout.cshtml) vi layout ny.
Mt b chuyn View: trong Views/Shared/_ViewSwitcher.cshtml v mt
Controller ViewSwitcherController.cs . Thnh phn ny s hin th mt lin kt trn
cc trnh duyt di ng cho php ngi dng chuyn sang phin bn my tnh bn ca
trang.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 22

D n Photo Gallery vi s h tr in thoi di ng
ng k gi in thoi di ng. lm iu ny, m tp tin
Global.asax.cs v thm dng sau y.

Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 23
[4]. Chy ng dng bng cch s dng mt trnh duyt web my tnh bn.
[5]. M Windows Phone 7 Emulator, nm trong Start Menu | All Programs |
Windows Phone . SDK 7.1 | Windows Phone Emulator.
Trong mn hnh bt u in thoi, m Internet Explorer. Kim tra URL ni m
cc ng dng bt u v duyt n URL vi trnh duyt in thoi (v d:
http://localhost: [PortNumber]/).Chng ta s nhn thy rng ng dng ca chng ta
s trng khc vi Windows PhoneEmulator khi jQuery.Mobile.MVC to ra ti sn
mi trong d n ca chng ta v cc View c ti u ha cho cc thit b di ng.
Ch thng bo pha trn cng ca in thoi, hin th cc lin kt chuyn sang xem
my tnh bn. Ngoi _Layout.Mobile.cshtml ra c c mt vi layout khc cng c
to ra.
Lu : Cho n nay, khng c lin kt tr li View di ng. N s c b
sung trong cc phin bn sau ny.

Giao din ca trang ch Photo Gallery
[6]. Trong Visual Studio, nhn SHIFT + F5 g li cc ng dng.
2.4.2 Nhim v 2: To View cho in thoi di ng
Trong nhim v ny, chng ta s to ra mt phin bn View cho in
thoi di ng Index.cshtml c ni dung ph hp xut hin tt hn trong cc thit b di
ng.
[1]. Sao chp Views/Home/Index.cshtml v dn to ra mt bn sao, i tn tp
tin mi Index.Mobile.cshtml .
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 24
[2]. M Index.Mobile.cshtml mi to ra v thay th th <ul> hin c vi m sau
y. Bng cch ny, chng ta s cp nht th <ul> vi ch thch d liu ca jQuery
Mobile s dng cc mu giao din in thoi di ng t jQuery.

Lu : Thuc tnh data-role thit lp gi tr listview s sinh danh sch bng cch
s dng style listview.
Thuc tnh data-inset thit lp gi tr true s hin th danh sch c bo trn gc.
Thuc tnh data-filter thit lp gi tr true s to ra mt hp tm kim.
Chng ta c th tm hiu thm v cc qui c cc thuc tnh Mobile trong
jQuery ti liu ti website: http://jquerymobile.com/demos/1.1.1/
[3]. Nhn CTRL + S lu thay i.
[4]. Chuyn sang Windows Phone Emulator v lm ti trang web. Ch ci
nhn v cm nhn mi ca danh sch th vin nh, cng nh cc hp tm kim mi
nm trn u trang. Sau , g mt t vo hp tm kim (v d, Tulips ) bt u tm
kim trong b su tp nh.

Gallery s dng listview style c b lc
Tm tt: chng ta s dng cch thc Mobile ha View to ra mt bn
sao ca View Index vi hu t "Mobile". Hu t ny bo cho ASP.NET MVC 4 bit
sinh giao din t View ny khi yu cu truy xut t thit b di ng. Ngoi ra, chng ta
cp nht phin bn di ng ca View Index tn dng sc mnh ca jQuery nhm
tng cng cho trang web c giao din p trn cc thit b di ng.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 25
[5]. Quay tr li Visual Studio v m Site.Mobile.css t trong th mc Content.
[6]. Sa cha v tr ca tiu hnh nh lm cho n hin th pha bn phi
ca hnh nh. lm iu ny, thm on m sau vo tp tin Site.Mobile.css

[7]. Nhn CTRL + S lu thay i.
[8]. Chuyn v Windows Phone Emulator v lm mi trang web. Ch tiu
nh ng v tr.

Tiu v tr pha bn phi ca hnh nh
2.4.3 Nhim v 3: jQuery Mobile Themes
Mi layout v widget trong jQuery Mobile c thit k xung quanh mt
framework CSS hng i tng mi lm cho n c th p dng thng nht mt mu
thit k hon chnh n cc trang web ca ng dng.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 26
Theme mc nh ca jQuery Mobile bao gm 5 swatches c t trng bi cc
ch ci (a, b, c, d, e) tham chiu nhanh.
Trong nhim v ny, chng ta s cp nht cc layout in thoi di ng s
dng mt ch khc hn so vi mc nh.
[1]. Chuyn v Visual Studio.
[2]. M _Layout.Mobile.cshtml trong Views/Shared .
[3]. Tm cc th div c thuc tnh data-role=page v cp nht thuc tnh
datatheme=e.
[4]. Nhn CTRL + S lu thay i.
[5]. Lm mi trang web trong Windows Phone Emulator v nhn thy chng
trnh mu sc mi.

Layout in thoi di ng vi mt mu sc khc
2.4.4 Nhim v 4: View-Switcher v ghi trnh duyt
Mt quy c i vi cc trang web ti u trn in thoi di ng l thm mt
lin kt chuyn sang phin bn Desktop. Gi JQuery.Mobile.MVC bao gm mt
viewswitcher vi mc ch ny c s dng trong View _Layout.Mobile.cshtml.

Lin kt chuyn sang View trn Desktop
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 27
B chuyn mch s dng tnh nng mi c gi l ghi trnh duyt . Tnh
nng ny cho php ng dng ca chng ta i x cc yu cu n t cc trnh duyt khc
nhau.
Trong nhim v ny, chng ta s khm ph thc hin mu ca mt b chuyn
mch c b sung bi jQuery.Mobile.MVC v tnh nng ghi trnh duyt mi trong
ASP.NET MVC 4.
[1]. Chuyn v Visual Studio.
[2]. M _Layout.Mobile.cshtml trong Views/Shared v ch b chuyn view
c tham chiu nh l mt partial view.

Layout in thoi di ng s dng View-Switcher
[3]. M partial view _ViewSwitcher.cshtml.
Partial View s dng phng thc mi
ViewContext.HttpContext.GetOverriddenBrowser() xc nh ngun gc yu
cu web v hin th cc lin kt tng ng chuyn i gia View ca Desktop hay
Mobile.
Phng thc GetOverridenBrowser() tr v HttpBrowserCapabilitiesBase tng
ng vi trnh duyt hin ang gi yu cu. Chng ta c th s dng gi tr ny
nhn c cc c tnh nh IsMobileDevice .
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 28

Partial View ViewSwitcher
[4]. M lp ViewSwitcherController.cs nm trong th mc Controllers. Chng ta
thy rng phng thc hnh ng SwitchView() c gi bi lin kt trong
ViewSwitcher v ch n cc phng thc mi ca lp HttpContext.
HttpContext.ClearOverridenBrowser() loi b tt c cc trnh duyt b ghi .
HttpContext.SetOverridenBrowser() ghi ln gi tr ca trnh duyt ang yu
cu.

ViewSwitcherController
Ghi trnh duyt l tnh nng ct li ca ASP.NET MVC 4 c sn ngay c khi
chng ta khng ci t cc gi jQuery.Mobile.MVC. Tuy nhin, tnh nng ny ch nh
hng n View, Layout, v Partial View m khng nh hng n bt k cc tnh
nng ph thuc vo i tng Request.Browser.
2.4.5 Nhim v 5: Thm View-Switcher vo View Desktop
Trong nhim v ny, chng ta s cp nht Layout my tnh bn bao gm
b chuyn view. iu ny cho php ngi s dng in thoi di ng quay tr li View
in thoi di ng khi ang xem trn trnh duyt ca my tnh bn.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 29
[1]. Lm mi trang web trong Windows Phone Emulator .
[2]. Nhp vo lin kt trn cng ca th vin hnh View Desktop . Ch
khng c b chuyn viw trong giao din my tnh bn cho php chng ta quay tr
li View in thoi di ng.
[3]. Quay tr li Visual Studio v m _Layout.cshtml.
[4]. Tm phn ng nhp v chn mt li gi n Partial View _ViewSwitcher
di View _LogOnPartial. Sau , nhn Ctrl + S lu thay i.

[5]. Nhn CTRL + S lu thay i.
[6]. Lm mi trang trong Emulator Windows Phone v nhp p vo mn hnh
phng to. Ch rng trang ch hin nay cho thy Mobile View lin kt chuyn t in
thoi di ng n my tnh bn.

View Switcher hin th trong Desktop View
[7]. Chuyn sang View Mobile ln na v duyt n trang About
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 30
(http://localhost[port]/Home/About). Ch rng, ngay c khi chng ta khng to ra
View About.Mobile.cshtml, trang About cng c hin th bng cch s dng layout
in thoi di ng (_Layout.Mobile.cshtml).

Trang About
[8]. Cui cng, m trang web trong mt trnh duyt web my tnh bn. Ch
rng khng c mt cht cp nht no trc nh hng n View ca my tnh bn.

Xem trn my tnh bn
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 31
2.4.6 Nhim v 6: To ch hin th mi
Tnh nng ch hin th mi ng dng chn views ty thuc vo trnh
duyt gi yu cu. V d, nu mt trnh duyt my tnh bn yu cu trang ch th
ng dng s tr li Views/Home/Index.cshtml. Sau , nu mt trnh duyt di ng yu
cu trang ch th ng dng s tr li Views/Home/Index.Mobile.cshtml.
Trong nhim v ny, chng ta s to ra mt Layout ty chnh cho thit b
iPhone v chng ta s gi lp yu cu t thit b iPhone. lm iu ny, chng ta c
th s dng mt trnh gi lp iPhone emulator/simulator (nh Electric Mobile Simulator)
hoc mt trnh duyt vi cc tin ch thay i user-agent.
[1]. Trong Visual Studio, nhn SHIFT + F5 g li cc ng dng.
[2]. M Global.asax.cs v thm lnh using sau y vo.
using System.Web.WebPages;
[3]. Tng cng thm m sau vo phng thc Application_Start.

Chng ta ng k mi DefaultDisplayMode c tn l "iPhone" , bn trong
danh sch tnh
DisplayModeProvider.Instance.Modes. Danh sch ny s c s dng so
khp vi mi yu cu gi n. Nu yu cu gi n c cha chui "iPhone", ASP.NET
MVC s tm thy nhng View c tn cha hu t "iPhone". Tham s 0 cho bit l ch
mi. View ny c th hn so vi .mobile chung chung ph hp vi cc yu cu t cc
thit b di ng.
Sau khi m ny chy, khi mt trnh duyt iPhone to ra mt yu cu, ng dng
ca chng ta s s dng Views/Shared/_Layout.iPhone.cshtml m chng ta s to ra
trong cc bc tip theo.
Lu : Trng hp ny ch minh ha yu cu dnh cho iPhone c n
gin ha cho mc ch gii thiu v c th t nh mong i cho tt c cc chui user-
agent iPhone (v d phn bit hoa - thng).
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 32
[1]. To mt bn sao ca tp tin _Layout.Mobile.cshtml trong Views/Shared v
i tn bn sao thnh _Layout.iPhone.csthml .
[2]. M _Layout.iPhone.csthml chng ta to bc trc.
[3]. Tm cc phn t div> vi thuc tnh data-role=page v thay i thuc
tnh datatheme=" a ".

By gi chng ta c 3 Layout trong ng dng ASP.NET MVC 4 ca chng ta:
a) _Layout.cshtml : layout mc nh c s dng cho cc trnh duyt my tnh
bn.
b) _Layout.mobile.cshtml : layout mc nh c s dng cho cc thit b di ng.
c) _Layout.iPhone.cshtml : layout c th cho thit b iPhone, bng cch s dng
cc mu sc khc nhau phn bit vi _Layout.mobile.cshtml.
[4]. Nhn F5 chy cc ng dng v duyt cc trang web trong Windows
Phone Emulator .
[5]. M mt m phng iPhone v duyt n trang web. Ch rng mi in thoi
bng cch s dng cc mu c th.

S dng cc View khc nhau cho mi thit b di ng
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 33
2.5 Bi 4: S dng Controller bt ng b
Microsoft NET Framework 4.5 gii thiu cc tnh nng ngn ng mi trong C#
v Visual Basic cung cp mt nn tng mi cho lp trnh NET bt ng b. Nn tng
mi ny lm cho lp trnh bt ng b tng t v n gin nh lp trnh ng b.
Chng ta c th vit cc phng thc hnh ng bt ng b trong
ASP.NET MVC 4 s dng lp AsyncController. Chng ta c th s dng cc phng
thc hnh ng bt ng b thc thi trong thi gian di. iu ny trnh s ngn chn
cc my ch Web khi thc hin cc cng vic trong khi yu cu ang c x l.
Lp AsyncController thng c s dng cho cc li gi dch v Web thc hin trong
thi gian di.
Bi tp ny gii thch cc vn c bn ca hot ng khng ng b trong
ASP.NET MVC 4. Nu chng ta mun hiu su hn, chng ta c th c cc bi
vit sau y:http://msdn.microsoft.com/en-us/library/ee728598%28v=vs.100%29.aspx
2.5.1 Nhim v 1: Ci t mt iu khin khng ng b
[1]. M gii php Begin nm th mc Source/Ex4-Async/Begin. Nu
khng, chng ta c th tip tc s dng gii php End thu c bng cch hon thnh
bi tp trc.
a) Nu chng ta m c gii php Begin c cung cp, chng ta s cn
phi ti v mt s gi NuGet mt lin lc trc khi tip tc. lm iu
ny, hy nhp vo menu Project v chn Manage NuGet Packages.
b) Trong hp thoi Manage NuGet Packages, nhp vo Restore ti v cc gi
cn thiu.
c) Cui cng, dch gii php bng cch nhp vo Build | Build Solution.
[2]. M lp HomeController.cs t th mc Controllers.
[3]. Thm lnh using vo u file.

[4]. Cp nht lp HomeController k tha t AsyncController . Cc b
iu khin xut pht t AsyncController cho php ASP.NET x l cc yu cu
khng ng b v chng vn c th phc v cc phng thc hnh ng ng b.

Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 34
[5]. Thm t kha async vo trc phng thc Index lm cho n tr v
kiu <ActionResult>

Lu : T kha async l mt trong nhng t kho mi ca NET Framework
4.5 cung cp, n ni vi trnh bin dch rng phng thc ny c cha m khng
ng b. Task i tng i din cho mt hot ng khng ng b c th hon thnh
ti mt thi im no trong tng lai.
[6]. Thay th li gi client.GetAsync () vi phin bn async y bng cch
s dng t kha await nh hnh di y.

Lu : Trong cc phin bn trc, chng ta c s dng thuc tnh Result
ca i tng Task kha thread cho n khi kt qu c tr v (ng b).
Thm t kha await bo cho trnh bin dch v vic ch i cho nhim v tr
v t li gi phng thc khng ng b. iu ny c ngha rng phn cn li ca m
ny s c thc hin nh l mt li gi li ch sau khi phng thc hon tt ch
i.
Mt iu cn ghi nhn l chng ta khng cn phi thay i khi try-catch lm
cng vic ny: cc trng hp ngoi l xy ra hu trng nn hoc pha trc
u b bt m khng cn thm bt k cng vic no bng cch s dng mt b x l
c cung cp bi framewwork.
[7]. Thay i m tip tc vi vic thc hin khng ng b bng cch thay
th cc dng vi m mi nh hnh di y

Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 35
[8]. Chy ng dng. Chng ta s thy khng c thay i ln, nhng m ca
chng ta s khng b kha trong khi ch i cc ngun ti nguyn my ch v ci thin
hiu sut.
Lu : Chng ta c th tm hiu thm v cc tnh nng mi lp trnh khng ng
b trong bi lab "Lp trnh khng ng b trong NET 4.5 vi C# v Visual Basic. bao
gm trong Visual Studio Training Kit ".
2.5.2 Nhim v 2: X l thi hngi vi Cancelation Tokens
Phng thc hnh ng khng ng b tr v Task c h tr thi hng.
Trong nhim v ny, chng ta s cp nht m phng thc Index x l
mt kch bn thi gian bng cch s dng m thng bo hy b.
[1]. Quay tr li Visual Studio v nhn SHIFT + F5 ngn chn g li.
[2]. Thm dng sau bng cch s dng bo co cc HomeController.cs tp tin.

[3]. Cp nht hnh ng Index nhn mt i s CancellationToken .

[4]. Cp nht li gi GetAsync () truyn cancellationToken.

[5]. nh du phng thc Index() vi thuc tnh AsyncTimeout vi thit lp
thi hng l 500 mili giy v ng thi nh du thuc tnh HandleError cu
hnh x l TaskCanceledException bng cch chuyn hng n mt View
TimedOut.

[6]. M lp PhotoController v cp nht phng thc Gallery ko di
thi hnh 1000 miliseconds (1 giy) m phng mt nhim v chy lu.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 36

[7]. M tp tin Web.config v cho php ty chnh li bng cch thm vo cc th
sau y.

[8]. To ra mt View mi trong Views/Shared c tn l TimedOut v s dng
layout mc nh. Trong Solution Explorer, nhn phi chut vo Views/Shared v chn
Add | View .

S dng View khc nhau cho mi thit b di ng
[9]. Cp nht ni dung View TimedOut nh hnh di y.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 37

[1]0. Chy ng dng v iu hng n URL gc. Do chng ta b sung
thm lnh Thread.Sleep 1000 mili giy nn chng ta s nhn c mt thng bo
li li thi hng (Time Out) c to ra bi thuc tnh AsyncTimeout v bt li
bi thuc tnh HandleError .
Ngoi l ht hng c iu khin
2.6 Tm tt
Trong bi lab ny, chng ta quan st thy mt s cc tnh nng mi
cung cp trong ASP.NET MVC 4. Cc khi nim sau y c tho lun:
Tn dng li th ca nhng ci tin trong d n ASP.NET MVC mu, bao gm
c cc mu d n ng dng trn in thoi di ng mi
S dng thuc tnh viewport ca HTML5 v truy vn media ca CSS ci
thin hin th trn cc thit b di ng
in thoi di ng s dng jQuery ci tin tin b v xy dng ti u ha
cm ng giao din web
To View cho cc thit b di ng c th.
Chng 2: Tng quan v Asp.Net MVC 4
ThS. Dng Thnh Pht
Trang 38
S dng view-switcher chuyn i gia cc View in thoi di ng v my
tnh bn trong ng dng
To b iu khin khng ng b s dng h tr ca Task