Giáo trình mô đun Lập trình web ASP.NET MVC (Nghề Công nghệ thông tin - Trình độ cao đẳng) - CĐ Kỹ thuật Công nghệ BR-VT

Nội dung giáo trình Lập trình web ASP.NET MVC được tác giả trình bày cô động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết theo nguyên tắc quan tâm đến kết quả đầu ra, khả năng tự học và kỹ năng cần thiết để HSSV có thể hoàn thành ứng dụng web quảng cáo sản phẩm, thương mại điện tử, … bằng .NET framework theo mô hình MVC, một trong những mô hình ứng dụng phổ biến hiện nay, đáp ứng nhu cầu thực tế của doanh nghiệp. Mời các bạn cùng tham khảo giáo trình.

BM/QT10/P.ĐTSV/04/04 Ban hành l n: 3 ầ

Ban hành l n: 3 ầ

BÀ R A – VŨNG TÀU, NĂM 2020Ị

Tài li u đệ ược biên so n thu c lo i giáo trình ph c v  gi ng d y và h cạ ộ ạ ụ ụ ả ạ ọ  

t p, l u hành n i b  trong Nhà trậ ư ộ ộ ường nên các ngu n thông tin có th  đồ ể ượ  cphép dùng nguyên b n ho c trích dùng cho các m c đích v  đào t o và thamả ặ ụ ề ạ  

kh o.ả

M i m c đích khác mang tính l ch l c ho c s  d ng v i m c đích kinhọ ụ ệ ạ ặ ử ụ ớ ụ  doanh thi u lành m nh s  b  nghiêm c m.ế ạ ẽ ị ấ

L I GI I THI UỜ Ớ Ệ

Giáo trình “L p trình web  ậ ASP.NET MVC” được biên so n d a trênạ ự  khung chương trình đào t o Cao đ ng ngh  Công ngh  Thông tin đã đạ ẳ ề ệ ượ  c

Trường Cao đ ng K  thu t Công nghê Bà R a – Vũng Tàu phê duy t.ẳ ỹ ậ ị ệ

Tác gi  đã nghiên c u m t s  tài li u, công ngh  hi n đ i k t h p v iả ứ ộ ố ệ ệ ệ ạ ế ợ ớ  kinh nghi m làm vi c th c t  đ  vi t nên giáo trình này. N i dung đệ ệ ự ế ể ế ộ ược tác 

gi  trình bày cô đ ng, d  hi u kèm theo các bả ộ ễ ể ước hướng d n th c hành chiẫ ự  

ti t theo nguyên t c quan tâm đ n k t qu  đ u ra, kh  năng t  h c và kế ắ ế ế ả ầ ả ự ọ ỹ năng c n thi t đ  HSSV có th  hoàn thành  ng d ng web qu ng cáo s nầ ế ể ể ứ ụ ả ả  

ph m, thẩ ương m i đi n t , … b ng ạ ệ ử ằ NET framework theo mô hình MVC, m tộ  trong nh ng ữ mô hình  ng d ngứ ụ  ph  bi nổ ế  hi n nay, đáp  ng nhu c u th c tệ ứ ầ ự ế 

c a doanh nghi p.ủ ệ

N i dung giáo trình độ ược chia thành 10 bài, trong đó:

Bài 1: T ng quan v  ổ ề ASP.NET MVC

Bài 2: T o  ng d ng web ASP.NET MVCạ ứ ụ

Bài 3: Xây d ng modelự

Bài 4: T o viewạ

Bài 5: T o controllerạ

Bài 6: Truy n d  li u gi a controller và viewề ữ ệ ữ

Bài 7: Thi t k  view b ng ế ế ằ HTML Helper

Bài 8: Hi n th  d  li u trên Web Gridể ị ữ ệ

Bài 9: Ki m tra d  li u trên trang webể ữ ệ

Bài 10: Tri n khai  ng d ngể ứ ụ

Trong quá trình biên so n, ch c ch n giáo trình còn nhi u thi u sót. Tácạ ắ ắ ề ế  

gi  r t mong nh n đả ấ ậ ược ý ki n đóng góp c a quý th y/cô và các em h c sinh,ế ủ ầ ọ  sinh viên đ  ti p t c hoàn thi n h n.ể ế ụ ệ ơ

Xin chân thành c m  n quý đ ng nghi p, b n bè đã có nh ng ý ki nả ơ ồ ệ ạ ữ ế  đóng góp trong quá trình biên so n giáo trình này.ạ

Bà R a – Vũng Tàu, ngày …… tháng …… năm ………ị

Tham gia biên so nạ

1. Phan H u Phữ ước – Ch  biênủ

M C L CỤ Ụ

Tên mô đun: L p trình web ậ ASP.NET MVC

Mã mô đun: MĐ28

