14 chuong 14

Chương này đưa ra một tổng quan về cấu trúc và tính chất của một ứng dụng ASP.NET MVC, bao gồm cả cơ cấu dự án mặc định và quy ước đặt tên, một số trong đó là tùy chọn và một số trong đó

Chương 14 Tổng quan về Project MVC

Tôi sẽ cung cấp một số ngữ cảnh khác trước khi bước vào các tính năng của MVC Framework Chương này đưa ra một tổng quan về cấu trúc và tính chất của một ứng dụng ASP.NET MVC, bao gồm cả cơ cấu dự án mặc định và quy ước đặt tên, một số trong đó là tùy chọn và một số trong đó được mã hóa cứng vào cách mà các MVC Framework hoạt động

Làm việc với Visual Studio MVC Project

Khi bạn tạo mới một Project ASP.NET, Visual Studio cung cấp cho bạn một số lựa chọn như các nội dung ban đầu mà bạn muốn trong dự án Mục đích là để giảm bớt quá trình học tập cho người mới phát triển và sử dụng một số bài thực hành tốt nhất để tiết kiệm thời gian cho các tính năng và các công việc chung Sự hỗ trợ này tiếp tục bằng mẫu template đã tạo ra các contrlllers và views được tạo ra code mẫu cho danh sách các đối tượng dữ liệu, chỉnh sửa các thuộc tính model và như vậy Với Visual Studio 2013 và MVC 5, Microsoft đã cập nhật các bản template mẫu và scaffolding, vì nó được biết đến, làm mờ ranh giới giữa các loại khác nhau của dự

án ASP.NET và để cung cấp một phạm vi rộng lớn hơn của các dự án template mẫu và code cấu hình

Phần 1 của cuốn sách này sẽ để lại cho bạn không có nghi ngờ rằng tôi không phải

là một fan hâm mộ của cách tiếp cận đến dự án rập khuôn hoặc mã Ý định là tốt, nhưng thực hiện luôn là underwhelming Một trong những đặc điểm tôi thích nhất

về ASP.NET và MVC Framework là có bao nhiêu sự linh hoạt mà tôi có trong thiết kế nền tảng cho phù hợp với phong cách phát triển của tôi, và các dự án, các lớp học và quan điểm rằng Visual Studio tạo ra và làm cho tôi cảm thấy bị hạn chế làm việc khi theo phong cách của người khác Tôi cũng thấy các nội dung và cấu hình quá chung chung và quá nhạt nhẽo để có ích Trong Chương 10, tôi đã nói rằng một trong những mối nguy hiểm của việc sử dụng thiết kế responsive với thiết

bị di động là một loại trung bình mà cuối cùng sẽ làm ảnh hưởng đến trải nghiệm của tất cả các thiết bị, và một cái gì đó tương tự đã xảy ra với mẫu templates Visual Studio Microsoft có thể không thể biết những loại ứng dụng mà bạn cần để tạo ra

và vì vậy họ bao gồm tất cả các cơ sở, nhưng theo một cách buồn tẻ và được khái quát như vậy mà cuối cùng tôi chỉ trích ra các nội dung mặc định bằng mọi cách Lời khuyên của tôi (trao cho bất cứ ai làm cho những sai lầm của yêu cầu) là bắt đầu với một project rỗng và thêm các thư mục, tập tin và gói tập tin mà bạn cần

Không chỉ bạn sẽ tìm hiểu thêm về cách thức mà các MVC Framework làm việc, nhưng bạn sẽ có quyền kiểm soát hoàn toàn đối với những ứng dụng của bạn có chứa

Nhưng sở thích của tôi không nên tô màu cho khinh nghiệm phát triển của bạn Bạn có thể tìm thấy các templates và scaffolding hữu ích hơn so với tôi, đặc biệt nếu bạn mới phát triển ASP.NET và bạn chưa phát triển theo một phong cách phát triển cá nhân phù hợp với mình Bạn cũng có thể tìm thấy mẫu dự án templates một nguồn tài nguyên hữu ích và là nguồn ý tưởng, mặc dù vậy bạn nên thận trọng về cách thêm các chức năng vào một ứng dụng trước khi bạn hoàn toàn hiểu làm thế nào nó hoạt động

