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

Chia sẻ: Pham Luong Son Phi | Ngày: | Loại File: PDF | Số trang:125

Thêm vào BST

Báo xấu

237
lượt xem 57
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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ủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

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

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ừ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 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ớ): http://asp.net/mvc 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 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ợ 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 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ì / Controllers 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 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 / Content 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 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 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 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 = 'http://hackersite.com' . 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 )