LẬP TRÌNH WEB NÂNG

CAO
NHÓM 8
CHAPTER 21: USING CONTROLLER WITH VIEW - PART I
GETTING STARTED WITH VIEWS
Chúng ta bắt đầu chương này với web service controller để chứng minh sự
tương đồng với Controller sử dụng quan điểm. Thật là dễ để nghĩ về Web
Service và View Controller là riêng biệt, nhưng điều quan trọng là để hiểu rằng
các tính năng cơ bản giống nhau được sử dụng cho cả hai loại phản hồi. Trong
các phần mà làm theo, chúng ta định cấu hình ứng dụng để hỗ trợ các ứng dụng
HTML và sử dụng lại Home Controller để nó tạo ra một phản hồi HTML.
CONFIGURING THE APPLICATION

Bước đầu tiên là cấu hình

ASP.NET Core để kích hoạt phản
hồi HTML, như trong hình 21-4
 CONFIGURING THE APPLICATION

Các phản hồi HTML được tạo bằng cách sử dụng các
dạng xem, là các tệp chứa hỗn hợp các phần tử HTML
và C# biểu thức. Phương thức AddControllers chúng ta
đã sử dụng trong Chapter 19 để kích hoạt MVC
Framework chỉ hỗ trợ Web Service Controller. Để bật
hỗ trợ cho dạng xem (view), phương thức
AddControllersWithViews được sử dụng.
Thay đổi thứ hai là việc bổ sung phương thức
MapControllerRoute trong định tuyến điểm cuối cấu
hình. Bộ điều khiển tạo phản hồi HTML không sử
dụng các thuộc tính định tuyến giống như được áp
dụng cho các bộ điều khiển dịch vụ web và dựa trên
một tính năng có tên là định tuyến theo quy ước mà đã
mô tả trong phần tiếp theo.
CREATING AN HTML CONTROLLER
Các Controller cho các ứng
dụng HTML tương tự như
các Controller được sử
dụng cho các Web Service
nhưng có một số sự khác
biệt. Để tạo Controller
HTML, hãy thêm tệp lớp
có tên HomeController.cs
vào Bộ điều khiển thư mục
chứa các câu lệnh được
hiển thị trong hình 21-5
 CREATING AN HTML CONTROLLER
