MVC – Lab 01comp1064.weebly.com/uploads/1/6/9/3/16936172/mvc_lab01_mohinhmvc.pdfđể giảm kích thước). Các lớp này được gọi trong Application_Start của Global.asax

Ver 10 ndash 2016 FIT HCMUP NET Technology Lab MVC ndash LAB 01]

Ths Lương Trần Hy Hiến KHOA CNTT ndash TRƯỜNG ĐH SƯ PHẠM TP HCM 1

Lab01 M ndash V ndash C Lưu yacute Để thực hagravenh caacutec bạn phải cagravei Visual Studio 2013 trở lecircn mới hỗ trợ MVC5

1 Mục điacutech

Giới thiệu mocirc higravenh MVC

Model Controller View

Phacircn biệt ViewData ViewBag TempData

2 Khởi động

Tạo mới project chọn Visual C Web Template

Sau khi tạo mới Web Application MVC5 cửa sổ tiếp theo hiện lecircn chọn MVC



Sau khi chọn xong caacutec bước trecircn bạn coacute được ứng dụng mẫu MVC Application với cấu truacutec như higravenh

Cấu truacutec của một MVC Web Application

Thư mục Mocirc tả Controllers Thư mục chứa caacutec lớp xử lyacute Controller của dự aacuten Models Thư mục chứa caacutec lớp đối tượng Model của dự aacuten Views Thư mục đặt caacutec View giao diện Scripts Thư mục chứa caacutec bộ thư viện javascript được tiacutech hợp vagraveo sẵn của MVC hoặc lagrave nơi

bạn tổ chức vagrave đặt caacutec thư viện Javascript magrave migravenh tự phaacutet triển fonts Chứa caacutec mẫu font của thư viện Bootstrap Contents Chứa nội dung tĩnh như CSS higravenh ảnh hoặc caacutec file javascript

App_Data Chứa CSDL nội bộ nếu coacute

App_Start Caacutec lớp cấu higravenh của ứng dụng như Routing Bundling (hỗ trợ neacuten CSS javascript

để giảm kiacutech thước) Caacutec lớp nagravey được gọi trong Application_Start của Globalasax

Tập tin Globalasax Định nghĩa caacutec sự kiện quản lyacute vograveng đời ứng dụng

Tập tin WebConfig Chứa thocircng tin cấu higravenh ứng dụng

3 Viacute dụ Model View Controller quản lyacute saacutech

31 Tạo mới Model

namespace MVC_Day01Models public class Book public int BookID get set



public string BookName get set public string Author get set public string ImageCover get set

32 Tạo Controller

Tạo mới controller đặt tecircn lagrave BookController dugraveng Template Empty

Thử viết một số method

namespace MVC_Day01Controllers public class BookController Controller public string LayGio() return DateTimeNowToString() public int SoMayMan() Random rd = new Random()



return rdNext(10000 99999) public string Chao(string HoTen) return Xin chagraveo + HoTen

33 Kiểm tra từ địa chỉ trigravenh duyệt



34 Tạo Action BookList

35 Tạo View

Tạo mới View để hiển thị danh saacutech Book ra giao diện Nhấn chuột phải vagraveo hagravem BookList chọn

Add -- gt New view cửa sổ mới hiện lecircn chọn tham số như higravenh



Chọn đường dẫn tới tập tin _Layoutcshtml

Code tự sinh ra

model IEnumerableltMVC_Day01ModelsBookgt ViewBagTitle = BookList Layout = ~ViewsShared_Layoutcshtml lth2gtBookListlth2gt ltpgt HtmlActionLink(Create New Create) ltpgt lttable class=tablegt lttrgt ltthgt HtmlDisplayNameFor(model =gt modelBookName) ltthgt ltthgt HtmlDisplayNameFor(model =gt modelAuthor) ltthgt ltthgt HtmlDisplayNameFor(model =gt modelImageCover) ltthgt ltthgtltthgt lttrgt foreach (var item in Model) lttrgt lttdgt HtmlDisplayFor(modelItem =gt itemBookName) lttdgt lttdgt HtmlDisplayFor(modelItem =gt itemAuthor)