Tạo một Project

Khi bạn lần đầu tiên tạo ra một dự án MVC Framework mới, bạn có hai điểm khởi đầu cơ bản để lựa chọn: các template rỗng và các template MVC Những cái tên có một chút sai lầm, bởi vì bạn có thể thêm các thư mục cơ bản và các mục cần thiết cho các MVC Framework để bất kỳ

mẫu dự án tempplate bằng cách kiểm tra các tùy chọn MVC trong Add

Folders và Core References phần của cửa sổ hộp thoại New Project

ASP.NET, như được hiển thị trong hình 14-1 Đối với tùy chọn MVC, tùy chọn này được kiểm tra cho bạn

Hình 14.1 Lựa chọn các loại hình dự án, thư mục và assemblies cho một

dự án mới

Sự khác biệt là các nội dung bổ sung mà các dự án mẫu MVC thêm các

dự án mới, trong đó cung cấp một điểm khởi đầu làm sẵn bao gồm mặc định controllers mặc định và views mặc định, một cấu hình bảo mật, một

số gói JavaScript và CSS phổ biến (như jQuery và Bootstrap) và một layout sử dụng Bootstrap để cung cấp một chủ đề cho các nội dung ứng dụng Các tùy chọn dự án rỗng chỉ chứa các tài liệu tham khảo cơ bản cần thiết cho một MVC Framework và cấu trúc thư mục barebone Có một số lượng hợp lý các nội dung bổ sung bởi các mẫu MVC và bạn có thể thấy sự khác biệt trong hình 14-2, trong đó cho thấy các nội dung của hai dự án mới được tạo ra Người bên trái được tạo ra với các mẫu

rỗng với các thư mục và tài liệu tham khảo MVC tùy chọn kiểm tra Người khác cho thấy các nội dung của dự án đã được tạo ra với các mẫu MVC, và để có thể hiển thị các tập tin trên trang này, tôi đã phải tập

trung các Solution Explorer vào thư mục khác nhau, vì một danh sách

duy nhất là quá dài cho một trang in

Hình 14-2 Các nội dung mặc định thêm vào một dự án của các mẫu rỗng và MVC

Các tập tin thêm làm cho dự án MVC thêm tồi tệ hơn so với thực tế Một

số có liên quan đến xác thực và những người khác là JavaScript và CSS cho các tập tin mà có những phiên bản thường xuyên và minified (Tôi

mô tả cách này có thể được sử dụng trong Chương 26.)

Mẹo: Visual Studio tập hợp một dự án tạo ra với các mẫu MVC sử dụng các gói NuGet, có nghĩa là cái mà bạn có thể thấy, những gói được sử

dụng bằng cách chọn Manage NuGet Packages cho Solution từ menu

Visual Studio Tools Library Package Manager Nó cũng có nghĩa là bạn

có thể thêm các gói tương tự cho bất kỳ dự án, trong đó có một dự án tạo

ra với các mẫu trống (và đây là những gì tôi đã làm cho các ví dụ trong Phần 1 của cuốn sách này)

Bất cứ mẫu mà bạn chọn, bạn sẽ nhận thấy rằng các dự án có cấu trúc thư mục tương tự Một số mục trong một dự án MVC có vai trò đặc biệt,

đó là mã hóa cứng vào ASP.NET hoặc các MVC Framework Những đối tượng khác tùy thuộc vào quy ước đặt tên Tôi đã mô tả mỗi tập tin cốt lõi và thư mục trong Bảng 14-1, một số trong đó không có mặt trong các

dự án theo mặc định, nhưng mà tôi giới thiệu trong chương sau

Bảng 14-1 Tóm tắt các mục Project MVC