V  trí, tính ch t, ý nghĩa và vai trò c a mô đun:ị ấ ủ

V  trí: ị được gi ng d y sau khi h c xong Thi t k  web, L p trình Windowsả ạ ọ ế ế ậ  

EF và WCF, SQL Server, C  s  d  li u, Qu n tr  CSDL Access.ơ ở ữ ệ ả ị

Tính ch t: là mô đun t  ch nấ ự ọ

Ý nghĩa và vai trò c a mô đun:ủ  cung c p cho ngấ ườ ọi h c ki n th c và kế ứ ỹ năng đ  xây d ng hoàn ch nh m t website thể ự ỉ ộ ương m i đi n t , qu ng báạ ệ ử ả  cho các t  ch c, cá nhân trên n n .NET Framework theo mô hình MVC.ổ ứ ề

M c tiêu c a mô đun:ụ ủ

V  ki n th c:ề ế ứ

Tìm hi u để ược ngôn ng  l p trình ASP.NET.ữ ậ

Tìm hi u để ược mô hình MVC (Model – View – Controller)

Bi t quá trình x  lý yêu c u c a mô hình x  lý MVC và ASP.NET MVC.ế ử ầ ủ ử

Bi t đế ược các truy n và g i d  li u gi a Controller và View.ề ọ ữ ệ ữ

Thi t k  đế ế ược phân trang cho t ng trang.ừ

S  d ng đử ụ ược Bootstrap đ  hi u qu  và đ m b o tính đ  h a cho t ngể ệ ả ả ả ồ ọ ừ  trang web

Thi t k  đế ế ược nh ng website đi n t  đ n gi n, các t  ch c, doanh nghi p,ữ ệ ử ơ ả ổ ứ ệ  

cá nhân đ n gi n.ơ ả

V  k  năng:ề ỹ

Kh  năng tuy duy, sáng t o trong vi c thi t k  và l p trình các  ng d ngả ạ ệ ế ế ậ ứ ụ  website đi n t  c  b n.ệ ử ơ ả

K t n i và x  lý d  li u b ng LINQ và Entity Frameworkế ố ử ữ ệ ằ

Xây d ng đự ượ ức  ng d ng web v i ASP.Net MVCụ ớ

V  năng l c t  ch  và trách nhi m:ề ự ự ủ ệ

Ren luyên va nâng cao ky năng lâp trinh theo công nghê Entity Framework̀ ̣ ̀ ̃ ̣ ̀ ̣  (EF), Windows Communication Foundation (WCF).

Th c hi n các bài th c hành đ m b o đúng trình t , an toàn.ự ệ ự ả ả ự

N i dung c a mô đun:ộ ủ

BÀI 1: T NG QUAN V  ASP.NET MVCỔ Ề

Mã bài: 28.1

Gi i thi u:ớ ệ

Model View Controller là m t mô hình ki n trúc theo hộ ế ướng đ i tố ượng, cho phép người phát tri n tách m t  ng d ng thành 3 thành ph n chính:ể ộ ứ ụ ầ  Model, View, Controller

Controller: thành ph n có trách nhi m ti p nh n và x  lý các yêu c u g iầ ệ ế ậ ử ầ ử  

đ n cho  ng d ng, làm nhi m v  đi u ph i công vi c gi a View vàế ứ ụ ệ ụ ề ố ệ ữ  Model

 Vi c phát tri n  ng d ng, nâng c p, b o trì và th  nghi m tr  nên đ nệ ể ứ ụ ấ ả ử ệ ở ơ  

gi n và d  dàng h n.ả ễ ơ

 Giúp phát tri n  ng d ng nhanh, đ n gi n, d  dàng nâng c pể ứ ụ ơ ả ễ ấ

B o trì: v i các l p đả ớ ớ ược phân chia, các thành ph n c a m t h  th ng dầ ủ ộ ệ ố ễ dàng được thay đ i nh ng có th  đổ ư ể ược cô l p t ng l p, ho c ch   nhậ ừ ớ ặ ỉ ả  

hướng đ n l p ngay g n k  nó, không làm  nh hế ớ ầ ề ả ưởng đ n c   ng d ng.ế ả ứ ụ

M  r ng: vi c thêm ch c năng vào t ng l p s  d  dàng h n.ở ộ ệ ứ ừ ớ ẽ ễ ơ

Nhược đi mể

Thích h p v i các d  án v a và l nợ ớ ự ừ ớ

M t nhi u th i gian trong quá trình phát tri nấ ề ờ ể

M  th i gian trung chuy n d  li u gi a các l pấ ờ ể ữ ệ ữ ớ

1.3. Lý do nên làm trên mô hình MVC