Lớp cơ sở cho HTMLController là Controller, lớp này bắt nguồn từ lớp
ControllerBase được sử dụng cho Web Service Controller và cung cấp các phương
thức bổ sung dành riêng để làm việc với các View.
CREATING AN HTML CONTROLLER
Các phương thức hành động trong
HTMLController trả về các đối
tượng triển khai giao diện
IActionResult, đây là loại kết quả
tương tự được sử dụng trong Chương
19 để trả về các phản hồi mã trạng
thái cụ thể. Lớp cơ sở Controller
cung cấp phương thức View, được sử
dụng để chọn một view sẽ được sử
dụng để tạo phản hồi
Lưu ý rằng Controller trong hình 21-5 chưa được thêm bằng các thuộc tính. Thuộc
tính API Controller chỉ được áp dụng cho Web Service Controllers và không được
sử dụng cho HTMLController. Các thuộc tính phương thức Route và HTTP không
bắt buộc vì HTMLController dựa vào Convention-based routing, đã định cấu hình
trong hình 21-4
Phương thức View tạo một thể hiện của lớp ViewResult, lớp này triển khai IActionResult giao
diện và báo cho MVC Framework rằng nên sử dụng chế độ xem để tạo phản hồi cho máy khách.
Đối số của phương thức View được gọi là view model và cung cấp cho view data cần thiết để tạo
ra một phản hồi.
Hiện tại không có chế độ xem nào để sử dụng MVC Framework, nhưng nếu bạn khởi động lại
ASP.NET Core và sử dụng trình duyệt để nhập http://localhost:5000, bạn sẽ thấy thông báo lỗi
cho biết cách MVC Framework phản hồi ViewResult mà nó nhận được từ phương thức hành
động Index, như trong Hình 21-2.
UNDERSTANDING CONVENTION ROUTING
HTML Controller dựa trên quy ước routing thay vì thuộc tính Route. Quy ước trong
thuật ngữ này đề cập đến việc sử dụng tên lớp trình điều khiển và tên phương thức hành
động được sử dụng để định cấu hình routing hệ thống, được thực hiện trong hinh 21-5
bằng cách thêm câu lệnh này vào cấu hình routing điểm cuối
...
app.MapControllerRoute("Default","{controller=Home}/{action=Index}/{id?}");
...
Route mà câu lệnh này thiết lập khớp với URL hai và ba đoạn. Giá trị của phân đoạn đầu
tiên được sử dụng làm tên của lớp controller, không có hậu tố Controller, do đó Home đề
cập đến lớp HomeController. Phân đoạn thứ hai là tên của phương thức hành động và
phân đoạn thứ ba tùy chọn cho phép các phương thức hành động nhận tham số có tên là
id. Các giá trị mặc định được sử dụng để chọn phương pháp Lập chỉ mục trên
HomeController cho các URL không chứa tất cả các phân đoạn. Đây là một quy ước phổ
biến mà cùng một cấu hình routing có thể được thiết lập mà không cần phải chỉ định mẫu
URL, như trong Hình 21-6
Phương thức MapDefaultControllerRoute tránh rủi ro nhập sai
mẫu URL và thiết lập convention-based routing.
MVC Framework giả định rằng bất kỳ phương thức công khai nào được xác định bởi
HTML Controller là một phương thức hành động và các phương thức hành động đó hỗ
trợ tất cả các phương thức HTTP. Nếu bạn cần xác định một phương thức trong
controller không phải là một hành động, bạn có thể đặt nó ở chế độ riêng tư hoặc nếu
không thể, hãy thiết lập phương thức bằng thuộc tính NonAction. Bạn có thể hạn chế
một phương thức hành động để hỗ trợ các phương thức HTTP cụ thể bằng cách áp
dụng các thuộc tính sao cho thuộc tính HttpGet biểu thị một hành động xử lý các yêu
cầu GET, phương thức HttpPost biểu thị một hành động xử lý các yêu cầu GET.xử lý
các yêu cầu POST, ...
UNDERSTANDING THE RAZOR VIEW CONVENTION
Khi phương thức hành động Index được xác định bởi HomeController được gọi, nó sử dụng
giá trị của tham số id để truy xuất một đối tượng từ cơ sở dữ liệu và chuyển đối tượng đó
sang phương thức View.
...
public async Task Index(long id = 1) {
return View(awaitcontext.Products.FindAsync(id));
}
...
Khi một phương thức hành động gọi phương thức View, nó sẽ tạo ra một ViewResult
báo cho MVC Framework sử dụng quy ước mặc định để định vị view. Công cụ Razor
view tìm kiếm một chế độ xem có cùng tên với phương thức hành động, với việc bổ
sung phần mở rộng tệp cshtml, là loại tệp được sử dụng bởi công cụ Razor view.
Views được lưu trữ trong thư mục Views, được nhóm theo Controllers mà chúng
được liên kết. Vị trí đầu tiên được tìm kiếm là thư mục Views/Home, vì phương thức
hành động được xác định bởi Home controller (tên của controller được lấy bằng cách
bỏ Controller khỏi tên của lớp controller). Nếu không tìm thấy tệp Index.cshtml trong
thư mục Views/Home, thì thư mục Views/Shared sẽ được chọn, đây là vị trí lưu trữ
các dạng xem được chia sẻ giữa các controller.
Phản hồi ngoại lệ trong Hình 21-2 cho thấy kết quả của cả hai quy ước. Các quy ước
routing được sử dụng để xử lý yêu cầu bằng cách sử dụng phương thức hành động
Index do Home Controller xác định, cho biết Công cụ Razor view để sử dụng quy
ước tìm kiếm chế độ xem để định vị chế độ view. Công cụ view sử dụng tên của
phương thức hành động và bộ điều khiển để xây dựng mẫu tìm kiếm của nó và kiểm
tra Views/Home/Index.cshtml và Views/Shared/tệp Index.cshtml
 CREATING A RAZOR VIEW
Để cung cấp cho MVC Framework một dạng xem để hiển thị, hãy tạo thư mục Views/Home và
thêm vào đó một tệp có tên Index.cshtml với nội dung được hiển thị trong hình 21-7. Nếu bạn đang
sử dụng Visual Studio, hãy tạo chế độ xem bằng cách nhấp chuột phải vào thư mục Views/Home,
chọn Add ➤ New item từ menu bật lên và chọn mục RazorView - Empty trong danh mục
ASP.NET Core ➤ Web, như thể hiện trong Hình 21-3.
Tệp dạng xem chứa các phần tử HTML
tiêu chuẩn được tạo kiểu bằng cách sử
dụng CSS Bootstrap framework, được
áp dụng thông qua thuộc tính lớp. Tính
năng xem chính là khả năng tạo nội
dung bằng các biểu thức C#
 MODIFYING A RAZOR VIEW

Lệnh dotnet watch tự động phát hiện

