DỰ ÁN ASP.NET MVC 4 MUSIC STORE

Similar documents
TÀI LIỆU Hướng dẫn cài đặt thư viện ký số - ACBSignPlugin

CMIS 2.0 Help Hướng dẫn cài đặt hệ thống Máy chủ ứng dụng. Version 1.0

CÀI ĐẶT MẠNG CHO MÁY IN LBP 3500 và LBP 5000

CHƯƠNG I. TỔNG QUAN VỀ HỆ THỐNG DCS- CENTUM CS 3000

NATIVE ADS. Apply from 01/03/2017 to 31/12/2017

BIÊN DỊCH VÀ CÀI ĐẶT NACHOS

Bài 15: Bàn Thảo Chuyến Du Ngoạn - cách gợi ý; dùng từ on và happening

PHÂN TÍCH DIỄN BIẾN LƯU LƯỢNG VÀ MỰC NƯỚC SÔNG HỒNG MÙA KIỆT

CHƯƠNG IX CÁC LỆNH VẼ VÀ TẠO HÌNH (TIẾP)

5/13/2011. Bài 3: Báo cáo kết quả kinh doanh. Nội dung. Trình bày báo cáo kết quả kinh doanh

Các bước trong phân khúc thi truờng. Chương 3Phân khúc thị trường. TS Nguyễn Minh Đức. Market Positioning. Market Targeting. Market Segmentation

Phương thức trong một lớp

Hướng dẫn cài Windows 7 từ ổ cứng HDD bằng ổ đĩa ảo qua file ISO bằng hình ảnh minh họa

XÂY DỰNG MÔ HÌNH CƠ SỞ DỮ LIỆU PHÂN TÁN CHO HỆ THỐNG THÔNG TIN ĐẤT ĐAI CẤP TỈNH VÀ GIẢI PHÁP ĐỒNG BỘ HÓA CƠ SỞ DỮ LIỆU TRÊN ORACLE

KIỂM TOÁN CHU TRÌNH BÁN HÀNG VÀ NỢ PHẢI THU

Model SMB Lưỡi dao, bộ phận cảm biến nhiệt và lòng bình bằng thép không gỉ 304 an toàn cho sức khỏe.

PREMIER VILLAGE PHU QUOC RESORT

Chương 3: Chiến lược tìm kiếm có thông tin heuristic. Giảng viên: Nguyễn Văn Hòa Khoa CNTT - ĐH An Giang

PHÁT TRIỂN ỨNG DỤNG WEB

Bottle Feeding Your Baby

CÁC BIỆN PHÁP BẢO VỆ THEO THỦ TỤC Quyền Giáo Dục Đặc Biệt của Gia Đình Quý vị

CƠ SỞ DỮ LIỆU PHÂN TÁN

Điểm Quan Trọng về Phúc Lợi

Hiện nó đang được tân trang toàn bộ tại Hải quân công xưởng số 35 tại thành phố Murmansk-Nga và dự trù trở lại biển cả vào năm 2021.

Chúng ta cùng xem xét bài toán quen thuộc sau. Chứng minh. Cách 1. F H N C

Sổ tay cài đặt Ubuntu từ live CD

Định hình khối. Rèn kim loại

Những Điểm Chính. Federal Poverty Guidelines (Hướng dẫn Chuẩn Nghèo Liên bang) như được

NHỊP ĐẬP THỊ TRƯỜNG QUÝ 3, 2015

QUY CÁCH LUẬN VĂN THẠC SĨ

Thỏa Thuận về Công Nghệ của UPS

nhau. P Z 1 /(O) P Z P X /(Y T ) khi và chỉ khi Z 1 A Z 1 B XA XB /(Y T ) = P Z/(O) sin Z 1 Y 1A PX 1 P X P X /(Y T ) = P Z /(Y T ).

SB 946 (quy định bảo hiểm y tế tư nhân phải cung cấp một số dịch vụ cho những người mắc bệnh tự kỷ) có ý nghĩa gì đối với tôi?

DANH SÁCH THÍ SINH DỰ THI IC3 IC3 REGISTRATION FORM

BÀI TẬP DỰ ÁN ĐÂU TƯ (Học kỳ 3. Năm )

Register your product and get support at. POS9002 series Hướng dẫn sử dụng 55POS9002

BỘ THÔNG TIN VÀ TRUYỀN THÔNG TRUNG TÂM INTERNET VIỆT NAM TÀI LIỆU HƯỚNG DẪN TRIỂN KHAI DNSSEC TẠI CÁC NHÀ ĐĂNG KÝ TÊN MIỀN

CHƯƠNG VII HÌNH CẮT, MẶT CẮT VÀ KÍ HIỆU VẬT LIỆU

