DỰ ÁN ASP.NET MVC 4 MUSIC STORE

Transcription

1 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: Trang chủ Trang chủ chứa 5 mặt hàng bán chạy nhất Trang hàng hóa Duyệt Album theo thể loại: Click thể loại ở bên trái. 1

2 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 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 2

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

4 Sau khi đặt hàng, sẽ nhận được một màn hình xác nhận đơn hàng: 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 Trang liệt kê 4

5 Trang thêm mới hàng hóa Chương 3: Dự án Music Stored Trang sửa đổi thông tin hàng hóa Trang thông tin chi tiết hàng hóa 5

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

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 7

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 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 8

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 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 9

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

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: Thêm View cho phương thức Action Index() Tạo 1 View tên Index trong View\Test\ 11

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

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 13

14 Index.cshtml Chương 3: Dự án Music Stored About.cshtml 14

15 Contact.cshtml 15

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

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 17

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=' 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/

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 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 19

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

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

22 Phần mã 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 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: 22

23 Trong tập tin _Layout.cshtml chứa các thành phần quan trọng sau @Html.ActionLink("Store", "Index", required: 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 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 Sử dụng Model để truyền thông tin đến View 23

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: 24

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

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

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

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

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

30 Thay đổi khai để 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. 30

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õ 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. 31

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ị 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 32

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 33