và biên dịch lại Razor Views, nghĩa là
thời gian chạy ASP.NET Core không
phải khởi động lại khi các chế độ xem
được chỉnh sửa. Để minh họa quá
trình biên dịch lại, hình 21-8 thêm
các thành phần mới vào Index view.
 SELECTING A VIEW BY NAME
Phương thức hành động trong hình
21-5 hoàn toàn dựa vào quy ước, để
Razor chọn chế độ xem được sử
dụng để tạo phản hồi. Các phương
thức hành động có thể chọn một
dạng xem bằng cách cung cấp một
tên làm đối số cho phương thức
dạng view, như trong hình 21-9.
 SELECTING A VIEW BY NAME
Phương thức hành động chọn chế độ xem
dựa trên thuộc tính CategoryId của đối
tượng Product được truy xuất từ cơ sở dữ
liệu. Nếu CategoryId là 1, phương thức hành
động sẽ gọi phương thức View với một đối
số bổ sung chọn chế độ xem có tên
Watersports
...
return View("Watersports", prod);
...
Lưu ý rằng phương thức hành động không
chỉ định phần mở rộng tệp hoặc vị trí cho
chế độ xem. Công việc của công cụ xem là
dịch Watersports thành một tệp xem
Nếu bạn lưu tệp HomeController.cs, dotnet watch sẽ phát hiện sự thay đổi và tải lại trình duyệt,
điều này sẽ gây ra lỗi do tệp xem không tồn tại. Để tạo chế độ xem, hãy thêm tệp Razor View có
tên Watersports.cshtml vào thư mục Views/Home với nội dung được hiển thị trong hình 21-10
Dạng xem mới tuân theo cùng một mẫu với dạng xem index nhưng có tiêu đề
khác phía trên bảng. Lưu thay đổi và nhập http://localhost:5000/home/index/1
và http://localhost:5000/home/index/4. Phương thức hành động chọn chế độ
xem Watersports cho URL đầu tiên và chế độ xem mặc định cho URL thứ hai,
tạo ra hai phản hồi như trong Hình 21-6.
USING SHARED VIEWS
Khi công cụ Razor view định vị một
chế độ xem, nó sẽ tìm trong thư mục
View/[controller] và sau đó là
Views/Shared. Mẫu tìm kiếm này có
nghĩa là các chế độ xem chứa nội dung
chung có thể được chia sẻ giữa các bộ
điều khiển, tránh trùng lặp. Để xem
quy trình này hoạt động như thế nào,
hãy thêm tệp Razor View có tên
Common.cshtml vào thư mục
Views/Shared với nội dung được hiển
thị trong Liệt kê 21-11.
Tiếp theo, thêm một phương thức hành động vào Home controller sử dụng chế
độ xem mới, như trong hình 21-12.
Hành động mới dựa trên quy ước sử dụng tên phương thức làm tên của dạng xem. Khi chế độ
xem không yêu cầu bất kỳ dữ liệu nào để hiển thị cho người dùng, phương thức view có thể
được gọi mà không cần đối số. Kế tiếp, tạo một controller mới bằng cách thêm một tệp lớp có
tên là SecondController.cs vào thư mục Controller, với mã được hiển thị trong hình 21-13.
Controller mới xác định một hành động duy nhất, có tên là index, gọi phương thức Chế
độ xem để chọn chế độ Common view. Đợi ứng dụng được xây dựng và điều hướng
đến http://localhost:5000/home/common và http://localhost:5000/second, cả hai sẽ hiển
thị chế độ xem Chung, tạo ra phản hồi như trong Hình 21-7 .
 SEEING THE COMPILED OUTPUT FROM
RAZOR VIEWS
Theo mặc định, Razor view được biên dịch trực tiếp thành DLL và các lớp C# được tạo không
được ghi vào đĩa trong quá trình xây dựng. Bạn có thể xem các lớp đã tạo bằng cách thêm cài đặt
sau vào tệp WebApp.csproj, được truy cập trong Visual Studio bằng cách bấm chuột phải vào
mục WebApp trong Solution Explorer và chọn Chỉnh sửa tệp dự án từ menu bật lên

Lưu tệp dự án và xây dựng dự án bằng lệnh xây dựng dotnet. Các tệp C# được tạo từ Razor
view sẽ được ghi vào thư mục obj/Debug/net6.0/generated.
Lớp này là sự đơn giản hóa của mã được tạo ra để tôi có thể tập trung
vào các tính năng quan trọng nhất cho chương này. Điểm đầu tiên cần
lưu ý là lớp được tạo từ chế độ xem kế thừa từ lớp RazorPage<T>.
CACHING RESPONSES
Các biểu thức trong dạng view được dịch thành các lệnh gọi phương thức Viết, phương thức này mã hóa kết quả của
biểu thức để có thể đưa nó vào tài liệu HTML một cách an toàn. Phương thức WriteLiteral được sử dụng để xử lý
các vùng HTML tĩnh của chế độ xem, không cần mã hóa thêm. Kết quả là một đoạnnhư thế này từ tệp CSHTML:

Điều này được chuyển đổi thành một loạt các câu lệnh C# như thế này trong phương thức ExecuteAsync:

Khi phương thức ExecuteAsync được gọi, phản hồi được tạo với sự kết hợp của HTML tĩnh và các biểu
thức có trong dạng xem. Các kết quả từ việc đánh giá các biểu thức được ghi vào phản hồi, tạo HTML
như thế này:
 SETTING THE VIEW MODEL TYPE

Lớp được tạo cho tệp Watersports.cshtml được

lấy từ RazorPage<T>, nhưng Razor không biết
loại nào sẽ được sử dụng bởi phương thức hành
động cho mô hình khung nhìn, vì vậy nó đã chọn
động làm lớp đối số loại chung. Điều này có
nghĩa là biểu thức @Model có thể được sử dụng
với bất kỳ tên phương thức hoặc thuộc tính nào,
được đánh giá trong thời gian chạy khi một phản
hồi được tạo. Để chứng minh điều gì sẽ xảy ra khi
một thành viên không tồn tại được sử dụng, hãy
thêm nội dung được hiển thị trong hình 21-14 vào
tệp Watersports.cshtml.
Sử dụng trình duyệt để nhập http://localhost:5000, và bạn sẽ thấy ngoại lệ được hiển thị
trong Hình 21-8. Bạn có thể cần khởi động ASP.NET Core để xem lỗi này vì lệnh dotnet
watch có thể bị nhầm lẫn khi không thể tải chế độ xem đã biên dịch
Để kiểm tra các biểu thức trong quá trình phát triển, loại đối tượng Model có thể được chỉ định
bằng cách sử dụng mô hình từ khóa, như được hiển thị trong hình.
Một cảnh báo lỗi sẽ xuất hiện trong trình chỉnh sửa sau vài giây, khi Visual Studio hoặc Visual
Studio Code kiểm tra chế độ xem ở chế độ nền, như thể hiện trong Hình 21-9. Khi lệnh dotnet
watch được sử dụng, một lỗi sẽ được hiển thị trong trình duyệt, như thể hiện trong Hình 21-9.
Trình biên dịch cũng sẽ báo lỗi nếu bạnxây dựng dự án hoặc sử dụng lệnh dotnet build hoặc
dotnet run.
Chỉ định loại mô hình chế độ xem cho phép Visual Studio và Visual Studio
Code đề xuất tên thuộc tính và phương thức khi bạn chỉnh sửa chế độ xem.
Thay thế thuộc tính không tồn tại bằng thuộc tính được hiển thị trong hình 21-
16.
 USING A VIEW IMPORTS FILE
• Nếu bạn đang sử dụng Visual Studio, nhấp chuột
phải vào thư mục Lượt xem trong Solution
Explorer, chọn Add ➤ new item từ pop-up menu và
chọn mẫu Razor View Imports từ danh mục
ASP.NET Core,như trong Hình 21-11
• Visual Studio sẽ tự động đặt tên của tệp thành
_ViewImports.cshtml và nhấp vào nút Add sẽ tạo
tệp, tệp này sẽ trống. Nếu bạn đang sử dụng Visual
Studio Code, chỉ cần chọn thư mục Lượt xem và
thêm tệp mới có tên _ViewImports.cshtml. Bất kể
bạn đã sử dụng trình soạn thảo nào, hãy thêm biểu
thức được hiển thị trong Liệt kê 21-17.
• Các không gian tên nên được tìm kiếm cho các lớp được sử dụng trong Razor Views được chỉ định bằng
cách sử dụng biểu thức @using, theo sau là không gian tên. Trong hình 21-17 đã thêm một mục nhập
cho không gian tên WebApp.Models chứa lớp view model được sử dụng trong view Watersports.cshtml.
• Bây giờ không gian tên được bao gồm trong tệp nhập dạng xem, tôi có thể xóa không gian tên khỏi
dạng xem, như trong hình 21-18
• Lưu tệp xem và sử dụng trình duyệt để nhập http://localhost:5000, và bạn sẽ thấy phản hồi
được hiển thị trong Hình 21-12.
CHAPTER 22: USING CONTROLLER WITH VIEW - PART II
Trong chương này, tôi sẽ mô tả thêm các tính năng được
cung cấp bởi Razor Views. Tôi chỉ cho bạn cách bổ sung dữ
liệu vào view bằng cách sử dụng view bag và cách sử dụng bố
cục và các phần bố cục để giảm trùng lặp. Tôi cũng sẽ giải
thích các kết quả từ các biểu thức được mã hóa và cách tắt
quy trình mã hóa.
Using the View Bag