Mô hình MVC đã chia  ng d ng thành các thành ph n Model, View vàứ ụ ầ  Controller   nên   người   phát   tri n   có   th   t o   ra   nhi u   View   và   nhi uể ể ạ ề ề  Controller cho các Model mà không ph i đ i m t v i vi c thay đ i trongả ố ặ ớ ệ ổ  thi t k  Model.ế ế

 Giúp cho vi c duy trì, di chuy n và t  ch c  ng d ng d  dàng h n.ệ ể ổ ứ ứ ụ ễ ơ

Đ i v i nh ng ngố ớ ữ ười m i thì vi c xây d ng  ng d ng d a trên mô hìnhớ ệ ự ứ ụ ự  MVC ph c t p và lãng phí vì công vi c này nh  là xây d ng m t d  ánứ ạ ệ ư ự ộ ự  

l n, tuy nhiêu “bí m t” c a MVC không n m   ch  vi t code mà   chớ ậ ủ ằ ở ỗ ế ở ỗ duy trì nó

Cho phép s a code mà không  nh hử ả ưởng nhi u đ n các thành ph n khác.ề ế ầCho phép làm vi c nhóm tr  nên d  dàng h n vì m i nhóm s  làm vi c d aệ ở ễ ơ ỗ ẽ ệ ự  trên th  m nh c a mình.ế ạ ủ

Nhóm View: ch u trách nhi m v  xây d ng giao di n tị ệ ề ự ệ ương tác v i ngớ ườ  idùng 

Nhóm Model: ch u trách nhi m v  vi c xây d ng các l p x  lý trên d  li uị ệ ề ệ ự ớ ử ữ ệNhóm Controller: có cái nhìn t ng th  v  các lu ng c a  ng d ng, qu n lýổ ể ề ồ ủ ứ ụ ả  các yêu c u, làm vi c v i các Model và l a ch n View hi n th  choầ ệ ớ ự ọ ể ị  

M c đích chính c a m u thi t k  này là cô l p x  lý nghi p v  t  giaoụ ủ ẫ ế ế ậ ử ệ ụ ừ  

di n ngệ ười dùng đ  t p trung vào kh  năng b o trì, c i ti n, ki m thể ậ ả ả ả ế ể ử 

t t h n và làm cho  ng d ng có c u trúc g n h n.ố ơ ứ ụ ấ ọ ơ

MVC Framework được đ nh nghĩa trong namespace System.Web.Mvc.ị

2.2 Ki n trúcế

Hình 1.2. Mô hình ki n trúc 3 thành ph n trong MVC ế ầ

Models là các thành ph n có nhi m v :ầ ệ ụ

Đ c và ghi d  li uọ ữ ệ

L u tr  thông tin, tr ng thái c a các đ i tư ữ ạ ủ ố ượng

T t c  các nghi p v  logic đ u đấ ả ệ ụ ề ược th c thi   Model. D  li u đự ở ữ ệ ượ  c

nh p t  ngậ ừ ười dùng s  thông qua View đ  ki m tra   Model trẽ ể ể ở ước khi 

l u vào CSDL. Vi c truy xu t, xác nh n và l u d  li u là ph n vi cư ệ ấ ậ ư ữ ệ ầ ệ  

Là các thành ph n x  lý tầ ử ương tác v i ngớ ười dùng, làm vi c v i Model,ệ ớ  

ch n m t View thích h p đ  hi n th  thông tin giao di n ngọ ộ ợ ể ể ị ệ ười dùngTrong m t  ng d ng MVC, View hi n th  thông tin, còn đi u khi n dòngộ ứ ụ ể ị ề ể  

nh p xu t c a ngậ ấ ủ ười dùng v n do Controller đ m trách.ẫ ả

2.3. Quá trình x  lý yêu c uử ầ

M t trong nh ng khái ni m quan tr ng nh t đ  hi u v   ng d ng MVC làộ ữ ệ ọ ấ ể ề ề ứ ụ  không có m i quan h  t n t i gi a m t yêu c u và m t t p tin v t lý bênố ệ ồ ạ ữ ộ ầ ộ ậ ậ  trong Web Server

Trong  ng d ng ASP.NET Web Forms truy n th ng, m i yêu c u đứ ụ ề ố ỗ ầ ượ  c

d ch thành m t l i g i đ n m t t p tin trong Web Server. Ví d : n uị ộ ờ ọ ế ộ ậ ụ ế  yêu c u là m t url ầ ộ http://myapp/mypage.aspx thì Web Server s  thôngẽ  

d ch yêu c u này b ng cách tìm ki m trong th  m c c a  ng d ngị ầ ằ ế ư ụ ủ ứ ụ  

ví d  trên thì controller là ụ product và ph ng th c x  lý là ươ ứ ử list).

Hình 1.3. Quá trình x  lý yêu c u c a MVC ử ầ ủ

2.4. M t s  đ c đi mộ ố ặ ể