lttdgt lttdgt HtmlDisplayFor(modelItem =gt itemImageCover) lttdgt lttdgt HtmlActionLink(Edit Edit new id=itemBookID ) | HtmlActionLink(Details Details new id=itemBookID ) | HtmlActionLink(Delete Delete new id=itemBookID ) lttdgt lttrgt lttablegt

Thử hiển thị View

Copy caacutec higravenh vagraveo thư mục Sach nằm trong thư mục Content vagrave chỉnh sửa để hiển thị higravenh



4 ViewBag ViewData TempData

Để truyền dữ liệu giữa Controller vagrave View ta coacute 3 caacutech sau ViewBag ViewData TempData

ViewBag ViewData chỉ coacute taacutec dụng trong request hiện tại (chuyển View khocircng coacute taacutec

dụng)

o ViewData[ltkeygt] = ltvaluegt

o ViewBagltPropertygt = ltvaluegt

TempData cho pheacutep truyền từ request hiện tại sang subrequest

o TempData[ltKeygt] = ltvaluegt

41 Viacute dụ ViewData

Thecircm nội dung cho Action Index()

public class TestController Controller GET Test public ActionResult Index() ViewData[Message] = Message from ViewData ViewData[CurrentTime] = DateTimeNow return View()

Tạo View tương ứng



42 Viacute dụ ViewBag



43 TempData

Thử demo httphostportTestDemo thigrave cũng chuyển sang httphostportTestHienThi



Sau khi chọn xong caacutec bước trecircn bạn coacute được ứng dụng mẫu MVC Application với cấu truacutec như higravenh

Cấu truacutec của một MVC Web Application

Thư mục Mocirc tả Controllers Thư mục chứa caacutec lớp xử lyacute Controller của dự aacuten Models Thư mục chứa caacutec lớp đối tượng Model của dự aacuten Views Thư mục đặt caacutec View giao diện Scripts Thư mục chứa caacutec bộ thư viện javascript được tiacutech hợp vagraveo sẵn của MVC hoặc lagrave nơi

bạn tổ chức vagrave đặt caacutec thư viện Javascript magrave migravenh tự phaacutet triển fonts Chứa caacutec mẫu font của thư viện Bootstrap Contents Chứa nội dung tĩnh như CSS higravenh ảnh hoặc caacutec file javascript

App_Data Chứa CSDL nội bộ nếu coacute

App_Start Caacutec lớp cấu higravenh của ứng dụng như Routing Bundling (hỗ trợ neacuten CSS javascript

để giảm kiacutech thước) Caacutec lớp nagravey được gọi trong Application_Start của Globalasax

Tập tin Globalasax Định nghĩa caacutec sự kiện quản lyacute vograveng đời ứng dụng

Tập tin WebConfig Chứa thocircng tin cấu higravenh ứng dụng

3 Viacute dụ Model View Controller quản lyacute saacutech

31 Tạo mới Model

namespace MVC_Day01Models public class Book public int BookID get set




32 Tạo Controller











35 Tạo View






Code tự sinh ra












dụng)














43 TempData





32 Tạo Controller











35 Tạo View






Code tự sinh ra












dụng)














43 TempData









35 Tạo View






Code tự sinh ra












dụng)














43 TempData





35 Tạo View






Code tự sinh ra












dụng)














43 TempData





Code tự sinh ra












dụng)














43 TempData












dụng)














43 TempData







dụng)














43 TempData







43 TempData




43 TempData


Documents

MVC – Lab 01comp1064.weebly.com/uploads/1/6/9/3/16936172/mvc_lab01_mohinhmvc.pdfđể giảm kích thước). Các lớp này được gọi trong Application_Start của Global.asax