Các phương thức hành động

cung cấp các view có dữ liệu
để hiển thị với một mô hình
view, nhưng đôi khi cần có
thông tin bổ sung. Các
phương thức có thể sử dụng
view bag để cung cấp một
view với dữ liệu bổ sung, như
trong danh sách liệt kê 22-5.
Thuộc tính ViewBag được kế thừa từ lớp cơ sở Controller và trả về một đối tượng động. Điều
này cho phép các phương thức hành động tạo các thuộc tính mới chỉ bằng cách gán giá trị cho
chúng, như được hiển thị trong danh sách. Các giá trị được gán cho thuộc tính ViewBag bằng
phương thức hành động có sẵn cho view thông qua một thuộc tính cũng được gọi là ViewBag,
như được hiển thị trong Liệt kê 22-6.
Thuộc tính ViewBag chuyển đối tượng từ hành động sang view, cùng với đối tượng model view. Trong
danh sách, phương thức hành động truy vấn giá trị trung bình của các thuộc tính Product.Price trong cơ sở
dữ liệu và gán giá trị đó cho thuộc tính view bag có tên là AveragePrice mà view này sử dụng trong một
biểu thức. Sử dụng trình duyệt để yêu cầu http://localhost:5000, trình duyệt này sẽ tạo ra phản hồi như
trong Hình 22-2.
 When to use the view bag
View bag hoạt động tốt nhất khi nó được sử dụng để cung cấp
cho chế độ xem một lượng nhỏ dữ liệu bổ sung mà không phải
tạo các lớp model view mới cho từng phương thức hành động.
Vấn đề với view là trình biên dịch không thể kiểm tra việc sử
dụng các thuộc tính trên các đối tượng động, giống như các
views không sử dụng biểu thức @model. Có thể khó đánh giá khi
nào nên sử dụng một lớp model view mới và quy tắc ngón tay cái
là tạo một lớp model view mới khi cùng một thuộc tính mô hình
khung nhìn được sử dụng bởi nhiều hành động hoặc khi một
phương thức hành động thêm nhiều hơn hai hoặc ba thuộc tính
cho view bag.
Using Temp Data

Tính năng temp data cho phép bộ điều khiển bảo toàn dữ
liệu từ yêu cầu này sang yêu cầu khác, điều này rất hữu
ích khi thực hiện chuyển hướng. Temp data được lưu trữ
bằng cookie trừ khi trạng thái phiên được bật khi nó được
lưu dưới dạng dữ liệu phiên. Không giống như dữ liệu
phiên, các giá trị temp data được đánh dấu để xóa khi
chúng được đọc và bị xóa khi yêu cầu đã được xử lý.
Thêm một tệp lớp có tên CubedController.cs vào thư mục
WebApp/Controllers và sử dụng nó để định nghĩa bộ điều
khiển được hiển thị trong Liệt kê 22-7
Bộ điều khiển Cubed xác định phương thức Chỉ mục chọn chế độ xem có tên là Cubed.
Ngoài ra còn có một hành động Cube, dựa trên quy trình liên kết mô hình để lấy giá trị cho
tham số num của nó từ yêu cầu (quy trình được mô tả chi tiết trong Chương 28). Phương
thức hành động Cubed thực hiện phép tính của nó và lưu trữ giá trị num cũng như kết quả
tính toán bằng cách sử dụng thuộc tính TempData, thuộc tính này trả về một từ điển được
sử dụng để lưu trữ các cặp khóa-giá trị. Vì tính năng temp data được xây dựng dựa trên tính
năng phiên, nên chỉ các giá trị có thể được nối tiếp thành chuỗi có thể được lưu trữ, đó là lý
do tại sao tôi chuyển đổi cả hai giá trị kép thành chuỗi trong Liệt kê 22-7. Khi các giá trị được
lưu trữ dưới dạng temp data, phương thức Cube sẽ thực hiện chuyển hướng đến phương
thức Index. Để cung cấp cho bộ điều khiển một chế độ view, hãy thêm tệp Razor View có
tên Cubed.cshtml vào thư mục WebApp/Views/Shared với nội dung được hiển thị trong Liệt
kê 22-8.
Lớp cơ sở được sử dụng cho Razor views cung cấp quyền truy cập vào dữ liệu tạm thời
thông qua thuộc tính TempData, cho phép đọc các giá trị trong các biểu thức. Trong trường
hợp này, dữ liệu tạm thời được sử dụng để đặt nội dung của phần tử đầu vào và hiển thị tóm
tắt kết quả. Việc đọc một giá trị dữ liệu tạm thời không xóa giá trị đó ngay lập tức, điều đó
có nghĩa là các giá trị có thể được đọc lặp lại trong cùng một view. Chỉ khi yêu cầu đã được
xử lý thì các giá trị được đánh dấu mới bị xóa.
USING THE TEMP DATA ATTRIBUTE
Controllers có thể xác định các thuộc tính được tô điểm bằng thuộc tính TempData, đây là một cách thay thế cho
việc sử dụng thuộc tính TempData, như sau:

Các giá trị được gán cho các thuộc tính này sẽ tự
động được thêm vào kho lưu trữ dữ liệu tạm thời và
không có sự khác biệt nào trong cách chúng được
truy cập trong dạng xem. Sử dụng từ điển TempData
để lưu trữ các giá trị vì nó làm cho mục đích của
phương thức hành động trở nên rõ ràng đối với các
nhà phát triển khác. Tuy nhiên, cả hai cách tiếp cận
đều hoàn toàn hợp lệ và việc lựa chọn giữa chúng là
vấn đề ưu tiên.
 Working with Layout
Các dạng xem trong ứng dụng ví dụ chứa các phần tử trùng lặp xử lý việc thiết lập tài liệu HTML,
xác định phần đầu, tải tệp Bootstrap CSS, v.v. Razor hỗ trợ bố cục, hợp nhất nội dung chung trong
một tệp duy nhất có thể được sử dụng bởi bất kỳ chế độ xem nào.
Bố cục thường được lưu trữ trong thư mục Views/Shared vì chúng thường được sử dụng bởi các
phương thức hành động của nhiều bộ điều khiển. Nếu bạn đang sử dụng Visual Studio, nhấp chuột
phải vào thư mục Views/Shared , chọn Add ➤ New item từ menu bật lên và chọn Razor Layout,
như trong Hình 22-4. Đảm bảo tên của tệp là _Layout.cshtml và nhấp vào nút Add để tạo tệp mới.
Thay thế nội dung được Visual Studio thêm vào tệp bằng các phần tử được hiển thị trong Liệt kê
22-9.
Nếu bạn đang sử dụng Visual Studio Code, hãy tạo một tệp có tên _Layout.cshtml
trong thư mục Views/Shared và thêm nội dung được hiển thị trong Liệt kê 22-9.
Bố cục chứa nội dung chung sẽ được sử dụng bởi nhiều view. Nội dung duy nhất cho mỗi view được
chèn vào phản hồi bằng cách gọi phương thức RenderBody, được kế thừa bởi lớp RazorPage<T>, như
được mô tả trong Chương 21. Các view sử dụng các bố cục có thể chỉ tập trung vào nội dung duy nhất
của chúng, như được hiển thị trong Liệt kê 22-10.
Bố cục được chọn bằng cách thêm một khối mã, được biểu thị bằng các ký tự @{ and
}, đặt thuộc tính Layout được kế thừa từ lớp RazorPage<T>. Trong trường hợp này,
thuộc tính Layout được đặt thành tên của tệp bố cục. Như với các chế độ xem thông
thường, bố cục được chỉ định mà không có đường dẫn hoặc phần mở rộng tệp và
công cụ Razor sẽ tìm kiếm trong các thư mục /Views/[controller] và /Views/Shared
để tìm tệp phù hợp. Sử dụng trình duyệt để yêu cầu http://localhost:5000, và bạn sẽ
thấy phản hồi như trong Hình 22-5.
Configuring
Layouts Using the
View Bag
Chế độ view có thể cung cấp bố cục
với các giá trị dữ liệu, cho phép tùy
chỉnh nội dung chung do view cung
cấp. Thuộc tính view bag được xác
định trong khối mã chọn layout, như
trong Liệt kê 22-11.
View thiết lập một thuộc tính Title, có thể được sử dụng trong layout, như trong Liệt kê 22-12.
Using a View Start File
Thay vì đặt thuộc tính Title trong mọi dạng view, bạn có thể thêm tệp bắt đầu dạng view vào dự
án cung cấp giá trị Layout mặc định. Nếu bạn đang sử dụng Visual Studio, nhấp chuột phải vào
mục thư mục Views trong Solution Explorer, chọn Add ➤ New item và tìm Razor View Start, như
trong Hình 22-7. Đảm bảo rằng tên của tệp là _ViewStart.cshtml và nhấp vào nút Add để tạo tệp,
tệp này sẽ có nội dung được hiển thị trong Liệt kê 22-13.
Chế độ View không xác định loại view model và không cần đặt thuộc tính Layout vì
dự án chứa tệp view start. Kết quả là nội dung trong Liệt kê 22-14 sẽ được thêm vào
phần nội dung của nội dung HTML của phản hồi. Sử dụng trình duyệt để điều hướng
đến http://localhost:5000/second, và bạn sẽ thấy phản hồi trong Hình 22-8
Overriding the Default Layout
Có hai tình huống mà bạn có thể cần phải xác định thuộc tính Layout trong một view ngay cả khi có một tệp view start
trong dự án. Trong tình huống đầu tiên, một view yêu cầu một bố cục khác với bố cục được chỉ định bởi tệp view start. Để
minh họa, hãy thêm tệp Razor layout có tên_ImportantLayout.cshtml vào thư mục Views/Shared với nội dung được hiển
thị trong Liệt kê 22-15.