Ti p t c h  tr  các tính năng trong ASP.NETế ụ ỗ ợ

H  tr  s  d ng các t p tin .ASPX, ASCX, .Master nh  là thành ph nỗ ợ ử ụ ậ ư ầ  View

H  tr  đ y đ  các tính năng b o m t c a ASP.NETỗ ợ ầ ủ ả ậ ủ

Form/Windows   authenticate,   URL   authorization,   Membership/Roles, Output   và   data   caching,   secion/profile   state,   configuration   system, provider architecture, …

Tách rõ ràng các m i liên quan, m  ra kh  năng test TDD (Test Drivenố ở ả  Developer)

Có th  test unit trong  ng d ng mà không c n ph i ch y Controllers cùngể ứ ụ ầ ả ạ  

v i ti n trình c a ASP.NET và có th  dùng b t k  m t unit testingớ ế ủ ể ấ ỳ ộ  framework nào nh  Nunit, MBUnit, MS Test, …ư

Có kh  năng m  r ng  ng d ng, m i th  trong MVC đả ở ộ ứ ụ ọ ứ ược thi t k  đ  dế ế ể ễ thay th , d  dàng tùy bi n.ế ễ ế

Ánh x  URL m nh m , cho phép xây d ng  ng d ng v i URL g n gàng,ạ ạ ẽ ự ứ ụ ớ ọ  thân thi n v i các Search Engineệ ớ

Không s  d ng mô hình PostBack t  giao di n g i đ n Server. Thay vào đó,ử ụ ừ ệ ử ế  

ch  đ ng đ a nh ng PostBack t  View đ n th ng Controller tùy ý.ủ ộ ư ữ ừ ế ẳ

Không còn ViewState hay Page Lifecycle t n t i trong mô hình MVCồ ạ

H  tr  công c  t o View (Support for Multiple View Engine)ỗ ợ ụ ạ

Cho phép ch n công c  t o Viewọ ụ ạ

H p tho i New Project cho phép xác đ nh View Engine m c đ nh cho m tộ ạ ị ặ ị ộ  project

Có th  d  dàng đ nh ra các quy lu t cài đ t để ễ ị ậ ặ ường đi. ASP.NET MVC 

d a   vào   các   quy   lu t   đó   đ   xác   đ nh   Controller   và   phự ậ ể ị ương   th cứ  (Action) c n ph i th c thi.ầ ả ự

ASP.NET còn có kh  năng phân tích URL, chuy n các thông s  trongả ể ố  URL thành các tham s  trong l i g i t i phố ờ ọ ớ ương th c trong Controller.ứModel Binding

vi c suy ngh  làm cách nào đ  ánh x  d  li u t  ngệ ỉ ể ạ ữ ệ ừ ười dùng sang các 

đ i tố ượng .NET)

Tính năng Bunding được áp d ng m c đ nh. Ngụ ặ ị ười phát tri n không c nể ầ  

ph i g i các script ho c các t p tin css riên bi t b i vì t t c  s  đả ọ ặ ậ ệ ở ấ ả ẽ ượ  cđóng gói và nén l i.ạ

Filters: tính năng m nh trong ASP.NET MVC, h  tr  cho vi c ki m tra tínhạ ỗ ợ ệ ể  

h p l  trợ ệ ước khi m t phộ ương th c hành đ ng đứ ộ ược g i ho c sau khi thiọ ặ  hành

Razor View

Cú pháp Razor g n gàng và xúc tích, đòi h i m t s  lọ ỏ ộ ố ượng t i thi u cácố ể  

t  h p phím.ổ ợ

Tìm hi u Razor tể ương đ i d  dàng vì nó d a trên C# và HTML.ố ễ ự

Visual Studio bao g m IntelliSense và mã cú pháp Razor đồ ược màu hóa

V i Razor View có th  ki m tra t ng đ n v  mà không đòi h i ph i ch yớ ể ể ừ ơ ị ỏ ả ạ  

ng d ng ho c ph i ch y Web Server

Không s  d ng ViewState đ  đi u khi n  ng d ng.ử ụ ể ề ể ứ ụ

B  sung m i h  th ng đ nh tuy n (Routers).ổ ớ ệ ố ị ế

H  tr  t i đa cho vi c ki m th  b ng vi c t o và cài đ t các unitests tỗ ợ ố ệ ể ử ằ ệ ạ ặ ự 

đ ng.ộ

H  tr  k t h p r t t t gi a ngỗ ợ ế ợ ấ ố ữ ườ ậi l p trình và thi t k  giao di n.ế ế ệ

Khuy t đi mế ể

Thay đ i cách l p trình c a Web Forms nên gây ra nhi u khó khăn choổ ậ ủ ề  

nh ng ngữ ười chuyên s  d ng Web Forms chuy n sang mô hình nàyử ụ ể  (không còn hướng đ n các s  ki n c a các control).ế ự ể ủ