Để được hỗ trợ về sản phẩm, truy cập vào Đây là phiên bản trên Internet của xuất bản này. Chỉ in ra để sử dụng cá nhân.

Bài giảng Kiến trúc của hệ vi xử lý

Savor Mid-Autumn Treasures at Hilton Hanoi Opera! Gìn giữ nét đẹp cổ truyền

Giáo dục trí tuệ mà không giáo dục con tim thì kể như là không có giáo dục.

BẢN TIN THÁNG 05 NĂM 2017.

2.1.3 Bảng mã ASCII Bộ vi xử lý (Central Processing Unit, CPU) Thanh ghi... 16

TRƢỜNG ĐẠI HỌC BÁCH KHOA ĐẠI HỌC QUỐC GIA TP.HCM

PHÂN PHỐI CHUẨN. TS Nguyen Ngoc Rang; Website: bvag.com.vn; trang:1

So sánh các phương pháp phân tích ổn định nền đường đắp

(Phần Excel) - Hướng dẫn chi tiết cách giải (giải đầy đủ)

Đường thành phố tiểu bang zip code. Affordable Care Act/Covered California Tư nhân (nêu rõ): HMO/PPO (khoanh tròn)

Hướng dẫn GeoGebra. Bản chính thức 3.0

Tng , , ,99

HỌC SINH THÀNH CÔNG. Cẩm Nang Hướng Dẫn Phụ Huynh Hỗ Trợ CÁC LỚP : MẪU GIÁO ĐẾN TRUNG HỌC. Quốc Gia mọitrẻ em.mộttiếng nói

The W Gourmet mooncake gift sets are presently available at:

Chương 17. Các mô hình hồi quy dữ liệu bảng

MỞ ĐẦU... 1 CHƯƠNG I. TỔNG QUAN MỘT SỐ KHÁI NIỆM CƠ BẢN...

MICROMASTER kw 11 kw

lõi ngôn ngữ trung gian của ActionScript.

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự do - Hạnh phúc Số: 02/2014/TT-BTTTT Hà Nội, ngày 10 tháng 3 năm 2014 THÔNG TƯ

ĐIỀU KHIỂN ROBOT DÒ ĐƯỜNG SỬ DỤNG BỘ ĐIỀU KHIỂN PID KẾT HỢP PHƯƠNG PHÁP PWM

ACBS Trade Pro. Hướng dẫn sử dụng

Abstract. Recently, the statistical framework based on Hidden Markov Models (HMMs) plays an important role in the speech synthesis method.

AT INTERCONTINENTAL HANOI WESTLAKE 1

Ô NHIỄM ĐẤT, NƯỚC VÀ CÁC PHƯƠNG PHÁP XỬ LÝ

ĐÁNH GIÁ ẢNH HƯỞNG CỦA CHIỀU RỘNG TẤM ĐẾN BIẾN DẠNG GÓC KHI HÀN TẤM TÔN BAO VỎ TÀU THỦY

Chương1: CÁC THAO TÁC CƠ BẢN TRONG CORELDRAW

Thiết bị quang~ Bởi: Khoa CNTT ĐHSP KT Hưng Yên

Khám phá thế giới với Thẻ Tín Dụng ANZ Travel Visa Platinum

Các phương pháp thống kê mô tả cho dữ liệu chéo

BẢN TIN THÁNG 09 NĂM 2015

HƯỚNG DẪN SỬ DỤNG WORD CHƯƠNG I Làm quen với giao diện mới

SAVOR MID-AUTUMN FESTIVAL WITH HILTON

Ông ta là ai vậy? (3) Who is he? (3) (tiếp theo và hết)

Tiến hành Nghiên cứu tổng quan - Phương pháp và công cụ hỗ trợ

Các tùy chọn của họ biến tần điều khiển vector CHV. Hướng dẫn vận hành card cấp nước.

Công ty Cổ phần Tập đoàn Ma San Thông tin về Công ty

ABBYY FineReader 14. Hướng dẫn của quản trị viên hệ thống ABBYY Production LLC. Mọi quyền được bảo lưu.

NGHIÊN CỨU ĐẶC ĐIỂM BIẾN ĐỘNG DÒNG CHẢY VÙNG VEN BIỂN HẢI PHÒNG

GIỚI THIỆU. Nguồn: Nguồn:

CHƯƠNG IV CÁC KĨ THUẬT HIỆU CHỈNH CƠ BẢN

Ghi danh Bỏ phiếu tại Tiểu bang của quý vị bằng cách sử dụng Cẩm nang Hướng dẫn và Mẫu đơn dạng Bưu thiệp này

Trịnh Minh Ngọc*, Nguyễn Thị Ngoan

PHÂN TÍCH MÓNG CỌC CHỊU TẢI TRỌNG NGANG VÀ KỸ THUẬT LẬP MÔ HÌNH TƯƠNG TÁC CỌC-ĐẤT PHI TUYẾN