Giá trị Layout trong tệp view start được ghi đè bởi giá trị trong view, cho phép áp dụng các bố cục khác nhau. Sử dụng
trình duyệt để yêu cầu http://localhost:5000, và phản hồi sẽ được tạo bằng cách sử dụng bố cục mới, như trong Hình 22-9
 Tình huống thứ hai có thể cần thuộc tính Layout là khi view chứa tài liệu HTML hoàn chỉnh và
hoàn toàn không yêu cầu bố cục. Để xem sự cố, hãy mở PowerShell command prompt mới và
chạy lệnh được hiển thị trong Liệt kê 22-17

Lệnh này gửi một yêu cầu HTTP GET mà phản hồi sẽ được tạo ra bằng cách sử dụng tệp List.cshtml trong thư
mục Views/Home. Dạng view này chứa một tài liệu HTML hoàn chỉnh, được kết hợp với nội dung trong view
được xác định bởi tệp view start, tạo ra một tài liệu HTML không đúng định dạng, như sau:
 Using Layout
Sections
Công cụ Razor View hỗ trợ khái niệm về
các sections, cho phép bạn cung cấp các
vùng nội dung trong một bố cục. Các
Razor view cấp khả năng kiểm soát tốt hơn
đối với phần nào của view được chèn vào
bố cục và vị trí chúng được đặt. Để minh
họa tính năng của các sections, tôi đã chỉnh
sửa tệp /Views/Home/Index.cshtml, như
trong Liệt kê 22-19. Trình duyệt sẽ hiển thị
lỗi khi bạn lưu các thay đổi trong danh
sách này, lỗi này sẽ được khắc phục khi
bạn thực hiện các thay đổi tương ứng trong
danh sách tiếp theo.
Các sections được xác định bằng cách sử dụng biểu thức Razor @section theo sau là tên cho sections đó. Liệt
kê 22-19 xác định các sections có tên là Header và Footer, và các sections có thể chứa cùng một hỗn hợp nội
dung và biểu thức HTML, giống như phần chính của view. Các sections được áp dụng trong một bố cục với
biểu thức @RenderSection, như được hiển thị trong Liệt kê 22-20.

Khi bố cục được áp dụng, biểu thức RenderSection sẽ chèn nội dung
của phần đã chỉ định vào phản hồi. Các vùng của chế độ xem không có
trong một sections được chèn vào phản hồi bằng phương thức
RenderBody.
Các sections cho phép các views cung cấp các đoạn nội dung cho bố cục mà không chỉ định cách
chúng được sử dụng. Ví dụ, Liệt kê 22-21 xác định lại bố cục để hợp nhất phần nội dung và các
phần thành một bảng HTML duy nhất
 Theo mặc định, một view phải chứa tất cả các sections có lệnh gọi