Ngườ ậi l p trình ph i bi t nhi u v  HTTP, HTML, CSS và Javascript.ả ế ề ề

Áp d ng cho d  án nh  thì quá c ng k nh và ph c t pụ ự ỏ ồ ề ứ ạ

2.5. So sánh MVC và Web Form

ASP.NET Web Forms s  d ng ViewState đ  qu n lý ử ụ ể ả  khi có s  tự ương tác 

v i ngớ ười dùng thì x  lý ch m.ử ậ

ASP.NET MVC chia làm 3 thành ph n: Model, View, Controller.ầ

M i tọ ương tác c a ngủ ười dùng v i Views s  đớ ẽ ược x  lý thông qua vi cử ệ  

th c   hi n   các   phự ệ ương   th c   hành   đ ng   trong   Controllers,   không   cònứ ộ  PostBack, Lifecycle và events

Vi c ki m tra (test) và g  l i (debug)ệ ể ỡ ỗ

ASP.NET Web Forms ch y t t c  các ti n trình, s  thay đ i ID c a b tạ ấ ả ế ự ổ ủ ấ  

k  control nào cũng  nh hỳ ả ưởng đ n  ng d ng.ế ứ ụ

V i MVC, vi c đó có th  s  d ng các unit test đ  th m đ nh r t d  dàngớ ệ ể ử ụ ể ẩ ị ấ ễ  các Controller th c hi n th  nào.ự ệ ế

B ng so sánh các tính năng gi a ASP.NET Web Forms và ASP.NET MVCả ữTính năng ASP.NET Web Forms ASP.NET MVC

Ki n trúcế Mô   hình   Web   form  

Bussiness  Database

S  d ng vi c phân chia  ngử ụ ệ ứ  

d ng   thành   Models,   Views,ụ  Controllers

Cú pháp S  d ng cú pháp c a Webử ụ ủ  

Form, t t c  các s  ki n vàấ ả ự ệ  controls do Server qu n lýả

Các s  ki n đự ệ ược đi u khi nề ể  

b i   các   controller,   cácở  controller   không   do   Server 

qu n lýảTruy   c p   dậ ữ 

li uệ S  d ng h u h t các côngử ụ ầ ế  

ngh  truy c p d  li u trongệ ậ ữ ệ   Ph n l n dùng LINQ to SQL

và Entity Framework  đ  t oể ạ  

Tương   tác 

v i Javascriptớ Khó   khăn   vì   các   control 

được đi u khi n b i Serverề ể ở D   dàng   vì   các   đ i   tễ ố ượ  ng

không do Server qu n lýảURL Không thân thi nệ Thân thi nệ

CÂU H I, BÀI T PỎ Ậ

1.1. Cho bi t tên và ch c năng c a t ng thành ph n chính trong  ng d ng webế ứ ủ ừ ầ ứ ụ  ASP.NET MVC

BÀI 2: T O  NG D NG Ạ Ứ Ụ WEB ASP.NET MVC

Mã bài: 28.2

Gi i thi u:ớ ệ

Bài này cung c p cho ngấ ườ ọi h c nh ng ki n th c và k  năng đ  t o m iữ ế ứ ỹ ể ạ ớ  

m t   ng   d ng   ASP.NET   MVC   s   d ng   mã   Razor   và   cài   đ t   Entityộ ứ ụ ử ụ ặ  Framework

Hình 2.1. T o  ng d ng ASP.NET ạ ứ ụ

Ch n MVC trong h p tho i Select a template, ch n Change Authenticationọ ộ ạ ọ

Hình 2.2. Ch n mô hình MVC cho  ng d ng web ọ ứ ụ

Ch n No Authenticationọ

Hình 2.3. Ch n lo i ch ng th c qu n lý ng ọ ạ ứ ự ả ườ i dùng

T  ch c l u trổ ứ ư ữ

C u trúc th  m c c a  ng d ng ASP.NET MVC g m 3 th c m c chính:ấ ư ụ ủ ứ ụ ồ ự ụ

Controllers: l u tr  các class đóng vai trò Controllerư ữ

Models: l u tr  các class Modelư ữ

Views: l u tr  các Viewư ữ

Các th  m c khácư ụ

Content: ch a các t p tin CSS, hình  nh liên quan đ n giao di nứ ậ ả ế ệ

Scripts: ch a các th  vi n Javascript, jqueryứ ư ệ

App_Start: ch a các t p tin liên quan đ n vi c c u hình cho các tính năngứ ậ ế ệ ấ  

nh : routes, filters, bundlesư

App_Data: l u tr  t p tin d  li u XML ho c local database, SQLiteư ữ ậ ữ ệ ặ

