Asp net mvc3 music store egroups vn

HƯỚNG DẪN TỪNG BƯỚC TẠO ỨNG DỤNG WEB SHOP MUSIC STORE BẰNG ASP .NET MVC3

(Của Microsoft – Edit bởi MHN IT)

1. Tổng quan và File-> New Project

Tổng quanMVC Music Store là một ứng dụng hướng dẫn, giới thiệu và giải thích bước theo các bước làm thế nào để sử dụng ASP.NET MVC và Visual Web Developer để phát triển web. Chúng tôi sẽ bắt đầu từ từ, như vậy mới bắt đầu cấp độ kinh nghiệm phát triển web là okay.Ứng dụng chúng ta sẽ xây dựng 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 và quản trị.

Edit by Nhiên IT ( www.eg.vnao.vn )

http://www.eg.vnao.vn/

Du khách có thể duyệt Album theo thể loại:

Họ có thể xem một album duy nhất và thêm nó vào giỏ hàng của họ:



Họ có thể xem lại giỏ hàng của họ, loại bỏ bất kỳ mục nào họ không còn muốn:

Căn cứ đến với Checkout sẽ nhắc nhở họ đăng nhập hoặc đăng ký cho một tài khoản người dùng.



Sau khi tạo một tài khoản, họ có thể hoàn thành các đơn đặt hàng bằng cách điền vào vận chuyển và thông tin thanh toán. Để giữ cho mọi thứ đơn giản, chúng tôi đang chạy một quảng bá tuyệt vời: mọi thứ đều miễn phí nếu họ nhập mã khuyến mãi "miễn phí"!



Sau khi đặt hàng, họ nhìn thấy một màn hình xác nhận đơn giản:

Ngoài Trang faceing khách hàng, chúng tôi cũng sẽ xây dựng một phần quản trị cho thấy một danh sách các album mà từ đó quản trị viên có thể tạo, chỉnh sửa, và xóa các album:



1. File -> New ProjectCài đặt phần mềmHướng dẫn này sẽ bắt đầu bằng cách tạo ra một mới ASP.NET MVC 3 dự án sử dụng Visual Web Developer 2010 Express (được miễn phí), và sau đó chúng tôi từng bước sẽ thêm các tính năng để tạo ra một ứng dụng hoạt động đầy đủ. Trên đường đi, chúng tôi sẽ bao gồm truy cập cơ sở dữ liệu, hình thành kịch bản gửi bài, xác nhận dữ liệu, bằng cách sử dụng các trang chủ để bố trí trang phù hợp, bằng cách sử dụng AJAX trang và xác nhận các bản cập nhật, người dùng đăng nhập, và nhiều hơn nữa.Bạn có thể theo bước từng bước, hoặc bạn có thể tải về các ứng dụng hoàn thành từhttp://mvcmusicstore.codeplex.com .Bạn có thể sử dụng Visual Studio 2010 SP1 hoặc Web Developer Visual 2010 Express SP1 (phiên bản miễn phí của Visual Studio 2010) để xây dựng các ứng dụng. Chúng tôi sẽ sử dụng SQL Server Compact (cũng miễn phí) để lưu trữ các cơ sở dữ liệu. Trước khi bạn bắt đầu, hãy chắc chắn rằng bạn đã cài đặt các điều kiện tiên quyết được liệt kê dưới đây. Bạn có thể cài đặt tất cả chúng bằng cách sử dụng Web Platform Installer sauLưu ý: Bạn có thể tìm thấy liên kết này vào nút màu xanh lá cây lớn tại liên kết này (dễ nhớ): http://asp.net/mvc



Web Platform Installer sẽ kiểm tra những gì bạn đã cài đặt và chỉ cần tải về những gì bạn cần.

Nếu bạn muốn cá nhân cài đặt các điều kiện tiên quyết bằng cách sử dụng các liên kết sau đây thay vì sử dụng liên kết ở trên, sử dụng các liên kết sau (viết ra trong trường hợp bạn đang sử dụng một phiên bản in của hướng dẫn này): Visual Studio Web Developer Express SP1 ASP.NET MVC 3 Công cụ Cập

nhật http://www.microsoft.com/web/handlers/webpi.ashx?command=getinstallerredirect&appid=MVC3



SQL Server Compact 4,0 - bao gồm cả thời gian chạy và công cụ hỗ trợLưu ý: Nếu bạn đang sử dụng Visual Studio 2010 thay vì Visual Web Developer 2010, cài đặt các điều kiện tiên quyết với liên kết này thay vì:Visual Studio Web Developer Express SP1Tôi rất khuyên bạn sử dụng liên kết cài đặt nền tảng web đầu tiên, vì nó sẽ làm cho chắc chắn rằng bạn đã có tất cả mọi thứ được thiết lập đúng.Tạo một dự án mới ASP.NET MVC 3Chúng tôi sẽ bắt đầu bằng cách chọn "New Project" từ menu File trong Visual Web Developer. Điều này sẽ làm xuất hiện hộp thoại New Project.

Chúng tôi sẽ chọn Visual C # -> Web Templates nhóm bên trái, sau đó chọn "ASP.NET MVC 3 Web Application" mẫu trong cột trung tâm. Tên MvcMusicStore dự án của bạn và nhấn nút OK.

Điều này sẽ hiển thị một hộp thoại thứ cấp cho phép chúng tôi để làm cho một số cài đặt cụ thể MVC cho dự án của chúng tôi. Chọn như sau:Dự án Template - chọn EmptyXem Engine - Razor chọnSử dụng HTML5 ngữ nghĩa đánh dấu kiểm traXác minh rằng các thiết lập của bạn như hình dưới đây, sau đó nhấn nút OK.



Điều này sẽ tạo ra dự án của chúng tôi. Chúng ta hãy nhìn vào các thư mục đã được thêm vào ứng dụng của chúng tôi trong Solution Explorer ở phía bên phải.



Các mẫu MVC 3 rỗng không phải là hoàn toàn trống rỗng - nó sẽ thêm một cấu trúc thư mục cơ bản:

ASP.NET MVC làm cho việc sử dụng của một số quy ước đặt tên cơ bản cho tên thư mục:

Thư mục Mục đích

/ ControllersBộ điều khiển đáp ứng với đầu vào từ trình duyệt, quyết định phải làm gì với nó, và trở lại đáp ứng cho người sử dụng.



/ Views Xem giữ các mẫu giao diện người dùng của chúng tôi

/ Models Mô hình tổ chức và thao tác dữ liệu

/ ContentThư mục này nắm giữ hình ảnh của chúng tôi, CSS, và bất kỳ nội dung tĩnh khác

/ Scripts Thư mục này chứa các tập tin JavaScript của chúng tôi

Các thư mục này bao gồm ngay cả trong một ứng dụng ASP.NET MVC rỗng vì ASP.NET MVC framework theo mặc định sử dụng một "quy ước về cấu hình" phương pháp tiếp cận và làm cho một số giả định mặc định dựa trên quy ước đặt tên thư mục. Ví dụ, bộ điều khiển tìm kiếm xem trong thư mục Views theo mặc định mà không cần phải xác định rõ ràng này trong mã của bạn. Gắn bó với các công ước mặc định làm giảm số lượng mã bạn cần phải viết, và cũng có thể làm cho nó dễ dàng hơn cho các nhà phát triển khác để hiểu dự án của bạn. Chúng tôi sẽ giải thích các công ước hơn khi chúng ta xây dựng ứng dụng của chúng tôi.Xin vui lòng sử dụng các cuộc thảo luận của http://mvcmusicstore.codeplex.com cho bất kỳ câu hỏi hoặc nhận xét.

2. Controllers

Với các khuôn khổ web truyền thống, 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 cho một URL như "products.aspx /" hoặc "Products.php /" có thể được xử lý bởi một tập tin "products.aspx" hoặc "Products.php".Khuôn khổ MVC dựa trên web bản đồ các URL để mã máy chủ trong một cách hơi khác nhau. Thay vì lập bản đồ các URL đến các tập tin, thay vào đó họ bản đồ các URL với các phương pháp trên lớp. Các lớp này được gọi là "điều khiển" và họ có trách nhiệm để xử lý các yêu cầu HTTP đến, xử lý đầu vào của người dùng, lấy và lưu dữ liệu, và xác định phản ứng để gửi lại cho khách hà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 HomeControllerChúng tôi sẽ bắt đầu MVC cửa hàng ứng dụng âm nhạc của chúng tôi bằng cách thêm một lớp điều khiển sẽ xử lý các URL trang chủ của trang web của chúng tôi. Chúng tôi sẽ thực hiện theo mặc định quy ước đặt tên của ASP.NET MVC và gọi nó là HomeController.Kích chuột phải vào "điều khiển" thư mục trong Solution Explorer và chọn "Add", và sau đó là "điều khiển ..." lệnh:



Điều này sẽ mang đến "Thêm điều khiển" hộp thoại. Tên điều khiển "HomeController" và nhấn nút Add.

Điều này sẽ tạo ra một tập tin mới, HomeController.cs, với mã sau đây:

using System;



using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcMusicStore.Controllers{ public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } }}

Để bắt đầu càng đơn giản càng tốt, chúng ta hãy thay thế các phương pháp Index với một phương pháp đơn giản mà chỉ cần trả về một chuỗi. Chúng tôi sẽ thực hiện hai thay đổi: Thay đổi phương thức trả về một chuỗi thay vì một ActionResult Thay đổi tuyên bố trở lại để trở về "từ Home"

Phương pháp bây giờ sẽ giống như thế này:

public string Index(){ return "Hello from Home";}

Chạy các ứng dụngBây giờ hãy chạy các trang web. Chúng tôi có thể bắt đầu máy chủ web của chúng tôi và thử các trang web bằng cách sử dụng bất kỳ sau đây :: Chọn Debug ⇨ Bắt đầu Debugging mục trình đơn Click nút mũi tên xanh trên thanh công cụ

Sử dụng các phím tắt bàn phím, F5.Sử dụng bất kỳ các bước trên sẽ biên dịch dự án của chúng tôi, và sau đó gây ra sự phát triển ASP.NET Server đó là được xây dựng vào Visual Web Developer để bắt đầu. Một thông báo sẽ xuất hiện ở góc dưới cùng của màn hình để chỉ ra rằng phát triển ASP.NET Server đã bắt đầu, và sẽ hiển thị số cổng mà nó đang chạy theo.



Visual Web Developer sau đó sẽ tự động mở một cửa sổ trình duyệt có URL điểm đến máy chủ web của chúng tôi.Điều này sẽ cho phép chúng tôi nhanh chóng thử các ứng dụng web của chúng tôi:

Được rồi, đó là khá nhanh chóng, chúng tôi tạo ra một trang web mới, bổ sung thêm một chức năng dòng ba, và chúng tôi đã có văn bản trong một trình duyệt. Không tên lửa khoa học, nhưng đó là một sự khởi đầu.Lưu ý: Visual Web Developer bao gồm ASP.NET Phát triển Server, mà sẽ chạy trang web của bạn trên một ngẫu nhiên số "cổng". Trong hình trên, các trang web đang chạy tại http://localhost:26641/, do đó, nó sử dụng cổng 26.641. Số cổng của bạn sẽ khác nhau. Khi chúng ta nói về URL như / Store / trong hướng dẫn này, mà sẽ đi sau khi số cổng. Giả sử một số cổng của 26.641, trình duyệt / Store / Browse sẽ có nghĩa là duyệt tới http://localhost:26641/Store/Browse.Thêm một StoreControllerChúng tôi đã thêm một HomeController đơn giản mà thực hiện trang chủ của trang web của chúng tôi. Bây giờ chúng ta hãy thêm một bộ điều khiển mà chúng ta sẽ sử dụng để thực hiện các chức năng duyệt web của cửa hàng âm nhạc của chúng tôi. Điều khiển cửa hàng của chúng tôi 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 của chúng tôi Một trang duyệt 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 cho thấy thông tin về một album nhạc cụ thể

Chúng tôi sẽ bắt đầu bằng cách thêm một lớp StoreController mới .. Nếu bạn chưa có, ngừng chạy các ứng dụng, hoặc bằng cách đóng trình duyệt hoặc chọn Debug ⇨ Dừng Debugging mục trình đơn.



Bây giờ thêm một StoreController mới. Cũng giống như chúng tôi đã làm với HomeController, chúng tôi sẽ làm điều này bằng cách kích chuột phải vào thư mục "điều khiển" trong Solution Explorer và chọn Add-> mục trình đơn điều khiển

