Hướng dẫn từng bước tạo ứng dụng web shop music store bằng ASP.NET MVC3

Edit by Nhiên IT ( www.eg.vnao.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 quan MVC 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 ) 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ọ: Edit by Nhiên IT ( www.eg.vnao.vn ) 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. Edit by Nhiên IT ( www.eg.vnao.vn ) 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í"! Edit by Nhiên IT ( www.eg.vnao.vn ) 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: Edit by Nhiên IT ( www.eg.vnao.vn ) 1. File -> New Project Cài đặt phần mềm Hướ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ừ . 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 sau Lư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ớ): Edit by Nhiên IT ( www.eg.vnao.vn ) 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 =MVC3  SQL Server Compact 4,0 - bao gồm cả thời gian chạy và công cụ hỗ trợ Edit by Nhiên IT ( www.eg.vnao.vn ) 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 SP1 Tô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 3 Chú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 Empty Xem Engine - Razor chọn Sử dụng HTML5 ngữ nghĩa đánh dấu kiểm tra Xá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. Edit by Nhiên IT ( www.eg.vnao.vn ) Đ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. Edit by Nhiên IT ( www.eg.vnao.vn ) 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 / Controllers Bộ đ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 Edit by Nhiên IT ( www.eg.vnao.vn ) / Models Mô hình tổ chức và thao tác dữ liệu / Content Thư 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 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 HomeController Chú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: Edit by Nhiên IT ( www.eg.vnao.vn ) Đ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; Edit by Nhiên IT ( www.eg.vnao.vn ) 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ụng Bâ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. Edit by Nhiên IT ( www.eg.vnao.vn ) 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 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 Thêm một StoreController Chú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 Edit by Nhiên IT ( www.eg.vnao.vn ) 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()"; Edit by Nhiên IT ( www.eg.vnao.vn ) } // // 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. // Edit by Nhiên IT ( www.eg.vnao.vn ) // GET: /Store/Browse?genre=Disco public string Browse(string genre) { string message = HttpUtility.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 = window.location = ' . 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/5 Edit by Nhiên IT ( www.eg.vnao.vn ) public 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. Edit by Nhiên IT ( www.eg.vnao.vn ) 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: Edit by Nhiên IT ( www.eg.vnao.vn ) "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. Edit by Nhiên IT ( www.eg.vnao.vn ) 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"; } Index Đ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ơ Edit by Nhiên IT ( www.eg.vnao.vn ) 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ẻ nói "Đây là Trang" như hình dưới đây. @{ ViewBag.Title = "Index"; } This is the Home Page 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ến Hầ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. Edit by Nhiên IT ( www.eg.vnao.vn ) Double-click vào thư mục này để xem nội dung được hiển thị dưới đây. @ViewBag.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 src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"> @RenderBody() 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 (). @ViewBag.Title <link href=