Thông Tin Dành Cho Gia Đình và Bệnh Nhân. Mụn Trứng Cá. Nguyên nhân gây ra mụn trứng cá là gì? Các loại khác nhau của mụn trứng cá là gì?

MỐI QUAN HỆ GIỮA ĐỘ THOÁNG KHÍ CỦA BAO BÌ BẢO QUẢN CHẤT LƯỢNG CỦA NHÃN XUỒNG CƠM VÀNG TRONG QUÁ TRÌNH TỒN TRỮ

GS1 DataMatrix Giới thiệu và khái quát kỹ thuật về phương pháp mã hình tiên tiến nhất dùng cùng với các số phân định ứng dụng GS1.

Các dữ liệu của chuỗi thời gian đã và đang được sử dụng một cách thường xuyên và sâu rộng,

Bộ Kế hoạch & Đầu tư Sở Kế hoạch & Đầu tư Điện Biên

Tiến tới hoàn thiện và triển khai hệ thống mô hình giám sát, dự báo và cảnh báo biển Việt Nam

Biên tập: Megan Dyson, Ger Bergkamp và John Scanlon

Ths. Nguyễn Tăng Thanh Bình, Tomohide Takeyama, Masaki Kitazume

khu vực Vịnh Nha Trang

Nghiên cứu này nhằm phân tích mối quan hệ giữa nguồn

HOÀNG ĐĂNG NGUYỄN PGS.TS NGUYỄN KIM LỢI NGUYỄN VĂN PHÚ

CHÍNH SÁCH VÀ THỦ TỤC HÀNH CHÍNH

X-MAS GIFT 2017 // THE BODY SHOP

TCVN 3890:2009 PHƯƠNG TIỆN PHÒNG CHÁY VÀ CHỮA CHÁY CHO NHÀ VÀ CÔNG TRÌNH TRANG BỊ, BỐ TRÍ, KIỂM TRA, BẢO DƯỠNG

BÀI THỰC HÀNH SỐ 3 (3 tiết) Sử dụng hàm trong Excel

Hướng dẫn về Cung cấp thông tin liên quan đến đặc tính phát triển bền vững của sản phẩm

EMPEA Guidelines (Vietnamese Edition) CÁC HƯỚNG DẪN CỦAEMPEA

SỬ DỤNG ENZYME -AMYLASE TRONG THỦY PHÂN TINH BỘT TỪ GẠO HUYẾT RỒNG

Transcription:

Chương 3: Chương 3: Dự án Music Stored DỰ ÁN ASP.NET MVC 4 MUSIC STORE 3.1. Tổng quan MVC Music Store là một ứng dụng hướng dẫn, giới thiệu và giải thích từng bước để sử dụng ASP.NET MVC và Visual Web Developer để phát triển web. Ứng dụng sẽ xây dựng là một cửa hàng âm nhạc đơn giản. Có ba phần chính ứng dụng: Mua sắm Thanh toán Quản trị Sau đây là các trang cốt lõi của ứng dụng web: 3.1.1 Trang chủ Trang chủ chứa 5 mặt hàng bán chạy nhất 3.1.2 Trang hàng hóa Duyệt Album theo thể loại: Click thể loại ở bên trái. http://www.thayphet.net 1

3.1.3 Trang chi tiết hàng hóa to card. Xem chi tiết một album và thêm nó vào giỏ hàng : Click vào 1 sản phẩm Add 3.1.1 Trang quản lý giỏ hàng Xem lại giỏ hàng, loại bỏ bất kỳ mặt hàng không muốn chọn http://www.thayphet.net 2

3.1.2 Trang đăng nhập Click chuột vào liên kết Checkout khi muốn thanh toán. Nếu chưa đăng nhập sẽ được chuyển đến trang đăng nhập hoặc đăng ký cho một tài khoản người dùng sau đó mới có thể thanh toán. Ứng dụng cũng cho đăng nhập với tài khoản ngoài như Google, Facebook 3.1.3 Trang đăng ký tài khoản Nếu chưa có tài khoản thì phải đăng ký một tài khoản để có thể mua hàng. 3.1.4 Trang đặt hàng Để hoàn thành đơn đặt hàng phải điền vào thông tin vận chuyển và thông tin thanh toán. Để đơn giản hóa việc đặt hàng, chúng ta chỉ yêu cầu mã khuyến mãi của khách mua là FREE. Trên thực tế mỗi khách hàng có 1 mã khuyến mãi riêng, dựa vào mã khuyến mãi này khách hàng sẽ được giảm giá nhiều hay ít. http://www.thayphet.net 3