StoreController mới của chúng tôi đã có một phương pháp "Index". Chúng tôi sẽ sử dụng phương pháp "Index" để thực hiện trang danh sách của chúng tôi liệt kê tất cả các thể loại trong cửa hàng âm nhạc của chúng tôi. Chúng tôi cũng sẽ thêm hai phương pháp bổ sung để thực hiện hai kịch bản khác mà chúng tôi muốn StoreController của chúng tôi để xử lý: Duyệt và chi tiết.Những phương pháp này (Index, Duyệt và chi tiết) trong vòng điều khiển của chúng tôi được gọi là "Hành động điều khiển", và như bạn đã thấy với phương pháp hành động HomeController.Index (), công việc của họ là để đáp ứng các yêu cầu URL (nói chung) xác định những nội dung cần được gửi trở lại trình duyệt hoặc người dùng mà gọi URL.Chúng tôi sẽ bắt đầu thực hiện StoreController của chúng tôi bằng cách thay đổi theIndex () phương pháp để trả lại chuỗi "Hello từ Store.Index ()" và chúng tôi sẽ thêm các phương pháp tương tự cho Duyệt () và chi tiết ():

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcMusicStore.Controllers{ public class StoreController : Controller { //



// GET: /Store/ public string Index() { return "Hello from Store.Index()"; } // // GET: /Store/Browse public string Browse() { return "Hello from Store.Browse()"; } // // GET: /Store/Details public string Details() { return "Hello from Store.Details()"; } }}

Khởi động dự án một lần nữa và duyệt các URL sau: / Store / Store /Browes / Store / Details

Truy cập vào các URL sẽ gọi các phương thức hành động trong điều khiển và phản ứng chuỗi trở lại của chúng tôi:

Đó là tuyệt vời, nhưng đây là những chỉ là chuỗi liên tục. Hãy làm cho họ năng động, vì vậy họ lấy thông tin từ URL và hiển thị nó trong đầu ra của trang.Trước tiên, chúng tôi sẽ thay đổi phương thức hành động Browse để lấy một giá trị chuỗi truy vấn từ URL. Chúng ta có thể làm điều này bằng cách thêm vào một "thể loại" tham số phương pháp hành động của chúng tôi. Khi chúng ta làm điều này ASP.NET MVC sẽ tự



động vượt qua bất kỳ chuỗi truy vấn hoặc các thông số bài mẫu có tên là "thể loại" phương pháp hành động của chúng tôi khi nó được gọi.

//// GET: /Store/Browse?genre=Discopublic string Browse(string genre) { string message = HttppUtility.HtmlEncode("Store.Browse, Genre = "+ genre); return message; }

Lưu ý: Chúng tôi đang sử dụng các phương pháp hữu ích HttpUtility.HtmlEncode để khử trùng đầu vào người dùng. Điều này ngăn cản người sử dụng tiêm chích Javascript vào Xem của chúng tôi với một liên kết như / Store / Duyệt Genre = <script> window.location = 'http://hackersite.com' </ script>.Bây giờ hãy duyệt đến / Store / Browse?Genre = Disco

Chúng ta hãy tiếp theo thay đổi hành động chi tiết để đọc và hiển thị một tham số đầu vào có tên là ID. Không giống như các phương pháp trước đó của chúng tôi, chúng tôi sẽ không được nhúng giá trị ID như một tham số chuỗi truy vấn. Thay vào đó, chúng ta sẽ nhúng nó trực tiếp trong URL của chính nó. Ví dụ: / Store/Details/5.ASP.NET MVC cho phép chúng ta dễ dàng làm được điều này mà không cần phải cấu hình bất cứ điều gì. ASP.NET MVC của quy ước mặc định định tuyến là để điều trị các phân đoạn của một URL sau tên phương pháp hành động như là một tham số có tên là "ID". Nếu phương pháp hành động của bạn có một tham số có tên là ID sau đó ASP.NET MVC sẽ tự động thông qua các phân đoạn URL với bạn như một tham số.



//// GET: /Store/Details/5public string Details(int id) { string message = "Store.Details, ID = " + id; return message; }

Chạy ứng dụng và trình duyệt / Store/Details/5:

Hãy tóm tắt lại những gì chúng tôi đã thực hiện cho đến nay: Chúng tôi đã tạo ra một ASP.NET MVC dự án mới trong Visual Web Developer Chúng tôi đã thảo luận về cấu trúc thư mục cơ bản của một ứng dụng ASP.NET MVC Chúng tôi đã học được làm thế nào để chạy trang web của chúng tôi sử dụng máy

chủ phát triển ASP.NET Chúng tôi đã tạo ra hai điều khiển lớp học: HomeController và StoreController Chúng tôi đã thêm phương pháp hành động để điều khiển của chúng tôi đáp ứng các

yêu cầu URL và trở về văn bản để trình duyệt

3. Views and ViewModels



Vì vậy, đến nay chúng tôi đã chỉ được trở về chuỗi từ hành động điều khiển. Đó là một cách tốt đẹp để có được một ý tưởng về bộ điều khiển làm việc như thế nào, nhưng nó không phải là làm thế nào bạn muốn để xây dựng một ứng dụng web thực sự. Chúng tôi sẽ muốn có một cách tốt hơn để tạo ra HTML cho các trình duyệt truy cập vào trang web của chúng tôi - một trong những nơi mà chúng ta có thể sử dụng các tập tin mẫu để tùy chỉnh dễ dàng hơn nội dung HTML gửi lại. Đó là chính xác những gì Lần đọc làm.Thêm một mẫu ViewĐể sử dụng một cái nhìn mẫu, chúng tôi sẽ thay đổi phương pháp Index HomeController để trả lại một ActionResult, và nó trở lại View (), như dưới đây:

public class HomeController : Controller{ // // GET: /Home/ public ActionResult Index() { return View(); }}

Sự thay đổi trên chỉ ra rằng thay vì trả lại một chuỗi, chúng tôi thay vì muốn sử dụng một "View" để tạo ra một kết quả trở lại.Bây giờ chúng ta sẽ thêm một mẫu xem thích hợp cho dự án của chúng tôi. Để làm điều này, chúng tôi sẽ xác định vị trí con trỏ văn bản trong phương pháp hành động Index, sau đó nhấp chuột phải và chọn "Add View". Điều này sẽ mang đến hộp thoại Add Xem:



"Thêm Xem" hộp thoại cho phép chúng tôi một cách nhanh chóng và dễ dàng tạo ra các tập tin template Xem.Theo mặc định, "Thêm" hộp thoại trước populates tên của mẫu View để tạo ra để nó phù hợp với phương pháp hành động mà sẽ sử dụng nó. Bởi vì chúng tôi sử dụng "Add View" menu ngữ cảnh trong Index () phương pháp hành động của HomeController của chúng tôi, hộp thoại "Add View" ở trên có "Index" như tên xem được phổ biến trước theo mặc định. 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, do đó, nhấp vào nút Add.Khi nhấn vào nút Add, Visual Web Developer sẽ tạo ra một mẫu Index.cshtml nhìn mới cho chúng tôi trong thư mục \ Xem thư mục \, tạo thư mục nếu không tồn tại.



Tên và vị trí thư mục của tập tin "Index.cshtml" là quan trọng, và theo mặc định ASP.NET MVC đặt tên quy ước. Tên thư mục \ Views \ Home, phù hợp với bộ điều khiển được HomeController đặt tên. Xem các mẫu tên, Index, phù hợp với phương pháp hành động điều khiển sẽ được hiển thị xem.ASP.NET MVC cho phép chúng tôi để tránh việc phải xác định rõ ràng tên hoặc vị trí của một mẫu xem khi chúng ta sử dụng quy ước đặt tên này để trả lại một cái nhìn. Nó theo mặc định sẽ làm \ Views \ Trang chủ \ Index.cshtml xem mẫu này khi chúng ta viết đoạn mã như sau trong HomeController của chúng tôi:

public class HomeController : Controller{ // // GET: /Home/ public ActionResult Index() { return View(); }}

Visual Web Developer tạo ra và mở "mẫu" Index.cshtml xem sau khi chúng tôi nhấp vào nút "Add" trong hộp thoại "Add View". Các nội dung của Index.cshtml được hiển thị dưới đây.

@{ ViewBag.Title = "Index";}<h2>Index</h2>



Điểm này bằng cách sử dụng cú pháp Razor, ngắn gọn hơn so với công cụ Web Forms điểm được sử dụng trong ASP.NET Web Forms và các phiên bản trước của ASP.NET MVC. Web Forms xem động cơ là vẫn còn có sẵn trong ASP.NET MVC 3, nhưng nhiều nhà phát triển thấy rằng các công cụ xem Razor phù hợp với phát triển ASP.NET MVC thực sự tốt.Ba dòng đầu tiên đặt tiêu đề trang bằng cách sử dụng ViewBag.Title. Chúng tôi sẽ xem xét làm thế nào các công trình này chi tiết hơn ngay sau đó, nhưng trước tiên hãy sửa tiêu đề văn bản văn bản và xem trang. Cập nhật thẻ <h2> nói "Đây là Trang" như hình dưới đây.

@{ ViewBag.Title = "Index";}<h2>Thiis is the Home Page</h2>

Chạy các ứng dụng cho thấy rằng văn bản mới của chúng tôi có thể nhìn thấy trên trang chủ.

Sử dụng một diện cho các yếu tố trang web phổ biếnHầu hết các trang web có nội dung được chia sẻ giữa nhiều trang: chuyển hướng, cuối trang, hình ảnh logo, tài liệu tham khảo stylesheet, công cụ xem Razor làm cho điều này dễ dàng quản lý bằng cách sử dụng một trang _Layout.cshtml gọi là đã tự động được tạo ra cho chúng ta bên trong / Lần đọc / thư mục Shared.



Double-click vào thư mục này để xem nội dung được hiển thị dưới đây.

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")"rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script></head><body> @RenderBody()</body></html>

Các nội dung từ quan điểm cá nhân của chúng tôi sẽ được hiển thị bằng RenderBody @ () lệnh, và bất kỳ nội dung nào phổ biến mà chúng tôi muốn xuất hiện bên ngoài mà có thể được thêm vào các đánh dấu _Layout.cshtml.Chúng tôi sẽ muốn MVC Music Store của chúng tôi để có một tiêu đề phổ biến với các liên kết đến trang chủ của chúng tôi và khu vực Store trên tất cả các trang trong trang web, vì vậy chúng tôi sẽ thêm rằng mẫu trực tiếp ở trên mà tuyên bố @ RenderBody ().

<!DOCTYPE html><html><head> <title>@ViewBag.Title</title>



<link href="@Url.Content("~/Content/Site.css")"rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"type="text/javascript"></script></head><body> <div id="header"> <h1> ASP.NET MVC MUSIC STORE</h1> <ul id="navlist"> <li class="firrst"><a href="/"id="current">Home</a></li> <li><ahref="/Store/">Store</a></li> </ul> </div> @RenderBody()</body></html>

Cập nhật StyleSheetCác dự án mẫu trống bao gồm một tập tin CSS rất hợp lý mà chỉ cần bao gồm các phong cách được sử dụng để hiển thị các thông báo xác nhận. Nhà thiết kế của chúng tôi đã cung cấp thêm một số CSS và hình ảnh để xác định xem và cảm nhận cho trang web của chúng tôi, vì vậy chúng tôi sẽ thêm những người bây giờ.CSS cập nhật tập tin và hình ảnh được bao gồm trong thư mục nội dung của Assets.zip-MvcMusicStore trong đó có sẵn tại http://mvcmusicstore.codeplex.com. Chúng tôi sẽ chọn cả hai người trong số họ trong Windows Explorer và thả chúng vào thư mục Content Giải pháp của chúng tôi trong Visual Web Developer, như hình dưới đây:

Bạn sẽ được yêu cầu xác nhận nếu bạn muốn ghi đè lên file Site.css hiện có. Nhấn Yes.



Các thư mục nội dung của các ứng dụng của bạn sẽ xuất hiện như sau:

Bây giờ hãy chạy ứng dụng và xem thay đổi của chúng tôi trông như thế nào trên trang chủ.



Ta hãy xem xét những gì đang thay đổi: Chỉ số phương pháp hành động của HomeController tìm thấy và hiển thị \ Views \ Trang chủ \ Index.cshtmlView mẫu, mặc dù mã của chúng tôi gọi là "return View ()", bởi vì mẫu của chúng tôi theo các tiêu chuẩn quy ước đặt tên.

Trang được hiển thị một thông điệp đơn giản chào đón được định nghĩa trong \ Views \ Home \ mẫu Index.cshtml xem.

Trang sử dụng mẫu _Layout.cshtml của chúng tôi, và do đó, thông điệp chào mừng được chứa trong tiêu chuẩn bố trí trang web HTML.

Sử dụng một mô hình truyền thông tin Xem của chúng tôiMẫu Xem mà chỉ hiển thị HTML hardcoded không phải là đi để làm cho một trang web rất thú vị. Để tạo ra một trang web động, chúng tôi thay vì sẽ muốn vượt qua thông tin từ các hành động điều khiển của chúng tôi vào các mẫu điểm của chúng tôi.Trong mô hình Model-View-Controller, mô hình là thuật ngữ chỉ các đối tượng đại diện cho dữ liệu trong ứng dụng. Thông thường, đối tượng mô hình tương ứng với bảng trong cơ sở dữ liệu của bạn, nhưng họ không có.Điều khiển phương pháp hành động trả lại một ActionResult có thể vượt qua một đối tượng mô hình để xem. Điều này cho phép một điều khiển để sạch đóng gói tất cả các thông tin cần thiết để tạo ra một phản ứng, và sau đó chuyển thông tin này đến một mẫu xem sử dụng để tạo ra các phản ứng thích hợp HTML. Điều này là dễ nhất để hiểu được bằng cách nhìn thấy nó trong hành động, do đó, chúng ta hãy bắt đầu.Đầu tiên chúng ta sẽ tạo ra một số các lớp học mẫu đại diện cho thể loại và album trong cửa hàng của chúng tôi.Hãy bắt đầu bằng cách tạo ra một lớp Genre. Kích chuột phải vào thư mục "Mô hình" trong dự án của bạn, chọn tùy chọn "Class Add", và đặt tên cho tập tin "Genre.cs".



Sau đó, thêm một tài sản chuỗi Tên công lớp đã được tạo ra:

public class Genre{ public string Name { get; set; }}

Lưu ý: Trong trường hợp bạn đang tự hỏi, {get; thiết lập;} ký hiệu được sử dụng các tính năng của C # 's thuộc tính tự động thực hiện. Điều này mang lại cho chúng ta những lợi ích của một bất động sản mà không đòi hỏi chúng ta tuyên bố một lĩnh vực sao lưu.



Tiếp theo, hãy làm theo các bước tương tự để tạo ra một lớp Album (đặt tên Album.cs) mà có một Tiêu đề và tài sản Genre:

public class Album{ public string Title { get; set; } public Genre Genre { get; set; }}

Bây giờ chúng ta có thể sửa đổi StoreController sử dụng Xem hiển thị thông tin động từ mô hình của chúng tôi.Nếu - cho mục đích trình diễn ngay bây giờ - chúng tôi đặt tên Album của chúng tôi dựa trên ID yêu cầu, chúng tôi có thể hiển thị thông tin đó như trong giao diện dưới đây.

Chúng tôi sẽ bắt đầu bằng cách thay đổi các chi tiết hành động Store do đó, nó cho thấy các thông tin cho một album duy nhất. Thêm một "sử dụng" tuyên bố để đầu StoreControllers lớp để bao gồm các không gian tên MvcMusicStore.Models, nên chúng tôi không cần phải gõ MvcMusicStore.Models.Album mỗi lần chúng tôi muốn sử dụng lớp album. "Usings" của lớp đó sẽ xuất hiện như dưới đây.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcMusicStore.Models;



Tiếp theo, chúng tôi sẽ cập nhật các hành động điều khiển để nó trả về một ActionResult chứ không phải là một chuỗi, như chúng ta đã làm với phương pháp Index của HomeController.

public ActionResult Details(int id)

Bây giờ chúng ta có thể sửa đổi các logic để trở về một đối tượng Album để xem. Sau đó trong hướng dẫn này, chúng tôi sẽ được lấy dữ liệu từ một cơ sở dữ liệu - nhưng cho ngay bây giờ, chúng tôi sẽ sử dụng "dữ liệu giả" để bắt đầu.

public ActionResult Details(int id) { var album = new Album { Title = "Album " + id }; return View(album); }

Lưu ý: Nếu bạn không quen với C #, bạn có thể giả định rằng việc sử dụng các phương tiện var là biến album của chúng tôi là giới hạn cuối. Đó là không đúng - các C # trình biên dịch sử dụng loại-suy luận dựa trên những gì chúng ta đang gán cho biến để xác định rằng album Album loại và biên dịch các biến album địa phương như là một loại Album, vì vậy chúng tôi có được thời gian biên dịch kiểm tra và trực quan Studio hỗ trợ biên tập mã.Bây giờ chúng ta hãy tạo ra một mẫu View sử dụng Album của chúng tôi để tạo ra một phản ứng HTML. Trước khi chúng tôi làm điều đó chúng ta cần phải xây dựng dự án để hộp thoại Add Xem biết về lớp Album mới được tạo ra của chúng tôi. Bạn có thể xây dựng dự án bằng cách chọn Debug ⇨ Xây dựng MvcMusicStore mục trình đơn (cho thêm tín dụng, bạn có thể sử dụng phím tắt Ctrl-Shift-B để xây dựng các dự án).

Bây giờ chúng ta đã thiết lập các lớp học của chúng tôi hỗ trợ, chúng tôi đã sẵn sàng để xây dựng mẫu Xem của chúng tôi. Kích chuột phải vào bên trong phương thức chi tiết và chọn "Thêm Xem ..." từ menu ngữ cảnh.



Chúng tôi sẽ tạo ra một mẫu Xem mới như chúng tôi đã làm trước đây với HomeController. Vì chúng ta đang tạo ra nó từ StoreController nó theo mặc định sẽ được tạo ra trong một tập tin \ Views \ Cửa hàng \ Index.cshtml.Không giống như trước, chúng tôi sẽ kiểm tra "Tạo một mạnh mẽ-gõ" hộp kiểm xem. Chúng tôi sau đó sẽ lựa chọn của chúng tôi "Album" lớp học trong "Xem dữ liệu đẳng cấp" downlist thả. Điều này sẽ gây ra "Thêm Xem" hộp thoại để tạo ra một mẫu Xem hy vọng rằng một đối tượng Album sẽ được thông qua nó để sử dụng.

Khi nhấn vào nút "Add" của chúng tôi \ Views \ Cửa hàng \ Details.cshtml mẫu View sẽ được tạo ra, có chứa các mã sau đây.

@model MvcMusicStore.Models.Album@{ ViewBag.Title = "Details";}<h2>Details</h2>

Chú ý dòng đầu tiên, mà chỉ ra rằng quan điểm này là mạnh mẽ, gõ vào lớp Album của chúng tôi. Các công cụ xem Razor hiểu rằng nó đã được thông 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 mô hình và thậm chí có lợi ích của IntelliSense trong trình soạn thảo Visual Web Developer.Cập nhật thẻ <h2> do đó, nó sẽ hiển thị thuộc tính chủ đề của album bằng cách thay đổi dòng để xuất hiện như sau.



<h2>Album: @Model.Title</h2>

Chú ý IntelliSense đó được kích hoạt khi bạn nhập vào giai đoạn sau từ khóa mẫu @, hiển thị các thuộc tính và phương pháp mà lớp Album hỗ trợ.Bây giờ hãy chạy lại dự án của chúng tôi và truy cập URL / Store/Details/5. Chúng ta sẽ thấy các chi tiết của một Album như dưới đây.

Bây giờ chúng ta sẽ thực hiện một cập nhật tương tự cho phương pháp Store hành động Browse. Cập nhật phương pháp để nó trả về một ActionResult và sửa đổi phương pháp logic do đó, nó tạo ra một đối tượng loại mới và trả về cho View.

public ActionResult Browse(string genre) { var genreModel = new Genre { Name = genre }; return View(genreModel); }

Nhấp chuột phải trong phương pháp Browse và chọn "Thêm View ..." từ menu ngữ cảnh, sau đó thêm một View mạnh mẽ, đánh máy thêm một đánh máy mạnh mẽ với lớp Genre.



Cập nhật các phần tử <h2> trong mã xem (trong / Views / Store / Browse.cshtml) để hiển thị các thông tin loại.

@model MvcMusicStore.Models.Genre@{ ViewBag.Title = "Browse";}<h2>Browsing Genre: @Model.Name</h2>

Bây giờ hãy chạy lại dự án của chúng tôi và duyệt đến các cửa hàng / / Duyệt Genre = Disco URL. Chúng ta sẽ thấy trang Browse hiển thị như dưới đây.



Cuối cùng, chúng ta hãy làm một bản cập nhật hơi phức tạp hơn để cửa hàng chỉ số phương pháp hành động và xem để hiển thị một danh sách của tất cả các thể loại trong cửa hàng của chúng tôi. Chúng tôi sẽ làm điều đó bằng cách sử dụng một danh sách các thể loại như là đối tượng mô hình của chúng tôi, chứ không phải chỉ một loại duy nhất.

public ActionResult Index(){ var genres = new List<Genre> { new Genre { Name = "Disco"}, new Genre { Name = "Jazz"}, new Genre { Name = "Rock"} }; return View(genres); }

Kích chuột phải vào trong phương pháp Index Store hành động và chọn Add View như trước, chọn loại như các lớp mẫu, và nhấn nút Add.



Trước tiên, chúng tôi sẽ thay đổi tuyên bố mô hình @ để chỉ ra rằng quan điểm sẽ được mong đợi đối tượng Genre nhau thay vì chỉ một. Thay đổi dòng đầu tiên của / Store / Index.cshtml để đọc như sau:

@model IEnumerable<MvcMusicStore.Models.Genre>

Này cho các công cụ xem Razor rằng nó sẽ được làm việc với một đối tượng mô hình có thể giữ các đối tượng loại một số. Chúng tôi đang sử dụng một <Genre> IEnumerable hơn là <Genre> một danh sách vì nó chung chung hơn, cho phép chúng ta thay đổi các loại mô hình của chúng tôi sau đó để bất kỳ loại đối tượng hỗ trợ giao diện IEnumerable.Tiếp theo, chúng tôi sẽ lặp qua các đối tượng Genre trong mô hình như thể hiện trong mã xem dưới đây.

@model IEnumerable<MvcMusicStore.Models.Genre>@{ ViewBag.Title = "Store";}<h3>Browse Genres</h3><p> Select from @Model.Count()genres:</p><ul>



@foreach (var genre in Model) { <li>@genre.Name</li> }</ul>

Chú ý rằng chúng tôi có hỗ trợ IntelliSense đầy đủ như chúng ta nhập vào mã này, để khi chúng tôi gõ "@ Model." Chúng ta thấy tất cả các phương pháp và tài sản được hỗ trợ bởi một IEnumerable Genre loại.

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 mỗi Genre.

Tiếp theo, các tính năng giàn giáo kiểm tra các đối tượng loại và xác định rằng sẽ có một thuộc tính Name, do đó, nó vòng qua và viết chúng ra. Nó cũng tạo ra Edit, chi tiết, và Xóa liên kết đến mỗi một cá nhân. Chúng tôi sẽ tận dụng lợi thế mà sau này trong quản lý cửa hàng của chúng tôi, nhưng bây giờ chúng tôi muốn có một danh sách đơn giản thay vì.Khi chúng tôi 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 trangURL / Store của chúng tôi liệt kê các thể loại hiện đang liệt kê tên loại đơn giản như là văn bản đơn giản. Hãy thay đổi này để mà thay vì văn bản đơn giản, chúng tôi thay vì có tên Genre liên kết đến các cửa hàng / thích hợp / Duyệt URL, vì vậy cách nhấp vào một thể loại âm nhạc như "Disco" sẽ điều hướng đến các cửa hàng / / Browse? Thể loại = Disco URL. Chúng tôi có thể cập nhật \ của chúng tôi Xem \ Cửa hàng \ template Xem Index.cshtml để sản xuất những liên kết này bằng cách sử dụng đoạn mã như sau (không gõ vào trong chúng ta sẽ cải thiện nó) :

<ul> @foreach (var genre in Model) { <li><a href="/Store/[email protected]">@genre.Name</a></li> }</ul>

Điều đó làm việc, 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. Ví dụ, nếu chúng ta muốn đổi tên điều khiển, chúng tôi cần phải tìm kiếm thông qua mã của chúng tôi 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 một phương pháp trợ giúp HTML.ASP.NET MVC bao gồm các phương pháp trợ giúp HTML trong đó có sẵn từ Xem mẫu mã của chúng tôi để thực hiện một loạt các nhiệm vụ thông thường chỉ như thế này. Html.ActionLink () helper là một phương pháp đặc biệt hữu ích, và làm cho



nó dễ dàng để xây dựng các liên kết <a> HTML và chăm sóc những chi tiết gây phiền nhiễu như chắn các đường dẫn URL được mã hóa URL.Html.ActionLink () có quá tải khác nhau để cho phép xác định càng nhiều thông tin như bạn cần cho liên kết của bạn. Trong trường hợp đơn giản, bạn sẽ cung cấp các văn bản liên kết và phương pháp hành động để đi đến khi siêu liên kết được nhấp trên máy khách. Ví dụ, chúng ta có thể liên kết đến "Store / /" phương pháp Index () trên trang Chi tiết Store với các văn bản liên kết "Tới Index Store" bằng cách sử dụng các cuộc gọi sau đây:

@Html.ActionLink("Goto the Store Index", "Index")

Lưu ý: Trong trường hợp này, chúng tôi không cần phải xác định tên điều khiển bởi vì chúng tôi chỉ liên kết đến một hành động khác trong cùng một bộ điều khiển làm cho xem hiện tại.Liên kết của chúng tôi để trang Browse sẽ cần phải vượt qua một tham số, mặc dù, vì vậy chúng tôi sẽ sử dụng một tình trạng quá tải của phương pháp Html.ActionLink mất ba thông số: 1. Liên kết văn bản, mà sẽ hiển thị tên loại 2. Tên điều khiển hành động (Duyệt) 3. Route giá trị tham số, xác định cả hai tên (loại) và giá trị (Thể loại tên)

Đưa rằng tất cả cùng nhau, đây là cách chúng tôi sẽ viết các liên kết để xem Index Store:

<ul> @foreach (var genre in Model) { <li>@Html.ActionLink(genre.Name,"Browse", new { genre = genre.Name })</li> }</ul>

Bây giờ khi chúng tôi chạy dự án của chúng tôi một lần nữa và truy cập Store / / URL chúng ta sẽ thấy một danh sách các thể loại. Từng thể loại là một liên kết khi nhấn vào nó sẽ đưa chúng ta Store / / Duyệt thể loại = [thể loại]URL.



HTML cho danh sách thể loại trông như thế này:

<ul> <li><a href="/Store/Browse?genre=Disco">Disco</a></li> <li><a href="/Store/Browse?genre=Jazz">Jazz</a></li> <li><a href="/Store/Browse?genre=Rock">Rock</a></li></ul>

4. Models and Data AccessCho đến nay, chúng tôi đã chỉ được đi qua "dữ liệu giả" từ bộ điều khiển của chúng tôi vào các mẫu Xem của chúng tôi. Bây giờ chúng tôi đã sẵn sàng để treo lên một cơ sở dữ liệu thực tế. Trong hướng dẫn này, chúng tôi sẽ được bao gồm làm thế nào để sử dụng SQL Server Compact Edition (thường gọi là SQL CE) là công cụ cơ sở dữ liệu của chúng tôi. SQL CE là một, miễn phí, cơ sở dữ liệu, nhúng dựa trên tập tin mà không yêu cầu bất kỳ cài đặt hoặc cấu hình, mà làm cho nó thực sự thuận tiện cho sự phát triển của địa phương.Truy cập cơ sở dữ liệu với Entity Framework Mã-FirstChúng tôi sẽ sử dụng khung Entity (EF) hỗ trợ được bao gồm trong ASP.NET MVC 3 dự án để truy vấn và cập nhật cơ sở dữ liệu. EF là một đối tượng linh hoạt bản đồ quan hệ (ORM) dữ liệu API cho phép các nhà phát triển để truy vấn và cập nhật dữ liệu được lưu trữ trong một cơ sở dữ liệu một cách hướng đối tượng.



Entity Framework phiên bản 4 hỗ trợ một mô hình phát triển gọi là code đầu tiên. Mã đầu tiên cho phép bạn tạo ra các mô hình đối tượng bằng cách viết các lớp học đơn giản (còn được gọi là POCO từ "đồng bằng cũ" đối tượng CLR), và thậm chí có thể tạo ra cơ sở dữ liệu trên bay từ các lớp học của bạn.Thay đổi các lớp mô hình của chúng tôiChúng tôi sẽ tận dụng các tính năng tạo cơ sở dữ liệu trong Entity Framework trong hướng dẫn này. Trước khi chúng tôi làm điều đó, mặc dù, chúng ta hãy làm một vài thay đổi nhỏ đến các lớp học mô hình của chúng tôi để thêm vào trong một số những điều chúng ta sẽ được sử dụng sau này.Thêm các lớp mô hình ArtistAlbum của chúng tôi sẽ được kết hợp với các nghệ sĩ, vì vậy chúng tôi sẽ thêm một lớp mô hình đơn giản để mô tả một Artist. Thêm một lớp mới các Artist.cs Mô hình thư mục có tên bằng cách sử dụng đoạn mã dưới đây.

namespace MvcMusicStore.Models{ public class Artist { public int ArtistId { get; set; } public string Name { get; set; } }}

Cập nhật các lớp mô hình của chúng tôiCập nhật lớp Album như hình dưới đây.namespace MvcMusicStore.Models{ public class Album { public int AlbumId { get; set;} public int GenreId { get; set; } public int ArtistId { get; set; } public string Title { get; set; } public decimal Price { get; set; } public string AlbumArtUrl { get; set; } public Genre Genre { get; set; } public Artist Artist { get; set; } }}

Tiếp theo, làm cho các bản cập nhật sau đến lớp loại.

using System.Collections.Generic; namespace MvcMusicStore.Models{ public partial class Genre {



public int GenreId { get; set; } public string Name { get; set; } public string Description { get; set; } public List<Album> Albums { get; set; } }}

Thêm thư mục App_DataChúng tôi sẽ thêm một thư mục App_Data dự án của chúng tôi tổ chức các tập tin SQL Express Server cơ sở dữ liệu của chúng tôi. App_Data là một thư mục đặc biệt trong ASP.NET mà đã có các điều khoản bảo mật truy cập chính xác cho việc truy cập cơ sở dữ liệu. Từ menu Project, chọn Add ASP.NET Folder, sau đó App_Data.

Tạo một chuỗi kết nối trong file web.configChúng tôi sẽ thêm một vài dòng vào file cấu hình của trang web để Entity Framework biết làm thế nào để kết nối với cơ sở dữ liệu của chúng tôi. Double-click vào tập tin Web.config nằm trong thư mục gốc của dự án.



Di chuyển đến dưới cùng của tập tin này và thêm một phần <connectionStrings> trực tiếp trên dòng cuối cùng, như hình dưới đây.

<connectionStrings> <add name="MusicStoreEntities" connectionString="Data Source=|DataDirectory|MvcMusicStore.sdf" providerName="System.Data.SqlServerCe.4.0"/> </connectionStrings> </confirguration>

Thêm một Class ngữ cảnhKích chuột phải vào thư mục Models và thêm một lớp mới tên là MusicStoreEntities.cs.



Lớp này sẽ đại diện cho các bối cảnh cơ sở dữ liệu Entity Framework, và sẽ xử lý tạo của chúng tôi, đọc, cập nhật, và xóa các hoạt động cho chúng tôi. Mã cho lớp này được hiển thị dưới đây.

using System.Data.Entity; namespace MvcMusicStore.Models{ public class MusicStoreEntities : DbContext { public DbSet<Album> Albums { get; set; } public DbSet<Genre> Genres { get; set; } }}

Đó là nó - không có cấu hình khác, giao diện đặc biệt, vv Bằng cách mở rộng các lớp cơ sở DbContext, lớp MusicStoreEntities của chúng tôi là có thể xử lý các hoạt động cơ sở dữ liệu của chúng tôi cho chúng tôi. Bây giờ chúng ta đã có mà nối, chúng ta hãy thêm một vài thuộc tính đến các lớp học mô hình của chúng tôi tận dụng lợi thế của một số thông tin bổ sung trong cơ sở dữ liệu của chúng tôi.Thêm dữ liệu danh mục cửa hàng của chúng tôiChúng tôi sẽ tận dụng lợi thế của một tính năng trong Entity Framework có thêm "hạt giống" dữ liệu vào một cơ sở dữ liệu mới được tạo ra. Điều này sẽ đặt trước trong danh mục cửa hàng của chúng tôi với một danh sách các thể loại, nghệ sĩ, và album. Các tải về MvcMusicStore-Assets.zip - trong đó bao gồm các tập tin thiết kế trang web của chúng tôi sử dụng trước đó trong hướng dẫn này có một tập tin lớp học với dữ liệu hạt giống này, nằm trong một thư mục tên là Mã.Trong thư mục Mã Models /, xác định vị trí file SampleData.cs và thả nó vào thư mục Mô hình trong dự án của chúng tôi, như hình dưới đây.



Bây giờ chúng ta cần thêm một dòng mã nói với Entity Framework về điều đó lớp SampleData. Double-click vào tập tin Global.asax trong thư mục gốc của dự án để mở nó ra và thêm dòng sau đây trên phương pháp Application_Start.

protected void Application_Start(){ System.Data.Entity.Database.SetInitializer( new MvcMusicStore.Models.SampleData()); AreaRegistration.RegisterAllAreas(); RegisterGlobalFilters(GlobalFilters.Filters); RegisterRoutes(RouteTable.Routes); }

Tại thời điểm này, chúng tôi đã hoàn thành công việc cần thiết để cấu hình Entity Framework cho dự án của chúng tôi.Truy vấn cơ sở dữ liệuBây giờ chúng ta hãy cập nhật StoreController của chúng tôi để thay vì sử dụng "dữ liệu giả" nó thay vì các cuộc gọi vào cơ sở dữ liệu của chúng tôi để truy vấn tất cả các thông tin của nó. Chúng tôi sẽ bắt đầu bằng cách tuyên bố một lĩnh vực trên StoreController giữ một thể hiện của lớp MusicStoreEntities, tên là storeDB:

public class StoreController : Controller{ MusicStoreEntities storeDB = new MusicStoreEntities();

Cập nhật Index Store để truy vấn cơ sở dữ liệuLớp MusicStoreEntities được duy trì bởi khung Entity và đưa ra một tài sản thu cho mỗi bảng trong cơ sở dữ liệu của chúng tôi. Hãy cập nhật StoreController Index hành động của chúng tôi để lấy tất cả các thể loại trong cơ sở dữ liệu của chúng tôi. Trước đây, chúng tôi đã làm điều này bởi các chuỗi dữ liệu cứng mã hóa. Bây giờ chúng ta có thể thay vì chỉ sử dụng Entity Framework ngữ cảnh Generes bộ sưu tập:

public ActionResult Index(){ var genres = storeDB.Genres.ToList(); return View(genres); }

Không có thay đổi cần phải xảy ra mẫu của chúng tôi kể từ khi chúng tôi đang trở về StoreIndexViewModel cùng chúng tôi trở về trước khi chúng tôi chỉ trả về dữ liệu trực tiếp từ cơ sở dữ liệu của chúng tôi tại.Khi chúng tôi điều hành dự án một lần nữa và truy cập vào URL "/ Store", bây giờ chúng ta sẽ thấy một danh sách của tất cả các thể loại trong cơ sở dữ liệu của chúng tôi:



Cập nhật Browse Store và chi tiết để sử dụng dữ liệu trực tiếpVới thể loại / Store / Browse = [một số thể loại hành động phương pháp, chúng tôi đang tìm kiếm cho một loại nhạc theo tên. Chúng tôi chỉ mong đợi một kết quả, kể từ khi chúng tôi nên không bao giờ có hai mục cho cùng một loại tên, và vì vậy chúng tôi có thể sử dụng phần mở rộng đơn () trong LINQ để truy vấn cho các đối tượng loại thích hợp như thế này (không gõ này chưa ):

var example = storeDB.Genres.Single(g => g.Name == “Disco”);

Phương pháp đơn mất một biểu thức Lambda như một tham số, trong đó quy định cụ thể mà chúng tôi muốn một đối tượng loại duy nhất như vậy mà tên của nó phù hợp với giá trị mà chúng ta đã xác định. Trong trường hợp trên, chúng tôi đang tải một đối tượng loại duy nhất với một kết hợp giá trị Disco Name.Chúng tôi sẽ tận dụng lợi thế của một tính năng Entity Framework cho phép chúng ta chỉ ra các đơn vị khác có liên quan, chúng tôi muốn nạp như khi đối tượng loại được lấy ra. Tính năng này được gọi là kết quả truy vấn Shaping, và cho phép chúng tôi giảm số lần chúng ta cần phải truy cập vào cơ sở dữ liệu để lấy tất cả các thông tin mà chúng tôi cần. Chúng tôi muốn trước lấy Album Genre chúng tôi lấy, vì vậy chúng tôi sẽ cập nhật truy vấn của chúng tôi bao gồm từ Genres.Include ("Albums") để chỉ ra rằng chúng tôi muốn album có liên quan cũng. Đây là hiệu quả hơn, vì nó sẽ lấy cả hai loại của chúng tôi và Album dữ liệu trong một yêu cầu cơ sở dữ liệu duy nhất.Với những lời giải thích trên đường đi, đây là cập nhật Browse hành động điều khiển của chúng tôi trông như thế nào:

public ActionResult Browse(string genre) { // Retrieve Genre and its Associated Albums from database



var genreModel = storeDB.Genres.Include("Albums") .Single(g => g.Name == genre); return View(genreModel); }

Bây giờ chúng ta có thể cập nhật Xem Browse Store để hiển thị các album có sẵn trong mỗi loại. Mở mẫu xem (tìm thấy / Views / Store / Browse.cshtml) và thêm một danh sách liệt kê của Album như hình dưới đây.

@model MvcMusicStore.Models.Genre@{ ViewBag.Title = "Browse";}<h2>Browsing Genre: @Model.Name</h2><ul> @foreach (var album in Model.Albums) { <li> @album.Title </li> }</ul>

Chạy ứng dụng của chúng tôi và duyệt tới / Store / Duyệt thể loại = chương trình Jazz kết quả của chúng tôi hiện đang được lấy từ cơ sở dữ liệu, hiển thị tất cả các album trong loại được lựa chọn của chúng tôi.

Chúng tôi sẽ làm cho các thay đổi tương tự Store / / Chi tiết của chúng tôi / [id] URL, và thay thế dữ liệu giả của chúng tôi với một truy vấn cơ sở dữ liệu mà tải một Album có ID phù hợp với giá trị tham số.



public ActionResult Details(int id) { var album = storeDB.Albums.Find(id); return View(album); }

Chạy ứng dụng của chúng tôi và duyệt tới / Store/Details/1 cho thấy kết quả của chúng tôi hiện nay đang được lấy từ cơ sở dữ liệu.

Bây giờ cửa hàng trang Chi tiết của chúng tôi được thiết lập để hiển thị một album ID Album, cho phép cập nhậtDuyệt xem liên kết để xem chi tiết. Chúng tôi sẽ sử dụng Html.ActionLink, chính xác như chúng tôi đã liên kết từ Index các cửa hàng để Store Browse ở cuối của phần trước. Nguồn hoàn chỉnh cho xem Browse xuất hiện bên dưới

@model MvcMusicStore.Models.Genre

@{ ViewBag.Title = "Browse"; } <h2> Browsing Genre: @Model.Name </ h2> <ul> @foreach (var album in Model.Albums) { <li>



@Html.ActionLink(album.Title,"Details", new {id = album.AlbumId}) </li> } </ ul>

Chúng tôi bây giờ có thể để trình duyệt từ trang cửa hàng của chúng tôi đến một trang Thể loại, trong đó liệt kê các album có sẵn, và bằng cách nhấp vào một album, chúng ta có thể xem chi tiết cho album đó.

5. Edit Forms and TemplatingTrong chương trước, chúng tôi đã được tải dữ liệu từ cơ sở dữ liệu của chúng tôi và hiển thị nó. Trong chương này, chúng tôi cũng sẽ cho phép chỉnh sửa dữ liệu.Tạo StoreManagerController



Chúng tôi sẽ bắt đầu bằng cách tạo ra một bộ điều khiển mới được gọi là StoreManagerController . Cho bộ điều khiển này, chúng ta sẽ được tận dụng giàn giáo các tính năng có sẵn trong MVC ASP.NET Update Tools 3. Thiết lập các tùy chọn cho hộp thoại Add điều khiển như hình dưới đây.

Khi bạn nhấn chuột vào nút Add, bạn sẽ thấy rằng ASP.NET MVC 3 giàn giáo cơ chế hiện một số lượng tốt của công việc cho bạn: Nó tạo ra StoreManagerController mới với một biến khung Entity địa phương Nó cho biết thêm một thư mục StoreManager vào thư mục Views của dự án Nó cho biết thêm Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, và xem

Index.cshtml, mạnh mẽ đánh máy cho lớp Album



StoreManager lớp điều khiển mới này bao gồm CRUD (tạo, đọc, cập nhật, xóa) các hành động điều khiển mà biết làm thế nào để làm việc với các lớp mô hình Album và ngữ cảnh sử dụng Entity Framework để truy cập cơ sở dữ liệu của chúng tôi.Sửa đổi một Xem ScaffoldedĐiều quan trọng là phải nhớ rằng, trong khi mã này được tạo ra cho chúng ta, nó là tiêu chuẩn mã ASP.NET MVC, giống như chúng tôi đã viết suốt hướng dẫn này. Nó nhằm mục đích giúp bạn tiết kiệm thời gian bạn muốn chi tiêu vào việc viết mã điều khiển boilerplate và tạo ra các quan điểm mạnh mẽ đánh máy bằng tay, nhưng điều này không phải là loại mã được tạo ra, bạn có thể đã thấy mở đầu với cảnh báo thảm khốc trong ý kiến về việc làm thế nào bạn không được thay đổi mã. Đây là mã của bạn, và bạn đang dự kiến sẽ thay đổi nó.Vì vậy, hãy bắt đầu với một chỉnh sửa nhanh chóng để xem Index StoreManager (/ xem / StoreManager / Index.cshtml). Điểm này sẽ hiển thị một bảng trong đó liệt kê các album khác trong cửa hàng của chúng tôi với Edit / chi tiết / Xóa liên kết, và bao gồm các tài sản công cộng của Album. Chúng tôi sẽ loại bỏ các lĩnh vực AlbumArtUrl, vì nó không phải là rất hữu ích trong màn hình này. Trong phần <table> của mã xem, loại bỏ các yếu tố



<th> và <td> xung quanh các tài liệu tham khảo AlbumArtUrl, như được chỉ ra bởi các đường đánh dấu dưới đây:

<table> <tr> <th> Genre </th> <th> Artist </th> <th> Title </th> <th> Price </th> <th> AlbumArtUrl </th> <th></th> </tr>@foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Genre.Name) </td> <td> @Html.DisplayFor(modelItem => item.Artist.Name) </td> <td> @Html.DisplayFor(modelItem => item.Title) </td> <td> @Html.DisplayFor(modelItem => item.Price) </td> <td> @Html.DisplayFor(modelItem => item.AlbumArtUrl) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) | @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) | @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId }) </td> </tr>}</table>

