33
Chương 3: Dán Music Stored http://www.thayphet.net 1 Chương 3: DÁN ASP.NET MVC 4 MUSIC STORE 3.1. Tng quan MVC Music Store là một ng dụng hướng dn, gii thiệu và giải thích tng bước để sdụng ASP.NET MVC và Visual Web Developer để phát triển web. ng dng sxây dựng một cửa hàng âm nhạc đơn giản. Có ba phần chính ng dng: Mua sm Thanh toán Qun trSau đây là các trang cốt lõi của ng dng web: 3.1.1 Trang chTrang chcha 5 mặt hàng bán chạy nht 3.1.2 Trang hàng hóa Duyt Album theo thloi: Click thloi bên trái.

Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

  • Upload
    vutuong

  • View
    220

  • Download
    2

Embed Size (px)

Citation preview

Page 1: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 1

Chương 3:

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.

Page 2: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 2

3.1.3 Trang chi tiết hàng hóa

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

to card.

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

Page 3: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 3

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.

Page 4: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 4

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ê

Page 5: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 5

3.1.5.2 Trang thêm mới hàng hóa

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

Page 6: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 6

3.1.5.5 Trang xác nhận xóa hàng hóa

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.

Page 7: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 7

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

Page 8: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 8

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 Mô tả

Properties Chứa file AssemblyInfo.cs mô tả thông tin chung về ứng dụng:

tên, mô tả, version…

References Chứa các tham chiếu đến các thư viện cần dùng trong dự án

App_Data Chứa các file dữ liệu nếu có

App_Start Chứa các tập tin khởi động được chạy một lần khi ứng dụng bắt

đầu

Content 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

Controllers 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.

Filters 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

Images Chứa hình ảnh cần cho ứng dụng web

Models Các mô hình được tổ chức để nắm giữ và thao tác dữ liệu

Scripts Thư mục này chứa các tập tin JavaScript cần thiết của ứng dụng

Views View chứa các mẫu giao diện người dùng của ứng dụng

Global.asax 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…

Page 9: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 9

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

Page 10: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 10

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.

Page 11: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 11

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\

Page 12: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 12

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.

Page 13: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 13

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

Page 14: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 14

Index.cshtml

About.cshtml

Page 15: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 15

Contact.cshtml

Page 16: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 16

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().

Page 17: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 17

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

Page 18: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 18

/ 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.

Page 19: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 19

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:

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

duyệt.

Page 20: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 20

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).

Page 21: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 21

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.

Page 22: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 22

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:

Page 23: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 23

Trong tập tin _Layout.cshtml chứa các thành phần quan trọng sau

Thành phần Diễn giải

@ViewBag.Title 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

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/jquery")

Chèn css/script được khai trong

App_Start/BundleConfig.cs

@Html.Partial("_LoginPartial") 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

@Html.ActionLink("Store", "Index", "Store") Chèn thẻ liên kết

@RenderSection("featured", required: false)

@RenderSection("scripts", required: false)

Đá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

@RenderBody() Vị trí vùng dữ liệu động chính của các

trang thành viên

@DateTime.Now.Year 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

Page 24: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 24

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:

Page 25: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 25

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.

Page 26: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 26

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.

Page 27: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 27

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.

Page 28: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 28

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.

Page 29: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 29

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.

Page 30: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 30

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.

Page 31: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 31

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.

Page 32: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 32

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

Page 33: Chương 3 - Thayphet.net€¦ · Chọn Visual C# Web Templates nhóm bên trái, ... Models Các mô hình được tổ chức để nắm giữ và ... được định nghĩa

Chương 3: Dự án Music Stored

http://www.thayphet.net 33

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