Sau khi đặt hàng, sẽ nhận được một màn hình xác nhận đơn hàng: 3.1.5 Trang quản trị Xây dựng một trang quản trị để quản lý thông tin hàng hóa với các chức năng tạo, chỉnh sửa, và xóa các album 3.1.5.1 Trang liệt kê http://www.thayphet.net 4

3.1.5.2 Trang thêm mới hàng hóa Chương 3: Dự án Music Stored 3.1.5.3 Trang sửa đổi thông tin hàng hóa 3.1.5.4 Trang thông tin chi tiết hàng hóa http://www.thayphet.net 5

3.1.5.5 Trang xác nhận xóa hàng hóa Chương 3: Dự án Music Stored 3.2 Tạo dự án: File -> New Project 3.2.1 Cài đặt phần mềm Visual studio 2012 có sẳn MVC 4 hoặc Visual studio 2010 và cài thêm MVC 4. (Xem phần phụ lục hướng dẫn cài đặt) 3.2.2 Tạo một dự án ASP.NET MVC 4 Chọn "New Project" từ menu File Chọn Visual C# Web Templates nhóm bên trái, chọn mẫu "ASP.NET MVC 4 Web Application". Đặt tên cho dự án là MvcMusicStore. http://www.thayphet.net 6

Project Template - chọn Internet Application View Engine - chọn Razor Ghi chú: MVC 4 cung cấp một số mẫu (template) dự án: Dự án mẫu Mô tả Empty Dự án rỗng.dù rỗng nhưng vẫn được tổ chức đầy đủ về mặt cầu trang thư mục và file cấu hình Basic Dự án cơ bản. Đầy đủ hầu hết mọi thành phần của dự án ngoại trừ authentication Internet Application Đầy đủ mọi thành phần với authentication sử dụng form http://www.thayphet.net 7

Intranet Application Đầy đủ mọi thành phần với authentication sử dụng window Mobile Application Đầy đủ mọi thành phần cho một ứng dụng web với authentication sử dụng form được truy xuất bởi thiết bị di động Web API Dịch vụ web, cho phép cung cấp API gọi qua web. Cấu trúc của dự án ở trong Solution Explorer. Một số quy ước đặt tên cơ bản cho tên thư mục được mô tả như sau: Thành phần Properties References App_Data App_Start Content Controllers Filters Images Models Scripts Views Global.asax Mô tả Chứa file AssemblyInfo.cs mô tả thông tin chung về ứng dụng: tên, mô tả, version Chứa các tham chiếu đến các thư viện cần dùng trong dự án Chứa các file dữ liệu nếu có Chứa các tập tin khởi động được chạy một lần khi ứng dụng bắt đầu Thư mục giữ dữ liệu tĩnh như hình ảnh, CSS, và bất kỳ nội dung tĩnh khác Chứa tất cả các Controller trong ứng dụng. Các Controller đáp ứng yêu cầu đến từ trình duyệt, quyết định phải làm gì với, và phản hồi kết quả lại cho người dùng. Chứa tập tin định nghĩa thuộc tính để lọc thành viên theo mô hình codefirst của EF. Nếu CSDL của thành viên chưa được tạo khi thực hiện các chức năng liên quan đến thành viên (đăng nhập, thanh toán, đăng ký ) thì CSDL được tự động tạo ra Chứa hình ảnh cần cho ứng dụng web Các mô hình được tổ chức để nắm giữ và thao tác dữ liệu Thư mục này chứa các tập tin JavaScript cần thiết của ứng dụng View chứa các mẫu giao diện người dùng của ứng dụng Tập tin sự kiện chứa các điều khiển sự kiện nhằm kiểm soát vòng đời của Request, Session, Application http://www.thayphet.net 8

Packages.config Thông tin đóng gói Web.config Tập tin xml chứa thông tin cấu hình của ứng dụng web Các thư mục này được tạo ra rỗng vì theo mặc định ASP.NET MVC framework sử dụng phương pháp "quy ước theo cấu hình" và đưa ra một số mặc định dựa trên quy ước đặt tên thư mục. Ví dụ các Controller tìm kiếm các View bên trong thư mục Views (theo mặc định) mà không cần phải xác định tường minh trong mã nguồn. 3.2.3 Chạy thử Sau khi tạo dự án có thể chạy với một số trang mặc định được tạo sẵn trong dự án. Các trang mặc định trong dự án mẫu (Internet Application) Trang Địa chỉ Mô tả Home Home/Index Trang chủ About Home/About Trang giới thiệu Contact Home/Contact Trang liên hệ Register Account/Register Trang đăng ký Login Account/Login Trang đăng nhập 3.3 Bộ điều khiển http://www.thayphet.net 9