Mã xem thay đổi sẽ xuất hiện như sau:



@model IEnumerable<MvcMusicStore.Models.Album>@{ ViewBag.Title = "Index";}<h2>Index</h2><p> @Html.ActionLink("CreateNew", "Create")</p><table> <tr> <th> Genre </th> <th> Artist </th> <th> Title </th> <th> Price </th> <th></th> </tr>@foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Genre.Name) </td> <td> @Html.DisplayFor(modelItem => item.Artist.Name) </td> <td> @Html.DisplayFor(modelItem => item.Title) </td> <td> @Html.DisplayFor(modelItem => item.Price) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) | @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) | @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId }) </td> </tr>}</table>

Một cái nhìn đầu tiên tại Store Manager



Bây giờ chạy các ứng dụng và trình duyệt / StoreManager /. Này hiển thị Index Store Manager, chúng tôi chỉ cần sửa đổi, hiển thị một danh sách các album khác trong cửa hàng với các liên kết Chỉnh sửa, chi tiết, và Delete.

Nhấp vào liên kết Chỉnh sửa hiển thị một hình thức chỉnh sửa với các lĩnh vực Album, bao gồm Dropdowns cho loại và Artist.



Nhấp vào "Back to List" liên kết ở phía dưới, sau đó bấm vào liên kết Details Album. Hiển thị thông tin chi tiết cho một Album cá nhân.