Bin: l u tr  các compiled c a  ng d ngư ữ ủ ứ ụ

Phân bi t ASPX và Razor View Engineệ

Gi ng nhauố

Đ u dùng đ  hi n th  giao di n trên Web Browser, có khái ni m v  Masterề ể ệ ị ệ ệ ề  Page và User Control được đ nh nghĩa v i Layout (View đ  k  th aị ớ ể ế ừ  Layout) và PartialView (subView)

Khác nhau

ASPX: v n có th  s  d ng đẫ ể ử ụ ược các Master Page và User Control (k  cể ả đóng vai trò ch  hi n th  d  li u và không x  lý đỉ ệ ị ữ ệ ử ược d  li u) ữ ệ  d  dàngễ  cho ngườ ậi l p trình ch a k p thích nghi v i phong cách c a MVC, ngoàiư ị ớ ủ  

ra v n có th  s  d ng đẫ ể ử ụ ược subView đ  thay đ i cho User Control đ  xể ổ ể ử 

lý d  li u t  actionữ ệ ừ

Razor: được h  tr  m nh h n v  Javascript, tùy ch nh linh ho t gi a codeỗ ợ ạ ơ ề ỉ ạ ữ  C# v i HTML, linh ho t trong Layout và subView (PartialView)ớ ạ

var i = 0;

while (i < 5) {

i += 1;

<p>Line @i</p>

} }

T p tin có ph n m  r ng là ậ ầ ở ộ .cshtml

T o Web Page đ n gi n v i mã Razorạ ơ ả ớ

Click chu t ph i lên project ộ ả  Add  New Item…

Hình 2.4. T o web page Razor ạ

Biên t p n i dungậ ộ

Bài 2.1: T o  ng d ng ASP.NET MVC có tên Bookstore.ạ ứ ụ

Bài 2.2. S  d ng vòng l p t o n i dung cho trang ch ử ụ ặ ạ ộ ủ

Bài 2.2. S  d ng vòng l p for ho c foreach.ử ụ ặ ặ

Bài 2.3. S  d ng vòng l p for ho c foreach, k t h p v i các th  HTML t oử ụ ặ ặ ế ợ ớ ẻ ạ  table

T o đạ ược các Data Model v i EFớ

L p trình đậ ược các hàm đ c và c p nh t d  li u thông qua Modelọ ậ ậ ữ ệ

C n th n, th c hi n đúng các bẩ ậ ự ệ ướ ạc t o Entity Data Model, khai báo đúng thông tin k t n i đ n ngu n d  li uế ố ế ồ ữ ệ

N i dung chính:ộ

1 Khái ni mệ

Là thành ph n c t lõi c a  ng d ng, có nhi m v  truy c p d  li u t  m tầ ố ủ ứ ụ ệ ụ ậ ữ ệ ừ ộ  ngu n d  li u và cung c p d  li u cho ngu n d  li u đó.ồ ữ ệ ấ ữ ệ ồ ữ ệ

L u tr  thông tin, tr ng thái c a các đ i tư ữ ạ ủ ố ượng

T t c  các nghi p v  logic đ u đấ ả ệ ụ ề ược th c thi   Model.ự ở

M t model class trong  ng d ng ASP.NET MVC không tr c ti p x  lý đ uộ ứ ụ ự ế ử ầ  vào t  trình duy t, cũng không t o ra HTML cho trình duy t.ừ ệ ạ ệ

D  li u nh p vào t  ngữ ệ ậ ừ ười dùng thông qua View đ  ki m tra   Modelể ể ở  

trước khi l u vào CSDL.ư

Model có th  để ược phân làm 3 lo i: Data Model, Business Model và Viewạ  Model v i nhi u v  c  th  khác nhau.ớ ệ ụ ụ ể

Các lo i Modelạ

2.1. Data Model

Các đ i tố ượng trong Data Model đ i di n cho các class tạ ệ ương tác v i m tớ ộ  CSDL. Các class đượ ạc t o ra b i nh ng công c  nh  Entity Frameworkở ữ ụ ư  (EF)

Các class này có th  để ượ ạc t o ra t  phừ ương pháp Database First ho c Codeặ  first. Ngoài ra, cũng có th  s  d ng ADO.NET đ  t o th  công.ể ử ụ ể ạ ủ

2.2. Business Model

Các class trong Business model thường được th c hi n ch c năng ki m traự ệ ứ ể  các quy t c nghi p v  ho c x  lý nghi p v  (ví d : tính toán chi phí v nắ ệ ụ ặ ử ệ ụ ụ ậ  chuy n c  th  cho m t gi  hàng d a trên tr ng lể ụ ể ộ ỏ ự ọ ượng c a m t hàng đủ ặ ượ  cmua). V i 1 ph n trách nhi m x  lý đó, các class trong business model có thớ ầ ệ ử ể 