Với các framewwork web truyền thống thì các URL đến thường được ánh xạ tới các tập tin trên đĩa. Ví dụ: một yêu cầu về một URL như "/products.aspx" được xử lý bởi một tập tin "products.aspx". Với MVC framework các địa chỉ URL yêu cầu từ trình duyệt sẽ được ánh xạ đến mã nguồn trên server. Thay vì ánh xạ các URL đến các tập tin, nó ánh xạ các URL đến các phương thức trên lớp. Các lớp này được gọi là "Controller" và các phương thức đón và xử lý yêu cầu người dùng được gọi là các phương thức hành động (action method). Các phương thức này có trách nhiệm xử lý các yêu cầu HTTP đến từ người dùng như nhận dữ liệu, lưu dữ liệu, và xác định phản hồi để gửi lại cho người dùng (hiển thị HTML, tải về một tập tin, chuyển hướng đến một URL khác nhau, vv). 3.3.1 Thêm một TestController Theo quy ước đặt tên thì Controller này có tên gọi là TestController (Kết thúc bởi chữ Controller). Click phải vào thư mục "Controllers" trong Solution Explorer và chọn "Add", chọn "Controller Đặt tên cho Controller là "TestController" Add. http://www.thayphet.net 10

Lớp TestController.cs được tạo ra với mã nguồn như sau: Bổ sung thuộc tính Hello vào ViewBag với giá trị là Hello World! để chia sẽ với trang Views/Test/Index.cshtml: 3.3.2 Thêm View cho phương thức Action Index() Tạo 1 View tên Index trong View\Test\ http://www.thayphet.net 11

Hiệu chỉnh View của Views/Test/Index 3.3.3 Chạy các ứng dụng Chạy ứng dụng và nhập vào ô địa chỉ: http://localhost:64736/test/index để gọi phương thức hành động Index() được định nghĩa trong lớp TestController. http://www.thayphet.net 12