RenderSection trong bố cục và một ngoại lệ sẽ được đưa ra nếu bố cục
Using Optional yêu cầu một section mà view chưa được xác định. Liệt kê 22-22 thêm
một cuộc gọi đến phương thức RenderSection yêu cầu một phần có tên
Layout Sections Summary.
Có hai cách để giải quyết vấn đề này. Đầu tiên là tạo một section tùy chọn, section này
sẽ chỉ được hiển thị nếu nó được xác định bởi view. Các sections tùy chọn được tạo bằng
cách chuyển đối số thứ hai cho phương thức RenderSection, như trong Liệt kê 22-23
Testing for Layout
Sections
Phương thức IsSectionDefined được sử dụng để xác định
xem view có xác định một phần cụ thể hay không và có thể
được sử dụng trong biểu thức if để hiển thị nội dung dự
phòng, như trong Liệt kê 22-24
Phương thức IsSectionDefined được gọi với tên của phần
bạn muốn kiểm tra và trả về true nếu dạng xem xác định
phần đó. Trong ví dụ này, tôi đã sử dụng trình trợ giúp này
để hiển thị nội dung dự phòng khi view không xác định phần
Summary.
Using Partial Views
Bạn sẽ thường xuyên cần sử dụng cùng một tập hợp các phần tử và biểu thức HTML ở một số vị trí khác
nhau. Partial views là views chứa các đoạn nội dung sẽ được đưa vào các views khác để tạo ra các phản hồi
phức tạp mà không bị trùng lặp.
Enabling Partial Views
Partial views được áp dụng bằng tính năng được gọi là trình trợ giúp thẻ, được mô tả chi tiết trong Chương
25; trình trợ giúp thẻ được cấu hình trong tệp view imports, tệp này đã được thêm vào dự án trong Chương
21. Để kích hoạt tính năng cần thiết cho partial views, hãy thêm câu lệnh được hiển thị trong Liệt kê 22-25
vào tệp _ViewImports.cshtml.

Creating a Partial View

Partial views chỉ là các tệp CSHTML thông thường và chỉ có cách chúng được sử dụng mới phân biệt
chúng với views tiêu chuẩn. Nếu bạn đang sử dụng Visual Studio, nhấp chuột phải vào thư mục
Views/Home, chọn Add➤ New item và sử dụng Razor View template để tạo tệp có tên
_RowPartial.cshtml. Khi tệp đã được tạo, hãy thay thế nội dung bằng những nội dung được hiển thị trong
Liệt kê 22-26. Nếu bạn đang sử dụng Visual Studio Code, hãy thêm một tệp có tên _RowPartial.cshtml vào
thư mục Views/Home và thêm vào đó nội dung được hiển thị trong Liệt kê 22-26
Applying a Partial View: Partial views được áp dụng bằng cách thêm phần tử một phần vào view
hoặc layout khác.

Các thuộc tính được áp dụng cho phần tử một phần kiểm soát việc lựa chọn và cấu hình của Partial
views, như được mô tả trong Bảng 22-2
Phần tử partial trong Liệt kê 22-27 sử dụng thuộc tính name để chọn _RowPartial view và thuộc tính model để chọn
đối tượng Product sẽ được sử dụng làm đối tượng view model. Phần tử partial được áp dụng trong biểu thức @foreach,
có nghĩa là nó sẽ được sử dụng để tạo từng hàng trong bảng mà bạn có thể thấy bằng cách sử dụng trình duyệt để yêu
cầu http://localhost:5000/home/list
Selecting the Partial View Model Using an Expression
Thuộc tính for được sử dụng để đặt partial view’s model bằng cách sử dụng biểu thức được áp dụng cho
view’s model, đây là một tính năng dễ thể hiện hơn là mô tả. Thêm partial view có tên _CellPartial.cshtml
vào thư mục Views/Home với nội dung được hiển thị trong Liệt kê 22-28

Partial view này có một chuỗi đối tượng view model, đối tượng này được sử dụng làm nội dung của thành
phần ô bảng; phần tử ô của bảng được tạo kiểu bằng cách sử dụng khung CSS Bootstrap. Trong Liệt kê 22-
29, tôi đã thêm một phần tử vào tệp _RowPartial.cshtml sử dụng partial view _CellPartial để hiển thị ô của
bảng cho tên của đối tượng Product
Understanding Content-Encoding
Razor Views cung cấp hai tính năng hữu ích để mã hóa nội dung. Tính năng mã hóa nội dung HTML đảm
bảo rằng phản hồi biểu thức không thay đổi cấu trúc của phản hồi được gửi tới trình duyệt, đây là một tính
năng bảo mật quan trọng. Tính năng mã hóa JSON mã hóa một đối tượng dưới dạng JSON và chèn nó vào
phản hồi, đây có thể là một tính năng gỡ lỗi hữu ích và cũng có thể hữu ích khi cung cấp dữ liệu cho các
ứng dụng JavaScript. Cả hai tính năng mã hóa được mô tả trong các phần sau.

Understanding HTML Encoding

Công cụ Razor View mã hóa các kết quả biểu thức để làm cho chúng an toàn khi đưa vào tài liệu
HTML mà không thay đổi cấu trúc của nó. Đây là một tính năng quan trọng khi xử lý nội dung do
người dùng cung cấp, những người có thể cố gắng phá hoại ứng dụng hoặc vô tình nhập nội dung
nguy hiểm. Liệt kê 22-30 thêm một phương thức hành động vào bộ điều khiển Home để chuyển
một đoạn HTML sang phương thức View.