Thư mục hoặc tập tin Mô tả Ghi chú

/App_Data Thư mục này là nơi

bạn đưa dữ liệu cá nhân, chẳng hạn như các file XML hoặc cơ

sở dữ liệu nếu bạn đang sử dụng SQL Server Express,

IIS sẽ không phục vụ các nội dung của thư mục này

SQLite, hoặc kho filebased khác

/App_Start Thư mục này chứa

một số cài đặt cấu hình cốt lõi của cho

dự án của bạn, bao gồm các định nghĩa của các routes và filters và các nội dung bundles

Tôi mô tả các routes trong Chương 15 và

16, các filters trong Chương 18 và các nội dung bundles trong Chương 26

/Areas Areas là một cách để

phân vùng một ứng dụng lớn thành các phần nhỏ hơn

Tôi mô tả trong chương 15

soạn cho ứng dụng MVC của bạn được đặt ở đây, cùng với bất kỳ assembly tham chiếu mà không phải

là trong GAC

Bạn sẽ không thấy các

thư mục bin trong cửa

sổ Solution Explorer, trừ khi bạn nhấn nút

Show All Files Vì

đây là những tập tin nhị phân tạo ra trên biên dịch, bạn không nên lưu trữ chúng trong source control

/Content Đây là nơi mà bạn đặt

nội dung tĩnh như các tập tin CSS và hình ảnh

Đây là một quy ước nhưng không bắt buộc Bạn có thể đưa nội dung tĩnh của bạn bất cứ nơi nào phù hợp với bạn

/Controllers Đây là nơi bạn đặt các

lớp điều khiển của bạn

Đây là một quy ước Bạn có thể đặt các lớp điều khiển của bạn bất

cứ nơi nào mà bạn thích, vì tất cả đều

được biên dịch vào cùng một assembly

/Models Đây là nơi mà bạn đặt

view model và các lớp domain model của bạn, mặc dù tất cả các ứng dụng đơn giản nhưng lợi ích từ việc xác định các domain model trong một dự

án chuyên dụng, như tôi đã chứng minh cho SportsStore

Đây là một quy ước Bạn có thể định nghĩa các lớp model bất cứ nơi nào trong dự án hay trong một dự án riêng biệt

/Scripts Thư mục này được

thiết kế để chứa các thư viện JavaScript cho ứng dụng của bạn

Đây là một quy ước Bạn có thể đặt các tập tin script trong bất kỳ

các views và partial views, thường nhóm lại với nhau trong các thư mục sau tên

controller mà chúng

có liên quan

Các tập tin /Views/web.config ngăn chặn IIS từ phục

vụ nội dung của các thư mục Lần đọc phải được trả thông qua một phương thức action

/Views/Shared Thư mục này chứa

các layout và views

mà không cụ thể với một bộ điều khiển duy nhất

/Views/Web.config Đây không phải là tập

tin cấu hình cho ứng dụng của bạn Nó chứa các cấu hình cần thiết để làm cho views làm việc với

ASP.NET và ngăn chặn view từ đang được phục vụ bởi IIS

và tên các vùng imported vào views theo mặc định

/Global.asax Đây là lớp ứng dụng

ASP.NET trên global

Lớp code phía sau (Global.asax.cs) là nơi

để đăng ký cấu hình định tuyến, cũng như thiết lập bất kỳ mã để chạy trên ứng dụng khởi tạo hay tắt máy, hoặc khi ngoại lệ chưa

xử lý xảy ra

Các tập tin Global.asax có vai trò như nhau trong một ứng dụng MVC như

nó trong một ứng dụng Web Forms

/Web.config Đây là tập tin cấu

hình cho ứng dụng của bạn

Các tập tin Web.config có vai trò như nhau trong một ứng dụng MVC như

nó trong một ứng dụng Web Forms

Hiểu biết về các quy ước MVC