tương tác v i các class trong Data model đ  đ c ho c l u tr  d  li u trongớ ể ọ ặ ư ữ ữ ệ  CSDL

Ch c năng c a m t view model class không x  lý b t k  đi u gì, thay vàoứ ủ ộ ử ấ ỳ ề  

đó, ch c năng duy nh t c a nó là ch a d  li u và siêu d  li u tùy ch nứ ấ ủ ứ ữ ệ ữ ệ ọ  (optional metadata) giúp cho view render chính xác

View model cũng được s  d ng khi ngử ụ ười dùng yêu c u t  m t view đãầ ừ ộ  

được render trước đó (ví d : khi submit m t form liên h )ụ ộ ệ

T o Data Modelạ

3.1. T o CSDL bookstore trong projectạ

Bước 1: click chu t ph i lên th  m c App_Data c a project.ộ ả ư ụ ủ

Bước 2: ch n Add ọ  New Item… Xu t hi n h p thoai.ấ ệ ộ

Bước 3: Ch n Data, SQL Server Database r i đ t tên cho CSDL r i ch n Add.ọ ồ ặ ồ ọ

Bước 4: thi t k  c u trúc và nh p d  li u cho các table theo yêu c u.ế ế ấ ậ ữ ệ ầ

3.2. T o ADO.NET Entity Data Modelạ

Bước 1: t o th  m c dtModels trong th  m c Modelsạ ư ụ ư ụ

Bướ 2: click chu t ph i th  m c Models, ch n Add c  ộ ả ư ụ ọ  ADO.NET Entity Dat Model

Hình 3.1. Các b ướ ạ c t o ADO.NET Entity Data Model

Bướ 3: đ t tên cho model r i ch n OKc  ặ ồ ọ

Hình 3.2. H p tho i đ t tên cho Model ộ ạ ặ

Bướ 4: ch n Code First from database nh  hình bên dc  ọ ư ướ ồi r i ch n Nextọ

Bướ 5: đ t tên thông tin k t n i đ  l u vào Web.configc  ặ ế ố ể ư

Hình 3.3. Đ t tên cho chu i k t n i ặ ỗ ế ố

Bướ 6: đánh d u ch n các object trong CSDLc  ấ ọ  r i ch n Finishồ ọ

Hình 3.4. Ch n các đ i t ọ ố ượ ng trong CSDL

K t qu  có đế ả ược sau khi hoàn t t t o ADO.NET Entity Data Modelấ ạ

Hình 3.5. Các l p đ i t ớ ố ượ ng trong model

Model Binder

Model binder trong MVC cung c p m t cách th c đ n gi n đ  ánh x  cácấ ộ ứ ơ ả ể ạ  giá tr  đị ược g i t  form thành 1 ki u d  li u c a .NET Framework vàử ừ ể ữ ệ ủ  truy n ki u này đ n phề ể ế ương th c action nh  m t tham s ứ ư ộ ố

Các model binder gi ng nh  công c  chuy n đ i ki u d  li u b i vì chúngố ư ụ ể ổ ể ữ ệ ở  

có th  chuy n đ i các HTTP request thành các đ i tể ể ổ ố ượng được truy nề  

vào phương th c action. Tuy nhiên, chúng cũng có thông tin v  ng  c nhứ ề ữ ả  

c a controller hi n hành.ủ ệ

Model binder m c đ nh trong MVC có tên là DefaultModelBinder.ặ ị

4.1. Gi i thi u DefaultModelBinderớ ệ

Có kh  năng th c hi n mô hình liên k t v i h u h t các ki u c a .NETả ự ệ ế ớ ầ ế ể ủ  Framework, bao g m:ồ

Các class theo truy n th ng, ề ố Array, IList, ICollection và c  v i các đ iả ớ ố  

tượng IDictionary

4.2. Gi i thi u Model Binding (Mô hình liên k t)ớ ệ ế

Model Binding là tính năng m nh c a ASP.NET MVCạ ủ

Giúp vi c vi t phệ ế ương th c nh n m t đ i tứ ậ ộ ố ượng tùy bi n nh  là m tế ư ộ  tham s ố

Giúp t p trung vào vi c cài đ t logic h n là suy nghĩ làm cách nào đ  ánhậ ệ ặ ơ ể  

x  d  li u ngạ ữ ệ ười dùng v i các đ i tớ ố ượng .NET

Ví d  1: Edit Viewụ

Khi các input name trong form được đ t gi ng v i các property name c a đ iặ ố ớ ủ ố  

tượng d  li u mà nó liên k tữ ệ ế

 Tính năng model binding c a ASP.NET MVC cung c p s  h  tr  cho vi củ ấ ẽ ỗ ợ ệ  