Một lần nữa, bấm vào Trở lại danh sách liên kết, và sau đó nhấn vào một liên kết Xoá. Này sẽ hiển thị một hộp thoại xác nhận, hiển thị các chi tiết album và hỏi nếu chúng tôi chắc chắn chúng tôi muốn xóa nó.



Nhấp vào nút Delete ở phía dưới sẽ xóa các album và đưa bạn trở lại trang Index, trong đó cho thấy trong album đã bị xóa.Chúng tôi không thực hiện với Store Manager, nhưng chúng tôi đã làm việc điều khiển và xem mã cho các hoạt động CRUD để bắt đầu từ.Nhìn vào mã Store điều khiển quản lýController Store Manager có chứa một số lượng tốt của các mã. Hãy cho đi qua này từ trên xuống dưới. Bộ điều khiển bao gồm một số tên miền không gian tiêu chuẩn cho một bộ điều khiển MVC, cũng như một tham chiếu đến không gian tên Mô hình của chúng tôi. Bộ điều khiển có một trường hợp riêng của MusicStoreEntities, được sử dụng bởi các hành động điều khiển để truy cập dữ liệu.

using System; using System.Collections.Generic; using System.Data; using System.Data.Entity; using System.Linq; using System.Web; using System.Web.Mvc; using MvcMusicStore.Models; namespace MvcMusicStore.Controllers{ public class StoreManagerController : Controller { private MusicStoreEntities db = new MusicStoreEntities();

Store Manager Index và chi tiết hành độngXem chỉ số lấy một danh sách các Album, bao gồm cả loại tham chiếu mỗi album và thông tin Artist, như chúng ta đã thấy trước đó khi làm việc trên phương pháp Browse Store. Xem Index theo các tài liệu tham khảo cho các đối tượng liên kết để nó có thể hiển thị tên Genre mỗi album và tên nghệ sĩ, do đó, bộ điều khiển hiệu quả và truy vấn thông tin này trong yêu cầu ban đầu.

//// GET: /StoreManager/public ViewResult Index(){ var albums = db.Albums.Include(a => a.Genre).Include(a => a.Artist); return View(albums.ToList());}

Chi tiết hành động điều khiển Controller StoreManager hoạt động chính xác tương tự như hành động Store chi tiết điều khiển chúng tôi đã viết trước đây - nó truy vấn Album theo ID bằng cách sử dụng phương thức Find (), sau đó trả lại nó cho xem.

// // GET: /StoreManager/Details/5 public ViewResult Details(int id) { Album album = db.Albums.Find(id);



return View(album); }

Hành động tạo ra phương phápTạo phương pháp hành động là một chút khác nhau từ những người chúng ta đã thấy cho đến nay, vì họ xử lý các hình thức đầu vào. Khi một người sử dụng đầu tiên thăm / StoreManager / Tạo / họ sẽ được hiển thị một hình thức trống rỗng. Trang HTML này sẽ chứa một yếu tố <form> có chứa các yếu tố đầu vào và các hộp thả xuống nơi họ có thể nhập các chi tiết của album.Sau khi người dùng điền vào các giá trị hình thức Album, họ có thể nhấn nút "Save" để gửi những thay đổi trở lại ứng dụng của chúng tôi để tiết kiệm trong cơ sở dữ liệu. Khi người dùng nhấn nút "lưu" <form> sẽ thực hiện một HTTP POST lại này để các StoreManager / / Tạo / URL và gửi các giá trị <form> như là một phần của POST-HTTP.ASP.NET MVC cho phép chúng ta dễ dàng chia logic của hai kịch bản này gọi URL bằng cách cho phép chúng tôi thực hiện hai riêng biệt "Tạo" phương pháp hành động trong lớp StoreManagerController của chúng tôi - một để xử lý ban đầu HTTP-GET duyệt này để các StoreManager / / Tạo / URL, và các khác để xử lý các HTTP POST trong những thay đổi trình.Chuyển thông tin ViewBag Xem bằng cách sử dụngChúng tôi đã sử dụng ViewBag trước đó trong hướng dẫn này, nhưng đã không nói nhiều về nó. ViewBag cho phép chúng ta chuyển thông tin để xem mà không cần sử dụng một mô hình đối tượng mạnh mẽ đánh máy. Trong trường hợp này, chúng tôi Sửa HTTP-GET điều khiển hành động cần phải vượt qua cả một danh sách các thể loại và nghệ sĩ để hình thành để cư Dropdowns, và cách đơn giản nhất để làm điều đó là để trả lại như các mục ViewBag.ViewBag là một đối tượng năng động, có nghĩa là bạn có thể gõ ViewBag.Foo hoặc ViewBag.YourNameHere mà không cần viết mã để xác định những tài sản. Trong trường hợp này, mã điều khiển sử dụng ViewBag.GenreId và ViewBag.ArtistId để thả xuống các giá trị nộp cùng với mẫu đơn sẽ được GenreId và ArtistId, là tài sản Album họ sẽ được thiết lập.Những giá trị này thả xuống trở lại dưới hình thức bằng cách sử dụng các đối tượng SelectList, được xây dựng cho mục đích đó. Điều này được thực hiện bằng cách sử dụng mã như thế này:

ViewBag.GenreId = new SelectList(db.Genres, "GenreId","Name");

Như bạn có thể nhìn thấy từ mã phương pháp hành động, ba thông số đang được sử dụng để tạo ra các đối tượng này: Danh sách các hạng mục trình đơn thả xuống sẽ được hiển thị. Lưu ý rằng đây không

phải chỉ là một chuỗi - chúng ta sẽ đi qua một danh sách các thể loại. Tham số tiếp theo được thông qua SelectList các giá trị được chọn. Này. SelectList

biết làm thế nào trước chọn một mục trong danh sách Điều này sẽ dễ dàng hơn để hiểu khi chúng ta nhìn vào các hình thức Edit, là khá tương tự.

Tham số cuối cùng là các tài sản sẽ được hiển thị. Trong trường hợp này, điều này được chỉ ra rằng tài sản Genre.Name là những gì sẽ được hiển thị cho người dùng.

Với ý nghĩ đó, sau đó, HTTP-GET Tạo hành động là khá đơn giản - SelectLists hai được thêm vào các ViewBag, và không có mô hình đối tượng được thông qua hình thức (vì nó đã không được tạo ra chưa).



//// GET: /StoreManager/Createpublic ActionResult Create(){ ViewBag.GenreId = new SelectList(db.Genres, "GenreId","Name"); ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId","Name"); return View();}

Helpers HTML để hiển thị các Downs Drop Xem CreateKể từ khi chúng tôi đã nói chuyện về cách thả xuống giá trị được thông qua để xem, chúng ta hãy xem nhanh xem để xem làm thế nào những giá trị được hiển thị. Trong đoạn code xem (/ xem / StoreManager / Create.cshtml), bạn sẽ thấy cuộc gọi sau đây được thực hiện để hiển thị các loại thả xuống.Html.DropDownList ("GenreId", String.Empty)

Điều này được biết đến như một HTML Helper - một phương pháp hữu ích, thực hiện một nhiệm vụ chung. Helpers HTML rất hữu ích trong việc giữ mã điểm của chúng tôi ngắn gọn và dễ đọc. Helper Html.DropDownList được cung cấp bởi ASP.NET MVC, nhưng như chúng ta sẽ thấy sau đó nó có thể tạo ra người giúp việc riêng của mình cho mã xem chúng tôi sẽ tái sử dụng trong ứng dụng của chúng tôi.Các cuộc gọi Html.DropDownList chỉ cần được nói với hai điều - nơi để có được danh sách để hiển thị, và những gì giá trị (nếu có) nên được chọn sẵn. Tham số đầu tiên, GenreId, cho DropDownList để tìm kiếm một giá trị có tên GenreId trong mô hình hoặc ViewBag. Tham số thứ hai được sử dụng để chỉ ra giá trị để hiển thị như ban đầu được lựa chọn trong danh sách thả xuống. Vì biểu mẫu này là một hình thức Create, không có giá trị được chọn trước và String.Empty được thông qua.Xử lý các giá trị mẫu vănNhư chúng ta đã thảo luận trước đó, có hai phương pháp hành động kết hợp với mỗi hình thức. Đầu tiên xử lý các yêu cầu HTTP GET và hiển thị biểu mẫu. Thứ hai xử lý các yêu cầu HTTP POST, trong đó có chứa các giá trị biểu mẫu được gửi. Chú ý rằng điều khiển hành động có một HttpPost] thuộc tính, mà nói với ASP.NET MVC là nó chỉ cần đáp ứng các yêu cầu HTTP-POST.

//// POST: /StoreManager/Create[HttppPost] public ActionResult Create(Album album) { if (ModelState.IsValid) { db.Albums.Add(album); db.SaveChanges(); return RedirectToAction("Index"); } ViewBag.GenreId = new SelectList(db.Genres, "GenreId",



"Name", album.GenreId); ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId","Name", album.ArtistId); return View(album); }

Hành động này có bốn trách nhiệm: 1. Đọc giá trị hình thức 2. Kiểm tra xem các giá trị hình thức vượt qua bất kỳ quy tắc xác nhận 3. Nếu hình thức trình là hợp lệ, lưu dữ liệu và hiển thị danh sách cập nhật 4. Nếu hình thức trình không hợp lệ, hiển thị lại các hình thức với các lỗi xác nhận

Đọc giá trị hình thức với Binding mẫuHành động điều khiển được xử lý một hình thức trình bao gồm giá trị cho GenreId và ArtistId (từ danh sách thả xuống) và các giá trị hộp văn bản Title, Giá, và AlbumArtUrl. Trong khi nó có thể truy cập trực tiếp các giá trị hình thức, một cách tiếp cận tốt hơn là sử dụng khả năng mô hình Binding được xây dựng vào ASP.NET MVC. Khi một hành động điều khiển một loại mô hình như một tham số, ASP.NET MVC sẽ cố gắng để cư trú một đối tượng của kiểu bằng cách sử dụng các yếu tố đầu vào hình thức (cũng như các tuyến đường và chuỗi truy vấn giá trị). Nó làm điều này bằng cách tìm kiếm các giá trị có tên phù hợp với tính chất của đối tượng mô hình, ví dụ như khi thiết lập giá trị GenreId đối tượng Album mới, có vẻ một đầu vào với GenreId tên. Khi bạn tạo ra quan điểm bằng cách sử dụng các phương pháp tiêu chuẩn trong ASP.NET MVC, các hình thức sẽ luôn luôn được trả lại bằng cách sử dụng tên tài sản như tên trường đầu vào, do đó, các tên trường sẽ chỉ phù hợp.Validating ModelMô hình này được xác nhận với một cuộc gọi đơn giản để ModelState.IsValid. Chúng tôi đã không được thêm bất kỳ quy tắc xác nhận vào lớp Album của chúng tôi - chúng tôi sẽ làm một chút - vì vậy ngay bây giờ việc kiểm tra này không có nhiều việc để làm. Điều quan trọng là việc kiểm tra này ModelStat.IsValid sẽ thích ứng với các quy tắc xác nhận chúng tôi đưa vào mô hình của chúng tôi, do đó, những thay đổi trong tương lai để quy tắc xác nhận sẽ không yêu cầu bất kỳ bản cập nhật mã hành động điều khiển.Tiết kiệm các giá trị submitNếu hình thức trình đi xác nhận, đó là thời gian để lưu các giá trị cơ sở dữ liệu. Với Entity Framework, mà chỉ cần yêu cầu thêm các mô hình để thu Albums và gọi SaveChanges.

db.Albums.Add(album); db.SaveChanges();

Entity Framework tạo ra các câu lệnh SQL thích hợp để vẫn tồn các giá trị. Sau khi lưu các dữ liệu, chúng tôi chuyển hướng trở lại danh sách các album, do đó chúng ta có thể thấy cập nhật của chúng tôi. Điều này được thực hiện bằng cách trở về RedirectToAction với tên của hành động điều khiển chúng ta muốn hiển thị. Trong trường hợp này, đó là phương pháp Index.Hiển thị đệ trình không hợp lệ với các lỗi ValidationTrong trường hợp đầu vào không hợp lệ, các giá trị thả xuống được thêm vào các ViewBag (như trong trường hợp HTTP-GET) và mô hình các giá trị ràng buộc được thông qua trở lại xem để hiển thị. Lỗi xác nhận sẽ tự động được hiển thị bằng cách sử dụng [email protected] HTML Helper.Kiểm tra mẫu CreateĐể kiểm tra này ra, chạy các ứng dụng và duyệt / StoreManager / Tạo / - điều này sẽ cho bạn thấy hình thức trống được trả về bởi phương pháp StoreController HTTP-GET Create.



Điền vào một số giá trị và click vào nút Create để gửi biểu mẫu.

Xử lý chỉnh sửaCặp đôi hành động Edit (HTTP-GET và HTTP POST) là rất tương tự như các phương pháp hành động Create chúng tôi chỉ nhìn. Kể từ khi kịch bản chỉnh sửa liên quan đến làm việc với một album hiện có, Edit HTTP-GET tải phương pháp Album dựa trên các tham số "id", thông qua tại thông qua các tuyến đường. Mã này để lấy một album của ALBUMID giống như trước đó chúng tôi đã nhìn vào trong hành động chi tiết điều khiển. Với phương pháp Create / HTTP GET, thả xuống giá trị được trả về thông qua ViewBag. Điều này cho phép chúng tôi để trở về một Album như là đối tượng mô hình của chúng tôi để xem (được gõ vào các lớp Album) trong khi đi qua các dữ liệu bổ sung (ví dụ như một danh sách các thể loại) thông qua các ViewBag.

