View
220
Download
2
Category
Preview:
Citation preview
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.
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
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.
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ê
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
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.
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
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…
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
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.
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\
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.
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
Chương 3: Dự án Music Stored
http://www.thayphet.net 14
Index.cshtml
About.cshtml
Chương 3: Dự án Music Stored
http://www.thayphet.net 15
Contact.cshtml
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().
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
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.
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.
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).
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.
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:
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
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:
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.
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.
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.
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.
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.
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.
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.
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
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
Recommended