t o ánh x  các giá tr  đạ ạ ị ược g i t  form sang ki u đ i tọ ừ ể ố ượng tương  ng v iứ ớ  tham s  c a phố ủ ương th c action.ứ

Ví d  2: t o model class và th c hi n model binding đ n gi n (ngu n d  li uụ ạ ự ệ ơ ả ồ ữ ệ  

là table c a CSDL SQL Server)ủ

Model class: PhanLoaiController, g m các action: Index, Create, Editồ

Các View tương  ng v i action: Index, Create, Editứ ớ

 Xem, Thêm, S a d  li u t  CSDLử ữ ệ ừ

Trong PhanLoaiController class

Các View tương  ng v i action trong PhanLoaiController classứ ớ

CÂU H I, BÀI T PỎ Ậ

Bài 3.1. Kh o sát các t p tin bên trong th  m c ả ậ ư ụ dtModels, ghi l i tên class, cácạ  thu c tính bên trong class  ộ   Nh n xét m i tậ ố ương quan gi a các class  ữ bên trong ADO.NET Entity Data Model v i các table bên trong CSDLớ

Nh  ch  đ nh s  d ng Layout ho c không s  d ng khi t o Viewớ ỉ ị ử ụ ặ ử ụ ạ

T o View tạ ương  ng v i Action tránh gây l iứ ớ ỗ

N i dung chính:ộ

1 Khái ni m Viewệ

Hi n th  thông tin cho ngể ị ười dùng

Nh n các d  li u nh p vào t  ngậ ữ ệ ậ ừ ười dùng

G i các yêu c u đ n controllerử ầ ế

Sao đó, nh n l i các ph n h i t  controller và hi n th  k t qu  cho ngậ ạ ẩ ồ ừ ể ị ế ả ườ  idùng

T o Viewạ

2.1. Các lo i Viewạ

Strongly­typed view: view có đ nh ki u m nh, view này s  nh n đị ể ạ ẽ ậ ược m tộ  

ki u đ i tể ố ượng trong model nh  là m t tham s  t  action method. Sư ộ ố ừ ử 

d ng view này có nh ng thu n l i sau:ụ ữ ậ ợ

IntelliSense: Visual Studio h  tr  IntelliSense khi truy c p các thu c tính,ỗ ợ ậ ộ  

Hình 4.2. Khai báo thu c tính cho View ộ

S  d ng Layout View (Master) v i Razorử ụ ớ

3.1. Gi i thi u _ViewStartớ ệ

View _ViewStart.cshtml s  đẽ ược thi hành khi b t đ u render view page, b tắ ầ ấ  

k  đo n code nào trong view _ViewStart.cshtml đ u s  đỳ ạ ề ẽ ược thi hành 

Hình 4.3. T o Layout View Page ạ

Layout view đượ ạc t o ra v i c u trúc c  b n nh  sau:ớ ấ ơ ả ư

Hình 4.4. Thi t k  giao di n cho Layout ế ế ệ

Ta có th  xây d ng 1 layout cho website t  layout view này.ể ự ừ

M t s  đi m c n l u ýộ ố ể ầ ư

Trong layout view s  ch aẽ ứ

Các khai báo CSS, Script dùng chung cho các view s  d ng layoutử ụ

Ph n thi t k  b  c c chung cho các view s  d ng nóầ ế ế ố ụ ử ụ

Trong thành ph n body ph i có l nhầ ả ệ

@RenderBody()

Là n i ch a ph n thi t k  n i dung chính c a t ng view c  thơ ứ ầ ế ế ộ ủ ừ ụ ể

Ch  duy nh t m t l nh RenderBody trong m t layout viewỉ ấ ộ ệ ộ

Đo n code có đạ ược

Cú pháp khai báo s  d ng layout trong viewử ụ

S  d ng layout: ử ụ @{Layout = “Đường dẫn/TênLayout”; }

Không s  d ng layout: ử ụ @{Layout = null; }

N u không khai báo thì view s  d ng layout m c đ nh đế ử ụ ặ ị ược khai báo trong _ViewStart.cshtml

3.4. T o Partial Viewạ

Trong th  m c Views, click chu t ph i lên th  m c ch a, ch n Add ư ụ ộ ả ư ụ ứ ọ  ViewĐánh d u ch n “Create as a partial view”, nh p và ch n các thông tin nh  hìnhấ ọ ậ ọ ư  bên dưới

@Html.Partial(string partialViewName, object Model): có khai báo model 

c a partial viewủ

@Html.RenderPartial(string name): render partial view b ng cách s  d ngằ ử ụ  HTML helper c  thụ ể

@Html.RenderPartial(string name, object Model): có thi t l p thu c tínhế ậ ộ  Model cho model c  th ).ụ ể

 L y mã HTML cu i cùng c a partial view và hi n th  trong view ch a nó.ấ ố ủ ể ị ứ