Có hai loại quy ước trong một dự án MVC Loại đầu tiên chỉ là các đề xuất làm như thế nào bạn có thể cấu trúc dự án của bạn Ví dụ, nó là

thường đặt các tập tin JavaScript của bạn trong thư mục Scripts Đây là nơi mà các nhà phát triển MVC khác sẽ mong đợi để tìm thấy chúng, và nơi mà các gói NuGet sẽ cài đặt chúng Nhưng bạn có thể tự do thay đổi tên của thư mục Scripts, hoặc loại bỏ nó hoàn toàn và đặt các script của bạn ở một nơi khác Điều đó sẽ không ngăn chặn các MVC Framework chạy ứng dụng của bạn miễn là các yếu tố script trong views của bạn đề cập đến nơi bạn thực hiện

Loại khác của quy ước phát sinh từ các nguyên tắc quy ước về cấu hình,

đó là một trong những điểm bán hàng chính khiến Ruby on Rails nên phổ biến Quy ước về cấu hình có nghĩa là bạn không cần phải cấu hình một cách rõ ràng mối liên hệ giữa các controllers và views của chúng, ví

dụ Bạn chỉ cần làm theo một quy ước đặt tên nhất định cho các tập tin của bạn, và tất cả mọi thứ hoạt động Có ít sự linh hoạt trong việc thay đổi cấu trúc dự án của bạn khi đối với các loại quy ước Những phần sau giải thích cho các quy ước được sử dụng ở nơi cấu hình

Mẹo: Tất cả các quy ước có thể được thay đổi nếu bạn đang sử dụng một công cụ xem tùy chỉnh (mà tôi đã làm trong chương 20), nhưng điều này không phải là một bước để xem nhẹ và với hầu hết các phần, đó là những quy ước bạn sẽ được xử lý với các 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 bằng Controller, chẳng hạn

như ProductController, AdminController, và HomeController Khi tham chiếu một bộ điều khiển từ các nơi khác trong dự án, chẳng hạn như khi

sử dụng một phương pháp trợ giúp HTML, bạn chỉ định một phần đầu tiên của tên (chẳng hạn như Product), và các MVC Framework sẽ tự

động thêm Controller ở tên này và bắt đầu tìm kiếm các lớp điều khiển

Mẹo: Bạn có thể thay đổi hành vi này bằng cách tạo ra việc thực hiện riêng của bạn về giao diện IControllerFactory, mà tôi mô tả trong

Chương 19

Các quy ước cho lớp Views

Views và partial views đi vào thư mục / Views / Controllername Ví dụ, một views kết hợp với lớp ProductController sẽ đi trong thư mục /

/Views/Product/List.cshtml Giao diện mặc định được sử dụng khi bạn trả lại kết quả của gọi các Views phương thức trong một phương thức hành động, như thế này:

sẽ tìm thấy chúng

Các quy ước cho Layouts

Các quy ước đặt tên cho layouts là tiền tố cho các tập tin với một kí tự gạch dưới (_), và các file layout được đặt trong thư mục / Views

/Shared Cách bố trí này được áp dụng cho tất cả các views theo mặc định thông qua các tập tin /Views/_ViewStart.cshtml Nếu bạn không muốn layout mặc định áp dụng cho các views, bạn có thể thay đổi các thiết lập trong _ViewStart.cshtml (hoặc xóa các tập tin hoàn toàn) để xác định layout khác trong view, như thế này:

Bạn gỡ lỗi một ứng dụng ASP.NET MVC cách chính xác giống như bạn

gỡ rối một ứng dụng Web Forms ASP.NET Các debugger Visual Studio

là một công cụ mạnh mẽ và linh hoạt, với nhiều tính năng và công dụng Tôi chỉ có thể làm sơ qua bề mặt trong cuốn sách này, nhưng trong các phần sau đó tôi chỉ cho bạn cách cài đặt các trình gỡ lỗi và thực hiện các hoạt động sửa lỗi khác nhau về dự án MVC của 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 ra một dự