//// GET: /StoreManager/Edit/5public ActionResult Edit(int id) { Album album = db.Albums.Find(id); ViewBag.GenreId = new SelectList(db.Genres, "GenreId","Name", album.GenreId);



ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId","Name", album.ArtistId); return View(album); }

Sửa HTTP-POST hành động rất giống với các hành động HTTP-POST Create. Sự khác biệt duy nhất là thay vì thêm một album mới vào bộ sưu tập db.Albums, chúng tôi đang tìm kiếm các trường hợp hiện tại của Album sử dụng db.Entry (album) và thiết lập trạng thái của nó để thay đổi. Này cho Entity Framework rằng chúng ta đang sửa đổi một album hiện có như trái ngược với tạo một hình mới.

//// POST: /StoreManager/Edit/5[HttppPost] public ActionResult Edit(Album album) { if (ModelState.IsValid) { db.Entry(album).State = EntityState.Modifired; db.SaveChanges(); return RedirectToAction("Index"); } ViewBag.GenreId = new SelectList(db.Genres, "GenreId","Name", album.GenreId); ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId","Name", album.ArtistId); return View(album); }

Chúng ta có thể kiểm tra điều này bằng cách chạy các ứng dụng và trình duyệt / StoreManger /, sau đó nhấp vào liên kết Chỉnh sửa cho một album.

Này hiển thị các hình thức Chỉnh sửa hiển thị theo phương pháp HTTP-GET Sửa. Điền vào một số giá trị và nhấp vào nút Save.



Điều này bài viết dưới hình thức lưu các giá trị, và trả lại cho chúng tôi vào danh sách Album, cho thấy rằng các giá trị đã được cập nhật.

Xử lý xóaXóa sau cùng một khuôn mẫu như chỉnh sửa và tạo, bằng cách sử dụng một trong những hành động điều khiển để hiển thị các hình thức xác nhận, và một bộ điều khiển hành động để xử lý các hình thức trình.HTTP-GET Xóa điều khiển hành động là chính xác giống như quản lý trước hành động điều khiển lưu trữ chi tiết của chúng tôi.

//// GET: /StoreManager/Delete/5 public ActionResult Delete(int id) { Album album = db.Albums.Find(id); return View(album); }

Chúng tôi hiển thị một hình thức mạnh mẽ đánh máy một loại Album, bằng cách sử dụng các mẫu Xóa nội dung xem.



Các mẫu Xóa thấy tất cả các lĩnh vực cho mô hình, nhưng chúng ta có thể đơn giản hóa giảm khá một chút. Thay đổi mã xem trong / Views / StoreManager / Delete.cshtml sau.

@model MvcMusicStore.Models.Album@{ ViewBag.Title = "Delete";}<h2>Delete Confirrmation</h2><p>Are you sure you want to delete the album titled <strong>@Model.Title</strong>?</p>@using (Html.BeginForm()) { <p> <input type="submit" value="Delete" /> </p> <p> @Html.ActionLink("Back toList", "Index") </p>}

Này sẽ hiển thị một xác nhận Xóa đơn giản.



Nhấp vào nút Delete gây ra các hình thức được gửi trở lại cho máy chủ, thực hiện các hành động DeleteConfirmed.

//// POST: /StoreManager/Delete/5[HttppPost, ActionName("Delete")]public ActionResult DeleteConfirrmed(int id) { Album album = db.Albums.Find(id); db.Albums.Remove(album); db.SaveChanges(); return RedirectToAction("Index");}

HTTP POST Xóa điều khiển hành động của chúng tôi có những hành động sau đây: 1. Tải các Album của ID 2. Xóa nó album và lưu thay đổi 3. Chuyển hướng đến chỉ số này, cho thấy Album đã được gỡ bỏ khỏi danh sách

Để kiểm tra, chạy ứng dụng và duyệt / StoreManager. Chọn một album từ danh sách và nhấp vào liên kết Xoá.



Này sẽ hiển thị màn hình xác nhận Xóa của chúng tôi.

Nhấp vào nút Delete loại bỏ các album và trả về trang Store Index Manager, trong đó cho thấy rằng album đã bị xóa.



Sử dụng một người trợ giúp HTML tùy chỉnh để truncate văn bảnChúng tôi đã có một vấn đề tiềm năng với trang Index quản lý cửa hàng của chúng tôi. Tiêu đề Album của chúng tôi và các thuộc tính Name Artist cả hai có thể đủ dài rằng họ có thể ném ra định dạng bảng của chúng tôi. Chúng tôi sẽ tạo ra một người trợ giúp HTML tùy chỉnh để cho phép chúng ta dễ dàng cắt những điều này và các tài sản khác xem của chúng tôi.



Cú pháp helper @ Razor đã làm cho nó khá dễ dàng để tạo ra các chức năng trợ giúp của riêng bạn để sử dụng trong các quan điểm của bạn. Mở / xem / StoreManager / Index.cshtml xem và thêm mã sau đây trực tiếp sau khi dòng mô hình @.

@helper Truncate(stringinput, int length) { if (input.Length <= length) { @input } else { @input.Substring(0, length)<text>...</text> }}



Phương pháp này helper phải mất một chuỗi và chiều dài tối đa cho phép. Nếu văn bản được cung cấp là ngắn hơn so với chiều dài quy định, helper kết quả đầu ra như-là. Nếu lâu hơn nữa, sau đó nó cắt các văn bản và làm cho "..." cho phần còn lại.Bây giờ chúng ta có thể sử dụng helper Cắt ngắn của chúng tôi để đảm bảo rằng cả Tiêu đề Album và các thuộc tính Name Artist ít hơn 25 ký tự. Mã nhìn đầy đủ bằng cách sử dụng helper Truncate mới của chúng tôi xuất hiện bên dưới.@model IEnumerable<MvcMusicStore.Models.Album>@helper Truncate(string input, int length) { if (input.Length <= length) { @input } else { @input.Substring(0, length)<text>...</text> }}@{ ViewBag.Title = "Index";}<h2>Index</h2><p> @Html.ActionLink("CreateNew", "Create")</p><table> <tr> <th> Genre </th> <th> Artist </th> <th> Title </th> <th> Price </th> <th></th> </tr>@foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Genre.Name) </td> <td> @Truncate(item.Artist.Name, 25) </td> <td> @Truncate(item.Title, 25) </td>



<td> @Html.DisplayFor(modelItem => item.Price) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) | @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) | @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId }) </td> </tr>}</table>

Bây giờ khi chúng ta duyệt URL / StoreManager /, các album và các chức danh được lưu giữ dưới độ dài tối đa của chúng tôi

Lưu ý: Điều này cho thấy trường hợp đơn giản của việc tạo ra và sử dụng một người trợ giúp trong một giao diện.Để tìm hiểu thêm về việc tạo ra những người giúp đỡ mà bạn có



thể sử dụng trong trang web của bạn, xem bài đăng blog của tôi: http://bit.ly/mvc3-helper-options

6. Using Data Annotations for Model Validation

Chúng tôi có một vấn đề lớn với Tạo và chỉnh sửa các hình thức của chúng tôi: họ không làm bất kỳ xác nhận.Chúng ta có thể làm những việc như để lại các trường bắt buộc trống hoặc loại thư trong lĩnh vực giá, và các lỗi đầu tiên chúng ta sẽ thấy là từ cơ sở dữ liệu.Chúng ta có thể dễ dàng thêm xác nhận để ứng dụng của chúng tôi bằng cách thêm các chú thích dữ liệu đến các lớp học mô hình của chúng tôi. Dữ liệu Chú thích cho phép chúng tôi để mô tả các quy tắc chúng ta muốn áp dụng để tính mô hình của chúng tôi, và ASP.NET MVC sẽ chăm sóc thực thi và hiển thị thông điệp phù hợp cho người dùng của chúng tôi.Thêm Validation Mẫu Album của chúng tôiChúng tôi sẽ sử dụng các thuộc tính dữ liệu chú thích sau đây: Yêu cầu - Chỉ ra rằng bất động sản là một lĩnh vực cần thiết DisplayName - Xác định văn bản chúng tôi muốn được sử dụng vào các lĩnh vực

hình thức và tin nhắn xác nhận StringLength - Xác định chiều dài tối đa cho một lĩnh vực chuỗi Phạm vi - Cung cấp cho một giá trị tối đa và tối thiểu đối với một số lĩnh vực Bind - Danh sách các trường để loại trừ hoặc đưa khi ràng buộc các giá trị tham số

hoặc hình thức tính mô hình ScaffoldColumn - Cho phép ẩn các lĩnh vực từ các hình thức biên tập viên

Lưu ý: Để biết thêm thông tin về Validation mẫu bằng cách sử dụng các thuộc tính chú thích dữ liệu, xem tài liệu MSDN tại http://go.microsoft.com/fwlink/?LinkId=159063Mở lớp Album và thêm dòng sau bằng cách sử dụng báo cáo để đầu.

using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Web.Mvc;

Tiếp theo, cập nhật các tài sản thêm màn hình hiển thị và xác nhận thuộc tính như hình dưới đây.

