14 chuong 14

Chương 14 Tổng quan Project MVC Tôi cung cấp số ngữ cảnh khác trước bước vào tính MVC Framework Chương đưa tổng quan cấu trúc tính chất ứng dụng ASP.NET MVC, bao gồm cấu dự án mặc định quy ước đặt tên, số tùy chọn số mã hóa cứng vào cách mà MVC Framework hoạt động Làm việc với Visual Studio MVC Project Khi bạn tạo Project ASP.NET, Visual Studio cung cấp cho bạn số lựa chọn nội dung ban đầu mà bạn muốn dự án Mục đích để giảm bớt q trình học tập cho người phát triển sử dụng số thực hành tốt để tiết kiệm thời gian cho tính cơng việc chung Sự hỗ trợ tiếp tục mẫu template tạo contrlllers views tạo code mẫu cho danh sách đối tượng liệu, chỉnh sửa thuộc tính model Với Visual Studio 2013 MVC 5, Microsoft cập nhật template mẫu scaffolding, biết đến, làm mờ ranh giới loại khác dự án ASP.NET để cung cấp phạm vi rộng lớn dự án template mẫu code cấu hình Phần sách để lại cho bạn khơng có nghi ngờ tơi khơng phải fan hâm mộ cách tiếp cận đến dự án rập khuôn mã Ý định tốt, thực underwhelming Một đặc điểm tơi thích ASP.NET MVC Framework có linh hoạt mà tơi có thiết kế tảng cho phù hợp với phong cách phát triển tôi, dự án, lớp học quan điểm Visual Studio tạo làm cho cảm thấy bị hạn chế làm việc theo phong cách người khác Tôi thấy nội dung cấu hình chung chung q nhạt nhẽo để có ích Trong Chương 10, tơi nói mối nguy hiểm việc sử dụng thiết kế responsive với thiết bị di động loại trung bình mà cuối làm ảnh hưởng đến trải nghiệm tất thiết bị, tương tự xảy với mẫu templates Visual Studio Microsoft biết loại ứng dụng mà bạn cần để tạo họ bao gồm tất sở, theo cách buồn tẻ khái quát mà cuối trích nội dung mặc định cách Lời khuyên (trao cho làm cho sai lầm yêu cầu) bắt đầu với project rỗng thêm thư mục, tập tin gói tập tin mà bạn cần Khơng bạn tìm hiểu thêm cách thức mà MVC Framework làm việc, bạn có quyền kiểm sốt hồn tồn ứng dụng bạn có chứa Nhưng sở thích tơi khơng nên tô màu cho khinh nghiệm phát triển bạn Bạn tìm thấy templates scaffolding hữu ích so với tôi, đặc biệt bạn phát triển ASP.NET bạn chưa phát triển theo phong cách phát triển cá nhân phù hợp với Bạn tìm thấy mẫu dự án templates nguồn tài nguyên hữu ích nguồn ý tưởng, bạn nên thận trọng cách thêm chức vào ứng dụng trước bạn hồn tồn hiểu làm hoạt động Tạo Project Khi bạn lần tạo dự án MVC Framework mới, bạn có hai điểm khởi đầu để lựa chọn: template rỗng template MVC Những tên có chút sai lầm, bạn thêm thư mục mục cần thiết cho MVC Framework để mẫu dự án tempplate cách kiểm tra tùy chọn MVC Add Folders Core References phần cửa sổ hộp thoại New Project ASP.NET, hiển thị hình 14-1 Đối với tùy chọn MVC, tùy chọn kiểm tra cho bạn Hình 14.1 Lựa chọn loại hình dự án, thư mục assemblies cho dự án Sự khác biệt nội dung bổ sung mà dự án mẫu MVC thêm dự án mới, cung cấp điểm khởi đầu làm sẵn bao gồm mặc định controllers mặc định views mặc định, cấu hình bảo mật, số gói JavaScript CSS phổ biến (như jQuery Bootstrap) layout sử dụng Bootstrap để cung cấp chủ đề cho nội dung ứng dụng Các tùy chọn dự án rỗng chứa tài liệu tham khảo cần thiết cho MVC Framework cấu trúc thư mục barebone Có số lượng hợp lý nội dung bổ sung mẫu MVC bạn thấy khác biệt hình 14-2, cho thấy nội dung hai dự án tạo Người bên trái tạo với mẫu rỗng với thư mục tài liệu tham khảo MVC tùy chọn kiểm tra Người khác cho thấy nội dung dự án tạo với mẫu MVC, để hiển thị tập tin trang này, phải tập trung Solution Explorer vào thư mục khác nhau, danh sách dài cho trang in Hình 14-2 Các nội dung mặc định thêm vào dự án mẫu rỗng MVC Các tập tin thêm làm cho dự án MVC thêm tồi tệ so với thực tế Một số có liên quan đến xác thực người khác JavaScript CSS cho tập tin mà có phiên thường xuyên minified (Tôi mô tả cách sử dụng Chương 26.) Mẹo: Visual Studio tập hợp dự án tạo với mẫu MVC sử dụng gói NuGet, có nghĩa mà bạn thấy, gói sử dụng cách chọn Manage NuGet Packages cho Solution từ menu Visual Studio Tools Library Package Manager Nó có nghĩa bạn thêm gói tương tự cho dự án, có dự án tạo với mẫu trống (và tơi làm cho ví dụ Phần sách này) Bất mẫu mà bạn chọn, bạn nhận thấy dự án có cấu trúc thư mục tương tự Một số mục dự án MVC có vai trò đặc biệt, mã hóa cứng vào ASP.NET MVC Framework Những đối tượng khác tùy thuộc vào quy ước đặt tên Tôi mô tả tập tin cốt lõi thư mục Bảng 14-1, số khơng có mặt dự án theo mặc định, mà giới thiệu chương sau Bảng 14-1 Tóm tắt mục Project MVC Thư mục tập tin /App_Data Mô tả Thư mục nơi bạn đưa liệu cá nhân, chẳng hạn file XML sở liệu bạn sử dụng SQL Server Express, Ghi IIS không phục vụ nội dung thư mục /App_Start /Areas /bin /Content /Controllers SQLite, kho filebased khác Thư mục chứa số cài đặt cấu hình cốt lõi cho dự án bạn, bao gồm định nghĩa routes filters nội dung bundles Areas cách để phân vùng ứng dụng lớn thành phần nhỏ Các assembly biên soạn cho ứng dụng MVC bạn đặt đây, với assembly tham chiếu mà GAC Tôi mô tả routes Chương 15 16, filters Chương 18 nội dung bundles Chương 26 Tôi mô tả chương 15 Bạn không thấy thư mục bin cửa sổ Solution Explorer, trừ bạn nhấn nút Show All Files Vì tập tin nhị phân tạo biên dịch, bạn không nên lưu trữ chúng source control Đây nơi mà bạn đặt Đây quy ước nội dung tĩnh không bắt tập tin CSS hình buộc Bạn đưa ảnh nội dung tĩnh bạn nơi phù hợp với bạn Đây nơi bạn đặt Đây quy ước lớp điều khiển Bạn đặt lớp bạn điều khiển bạn nơi mà bạn thích, tất /Models /Scripts /Views /Views/Shared biên dịch vào assembly Đây nơi mà bạn đặt Đây quy ước view model lớp Bạn định nghĩa domain model lớp model bạn, tất nơi dự án ứng dụng đơn giản hay dự án lợi ích từ việc riêng biệt xác định domain model dự án chuyên dụng, chứng minh cho SportsStore Thư mục Đây quy ước thiết kế để chứa Bạn đặt tập thư viện JavaScript tin script cho ứng dụng vị trí, chúng bạn kiểu nội dung tĩnh Xem Chương 26 để biết thêm thông tin việc quản lý tập tin script Thư mục chứa Các tập tin views partial /Views/web.config views, thường nhóm ngăn chặn IIS từ phục lại với vụ nội dung thư mục sau tên thư mục Lần đọc phải controller mà chúng trả thông qua có liên quan phương thức action Thư mục chứa layout views mà không cụ thể với điều khiển /Views/Web.config /Global.asax /Web.config Đây khơng phải tập tin cấu hình cho ứng dụng bạn Nó chứa cấu hình cần thiết để làm cho views làm việc với ASP.NET ngăn chặn view từ phục vụ IIS tên vùng imported vào views theo mặc định Đây lớp ứng dụng ASP.NET global Lớp code phía sau (Global.asax.cs) nơi để đăng ký cấu hình định tuyến, thiết lập mã để chạy ứng dụng khởi tạo hay tắt máy, ngoại lệ chưa xử lý xảy Đây tập tin cấu hình cho ứng dụng bạn Các tập tin Global.asax có vai trò ứng dụng MVC ứng dụng Web Forms Các tập tin Web.config có vai trò ứng dụng MVC ứng dụng Web Forms Hiểu biết quy ước MVC Có hai loại quy ước dự án MVC Loại đề xuất làm bạn cấu trúc dự án bạn Ví dụ, thường đặt tập tin JavaScript bạn thư mục Scripts Đây nơi mà nhà phát triển MVC khác mong đợi để tìm thấy chúng, nơi mà gói NuGet cài đặt chúng Nhưng bạn tự thay đổi tên thư mục Scripts, loại bỏ hồn toàn đặt script bạn nơi khác Điều khơng ngăn chặn MVC Framework chạy ứng dụng bạn miễn yếu tố script views bạn đề cập đến nơi bạn thực Loại khác quy ước phát sinh từ ngun tắc quy ước cấu hình, điểm bán hàng khiến Ruby on Rails nên phổ biến Quy ước cấu hình có nghĩa bạn khơng cần phải cấu hình cách rõ ràng mối liên hệ controllers views chúng, ví dụ Bạn cần làm theo quy ước đặt tên định cho tập tin bạn, tất thứ hoạt động Có linh hoạt việc thay đổi cấu trúc dự án bạn loại quy ước Những phần sau giải thích cho quy ước sử dụng nơi cấu hình Mẹo: Tất quy ước thay đổi bạn sử dụng công cụ xem tùy chỉnh (mà làm chương 20), điều bước để xem nhẹ với hầu hết phần, quy ước bạn xử lý với dự án MVC Các quy ước cho lớp Controller Các lớp Controller phải có tên kết thúc Controller, chẳng hạn ProductController, AdminController, HomeController Khi tham chiếu điều khiển từ nơi khác dự án, chẳng hạn sử dụng phương pháp trợ giúp HTML, bạn định phần tên (chẳng hạn Product), MVC Framework tự động thêm Controller tên bắt đầu tìm kiếm lớp điều khiển Mẹo: Bạn thay đổi hành vi cách tạo việc thực riêng bạn giao diện IControllerFactory, mà mô tả Chương 19 Các quy ước cho lớp Views Views partial views vào thư mục / Views / Controllername Ví dụ, views kết hợp với lớp ProductController thư mục / Views / Product Mẹo: Chú ý bỏ qua phần Controller lớp từ thư mục Views: / Views / Product, / Views / ProductController Điều khác với lúc đầu, nhanh chóng trở thành chất thứ hai Các MVC Framework dự kiến giao diện mặc định cho phương thức action nên đặt tên sau phương thức Ví dụ, giao diện mặc định kết hợp với phương thức action gọi List nên gọi List.cshtml Như vậy, phương thức List Action lớp ProductController, giao diện mặc định dự kiến /Views/Product/List.cshtml Giao diện mặc định sử dụng bạn trả lại kết gọi Views phương thức phương thức hành động, này: return View(); Bạn xác định views khác tên, này: return View("MyOtherView"); Chú ý không bao gồm phần mở rộng tên file đường dẫn đến view Khi tìm kiếm view, MVC Framework tìm thư mục tên sau Controller sau thư mục / Views / Shared Điều có nghĩa tơi đặt views sử dụng nhiều controller thư mục / Views / Shared framework tìm thấy chúng Các quy ước cho Layouts Các quy ước đặt tên cho layouts tiền tố cho tập tin với kí tự gạch (_), file layout đặt thư mục / Views /Shared Cách bố trí áp dụng cho tất views theo mặc định thông qua tập tin /Views/_ViewStart.cshtml Nếu bạn không muốn layout mặc định áp dụng cho views, bạn thay đổi thiết lập _ViewStart.cshtml (hoặc xóa tập tin hoàn toàn) để xác định layout khác view, này: @ { Layout = "∼/Views/Shared/_MyLayout.cshtml"; 341 } Hoặc bạn tắt layout cho view định, này: @ { Layout = null; } Gỡ lỗi ứng dụng MVC Bạn gỡ lỗi ứng dụng ASP.NET MVC cách xác giống bạn gỡ rối ứng dụng Web Forms ASP.NET Các debugger Visual Studio công cụ mạnh mẽ linh hoạt, với nhiều tính cơng dụng Tơi làm sơ qua bề mặt sách này, phần sau tơi cho bạn cách cài đặt trình gỡ lỗi thực hoạt động sửa lỗi khác dự án MVC bạn Chuẩn bị Example Project Để chứng minh việc sử dụng chương trình gỡ rối, tơi tạo dự án sử dụng MVC dự án mẫu MVC, để bạn thấy nội dung cấu hình mặc định thiết lập hiệu theme mặc định áp dụng cho views Tôi gọi DebuggingDemo project mới, thể hình 14-3 Tơi lựa chọn tùy chọn Individual User Accounts, thiết lập hệ thống bảo mật người dùng Hình 14-3 Tạo dự án sử dụng dự án mẫu MVC Nhấp vào nút OK Visual Studio tạo dự án thêm gói mặc định, tập tin thư mục mà mẫu MVC bao gồm Bạn thấy tập tin cài đặt thêm vào dự án áp dụng cách bắt đầu ứng dụng, thể hình 14-4 Hình 14-4 Hiệu việc bổ sung thực dự án mẫu MVC Có số yếu tố giữ cho tên ứng dụng xây dựng thương hiệu, số gợi ý để tài liệu MVC, NuGet, số tùy chọn lưu trữ Các điều hướng phía hình loại giống sử dụng cho ứng dụng SportsStore cách bố trí có số tính đáp ứng Thay đổi độ rộng cửa sổ để nhìn thấy hiệu Tạo Controller Visual Studio tạo Home controller phần nội dung dự án ban đầu, phải thay mã mà Visual Studio thêm vào hiển thị Liệt kê 14-1 Liệt kê 14-1: Nội dung tập tin HomeController.cs using System.Web.Mvc; namespace DebuggingDemo.Controllers { public class HomeController : Controller { public ActionResult Index() { int firstVal = 10; int secondVal = 5; int result = firstVal / secondVal; ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(result); } } } Tạo View Visual Studio tạo Views / Home / Index.cshtml xem tập tin phần thiết lập dự án Tôi không cần nội dung mặc định phải thay với đánh dấu Ví dụ 14-2 Bảng liệt kê 14-2 Nội dung File Index.cshtml Các bước chuẩn bị cuối cần phải thực thêm phong cách cho tập tin /Content/Site.css thay đổi có, thể Liệt kê 14-3 Các tập tin Site.css tạo Visual Studio phần dự án mẫu MVC vị trí mặc định cho phong cách ứng dụng CSS (Tôi thêm yếu tố liên kết để xem Liệt kê 14-2 import file vào xem Index.cshtml.) Bảng liệt kê 14-3 Thêm Style vào /Content/Site.css file body { padding-top: 5px; padding-bottom: 5px; } field-validation-error { color: #b94a48; } 344 field-validation-valid { display: none; } input.input-validation-error { border: 1px solid #b94a48; } input[type="checkbox"].input-validation-error { border: none; } validation-summary-errors { color: #b94a48; } validation-summary-valid { display: none; } no-color { background-color: white; border-style:none; } message { font-size: 20pt; text-decoration: underline;} Khởi động Visual Studio Debugger Visual Studio chuẩn bị dự án để gỡ lỗi tự động, mà hữu ích để hiểu làm để thay đổi cấu hình Các thiết lập quan trọng file Web.config thư mục dự án gốc tìm thấy yếu tố system.web, thể Liệt kê 14-4 Bảng liệt kê 14-4 Đặc tính gỡ lỗi file Web.config Rất nhiều biên soạn dự án MVC Framework thực ứng dụng chạy IIS, đó, bạn cần phải đảm bảo thuộc tính debug thuộc tính biên dịch thiết lập để thực trình phát triển Điều đảm bảo chương trình gỡ rối hoạt động tập tin lớp tạo thông qua theo yêu cầu biên soạn Cẩn trọng: Không triển khai ứng dụng bạn đến production server mà không thiết lập giá trị debug thành false Nếu bạn sử dụng Visual Studio để triển khai ứng dụng bạn (như làm Chương 13), sau thiết lập thay đổi tự động bạn chọn cấu hình Release cho dự án Ngồi tập tin Web.config, tơi muốn đảm bảo Visual Studio bao gồm thông tin gỡ lỗi tập tin lớp tạo Đây khơng phải nghiêm trọng, mà gây vấn đề cài đặt gỡ lỗi khác không đồng Đảm bảo cấu hình gỡ lỗi chọn cơng cụ Visual Studio, thể hình 14-5 Hình 14-5 Chọn cấu hình gỡ lỗi Để gỡ rối ứng dụng MVC Framework, chọn Start Debugging từ Visual Studio menu Debug nhấp vào mũi tên màu xanh cơng cụ Visual Studio (mà bạn thấy hình 14-5, bên cạnh tên trình duyệt sử dụng để hiển thị ứng dụng-Internet Explorer trường hợp này) Nếu thuộc tính debug file Web.config thiết đặt false bạn khởi động trình gỡ lỗi, sau Visual Studio hiển thị hộp thoại thể hình 14-6 Chọn tùy chọn cho phép Visual Studio để chỉnh sửa tập tin Web.config nhấp vào nút OK gỡ lỗi bắt đầu Hình 14-6 Hộp thoại hiển thị Visual Studio file Web.config tắt debug Tại thời điểm này, ứng dụng bạn hiển thị cửa sổ trình duyệt mới, thể hình 14-7 Hình 14-7 Chạy debugger Các debugger gắn vào ứng dụng bạn, bạn không nhận thấy khác biệt ngắt debugger (Tơi giải thích điều có nghĩa phần tiếp theo) Để chấm dứt debugger, chọn Stop Debugging từ Visual Studio Debug memnu đóng cửa sổ trình duyệt Causing the Visual Studio Debugger to Break Một ứng dụng chạy với debugger kèm theo hoạt động bình thường break xảy ra, thời điểm thực ứng dụng chặn đứng điều khiển chuyển qua cho debugger Trong trạng thái này, bạn kiểm tra, kiểm sốt tình trạng ứng dụng Breaks xảy hai lý chính: breakpoint vượt có lỗi phát sinh Bạn thấy ví dụ phần sau Cách sử dụng Breakpoints Một breakpoint hướng dẫn mà nói với debugger để ngưng thực ứng dụng điều khiển tay cho người lập trình viên Bạn kiểm tra trạng thái ứng dụng xem xảy tùy chọn, tiếp tục thực lần Để tạo breakpoint, kích chuột phải vào mã lệnh chọn Breakpoint Breakpoint Insert từ menu pop-up Như minh chứng, áp dụng breakpoint câu lệnh phương thức hành động Index điều khiển Home bạn thấy chấm đỏ xuất lề soạn thảo văn bản, thể hình 14-8 Hình 14-8 Áp dụng breakpoint để câu lệnh phương thức hành động Index Để xem hiệu breakpoint, bắt đầu gỡ lỗi cách chọn Start Debugging từ Visual Studio Menu Debug Các ứng dụng chạy đến câu lệnh mà breakpoint ứng dụng vượt quá, lúc debugger phá vỡ, ngừng thực thi ứng dụng chuyển giao quyền kiểm soát Visual Studio nêu bật điểm mà thực dừng lại với điểm bật màu vàng, thể hình 14-9 Hình 14-9 Chạm mức breakpoint Lưu ý : Một breakpoint kích hoạt câu lệnh gắn liền với thực thi Ví dụ breakpoint đạt sau ứng dụng bắt đầu nằm bên phương thức hành động gọi yêu cầu cho URL mặc định nhận Nếu bạn đặt breakpoint bên phương pháp hành động, bạn phải sử dụng trình duyệt yêu cầu URL có liên quan với phương thức Điều có nghĩa làm việc với ứng dụng theo cách người dùng muốn hay điều hướng trực tiếp đến URL cửa sổ trình duyệt Một bạn có quyền kiểm sốt thực thi ứng dụng, bạn di chuyển đến câu lệnh tiếp theo, thực thi phương thức khác thông thường khám phá trạng thái ứng dụng bạn Bạn làm điều cách sử dụng nút công cụ sử dụng mục Visual Studio Menu Debug Ngoài để tạo cho bạn kiểm soát việc thực ứng dụng, Visual Studio cung cấp cho bạn nhiều thông tin hữu ích tình trạng ứng dụng bạn Trong thực tế, có nhiều thơng tin mà tơi phòng bạn thấy điều Xem Values Data Code Editor Việc sử dụng phổ biến cho để theo dõi lỗi code bạn Trước bạn sửa chữa lỗi, bạn phải tìm xảy tính hữu ích mà Visual Studio cung cấp khả xem giám sát giá trị biến trình soạn thảo mã Tóm tắt Trong chương này, giới cấu trúc dự án Visual Studio MVC làm phận khác phù hợp với Tôi đề cập đặc điểm quan trọng MVC Framework: quy ước Đây chủ đề mà quay trở lại lần lần chương tiếp theo, sâu vào cách MVC Framework hoạt động  ... với đánh dấu Ví dụ 14- 2 Bảng liệt kê 14- 2 Nội dung File Index.cshtml Các bước chuẩn bị cuối cần phải thực thêm phong cách cho tập tin /Content/Site.css thay đổi có, thể Liệt kê 14- 3 Các tập tin... hình 14- 5 Hình 14- 5 Chọn cấu hình gỡ lỗi Để gỡ rối ứng dụng MVC Framework, chọn Start Debugging từ Visual Studio menu Debug nhấp vào mũi tên màu xanh cơng cụ Visual Studio (mà bạn thấy hình 14- 5,... views Tôi gọi DebuggingDemo project mới, thể hình 14- 3 Tơi lựa chọn tùy chọn Individual User Accounts, thiết lập hệ thống bảo mật người dùng Hình 14- 3 Tạo dự án sử dụng dự án mẫu MVC Nhấp vào nút