án mới sử dụng MVC dự án mẫu MVC, chỉ để bạn có thể thấy nội dung

và cấu hình mặc định được thiết lập và hiệu quả của các theme mặc định

được áp dụng cho views Tôi gọi là DebuggingDemo project mới, như

thể hiện trong hình 14-3 Tôi đã lựa chọn các tùy chọn Individual User

Accounts, trong đó thiết lập một hệ thống bảo mật người dùng cơ bản

Hình 14-3 Tạo một dự án mới sử dụng các dự án mẫu MVC

Nhấp vào nút OK và Visual Studio sẽ tạo dự án và thêm các gói mặc định, các tập tin và thư mục mà các mẫu MVC bao gồm Bạn có thể thấy các tập tin và cài đặt thêm vào dự án được áp dụng bằng cách bắt đầu ứng dụng, như thể hiện trong hình 14-4

Hình 14-4 Hiệu quả của việc bổ sung thực hiện bằng các dự án mẫu MVC

Có một số yếu tố giữ cho tên của ứng dụng và xây dựng thương hiệu, và một số gợi ý để các tài liệu MVC, NuGet, và một số tùy chọn lưu trữ Các thanh điều hướng ở phía trên cùng của màn hình là loại giống nhau tôi sử dụng cho các ứng dụng SportsStore và cách bố trí có một số tính

năng đáp ứng Thay đổi độ rộng của cửa sổ để nhìn thấy hiệu quả

Tạo Controller

Visual Studio tạo Home controller như là một phần của nội dung dự án

ban đầu, nhưng tôi sẽ phải thay thế mã mà Visual Studio thêm vào như

được hiển thị trong Liệt kê 14-1

Liệt kê 14-1: Nội dung của tập tin HomeController.cs

int result = firstVal / secondVal;

ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(result);

} }

}

Tạo View

Visual Studio cũng tạo ra Views / Home / Index.cshtml xem tập tin như

là một phần của các thiết lập dự án Tôi không cần những nội dung mặc định và phải thay thế nó với các đánh dấu trong Ví dụ 14-2

Bảng liệt kê 14-2 Nội dung của File Index.cshtml

Các bước chuẩn bị cuối cùng tôi cần phải thực hiện thêm một phong cách cho các tập tin /Content/Site.css và thay đổi một trong những cái hiện có, như thể hiện trong Liệt kê 14-3 Các tập tin Site.css được tạo ra bởi Visual Studio như là một phần của dự án mẫu MVC và là vị trí mặc định cho phong cách ứng dụng CSS (Tôi đã thêm một yếu tố liên kết để xem trong Liệt kê 14-2 import file này vào xem Index.cshtml.)

Bảng liệt kê 14-3 Thêm một 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: 0 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 mới để gỡ lỗi tự động, mà nó rất hữu ích

để hiểu làm thế nào để thay đổi cấu hình Các thiết lập quan trọng là trong file Web.config trong thư mục dự án gốc và có thể được tìm thấy trong các yếu tố system.web, như thể hiện trong Liệt kê 14-4

Bảng liệt kê 14-4 Đặc tính gỡ lỗi trong file Web.config

Cẩn trọng: Không triển khai ứng dụng của bạn đến một production

server mà không thiết lập các giá trị debug thành false Nếu bạn đang sử dụng Visual Studio để triển khai các ứng dụng của bạn (như tôi đã làm trong Chương 13), sau đó thiết lập sẽ được thay đổi tự động khi bạn chọn cấu hình Release cho dự án

Ngoài các tập tin Web.config, tôi muốn đảm bảo rằng Visual Studio bao gồm cả thông tin gỡ lỗi trong các tập tin lớp nó tạo ra Đây không phải là nghiêm trọng, mà nó có thể gây ra vấn đề nếu các cài đặt gỡ lỗi khác nhau không được đồng bộ Đảm bảo rằng cấu hình gỡ lỗi được chọn trong thanh công cụ Visual Studio, như thể hiện trong hình 14-5