namespace MvcMusicStore.Models{ [Bind(Exclude = "AlbumId")] public class Album { [ScaffooldColumn(false)] public int AlbumId { get; set; } [DisplayName("Genre")]


http://go.microsoft.com/fwlink/?LinkId=159063


http://bit.ly/mvc3-helper-options

http://bit.ly/mvc3-helper-options

public int GenreId { get; set; } [DisplayName("Artist")] public int ArtistId { get; set; } [Required(ErrorMessage = "An Album Title is required")] [StringLength(160)] public string Title { get; set; } [Required(ErrorMessage = "Price is required")] [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")] public decimal Price { get; set; } [DisplayName("Album Art URL")] [StringLength(1024)] public string AlbumArtUrl { get; set; } public virtual Genre Genre { get; set; } public virtual Artist Artist { get; set; } }}

Trong khi chúng tôi đang ở đó, chúng tôi cũng đã thay đổi loại và Artist tài sản ảo. Điều này cho phép Entity Framework để lười biếng tải chúng khi cần thiết.

public virtual Genre Genre { get; set; }public virtual Artist Artist { get; set; }

Sau đó có thêm các thuộc tính để mô hình Album của chúng tôi, Tạo và chỉnh sửa màn hình ngay lập tức bắt đầu xác nhận lĩnh vực, bằng cách sử dụng tên hiển thị chúng tôi đã chọn (ví dụ: Album Art Url thay vì AlbumArtUrl). Chạy ứng dụng và trình duyệt / StoreManager / Tạo.



Tiếp theo, chúng tôi sẽ phá vỡ một số quy tắc xác nhận. Nhập giá từ 0 và bỏ trống Tiêu đề. Khi chúng ta click vào nút Create, chúng ta sẽ thấy form hiển thị với các thông báo lỗi xác nhận cho thấy các trường không đáp ứng các quy tắc xác nhận chúng tôi đã xác định.



Kiểm tra Validation Client-SideServer-side xác nhận là rất quan trọng từ một quan điểm ứng dụng, bởi vì người dùng có thể phá vỡ phía máy khách xác nhận. Tuy nhiên, các hình thức trang web mà chỉ thực hiện phía máy chủ xác nhận hiện ba vấn đề quan trọng. 1. Người sử dụng đã phải chờ đợi cho biểu mẫu được đăng, xác nhận trên máy chủ,

và đáp ứng được gửi đến trình duyệt của họ. 2. Người dùng không nhận được thông tin phản hồi ngay lập tức khi họ sửa chữa một

lĩnh vực để nó vượt qua các quy tắc xác nhận. 3. Chúng tôi đang lãng phí tài nguyên máy chủ để thực hiện logic xác nhận thay vì

tận dụng trình duyệt của người dùng.May mắn thay, ASP.NET MVC 3 giàn giáo mẫu có xác nhận phía máy khách được xây dựng trong, không cần công việc bổ sung nào.Gõ một chữ cái trong lĩnh vực Tiêu đề đáp ứng các yêu cầu xác nhận, do đó, các thông báo xác nhận được ngay lập tức gỡ bỏ.



7. Membership and AuthorizationBộ điều khiển quản lý cửa hàng của chúng tôi hiện đang truy cập vào bất cứ ai truy cập vào trang web của chúng tôi. Hãy thay đổi điều này để hạn chế cho phép các quản trị viên trang web.Thêm AccountController ViewsMột sự khác biệt giữa ASP.NET MVC đầy đủ 3 mẫu ứng dụng Web và Web ASP.NET MVC 3 rỗng ứng dụng mẫu là mẫu sản phẩm nào không bao gồm một điều khiển tài khoản. Chúng tôi sẽ thêm một điều khiển tài khoản bằng cách sao chép một vài tập tin từ một ứng dụng ASP.NET MVC mới được tạo ra từ ASP.NET MVC đầy đủ 3 mẫu ứng dụng Web.Tạo một ứng dụng ASP.NET MVC mới bằng cách sử dụng đầy đủ các ASP.NET MVC 3 mẫu ứng dụng Web và sao chép các tập tin sau đây vào cùng một thư mục trong dự án của chúng tôi:1. Sao chép AccountController.cs trong thư mục Controllers2. Sao chép AccountModels trong thư mục Mô hình



3. Tạo một thư mục Tài khoản bên trong thư mục Lần đọc và sao chép tất cả bốn lượt xem trong

Thay đổi không gian tên cho các điều khiển và các lớp học mẫu để họ bắt đầu với MvcMusicStore. Lớp AccountController nên sử dụng tên miền không gian MvcMusicStore.Controllers, và lớp AccountModels nên sử dụng tên miền không gian MvcMusicStore.Models.Lưu ý: Những tập tin này cũng có sẵn trong tải về MvcMusicStore-Assets.zip từ đó chúng ta sao chép các tập tin thiết kế trang web của chúng tôi tại đầu của hướng dẫn. Các tập tin thành viên được đặt trong thư mục Mã.Các giải pháp cập nhật như sau:

Thêm một tài hành chính với các trang web cấu hình của ASP.NETTrước khi chúng tôi yêu cầu ủy quyền trong trang web của chúng tôi, chúng tôi sẽ cần phải tạo ra một người dùng có quyền truy cập. Cách dễ nhất để tạo một người dùng là sử dụng các trang web được xây dựng trong cấu hình ASP.NET.Khởi động trang web cấu hình ASP.NET bằng cách nhấn vào sau biểu tượng trong Solution Explorer.



Này sẽ khởi chạy một trang web cấu hình. Nhấp vào tab Security trên màn hình chủ, sau đó nhấp vào liên kết "Enable vai trò" ở trung tâm của màn hình.

Nhấp vào liên kết "Tạo hoặc Quản lý vai trò".



Nhập "Administrator" như tên vai trò và nhấn nút Add Role.

Nhấn nút Back, sau đó nhấn vào liên kết người dùng Create ở phía bên trái.



Điền vào các lĩnh vực thông tin người dùng bên trái bằng cách sử dụng các thông tin sau:

Lĩnh vực Giá trị

Tên ngươi dung Quản trị viên

Mât khâu password123!

Xác nhân mât khâu password123!

E-mail (Bất kỳ địa chỉ e-mail sẽ làm việc)

Câu hỏi bảo mât (Bất cứ điều gì bạn muốn)

An ninh trả lơi (Bất cứ điều gì bạn muốn)

Lưu ý: Bạn tất nhiên có thể sử dụng bất kỳ mật khẩu bạn muốn. Các mật khẩu trên được hiển thị như là một ví dụ, và được giả định trong các diễn đàn hỗ trợ trên CodePlex. Thiết



lập bảo mật mật khẩu mặc định yêu cầu một mật khẩu mà là 7 ký tự và chứa một ký tự chữ và số không.Chọn vai trò quản trị cho người dùng này, và nhấn vào nút Create User.

Tại thời điểm này, bạn sẽ thấy một thông báo chỉ ra rằng người sử dụng đã được tạo ra thành công.



Bây giờ bạn có thể đóng cửa sổ trình duyệt.Dựa trên vai trò ủy quyềnBây giờ chúng ta có thể hạn chế quyền truy cập vào StoreManagerController bằng cách sử dụng [Duyệt] thuộc tính, quy định cụ thể mà người sử dụng phải có vai trò quản trị để truy cập vào bất kỳ hành động điều khiển trong lớp.

[Authorize(Roles = "Administrator")]public class StoreManagerController : Controller{ // Controller code here}

Lưu ý: [Duyệt] thuộc tính có thể được đặt trên các phương pháp hành động cụ thể cũng như ở cấp lớp điều khiển.Bây giờ duyệt đến / StoreManager Vào hộp thoại:



Sau khi đăng nhập với tài khoản quản trị mới của chúng tôi, chúng tôi có thể đi vào Album Chỉnh sửa màn hình như trước.

8. Shopping Cart with Ajax UpdatesChúng tôi sẽ cho phép người dùng để đặt album trong giỏ hàng của họ mà không cần đăng ký, nhưng họ sẽ cần phải đăng ký như là khách để hoàn tất thanh toán. Quá trình mua sắm và thanh toán sẽ được tách thành hai bộ điều khiển: điều khiển Giỏ hàng cho phép ẩn danh thêm các mục vào giỏ hàng, và điều khiển Checkout đó xử lý các quy trình kiểm tra. Chúng tôi sẽ bắt đầu với Giỏ hàng trong phần này, sau đó xây dựng quy trình kiểm tra trong phần sau.Thêm vào giỏ hàng, đặt hàng, và các lớp mô hình OrderDetailGiỏ hàng của chúng tôi và các quá trình Checkout sẽ làm cho việc sử dụng của một số các lớp học mới. Kích chuột phải vào thư mục Models và thêm một lớp hàng (Cart.cs) với mã sau đây.

using System.ComponentModel.DataAnnotations; namespace MvcMusicStore.Models{ public class Cart {



[Key] public int RecordId { get; set; } public string CartId { get; set; } public int AlbumId { get; set; } public int Count { get; set; } public System.DateTime DateCreated { get; set; } public virtual Album Album { get; set; } }}

Lớp này là khá tương tự như những người khác chúng tôi đã sử dụng cho đến nay, với ngoại lệ của các thuộc tính [Key] tài sản recordID. Mục của chúng tôi giỏ hàng sẽ có một định danh chuỗi tên là CartID để cho phép mua sắm vô danh, nhưng bàn bao gồm một phím số nguyên chính được đặt tên recordID. Theo quy ước, Entity Framework Mã-First hy vọng rằng các khóa chính cho một bảng tên là giỏ hàng sẽ hoặc là CartId hoặc ID, nhưng chúng ta có thể dễ dàng ghi đè lên rằng thông qua các chú thích hoặc mã nếu chúng ta muốn. Đây là một ví dụ về làm thế nào chúng ta có thể sử dụng quy ước đơn giản trong Entity Framework Code-Đầu tiên khi họ phù hợp với chúng tôi, nhưng chúng tôi không hạn chế bởi họ khi họ không.Tiếp theo, thêm một lớp Order (Order.cs) với mã sau đây.

using System.Collections.Generic; namespace MvcMusicStore.Models{ public partial class Order { public int OrderId { get; set; } public string Username { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Address { get; set; } public string City { get; set; } public string State { get; set; } public string PostalCode { get; set; } public string Country { get; set; } public string Phone { get; set; } public string Email { get; set; } public decimal Total { get; set; } public System.DateTime OrderDate { get; set; } public List<OrderDetail> OrderDetails { get; set; } }}

Lớp này theo dõi tóm tắt và thông tin giao hàng cho một đơn hàng. Nó sẽ không biên dịch được nêu ra , bởi vì nó có một tài sản chuyển hướng OrderDetails mà phụ thuộc vào một lớp học chúng tôi đã không được tạo ra. Hãy để khắc phục điều đó bằng cách thêm một lớp có tên OrderDetail.cs, thêm mã sau đây.

namespace MvcMusicStore.Models



{ public class OrderDetail { public int OrderDetailId { get; set; } public int OrderId { get; set; } public int AlbumId { get; set; } public int Quaantity { get; set; } public decimal UnitPrice { get; set; } public virtual Album Album { get; set; } public virtual Order Order { get; set; } }}

Chúng tôi sẽ thực hiện một cập nhật cuối cùng vào lớp MusicStoreEntities của chúng tôi bao gồm DbSets phơi bày những lớp mô hình mới, cũng bao gồm một <Artist> DbSet. MusicStoreEntities cập nhật lớp xuất hiện như dưới đây.

using System.Data.Entity; namespace MvcMusicStore.Models{ public class MusicStoreEntities : DbContext { public DbSet<Album> Albums { get; set; } public DbSet<Genre> Genres { get; set; } public DbSet<Artist> Artists {get; set; } public DbSet<Cart> Carts { get; set; } public DbSet<Order> Orders{ get; set; } public DbSet<OrderDetail>OrderDetails { get; set; } }}

Quản lý logic kinh doanh mua sắm giỏ hàngTiếp theo, chúng ta sẽ tạo lớp Giỏ hàng trong thư mục Mô hình. Giỏ hàng Các mô hình xử lý dữ liệu truy cập vào bảng giỏ hàng. Ngoài ra, nó sẽ xử lý logic kinh doanh để thêm và loại bỏ các mục khỏi giỏ hàng.Vì chúng ta không muốn yêu cầu người dùng đăng ký một tài khoản chỉ để thêm các mục vào giỏ mua hàng của họ, chúng tôi sẽ chỉ định người sử dụng một định danh tạm thời duy nhất (bằng cách sử dụng một GUID, hoặc định danh duy nhất toàn cầu) khi họ truy cập vào các giỏ mua hàng. Chúng tôi sẽ lưu trữ ID này bằng cách sử dụng lớp Session ASP.NET.Lưu ý: Các Session ASP.NET là một nơi thuận tiện để lưu trữ cụ thể với người sử dụng thông tin đó sẽ hết hạn sau khi họ rời khỏi trang web. Trong khi lạm dụng các trạng thái phiên có thể có tác động hiệu quả trên các trang web lớn hơn, sử dụng ánh sáng của chúng tôi sẽ làm việc tốt cho mục đích trình diễn.Lớp Giỏ hàng đưa ra phương án sau đây:



AddToCart một Album như một tham số và thêm nó vào giỏ hàng của người sử dụng. Kể từ khi bảng Giỏ hàng theo dõi số lượng cho mỗi album, nó bao gồm logic để tạo ra một hàng mới nếu cần thiết hoặc chỉ tăng về số lượng nếu người sử dụng đã ra lệnh cho một bản sao của album.RemoveFromCart mất một ID Album và loại bỏ nó khỏi giỏ hàng của người sử dụng. Nếu người dùng chỉ có một bản sao của album trong giỏ hàng của họ, hàng được lấy ra.EmptyCart loại bỏ tất cả các mục từ giỏ mua hàng của người dùng.GetCartItems lấy một danh sách các CartItems để trưng bày, chế biến.GetCount lấy tổng số các album của một người dùng có trong giỏ mua hàng của họ.GetTotal tính toán tổng chi phí của tất cả các mục trong giỏ hàng.CreateOrder chuyển đổi các giỏ mua hàng để đặt hàng trong giai đoạn thanh toán.GetCart là một phương thức tĩnh cho phép bộ điều khiển của chúng tôi để có được một đối tượng giỏ hàng. Nó sử dụng GetCartId phương pháp để xử lý đọc CartId từ phiên làm việc của người dùng. Phương pháp GetCartId đòi hỏi HttpContextBase để nó có thể đọc CartId của người dùng từ phiên của người sử dụng.Dưới đây là hoàn toàn lớp Giỏ hàng :

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcMusicStore.Models{ public partial class ShoppingCart { MusicStoreEntities storeDB = new MusicStoreEntities(); string ShoppingCartId { get; set; } public const string CartSessionKey = "CartId"; public static ShoppingCart GetCart(HttppContextBase context) { var cart = new ShoppingCart(); cart.ShoppingCartId = cart.GetCartId(context); return cart; } // Helper method to simplify shopping cart calls public static ShoppingCart GetCart(Controller controller) { return GetCart(controller.HttppContext); } public void AddToCart(Album album) { // Get the matching cart and album instances var cartItem = storeDB.Carts.SingleOrDefault( c => c.CartId == ShoppingCartId && c.AlbumId == album.AlbumId); if (cartItem == null)



{ // Create a new cart item if no cart item exists cartItem = new Cart { AlbumId = album.AlbumId, CartId = ShoppingCartId, Count = 1, DateCreated = DateTime.Now }; storeDB.Carts.Add(cartItem); } else { // If the item does exist in the cart, // then add one to the quantity cartItem.Count++; } // Save changes storeDB.SaveChanges(); } public int RemoveFromCart(int id) { // Get the cart var cartItem = storeDB.Carts.Single( cart => cart.CartId == ShoppingCartId && cart.RecordId == id); int itemCount = 0; if (cartItem != null) { if (cartItem.Count > 1) { cartItem.Count--; itemCount = cartItem.Count; } else { storeDB.Carts.Remove(cartItem); } // Save changes storeDB.SaveChanges(); } return itemCount; } public void EmptyCart() { var cartItems = storeDB.Carts.Where( cart => cart.CartId == ShoppingCartId);



foreach (var cartItem in cartItems) { storeDB.Carts.Remove(cartItem); } // Save changes storeDB.SaveChanges(); } public List<Cart> GetCartItems() { return storeDB.Carts.Where( cart => cart.CartId == ShoppingCartId).ToList(); } public int GetCount() { // Get the count of each item in the cart and sum them up int? count = (from cartItems in storeDB.Carts where cartItems.CartId == ShoppingCartId select (int?)cartItems.Count).Sum(); // Return 0 if all entries are null return count ?? 0; } public decimal GetTotal() { // Multiply album price by count of that album to get // the current price for each of those albums in the cart // sum all album price totals to get the cart total decimal? total = (from cartItems in storeDB.Carts where cartItems.CartId == ShoppingCartId select (int?)cartItems.Count * cartItems.Album.Price).Sum();

return total ?? decimal.Zero; } public int CreateOrder(Order order) { decimal orderTotal = 0; var cartItems = GetCartItems(); // Iterate over the items in the cart, // adding the order details for each foreach (var item in cartItems) { var orderDetail = new OrderDetail { AlbumId = item.AlbumId, OrderId = order.OrderId, UnitPrice = item.Album.Price, Quaantity = item.Count }; // Set the order total of the shopping cart



orderTotal += (item.Count * item.Album.Price); storeDB.OrderDetails.Add(orderDetail); } // Set the order's total to the orderTotal count order.Total = orderTotal; // Save the order storeDB.SaveChanges(); // Empty the shopping cart EmptyCart(); // Return the OrderId as the confirrmation number return order.OrderId; } // We're using HttppContextBase to allow access to cookies. public string GetCartId(HttppContextBase context) { if (context.Session[CartSessionKey] == null) { if (!string.IsNullOrWhiteSpace(context.User.Identity.Name)) { context.Session[CartSessionKey] = context.User.Identity.Name; } else { // Generate a new random GUID using System.Guid class Guid tempCartId = Guid.NewGuid(); // Send tempCartId back to client as a cookie context.Session[CartSessionKey] = tempCartId.ToString(); } } return context.Session[CartSessionKey].ToString(); } // When a user has logged in, migrate their shopping cart to // be associated with their username public void MigrateCart(string userName) { var shoppingCart = storeDB.Carts.Where( c => c.CartId == ShoppingCartId); foreach (Cart item in shoppingCart) { item.CartId = userName; } storeDB.SaveChanges(); } }}



ViewModelsShopping điều khiển Giỏ hàng của chúng tôi sẽ cần phải giao tiếp một số thông tin phức tạp để quan điểm của mình mà không có bản đồ sạch cho các đối tượng mô hình của chúng tôi. Chúng tôi không muốn thay đổi Mô hình của chúng tôi phù hợp với quan điểm của chúng tôi, các lớp học mẫu nên đại diện cho miền của chúng tôi, không phải là giao diện người dùng. Một giải pháp sẽ được để vượt qua thông tin Xem của chúng tôi bằng cách sử dụng lớp ViewBag, như chúng ta đã làm với nhớ các thông tin quản lý thả xuống, nhưng đi qua rất nhiều thông tin thông qua ViewBag được khó khăn để quản lý.Một giải pháp này là sử dụng các ViewModel mô hình. Khi sử dụng mô hình này, chúng tôi tạo ra các lớp học mạnh mẽ, đánh máy được tối ưu hóa cho các kịch bản xem cụ thể của chúng tôi, và phơi bày tài sản cho các giá trị năng động / nội dung cần thiết của các mẫu điểm của chúng tôi. Các lớp học điều khiển của chúng tôi sau đó có thể cư và vượt qua các lớp này được tối ưu hóa cho xem mẫu điểm của chúng tôi để sử dụng. Điều này cho phép đi an toàn, kiểm tra thời gian biên dịch, và IntelliSense biên tập trong mẫu xem.Chúng tôi sẽ tạo ra hai Mô hình Xem để sử dụng trong điều khiển Giỏ hàng của chúng tôi: ShoppingCartViewModel sẽ tổ chức các nội dung của giỏ mua hàng của người dùng, và ShoppingCartRemoveViewModel sẽ được sử dụng để hiển thị thông tin xác nhận khi một người dùng loại bỏ một cái gì đó từ giỏ hàng của họ.Hãy tạo ra một thư mục ViewModels mới trong thư mục gốc của dự án của chúng tôi để giữ cho mọi thứ được tổ chức. Kích chuột phải vào dự án, chọn Add / New Folder.

Tên ViewModels thư mục.



Tiếp theo, thêm lớp ShoppingCartViewModel trong thư mục ViewModels. Nó có hai đặc tính: một danh sách các mặt hàng giỏ hàng, và một giá trị thập phân để giữ giá tổng số cho tất cả các mục trong giỏ hàng.

using System.Collections.Generic; using MvcMusicStore.Models; namespace MvcMusicStore.ViewModels{ public class ShoppingCartViewModel { public List<Cart> CartItems { get; set; } public decimal CartTotal { get; set; } }}

Bây giờ thêm ShoppingCartRemoveViewModel vào thư mục ViewModels, với bốn thuộc tính sau.

namespace MvcMusicStore.ViewModels{ public class ShoppingCartRemoveViewModel { public string Message { get; set; } public decimal CartTotal { get; set; } public int CartCount { get; set; } public int ItemCount { get; set; } public int DeleteId { get; set; } }}



Giỏ hàng điều khiểnBộ điều khiển Giỏ hàng có ba mục đích chính: thêm các mục vào giỏ hàng, loại bỏ các mục khỏi giỏ hàng, và xem các mục trong giỏ hàng. Nó sẽ làm cho sử dụng ba lớp học, chúng tôi chỉ cần tạo ra: ShoppingCartViewModel, ShoppingCartRemoveViewModel, và Giỏ hàng. Như trong StoreController và StoreManagerController, chúng tôi sẽ thêm một lĩnh vực để giữ một thể hiện của MusicStoreEntities.Thêm một bộ điều khiển Giỏ hàng mới cho dự án bằng cách sử dụng các mẫu điều khiển rỗng.

Đây là điều khiển Giỏ hàng hoàn chỉnh. Chỉ số và hành động điều khiển Thêm nên nhìn rất quen thuộc. Hủy bỏ các hành động điều khiển và CartSummary xử lý hai trường hợp đặc biệt, mà chúng ta sẽ thảo luận trong phần sau.

using System.Linq; using System.Web.Mvc; using MvcMusicStore.Models; using MvcMusicStore.ViewModels; namespace MvcMusicStore.Controllers{ public class ShoppingCartController : Controller { MusicStoreEntities storeDB = new MusicStoreEntities(); // // GET: /ShoppingCart/ public ActionResult Index() { var cart = ShoppingCart.GetCart(this.HttppContext);



// Set up our ViewModel var viewModel = new ShoppingCartViewModel { CartItems = cart.GetCartItems(), CartTotal = cart.GetTotal() }; // Return the view return View(viewModel); } // // GET: /Store/AddToCart/5 public ActionResult AddToCart(int id) { // Retrieve the album from the database var addedAlbum = storeDB.Albums .Single(album => album.AlbumId == id); // Add it to the shopping cart var cart = ShoppingCart.GetCart(this.HttppContext); cart.AddToCart(addedAlbum); // Go back to the main store page for more shopping return RedirectToAction("Index"); } // // AJAX: /ShoppingCart/RemoveFromCart/5 [HttppPost] public ActionResult RemoveFromCart(int id) { // Remove the item from the cart var cart = ShoppingCart.GetCart(this.HttppContext); // Get the name of the album to display confirrmation string albumName = storeDB.Carts .Single(item => item.RecordId == id).Album.Title; // Remove from cart int itemCount = cart.RemoveFromCart(id); // Display the confirrmation message var results = new ShoppingCartRemoveViewModel { Message = Server.HtmlEncode(albumName) + " has been removed from your shopping cart.", CartTotal = cart.GetTotal(), CartCount = cart.GetCount(), ItemCount = itemCount, DeleteId = id



}; return Json(results); } // // GET: /ShoppingCart/CartSummary [ChildActionOnly] public ActionResult CartSummary() { var cart = ShoppingCart.GetCart(this.HttppContext); ViewData["CartCount"] = cart.GetCount(); return PartialView("CartSummary"); } }}

Cập nhật với jQuery, AjaxTiếp theo chúng ta sẽ tạo ra một trang Shopping Index giỏ hàng mạnh mẽ đánh máy các ShoppingCartViewModel và sử dụng mẫu Xem danh sách bằng cách sử dụng cùng một phương pháp như trước.

Tuy nhiên, thay vì sử dụng một Html.ActionLink để xoá các mục khỏi giỏ hàng, chúng ta sẽ sử dụng jQuery dây lên "sự kiện click cho tất cả các liên kết trong quan điểm này có



HTML lớp RemoveLink. Thay vì đăng các hình thức, xử lý sự kiện click này sẽ chỉ làm cho một gọi lại AJAX để hành động điều khiển RemoveFromCart của chúng tôi.RemoveFromCart trả về một kết quả JSON đăng, gọi lại jQuery của chúng tôi sau đó phân tích và thực hiện bốn cập nhật nhanh chóng để trang bằng cách sử dụng jQuery: 1. Loại bỏ các album đã bị xóa khỏi danh sách 2. Cập nhật số lượng giỏ trong tiêu đề 3. Hiển thị một thông báo cập nhật cho người dùng 4. Cập nhật giá Tổng số giỏ hàng

Kể từ khi kịch bản loại bỏ được được xử lý bởi một gọi lại Ajax trong tầm nhìn Index, chúng tôi không cần một cái nhìn bổ sung cho hành động RemoveFromCart. Dưới đây là mã hoàn chỉnh cho xem Giỏ hàng / Index /:

@model MvcMusicStore.ViewModels.ShoppingCartViewModel@{ ViewBag.Title = "Shopping Cart";}<script src="/Scripts/jquery-1.4.4.min.js"type="text/javascript"></script><script type="text/javascript"> $(function () { // Document.ready -> link up remove event handler $(".RemoveLink").click(function () { // Get the id from the link var recordToDelete = $(this).attpr("data-id"); if (recordToDelete != '') { // Perform the ajax post $.post("/ShoppingCart/RemoveFromCart", {"id": recordToDelete }, function (data) { // Successful requests get here // Update the page elements if (data.ItemCount == 0) { $('#row-' + data.DeleteId).fadeOut('slow'); } else { $('#item-count-' + data.DeleteId).text(data.ItemCount); } $('#cart-total').text(data.CartTotal); $('#update-message').text(data.Message); $('#cart-status').text('Cart (' + data.CartCount + ')'); }); } }); });</script><h3> <em>Review</em> your cart: </h3><p class="buttpon"> @Html.ActionLink("Checkout>>", "AddressAndPayment", "Checkout")</p>



<div id="update-message"></div><table> <tr> <th> Album Name </th> <th> Price (each) </th> <th> Quaantity </th> <th></th> </tr> @foreach (var item inModel.CartItems) { <tr id="[email protected]"> <td> @Html.ActionLink(item.Album.Title,"Details", "Store", new { id = item.AlbumId }, null) </td> <td> @item.Album.Price </td> <td id="[email protected]"> @item.Count </td> <td> <a href="#" class="RemoveLink"data-id="@item.RecordId">Removefrom cart</a> </td> </tr> } <tr> <td> Total </td> <td> </td> <td> </td> <td id="cart-total"> @Model.CartTotal </td> </tr></table>



Để kiểm tra này ra, chúng ta cần để có thể để thêm các mục vào giỏ mua hàng của chúng tôi. Chúng tôi sẽ cập nhật của chúng tôi Chi tiết cửa hàng xem để bao gồm một nút "Thêm vào giỏ hàng". Trong khi chúng tôi đang ở đó, chúng ta có thể bao gồm một số thông tin Album bổ sung mà chúng tôi đã thêm kể từ khi chúng tôi cập nhật lần cuối điểm này: Genre, Artist, Giá, và Album Art. Cửa hàng cập nhật Chi tiết xem mã xuất hiện như hình dưới đây.@model MvcMusicStore.Models.Album@{ ViewBag.Title = "Album - " + Model.Title; }<h2>@Model.Title</h2><p> <img alt="@Model.Title"src="@Model.AlbumArtUrl" /></p><div id="album-details"> <p> <em>Genre:</em> @Model.Genre.Name </p> <p> <em>Artist:</em> @Model.Artist.Name </p> <p> <em>Price:</em> @String.Format("{0:F}",Model.Price) </p> <p class="buttpon"> @Html.ActionLink("Add tocart", "AddToCart", "ShoppingCart", new { id = Model.AlbumId }, "") </p></div>

Bây giờ chúng ta có thể bấm vào thông qua các cửa hàng và kiểm tra thêm và loại bỏ các Album và giỏ mua hàng của chúng tôi. Chạy các ứng dụng và duyệt đến Index Store.



Tiếp theo, bấm vào một loại để xem danh sách các album.

Nhấp vào một danh hiệu Album cho thấy cập nhật Album chi tiết của chúng tôi xem, bao gồm cả nút "Thêm vào giỏ hàng".



Nhấp vào nút "Thêm vào giỏ hàng" cho thấy xem Shopping Index giỏ hàng với danh sách tóm tắt giỏ mua sắm của chúng tôi.



Sau khi tải lên giỏ hàng của bạn, bạn có thể nhấp vào Remove từ liên kết giỏ hàng để xem các cập nhật Ajax vào giỏ mua hàng của bạn.



Chúng tôi đã tạo ra một giỏ mua hàng làm việc cho phép người sử dụng đăng ký để thêm các mục vào giỏ hàng của họ. Trong phần dưới đây, chúng tôi sẽ cho phép họ đăng ký và hoàn tất quá trình thanh toán.

9. Registration and CheckoutTrong phần này, chúng tôi sẽ tạo ra một CheckoutController sẽ thu thập địa chỉ của người mua sắm và thông tin thanh toán. Chúng tôi sẽ yêu cầu người dùng phải đăng ký với trang web của chúng tôi trước khi kiểm tra ra, do đó, điều khiển này sẽ yêu cầu sự cho phép.Người dùng sẽ điều hướng đến các quy trình kiểm tra từ giỏ mua hàng của họ bằng cách nhấn vào nút "Thanh toán".



Nếu người dùng chưa đăng nhập, họ sẽ được nhắc nhở để.

Sau khi đăng nhập thành công, người dùng sau đó sẽ được hiển thị Địa chỉ và xem thanh tóan.



Một khi họ đã điền đầy đủ vào mẫu đơn và gửi đơn đặt hàng, họ sẽ được hiển thị màn hình xác nhận đặt hàng.



Cố gắng để xem hoặc là một thứ tự không tồn tại hoặc một lệnh mà không thuộc về bạn sẽ hiển thị xem Lỗi.

Di chuyển các Giỏ hàngTrong khi quá trình mua sắm là vô danh, khi người dùng nhấp chuột vào nút Thanh toán, họ sẽ được yêu cầu đăng ký và đăng nhập. Người sử dụng sẽ mong đợi rằng chúng tôi sẽ duy trì thông tin giỏ mua sắm của họ giữa các lần, vì vậy chúng tôi sẽ cần phải kết hợp các thông tin giỏ mua hàng với một người sử dụng khi họ hoàn tất đăng ký hoặc đăng nhập.



Điều này thực sự rất đơn giản để làm, như lớp Giỏ hàng của chúng tôi đã có một phương pháp mà sẽ liên kết tất cả các mục trong giỏ hàng hiện tại với một tên người dùng. Chúng tôi sẽ chỉ cần phải gọi phương pháp này khi người dùng hoàn tất đăng ký hoặc đăng nhập.Mở AccountController lớp học mà chúng tôi đã thêm khi chúng ta đã thiết lập thành viên và ủy quyền. Thêm một MvcMusicStore.Models tuyên bố tham khảo sử dụng, sau đó thêm phương pháp MigrateShoppingCart sau đây:

private void MigrateShoppingCart(string UserName) { // Associate shopping cart items with logged-in user var cart = ShoppingCart.GetCart(this.HttppContext); cart.MigrateCart(UserName); Session[ShoppingCart.CartSessionKey] = UserName; }

Tiếp theo, thay đổi các hành động sau đăng nhập vào gọi MigrateShoppingCart sau khi người sử dụng đã được xác nhận, như hình dưới đây:

//// POST: /Account/LogOn[HttppPost] public ActionResult LogOn(LogOnModel model, string returnUrl) { if (ModelState.IsValid) { if (Membership.ValidateUser(model.UserName, model.Password)) { MigrateShoppingCart(model.UserName); FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe); if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/") && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\")) { return Redirect(returnUrl); } else { return RedirectToAction("Index", "Home"); } } else { ModelState.AddModelError("", "Thie user name or password provided is incorrect."); } }



// If we got this far, something failed, redisplay form return View(model); }

Hãy thay đổi cùng với các hành động sau Đăng ký, ngay sau khi tài khoản người dùng được tạo thành công:

//// POST: /Account/Register[HttppPost] public ActionResult Register(RegisterModel model) { if (ModelState.IsValid) { // Attpempt to register the user MembershipCreateStatus createStatus; Membership.CreateUser(model.UserName, model.Password, model.Email, "question", "answer", true, null, out createStatus); if (createStatus == MembershipCreateStatus.Success) { MigrateShoppingCart(model.UserName); FormsAuthentication.SetAuthCookie(model.UserName, false /* createPersistentCookie */); return RedirectToAction("Index", "Home"); } else { ModelState.AddModelError("", ErrorCodeToString(createStatus)); } } // If we got this far, something failed, redisplay form return View(model); }

Đó là nó - một giỏ mua hàng nặc danh sẽ được tự động chuyển vào một tài khoản người dùng khi đăng ký hoặc đăng nhập thành công.Tạo CheckoutControllerNhấp chuột phải vào thư mục Kiểm soát và thêm một điều khiển mới cho các dự án có tên là CheckoutController bằng cách sử dụng các mẫu điều khiển rỗng.



Đầu tiên, thêm các thuộc tính Ủy thác trên tờ khai lớp điều khiển yêu cầu người dùng phải đăng ký trước khi thanh toán:

namespace MvcMusicStore.Controllers{ [Authorize] public class CheckoutController : Controller

Lưu ý: Đây là tương tự như sự thay đổi chúng tôi thực hiện trước đó để StoreManagerController, nhưng trong trường hợp đó các thuộc tính Ủy quyền yêu cầu người sử dụng trong vai trò Administrator. Trong Controller Thanh toán, chúng tôi sẽ yêu cầu người sử dụng đăng nhập nhưng không yêu cầu rằng họ là các quản trị viên.

Vì lợi ích của sự đơn giản, chúng tôi sẽ không được giao dịch với thông tin thanh toán trong hướng dẫn này. Thay vào đó, chúng tôi cho phép người dùng kiểm tra bằng cách sử dụng mã khuyến mại. Chúng tôi sẽ lưu trữ mã khuyến mại này bằng cách sử dụng một PromoCode tên là hằng số.Trong StoreController, chúng tôi sẽ khai báo một trường để giữ một thể hiện của lớp MusicStoreEntities, tên là storeDB. Để làm cho việc sử dụng của lớp MusicStoreEntities, chúng tôi sẽ cần thêm một tuyên bố bằng cách sử dụng cho không gian tên MvcMusicStore.Models. Đầu của bộ điều khiển Thanh toán của chúng tôi xuất hiện bên dưới.

using System; using System.Linq; using System.Web.Mvc; using MvcMusicStore.Models; namespace MvcMusicStore.Controllers



{ [Authorize] public class CheckoutController : Controller { MusicStoreEntities storeDB = new MusicStoreEntities(); const string PromoCode = "FREE";

Các CheckoutController sẽ có hành động điều khiển sau đây:AddressAndPayment (phương thức GET) sẽ hiển thị một hình thức để cho phép người dùng nhập vào thông tin của họ.AddressAndPayment (phương thức POST) sẽ xác nhận đầu vào và xử lý theo thứ tự.Toàn bộ sẽ được hiển thị sau khi người dùng đã kết thúc thành công quá trình thanh toán. Điểm này sẽ bao gồm số thứ tự của người dùng, như là xác nhận.Trước tiên, hãy đổi tên hành động điều khiển Index (được tạo ra khi chúng tôi tạo ra bộ điều khiển) để AddressAndPayment. Hành động này điều khiển chỉ cần hiển thị các hình thức thanh toán, vì vậy nó không yêu cầu bất kỳ mô hình thông tin.

//// GET: /Checkout/AddressAndPaymentpublic ActionResult AddressAndPayment(){ return View();}

AddressAndPayment phương thức POST của chúng tôi sẽ theo cùng một khuôn mẫu chúng tôi được sử dụng trong các StoreManagerController: nó sẽ cố gắng để chấp nhận các hình thức trình và hoàn thành đơn hàng, và sẽ hiển thị lại hình thức nếu nó không thành công.Sau khi xác thực các hình thức đầu vào đáp ứng các yêu cầu xác nhận của chúng tôi cho đặt hàng, chúng tôi sẽ kiểm tra giá trị hình thức PromoCode trực tiếp. Giả sử tất cả mọi thứ là chính xác, chúng tôi sẽ lưu các thông tin cập nhật với thứ tự, báo cho đối tượng Giỏ hàng để hoàn tất quá trình đặt hàng, và chuyển hướng đến các hành động Toàn bộ.//// POST: /Checkout/AddressAndPayment[HttppPost] public ActionResult AddressAndPayment(FormCollection values) { var order = new Order(); TryUpdateModel(order); try { if (string.Equals(values["PromoCode"], PromoCode, StringComparison.OrdinalIgnoreCase) == false) { return View(order); } else { order.Username = User.Identity.Name;



order.OrderDate = DateTime.Now; //Save Order storeDB.Orders.Add(order); storeDB.SaveChanges(); //Process the order var cart = ShoppingCart.GetCart(this.HttppContext); cart.CreateOrder(order); return RedirectToAction("Complete", new { id = order.OrderId }); } } catch { //Invalid - redisplay with errors return View(order); }}

Sau khi hoàn tất thành công quá trình thanh toán, người dùng sẽ được chuyển hướng đến Toàn bộ hành động điều khiển. Hành động này sẽ thực hiện một kiểm tra đơn giản để xác nhận rằng thứ tự không thực sự thuộc về người sử dụng đăng nhập trước khi hiển thị số thứ tự để xác nhận.

//// GET: /Checkout/Completepublic ActionResult Complete(int id) { // Validate customer owns this order bool isValid = storeDB.Orders.Any( o => o.OrderId == id && o.Username == User.Identity.Name); if (isValid) { return View(id); } else { return View("Error"); }}

Lưu ý: Quan điểm Lỗi đã được tự động tạo ra cho chúng ta trong thư mục / Views / Shared khi chúng tôi bắt đầu dự án.Mã CheckoutController hoàn chỉnh như sau:

using System; using System.Linq; using System.Web.Mvc;



using MvcMusicStore.Models; namespace MvcMusicStore.Controllers{ [Authorize] public class CheckoutController : Controller { MusicStoreEntities storeDB = new MusicStoreEntities(); const string PromoCode = "FREE"; // // GET: /Checkout/AddressAndPayment public ActionResult AddressAndPayment() { return View(); } // // POST: /Checkout/AddressAndPayment [HttppPost] public ActionResult AddressAndPayment(FormCollection values) { var order = new Order(); TryUpdateModel(order); try { if (string.Equals(values["PromoCode"], PromoCode, StringComparison.OrdinalIgnoreCase) == false) { return View(order); } else { order.Username = User.Identity.Name; order.OrderDate = DateTime.Now; //Save Order storeDB.Orders.Add(order); storeDB.SaveChanges(); //Process the order var cart = ShoppingCart.GetCart(this.HttppContext); cart.CreateOrder(order); return RedirectToAction("Complete", new { id = order.OrderId }); } } catch { //Invalid - redisplay with errors return View(order);



} } // // GET: /Checkout/Complete public ActionResult Complete(int id) { // Validate customer owns this order bool isValid = storeDB.Orders.Any( o => o.OrderId == id && o.Username == User.Identity.Name); if (isValid) { return View(id); } else { return View("Error"); } } }}

Thêm nhìn AddressAndPaymentBây giờ, chúng ta hãy tạo ra xem AddressAndPayment. Nhấp chuột phải vào một trong các hành động điều khiển AddressAndPayment và thêm một cái nhìn AddressAndPayment tên được gõ mạnh mẽ như đặt hàng và sử dụng mẫu Edit, như hình dưới đây.



Điểm này sẽ làm cho việc sử dụng của hai trong số các kỹ thuật, chúng tôi đã ở trong khi xây dựng xem StoreManagerEdit: Chúng tôi sẽ sử dụng Html.EditorForModel () để hiển thị trường dưới hình thức cho

mô hình đặt hàng Chúng tôi sẽ quy tắc xác nhận đòn bẩy bằng cách sử dụng một lớp đặt hàng với các

thuộc tính xác nhậnChúng tôi sẽ bắt đầu bằng cách cập nhật mẫu mã để sử dụng Html.EditorForModel (), tiếp theo là một hộp văn bản bổ sung cho Promo Mã. Toàn bộ mã cho xem AddressAndPayment được hiển thị dưới đây.

@model MvcMusicStore.Models.Order@{ ViewBag.Title = "Address And Payment";}<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"type="text/javascript"></script><script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"type="text/javascript"></script>@using (Html.BeginForm()) { <h2>Address And Payment</h2>



<fireldset> <legend>Shipping Information</legend> @Html.EditorForModel() </fireldset> <fireldset> <legend>Payment</legend> <p>We're running a promotion: all music is free with the promo code: "FREE"</p> <div class="editor-label"> @Html.Label("Promo Code") </div> <div class="editor-fireld"> @Html.TextBox("PromoCode") </div> </fireldset> <input type="submit" value="Submit Order" />}

Xác định quy tắc xác nhận cho đặt hàngBây giờ quan điểm của chúng tôi được thiết lập, chúng tôi sẽ thiết lập các quy tắc xác nhận cho mô hình thứ tự của chúng tôi như chúng tôi đã làm trước đây đối với các mô hình Album. Nhấp chuột phải vào thư mục Models và thêm một lớp có tên là thứ tự. Ngoài các thuộc tính xác nhận chúng tôi sử dụng trước đây cho Album, chúng tôi cũng sẽ được sử dụng một biểu thức thông thường để xác nhận địa chỉ e-mail của người dùng..

using System.Collections.Generic; using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Web.Mvc; namespace MvcMusicStore.Models{ [Bind(Exclude = "OrderId")] public partial class Order { [ScaffooldColumn(false)] public int OrderId { get; set; } [ScaffooldColumn(false)] public System.DateTime OrderDate { get; set; } [ScaffooldColumn(false)] public string Username { get; set; } [Required(ErrorMessage = "First Name is required")] [DisplayName("First Name")] [StringLength(160)] public string FirstName { get; set; } [Required(ErrorMessage = "Last Name is required")] [DisplayName("Last Name")] [StringLength(160)]



public string LastName { get; set; } [Required(ErrorMessage = "Address is required")] [StringLength(70)] public string Address { get; set; } [Required(ErrorMessage = "City is required")] [StringLength(40)] public string City { get; set; } [Required(ErrorMessage = "State is required")] [StringLength(40)] public string State { get; set; } [Required(ErrorMessage = "Postal Code is required")] [DisplayName("Postal Code")] [StringLength(10)] public string PostalCode { get; set; } [Required(ErrorMessage = "Country is required")] [StringLength(40)] public string Country { get; set; } [Required(ErrorMessage = "Phone is required")] [StringLength(24)] public string Phone { get; set; } [Required(ErrorMessage = "Email Address is required")] [DisplayName("Email Address")] [RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}", ErrorMessage = "Email is is not valid.")] [DataType(DataType.EmailAddress)] public string Email { get; set; } [ScaffooldColumn(false)] public decimal Total { get; set; } public List<OrderDetail> OrderDetails { get; set; } }}

Cố gắng để gửi biểu mẫu với thông tin thiếu hoặc không hợp lệ sẽ hiển thị thông báo lỗi bằng cách sử dụng phía máy khách xác nhận.



Được rồi, chúng tôi đã thực hiện hầu hết công việc khó khăn cho quá trình thanh toán, chúng tôi chỉ có một tỷ lệ cược và kết thúc để kết thúc. Chúng ta cần thêm hai quan điểm đơn giản, và chúng tôi cần phải chăm sóc bàn giao các thông tin giỏ hàng trong quá trình đăng nhập.Thêm nhìn Thanh toán Toàn bộThanh toán Toàn bộ xem là khá đơn giản, vì nó chỉ cần để hiển thị ID thứ tự. Nhấp chuột phải vào Toàn bộ hành động điều khiển và thêm một cái nhìn có tên là Toàn bộ gõ mạnh mẽ như một int.



Bây giờ chúng tôi sẽ cập nhật mã xem để hiển thị ID thứ tự, như hình dưới đây.

@model int@{ ViewBag.Title = "Checkout Complete";}<h2>Checkout Complete</h2><p>Thianks for your order! Your order number is: @Model</p><p>How about shopping for some more music in our @Html.ActionLink("store","Index", "Home")</p>

Cập nhật Quan điểm LỗiCác mẫu mặc định bao gồm một cái nhìn Lỗi trong thư mục chia sẻ quan điểm để nó có thể được tái sử dụng ở những nơi khác trong các trang web. Xem Lỗi này có chứa một lỗi rất đơn giản và không sử dụng Giao diện trang web của chúng tôi, vì vậy chúng tôi sẽ cập nhật nó.Vì đây là một trang báo lỗi chung chung, nội dung là rất đơn giản. Chúng tôi sẽ bao gồm một tin nhắn và một liên kết để điều hướng đến trang trước đó trong lịch sử nếu người dùng muốn thử lại hành động của họ.



@{ ViewBag.Title = "Error";} <h2>Error</h2> <p>We're sorry, we've hit an unexpected error. <a href="javascript:history.go(-1)">Click here</a> if you'd like to go back and try that again.</p>

10.Final Updates to Navigation and Site Design, Conclusion

Chúng tôi đã hoàn thành tất cả các chức năng chính cho trang web của chúng tôi, nhưng chúng tôi vẫn có một số tính năng để thêm vào điều hướng trang web, trang nhà và trang Browse Store.Tạo Xem Giỏ hàng Shopping Tóm tắt một phầnChúng tôi muốn để lộ số lượng các mục trong giỏ mua hàng của người dùng trên toàn bộ trang web.



Chúng ta có thể dễ dàng thực hiện điều này bằng cách tạo ra một cái nhìn một phần được thêm vào Site.Master của chúng tôi.Như được thể hiện trước đây, bộ điều khiển Giỏ hàng bao gồm một phương pháp hành động CartSummary mà trả về một lần xem một phần:

//// GET: /ShoppingCart/CartSummary[ChildActionOnly] public ActionResult CartSummary(){ var cart = ShoppingCart.GetCart(this.HttppContext); ViewData["CartCount"] = cart.GetCount(); return PartialView("CartSummary");}

Để tạo xem CartSummary một phần, kích chuột phải vào vào thư mục Views / Giỏ hàng và chọn Add Xem. Tên CartSummary xem và kiểm tra "xem một phần" hộp kiểm như hình dưới đây.



Xem một phần CartSummary là thực sự đơn giản - nó chỉ là một liên kết để xem Index Giỏ hàng đó cho thấy số lượng các mục trong giỏ hàng. Toàn bộ mã cho CartSummary.cshtml là như sau:

@Html.ActionLink("Cart(" + ViewData["CartCount"] + ")", "Index", "ShoppingCart", new { id = "cart-status" })

Chúng tôi có thể bao gồm một cái nhìn một phần trong bất kỳ trang nào trong trang web, bao gồm thuyền trưởng Site, bằng cách sử dụng phương pháp Html.RenderAction. RenderAction đòi hỏi chúng ta phải xác định các tên hành động ("CartSummary") Tên điều khiển ("ShoppingCart") như sau.

@Html.RenderAction("CartSummary","ShoppingCart")

Trước khi thêm Giao diện trang web, chúng tôi cũng sẽ tạo ra Menu Genre vì vậy chúng tôi có thể làm cho tất cả các bản cập nhật Site.Master của chúng tôi tại một thời gian.Tạo View Genre đơn một phần



Chúng ta có thể làm cho nó dễ dàng hơn nhiều cho người sử dụng của chúng tôi để điều hướng qua các cửa hàng bằng cách thêm một Menu Genre trong đó liệt kê tất cả các thể loại có sẵn trong cửa hàng của chúng tôi.

Chúng tôi sẽ thực hiện theo các bước tương tự cũng tạo ra một cái nhìn GenreMenu một phần, và sau đó chúng ta có thể thêm cả hai để làm chủ trang web. Đầu tiên, thêm các hành động điều khiển sau đây GenreMenu để StoreController:

//// GET: /Store/GenreMenu[ChildActionOnly] public ActionResult GenreMenu(){ var genres = storeDB.Genres.ToList(); return PartialView(genres); }

Hành động này trả về một danh sách các thể loại sẽ được hiển thị bằng cách xem một phần, mà chúng ta sẽ tạo tiếp theo.Lưu ý: Chúng tôi đã thêm [ChildActionOnly] thuộc tính này hành động điều khiển, mà chỉ ra rằng chúng ta chỉ muốn hành động này sẽ được sử dụng từ một Xem một phần. Thuộc tính này sẽ ngăn chặn các hành động điều khiển được thực hiện bằng cách duyệt / Store / GenreMenu. Này không cần thiết cho các quan điểm một phần, nhưng nó là một thực hành tốt, kể từ khi chúng tôi muốn chắc chắn rằng hành động của chúng ta điều khiển được sử dụng như chúng tôi dự định. Chúng tôi cũng đang quay trở lại PartialView hơn là



View, cho phép các công cụ xem biết rằng nó không nên sử dụng Giao diện cho quan điểm này, khi nó đang được bao gồm trong các quan điểm khác.Nhấp chuột phải vào hành động điều khiển GenreMenu và tạo ra một cái nhìn một phần GenreMenu tên được mạnh mẽ đánh máy bằng cách sử dụng xem loại dữ liệu lớp như hình dưới đây.

Cập nhật mã xem cho xem GenreMenu một phần để hiển thị các mục bằng cách sử dụng một danh sách có thứ tự như sau.

@model IEnumerable<MvcMusicStore.Models.Genre><ul id="categories"> @foreach (var genre in Model) { <li>@Html.ActionLink(genre.Name, "Browse", "Store", new { Genre = genre.Name }, null) </li> }</ul>

Đang cập nhật Giao diện trang web để hiển thị Xem một phần của chúng tôi



Chúng tôi có thể thêm quan điểm một phần của chúng tôi để bố trí trang web (/ xem / chia sẻ / _Layout.cshtml) gọi Html.RenderAction (). Chúng tôi sẽ thêm cả hai, cũng như đánh dấu một số bổ sung để hiển thị chúng, như hình dưới đây:<!DOCTYPE html><html><head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")"rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script></head><body> <div id="header"> <h1><a href="/">ASP.NET MVC MUSICSTORE</a></h1> <ul id="navlist"> <li class="firrst"> <a href="@Url.Content("~")" id="current"> Home</a></li> <li><a href="@Url.Content("~/Store/")">Store</a></li> <li>@{Html.RenderAction("CartSummary", "ShoppingCart");}</li> <li><a href="@Url.Content("~/StoreManager/")"> Admin</a></li> </ul> </div> @{Html.RenderAction("GenreMenu", "Store");} <div id="main"> @RenderBody() </div> <div id="footer"> built with <a href="httpp://asp.net/mvc">ASP.NET MVC 3</a> </div></body></html>

Bây giờ khi chúng ta chạy ứng dụng, chúng ta sẽ thấy Genre trong vùng điều hướng bên trái Tóm tắt thông tin giỏ hàng ở đầu trang.Cập nhật trang Browse cửa hàngTrang Browse Store là chức năng, nhưng không nhìn rất tốt. Chúng ta có thể cập nhật các trang để hiển thị các album trong một bố cục tốt đẹp hơn bằng cách cập nhật mã xem (tìm thấy / Views / Store / Browse.cshtml) như sau:

@model MvcMusicStore.Models.Genre @{ ViewBag.Title = "Browse Albums";}



<div class="genre"> <h3><em>@Model.Name</em> Albums</h3> <ul id="album-list"> @foreach (var album in Model.Albums) { <li> <a href="@Url.Action("Details", new { id = album.AlbumId })"> <img alt="@album.Title" src="@album.AlbumArtUrl" /> <span>@album.Title</span> </a> </li> } </ul></div>

Ở đây chúng tôi đang làm việc sử dụng của Url.Action hơn là Html.ActionLink để chúng tôi có thể áp dụng định dạng đặc biệt để liên kết để bao gồm các album ảnh nghệ thuật.Lưu ý: Chúng tôi đang hiển thị bìa album chung cho các album này. Thông tin này được lưu trữ trong cơ sở dữ liệu và có thể chỉnh sửa thông qua các Store Manager. Bạn được chào đón để thêm tác phẩm nghệ thuật của riêng bạn.Bây giờ khi chúng tôi duyệt đến một loại, chúng ta sẽ thấy các album được hiển thị trong một mạng lưới với các tác phẩm nghệ thuật album.



Cập nhật trang Home để hiển thị các album bán chạy hàng đầuChúng tôi muốn để tính năng album bán chạy hàng đầu của chúng tôi vào trang chủ để tăng doanh số bán hàng.Chúng tôi sẽ làm cho một số cập nhật HomeController của chúng tôi để xử lý đó, và thêm một số đồ họa bổ sung như.Đầu tiên, chúng ta sẽ thêm một tài sản chuyển hướng đến lớp Album của chúng tôi để EntityFramework đó biết rằng họ đang liên kết. Vài dòng cuối cùng của chúng tôi Album lớp nên bây giờ trông như thế này:

public virtual Genre Genre { get; set; }public virtual Artist Artist { get; set; }public virtual List<OrderDetail>OrderDetails { get; set; } }}

Lưu ý: Điều này sẽ yêu cầu thêm một tuyên bố bằng cách sử dụng để mang lại trong không gian tên System.



Đầu tiên, chúng ta sẽ thêm một trường storeDB các MvcMusicStore.Models cách sử dụng câu, như trong các bộ điều khiển khác của chúng tôi. Tiếp theo, chúng ta sẽ thêm các phương pháp sau đây để HomeController truy vấn cơ sở dữ liệu của chúng tôi để tìm các album bán chạy nhất theo OrderDetails..

private List<Album> GetTopSellingAlbums(int count) { // Group the order details by album and return // the albums with the highest count return storeDB.Albums .OrderByDescending(a => a.OrderDetails.Count()) .Take(count) .ToList();}

This is a private method, since we don’t want to make it available as a controller action. We are including it in the HomeController for simplicity, but you are encouraged to move your business logic into separate service classes as appropriate.

With that in place, we can update the Index controller action to query the top 5 selling albums and return them to the view.

public ActionResult Index(){ // Get most popular albums var albums = GetTopSellingAlbums(5); return View(albums); }

Đây là một phương pháp riêng, vì chúng ta không muốn để làm cho nó có sẵn như là một hành động điều khiển.Chúng tôi bao gồm cả nó trong HomeController vì đơn giản, nhưng bạn được khuyến khích để di chuyển logic kinh doanh của bạn vào các lớp học dịch vụ riêng biệt cho phù hợp.Với tại chỗ, chúng tôi có thể cập nhật các Chỉ số hành động điều khiển để truy vấn 5 album bán chạy nhất và trả lại để xem.

public ActionResult Index(){ // Get most popular albums var albums = GetTopSellingAlbums(5); return View(albums); }

Đoạn code hoàn chỉnh cho HomeController cập nhật như hình dưới đây.



using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using MvcMusicStore.Models; namespace MvcMusicStore.Controllers{ public class HomeController : Controller { // // GET: /Home/ MusicStoreEntities storeDB = new MusicStoreEntities(); public ActionResult Index() { // Get most popular albums var albums = GetTopSellingAlbums(5); return View(albums); } private List<Album> GetTopSellingAlbums(int count) { // Group the order details by album and return // the albums with the highest count return storeDB.Albums .OrderByDescending(a => a.OrderDetails.Count()) .Take(count) .ToList(); } }}

Cuối cùng, chúng tôi sẽ cần phải cập nhật xem Index Trang chủ của chúng tôi để nó có thể hiển thị một danh sách các album bằng cách cập nhật các loại mẫu và thêm danh sách album để phía dưới. Chúng tôi sẽ nhân cơ hội này cũng thêm một tiêu đề và một phần xúc tiến trang.

@model List<MvcMusicStore.Models.Album>@{ ViewBag.Title = "ASP.NET MVC Music Store";}<div id="promotion"></div><h3><em>Fresh</em> offo the grill</h3><ul id="album-list"> @foreach (var album in Model) { <li><a href="@Url.Action("Details", "Store", new { id = album.AlbumId })"> <img alt="@album.Title" src="@album.AlbumArtUrl" /> <span>@album.Title</span>



</a> </li> }</ul>

Bây giờ khi chúng ta chạy các ứng dụng, chúng tôi sẽ cập nhật trang chủ của chúng tôi với các album bán chạy nhất và thông điệp quảng cáo của chúng tôi.

Kết luậnChúng ta đã thấy rằng ASP.NET MVC làm cho nó dễ dàng để tạo một trang web phức tạp với truy cập cơ sở dữ liệu, hội viên, AJAX, vv khá nhanh chóng. Hy vọng rằng hướng dẫn này đã cho bạn những công cụ bạn cần để bắt đầu xây dựng các ứng dụng ASP.NET MVC của riêng của bạn!

DEMO PHẦN TÌM KIẾM AJAX

Nếu các bạn muốn tạo chức năng tìm kiếm tương tự như google, nhập keyword đến đâu thì tự động search kết quả đến đó mà ko cần phải refresh lại trang thì có thể sử dụng jQuery.



Trong homecontroller tôi tạo thêm 2 action :

public ActionResult Search() { return View(); }

public ActionResult SearchResult(string s) { var albums = storeDB.Albums.Where(a => a.Title.Contains(s)); return PartialView(albums); }

Tạo các 2 view tương ứng với 2 Action trên là Search.aspx và SearchResult.ascx, lưu ý với view SearchResult.aspx thì nhớ chọn cả mục Create a partial view(.ascx).Ở view Search thì chỉ có 1 html input và 1 button submit, kết quả nhận được sẽ display ở partialview SearchResult.Source của Search.aspx như sau :

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<script type="text/javascript"> function onSuggestion() { $('#keyword').keyup(function () { $('#key').val($('#keyword').val()); $.get('/home/SearchResult', { s: $('#keyword').val() },function (data) { $('#result').html(data);}); }); }</script>

<h2>Search</h2>

<% using(Ajax.BeginForm("SearchResult","Home",new AjaxOptions{InsertionMode=InsertionMode.Replace,HttppMethod="GET",UpdateTargetId="result" })){%><input type="text" name="s" id="keyword" onkeyup="onSuggestion();" /><br /><input type="text" id="key" /><input type="submit" name="Search" /><%}%>

<div id="result"></div>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">



</asp:Content>

Lưu ý ở hàm JS mà tôi sử dụng jQuery, Mỗi khi bắt sự kiện keyup của cái textbox thì tôi gửi 1 HTTP get request về server :

<script type="text/javascript"> function onSuggestion() { $('#keyword').keyup(function () { $('#key').val($('#keyword').val()); $.get('/home/SearchResult',{s:$('#keyword').val()}, function (data) { $('#result').html(data); }); } ); }</script>

Cái SearchResult chỉ đơn giản là show ra kết quả, và đc render mỗi khi submit ở view Search :

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<table><tr><th></th><th>AlbumId</th><th>GenreId</th><th>ArtistId</th><th>Title</th><th>Price</th><th>AlbumArtUrl</th></tr>

<% foreach (var item in Model) { %>

<tr><td><%: Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) %> |<%: Html.ActionLink("Details", "Details", new { id=item.AlbumId })%> |<%: Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })%></td><td>



<%: item.AlbumId %></td><td><%: item.GenreId %></td><td><%: item.ArtistId %></td><td><%: item.Title %></td><td><%: String.Format("{0:F}", item.Price) %></td><td><%: item.AlbumArtUrl %></td></tr>

<% } %>

</table>

<p><%: Html.ActionLink("Create New", "Create") %></p>

Lưu ý là ở Site.Master các bạn phải báo mấy cái script cần thiết :

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

Code Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MVC_MusicStore_Egroups.Views.Shared.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "httpp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="httpp://www.w3.org/1999/xhtml"><head runat="server"> <title>Search Ajax</title>

<script src="../../Scripts/MicrosoftAAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftAMvcAjax.js" type="text/javascript"></script> <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />



<script src="~/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

<asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder></head><body> <form id="form1" runat="server"> <div><div id="header"> <h1><a href="/">DEMO MVC3 MUSIC STORE - EGROUPS</a></h1> <ul id="navlist"> <li class="firrst"> <a href="/home" id="current">Home</a></li> <li><a href="~/Store/">Store</a></li> <li><a href="~/StoreManager/">Admin</a></li> </ul> </div> <div id="main"> </div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> <div id="footer"> Xây dựng bởi <a href="httpp://eg.vnao.vn">E-Groups Việt Nam</a> </div>

</div> </form></body></html>

kết quả các bạn sẽ đc như sau :



Xong, chúc bạn thành công !



Education

Asp net mvc3 music store egroups vn