3.3.4 Khám phá HomeController Một số thành phần được tạo sẵn khi chọn mẫu Internet Application, trong đó có HomeController. Trong HomeController có 3 phương thức hành động là Index(), About() và Contact(). Các View tương ứng với các hành động cũng được tạo sẵn trong Views/Home/*.cshtml http://www.thayphet.net 13

Index.cshtml Chương 3: Dự án Music Stored About.cshtml http://www.thayphet.net 14

Contact.cshtml http://www.thayphet.net 15

3.3.5 Thêm một StoreController Thêm một Controller được sử dụng để thực hiện chức năng duyệt cửa hàng âm nhạc. StoreController sẽ hỗ trợ ba kịch bản: Một trang liệt kê các thể loại âm nhạc trong cửa hàng âm nhạc Một trang liệt kê tất cả các album âm nhạc trong một thể loại cụ thể Một trang chi tiết để xem thông tin về một album nhạc cụ thể Thêm StoreController mới. Sử dụng phương thức Index() để thực hiện trang liệt kê danh sách tất cả các thể loại trong cửa hàng âm nhạc. Thêm hai phương thức để thực hiện hai kịch bản là Browse() và Details(). http://www.thayphet.net 16

Những phương thức này (Index(), Browse() và Details()) được gọi là phương thức hành động. Phương thức Index() trả về một chuỗi "Hello from Store.Index()". Tương tự thêm các phương thức Browse () và Details (). Chạy dự án và duyệt các URL sau: /Store /Store/Browse /Store/Details Việc truy cập vào các URL ở trên sẽ gọi các phương thức hành động trong điều khiển và phản hồi chuỗi kết quả trở lại cho trình duyệt /Store /Store/Browse http://www.thayphet.net 17

/ Store/Details Nhưng đây chỉ là chuỗi hằng, để có thể nhận dữ liệu từ URL và hiển thị dữ liệu đó ở các trang View. Trước tiên, thay đổi phương thức hành động Browse() để lấy một giá trị chuỗi truy vấn từ URL. Bằng cách thêm tham số genre vào phương thức hành động. Khi đó sẽ tự động truyền bất kỳ chuỗi truy vấn hay tham số form có tên genre vào phương thức hành động khi nó được gọi. Lưu ý: Sử dụng phương thức tiện ích HttpUtility.HtmlEncode() để mã hóa dữ liệu HTML nhập vào từ người dùng. Điều này ngăn cản người sử dụng tiêm mã Javascript vào View chẵn hạng như với liên kết /Store/Browse?genre=<script>window.location='http://hackersite.com';</ script> Bây giờ hãy duyệt đến địa chỉ /Store/Browse?genre=Disco. Chúng ta tiếp tục thay đổi phương thức hành động Details để đọc và hiển thị một tham số đầu vào có tên là ID. Không giống như phương thức trước, chúng ta sẽ nhúng nó trực tiếp trong URL của chính nó. Ví dụ: /Store/Details/5. http://www.thayphet.net 18

Qui ước định tuyến mặc định của ASP.NET MVC cho phép chuyển đổi một phần sau địa chỉ URL sau tên phương thức hành động như là một tham số có tên là "ID". Nếu phương thức hành động của chúng ta có một tham số có tên là ID thì ASP.NET MVC sẽ tự động truyền phần địa chỉ URL đó như là một tham số. Chạy ứng dụng và duyệt đến địa chỉ /Store/Details/1000 Hãy tóm tắt lại những gì đã thực hiện: Tạ ra một dự án ASP.NET MVC mới trong Visual Web Developer Xem và biết cấu trúc thư mục cơ bản của một ứng dụng ASP.NET MVC Chạy trang web sử dụng server nội bộ của ASP.NET Tạo ra hai lớp điều khiển là TestController và StoreController Thêm phương thức hành động để điều khiển các yêu cầu URL và trả về văn bản cho trình duyệt 3.4 View và Model 3.4.1 Thêm một mẫu View Để sử dụng một mẫu View, chúng ta phải thay đổi phương thức Index() trong HomeController có kiểu trả về là ActionResult và nó trả về View() thay về chuỗi như trước: duyệt. Sự thay đổi trên chỉ ra rằng sử dụng một View để tạo ra một kết quả trả về trình http://www.thayphet.net 19

Bây giờ chúng ta sẽ thêm một mẫu View thích hợp cho dự án. Để làm điều này, chúng ta đặt định vị trí con trỏ văn bản trong phương thức hành động Index(), sau đó nhấp chuột phải và chọn "Add View": Theo mặc định, hộp thoại Add View điền sẵn tên của mẫu View phù hợp với phương thức hành động sử dụng nó. Chúng ta không cần thay đổi bất kỳ các tùy chọn trên hộp thoại này, chỉ cần nhấp vào nút Add. Visual Web Developer sẽ tạo ra một mẫu View mới có tên Index.cshtml trong thư mục Views/Store (thư mục này sẽ được tạo ra nếu chưa tồn tại). http://www.thayphet.net 20

Tên và vị trí của thư mục chứa tập tin "Index.cshtml" là quan trọng, và theo qui ước đặt tên mặc định của ASP.NET MVC. Tên thư mục /Views/Home là phù hợp với Controller có tên HomeController. Tên của View mẫu (Index) phù hợp với phương thức hành động của Controller sẽ chọn để hiển thị. Theo mặc định View: /View/Home/Index.cshtml sẽ được chọn khi Chúng ta gọi phương thức hành động Index() trong HomeController: Visual Web Developer sẽ tạo ra và mở Index.cshtml sau khi chúng ta nhấp vào nút "Add" trong hộp thoại "Add View". Nội dung của Index.cshtml được hiển thị dưới đây. Ba dòng đầu tiên đặt tiêu đề trang bằng cách sử dụng ViewBag.Title. http://www.thayphet.net 21

Phần mã trong @section featured{ } sẽ được thay thế vào phần nội dung đã dành sẵn trong _Layout.cshtml. Cập nhật nội dung của thẻ <h3> là "this is your home page" như dưới đây. Chạy ứng dụng chúng ta sẽ nhận được trang web kết quả như sau. 3.4.2 Sử dụng Layout chung cho website Hầu hết các trang web có những nội dung được chia sẻ giữa nhiều trang: menu, chân trang, logo, View kiểu Razor giúp thực hiện công việc này một cách dễ dàng bằng cách sử dụng một trang có tên gọi là _Layout.cshtml đã được tự động tạo ra trong thư mục /Views/Shared nội dung như sau: http://www.thayphet.net 22

Trong tập tin _Layout.cshtml chứa các thành phần quan trọng sau Thành phần @ViewBag.Title @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/jquery") @Html.Partial("_LoginPartial") @Html.ActionLink("Store", "Index", "Store") @RenderSection("featured", required: false) @RenderSection("scripts", required: false) @RenderBody() @DateTime.Now.Year Diễn giải Thuộc tính động của ViewBag chứa tiêu đề được lập trình để thay đổi cho mỗi trang riêng Chèn css/script được khai trong App_Start/BundleConfig.cs Chèn thêm một mô đun giao diện được thiết kế riêng biệt (_LoginPartial.cshtml) đặt cạnh _Layout.cshtml Chèn thẻ liên kết Đánh dấu các vùng động được thay thế nội dung bởi các trang thành viên. Vùng này có thể được bỏ qua ở các trang thành viên Vị trí vùng dữ liệu động chính của các trang thành viên Chèn năm hiện tại Nội dung từ các View thành phần sẽ được hiển thị tại vị trí đặt lệnh @RenderBody(), và bất kỳ nội dung chung nào chúng ta muốn xuất hiện bên ngoài có thể được thêm vào _Layout.cshtml. Chúng ta muốn MVC Music Store có một tiêu đề chung cùng với các liên kết đến trang chủ (Home), trang giới thiệu (About), trang liên hệ (Contact) và khu vực Store trên tất cả các trang trong website, vì vậy chúng ta thêm trực tiếp vào_layout.cshtml ở ngay trên lệnh @RenderBody(). 3.4.3 Sử dụng Model để truyền thông tin đến View http://www.thayphet.net 23

Mẫu View chỉ hiển thị HTML cứng,. Để tạo ra trang web động, ta phải truyền thông tin từ Controller đến View để hiển thị. Thuật ngữ Model chỉ đối tượng đại diện cho dữ là thành phần mang dữ liệu từ Controller đến View. Tạo ra một số lớp Model đại diện cho thể loại và album trong cửa hàng âm nhạc: Click phải vào thư mục "Model" chọn " Add Class" và đặt tên cho tập tin là "Genre.cs". Sau đó bổ sung thêm thuộc tính Name vào lớp: http://www.thayphet.net 24

Lưu ý: Ta đang sử dụng thuộc tính tự động (không viết gì trong get và set) nên field tự động được tạo ra để chứa dữ liệu của thuộc tính.. Tương tự để tạo ra một lớp Album (đặt tên Album.cs) chứa 2 thuộc tính Title (tựa) và Genre (loại): Sửa đổi StoreController sử dụng View hiển thị thông tin động từ Mode. Nếu chúng ta đặt tên Album dựa trên ID được yêu cầu từ URL thì sẽ nhận được thông tin của album được hiển thị như sau. Thay đổi phương thức hành động Details() để hiển thị thông tin của một album duy nhất. Thêm một lệnh "using" ở trên đầu file để khai báo không gian tên MvcMusicStore.Models như vậy không cần phải gõ MvcMusicStore.Models.Album mỗi lần chúng ta muốn sử dụng lớp Album. http://www.thayphet.net 25

Cập nhật các phương thức hành động của StoreController để trả về ActionResult chứ không phải là một chuỗi. Sửa đổi mã của phương thức hành động Details() để trả về một đối tượng Album được truyền vào View. (Sau này sẽ lấy dữ liệu từ một cơ sở dữ liệu). Tạo ra một View sử dụng Album để tạo ra một phản hồi HTML: Click phải vào bên trong phương thức Details() và chọn "Add View " từ menu ngữ cảnh. Theo mặc định View Details.cshtml được tạo ra và đặt trong thư mục /Views/Store. Sẽ tích chọn vào hộp kiểm "Create a stronglytyped view", trong phần Model class, chúng ta chọn Album. Việc làm này sẽ làm cho View được tạo ra chứa Model có kiểu là Album. http://www.thayphet.net 26

Khi nhấn vào nút "Add" /Views/Store/Details.cshtml View sẽ được tạo ra, có chứa các mã sau đây. Chú ý Dòng đầu tiên chỉ ra rằng View này chứa model có định kiểu là Album. Và đã được truyền qua một đối tượng Album, vì vậy chúng ta có thể dễ dàng truy cập các thuộc tính model. Cập nhật thẻ <h2> để nó hiển thị thuộc tính Title của album bằng cách thay đổi dòng đó thành dòng xuất hiện như sau. http://www.thayphet.net 27

Chạy dự án và truy cập URL /Store/Details/5000. Chúng ta sẽ thấy các chi tiết của một Album như dưới đây. Ta sẽ thực hiện cập nhật tương tự đối với phương thức Browse() của StoreController. Cập nhật phương thức này để nó trả về một ActionResult và sửa đổi nội dung phương thức để nó tạo ra một đối tượng Genre mới và trả về cho View. Nhấp chuột phải trong phương thức Browse và chọn "Add View...", sau đó thêm một View có định kiểu với lớp Genre. http://www.thayphet.net 28

Cập nhật phần tử <h2> trong View tại /Views/Store/Browse.cshtml có nội dung như sau để hiển thị thông tin loại. Bây giờ hãy chạy lại dự án và duyệt đến URL /Store/Browse?genre=Disco. Chúng ta sẽ thấy trang Browse hiển thị như dưới đây. Cập nhật phương thức hành động Index() của StoreController và View của nó để hiển thị một danh sách của tất cả các thể loại âm nhạc trong cửa hàng. Thực hiện điều này bằng cách truyền List<Genre> chứa các thể loại âm nhạc như một Model chứ không phải là một loại duy nhất. Click phải vào trong phương thức Index() của StoreController và chọn Add View, chọn Genre làm lớp Model và nhấn nút Add. http://www.thayphet.net 29

Thay đổi khai báo @model để chỉ ra rằng View sẽ nhận được danh sách các đối tượng Genre chứ không phải chỉ một đối tượng như trước đây. Thay đổi dòng đầu tiên trong file Views/Store/Index.cshtml như sau: Khai báo sẽ nhận được một số đối tượng Genre từ model, ta nên sử dụng IEnumerable<Genre> hơn là List<Genre> vì nó tổng quát hơn, do đó cho phép chúng ta thay đổi các loại mô hình sau này với bất kỳ loại đối tượng có thực thi interface IEnumerable. Tiếp theo chúng ta sẽ duyệt và hiển thị các Genre trong model trong View Store/Index.cshtml như mã dưới đây. http://www.thayphet.net 30

Chú ý hỗ trợ IntelliSense đầy đủ khi chúng ta nhập vào mã này. Vì vậy khi chúng ta gõ "@Model." Thì chúng ta sẽ thấy tất cả các phương thức và thuộc tính được hỗ trợbởi IEnumerable chứa Genre được sổ xuống. Trong vòng lặp "foreach", Visual Web Developer biết rằng mỗi mục là kiểu Genre, vì vậy chúng ta thấy intellisence cho các loại Genre. Sau này tính năng scaffolding sẽ được kiểm tra và xác định xem mỗi Genre có những thuộc tính nào để có thể hiển thị tự động các thuộc tính mã Genre có. Với đặc tính này, nó cũng sinh ra các liên kết Edit, Details, Delete đối với mỗi Genre. http://www.thayphet.net 31

Khi Chúng ta chạy các ứng dụng và duyệt đến /Store/, chúng ta thấy rằng cả hai số và danh sách các thể loại được hiển thị. 3.4.4 Thêm liên kết giữa các trang URL /Store liệt kê tất cả các thể loại hiện tại và mỗi loại đơn giản chỉ hiển thị tên như là văn bản đơn giản. Hãy thay đổi tên của mỗi loại sang dạng liên kết đến trang chứa các album của loại đó với URL là /Store/Browse?genre=<tên loại thích hợp>, với cập nhật như vậy khi nhấp vào một thể loại âm nhạc như "Disco" sẽ chuyển đến trang có URL là /Store/Browse?genre=Disco. Ta cập nhật View ews/store/index.cshtml như mã sau để sản xuất những liên kết như trình bày ở trên. Với đoạn mã trên sẽ hoạt động nhưng nó có thể dẫn đến những rắc rối sau này vì nó dựa trên một chuỗi hardcoded (khó cho sự thay đổi sau này). Ví dụ, nếu chúng ta muốn đổi tên Controller, Chúng ta cần phải tìm kiếm thông qua mã tìm kiếm các liên kết cần phải được cập nhật. Một phương pháp khác chúng ta có thể sử dụng là tận dụng lợi thế của HTML Helper. ASP.NET MVC cung cấp các HTML Helper có sẵn mã trong View để thực hiện một loạt các nhiệm vụ thông thường chỉ như nêu trên. Html.ActionLink () helper là một phương thức đặc biệt hữu ích giúp dễ dàng xây dựng các liên kết (<a> HTML) và quan tâm đến các chi tiết gây mất an toàn như chắn các đường dẫn được mã hóa URL. Html.ActionLink() có vài dạng sử dụng khác nhau (overloading) cho phép tạo ra các liên kết tùy thuộc vào thông tin hiện có. Trong trường hợp đơn giản, sẽ cung cấp văn bản liên kết và phương thức hành động để khi siêu liên kết được nhấp trên máy http://www.thayphet.net 32

khách. Ví dụ, chúng ta có thể liên kết đến phương thức Index() từ trang Browse của StoreController với văn bản liên kết là "Go to Store Index" bằng cách sử dụng lời gọi HTML Helper sau đây: Lưu ý: Trong trường hợp này, không cần phải xác định tên Controller bởi vì chúng ta chỉ liên kết đến một hành động khác trong cùng một Controller đang xem hiện tại. Liên kết đến trang Browse cần phải truyền qua một tham số, vì vậy chúng ta sẽ sử dụng một dạng khác của phương thức Html.ActionLink gồm ba thông số: [1]. Văn bản liên kết: sẽ hiển thị tên loại (genre.name) [2]. Tên phương thức hành động: Browse [3]. Giá trị tham số (xác định cả hai - tên và giá trị): new {genre=genre.name} Sau đây là liên kết được xây dựng như mô tả ở trên Chạy dự án và truy cập đến địa chỉ /Store/. Mỗi thể loại là một siêu liên kết, khi nhấn vào nó sẽ đưa chúng ta đến /Store/Browse?genre=<tên thể loại> Danh sách thể loại của trang Store/Index.cshtml được sinh ra trông như thế này: 3.5 Truy cập dữ liệu http://www.thayphet.net 33