MVC tách giao diện người dùng (UI) của một ứng dụng thành ba phần sau:
Ở hướng dẫn này, chúng ta sẽ cùng tìm hiểu về View Layout, View Start, View Imports trong ASP.NET Core.
Trong phần trên, chúng ta đã hiểu về view và Razor view. Hầu hết các trang web và ứng dụng web sẽ có các trang với một số thành phần giống nhau như:
Mỗi trang của ứng dụng sẽ có các thành phần giống nhau này. Trong ASP.NET Core chúng ta có thể sử dụng view Layout để tránh trùng lặp các thành phần này trong mỗi trang.
Bây giờ chúng ta sẽ cùng tìm hiểu view Layout là gì.
_Layout.cshtml
.Index.cshtml
không cần quan tâm đến các thành phần dùng chung như: header, logo, menu điều hướng, thanh bên trái hoặc bên phải, footer, ...Hãy để chúng tôi lấy một ví dụ đơn giản. Nếu bạn có nhiều view, thì bạn sẽ thấy rằng tất cả các view sẽ chứa một số thành phần trùng lặp như thẻ HTML, thẻ head và thẻ body .
Mặc dù chúng tôi không có menu điều hướng, footer trong ứng dụng này, nhưng rất có thể trong một ứng dụng thực tế sẽ có và chúng tôi không muốn lặp lại những thành phần này trong view.
Chúng tôi sẽ tạo view Layout trong thư mục Shared
bên trong thư mục Views
của project. Đây là một thư mục để chia sẻ các view dùng chung trong ASP.NET Core MVC. Chúng ta nhấp chuột phải vào thư mục Shared và chọn Add → New Item.
Trong ngăn ở giữa, bạn chọn MVC View Layout Page. Chúng ta sẽ giữ nguyên tên mặc định của view Layout là _Layout.cshtml. Cuối cùng vào nút Add. Đây là những gì bạn nhận được theo mặc định trong view _Layout.cshtml.
Chúng tôi muốn view Layout chịu trách nhiệm quản lý phần head
và body
của tài liệu HTML. Vì view này là một Razor view nên chúng tôi có thể sử dụng các biểu thức C#. Bây giờ chúng tôi sẽ thêm một thẻ div
để hiển thị thời gian hiện tại như sau:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@DateTime.Now
</div>
<div>
@RenderBody()
</div>
</body>
</html>
Trong đoạn mã trên, bạn sẽ thấy các biểu thức @RenderBody
và @ViewBag.Title
. Khi action Index
của HomeController được gọi, nó sẽ trả về một trang HTMl cho người dùng bằng cách tạo ra max HTML cho view Index.cshtml
sau đó đặt vào trong view Layout tại vị trí @RenderBody
.
Biểu thức khác trong file này là @ViewBag.Title
. ViewBag là cấu trúc dữ liệu có thể được thêm vào bất kỳ thuộc tính và bất kỳ dữ liệu nào bạn muốn vào ViewBag. Chúng tôi có thể thêm ViewBag.Title, ViewBag.CurrentDate hoặc bất kỳ thuộc tính nào chúng tôi muốn thêm vào ViewBag.
Bây giờ chúng ta sẽ đi đến view /Views/Home/Index.cshtml
. Nó sẽ trông như thế này:
@using FirstAppDemo.Controllers
@model HomePageViewModel
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
</head>
<body>
<h1>Welcome!</h1>
<table>
@foreach (var employee in Model.Employees)
{
<tr>
<td>
@Html.ActionLink(employee.Id.ToString(), "Details", new
{ id = employee.Id })
</td>
<td>@employee.Name</td>
</tr>
}
</table>
</body>
</html>
Chúng ta sẽ xóa những thành phần đã có trong view Layout như thẻ html
, thẻ head
, thẻ body
. File Index.cshtml
sau khi xóa sẽ trông như thế này:
@using FirstAppDemo.Controllers
@model HomePageViewModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Home";
}
<h1>Welcome!</h1>
<table>
@foreach (var employee in Model.Employees)
{
<tr>
<td>
@Html.ActionLink(employee.Id.ToString(), "Details", new { id = employee.Id })
</td>
<td>@employee.Name</td>
</tr>
}
</table>
Trong file Index.cshtml
chúng tôi đã thực hiện thêm 2 điều sau:
Title
trong ViewBag
.Khi bạn chạy ứng dụng, bạn sẽ thấy trang chủ như sau.
Lưu ý: Khi bạn sử dụng Visual Studio để tạo project theo mẫu có sẵn thì đã có sẵn view_Layout.cshtml
trong thư mục/Views/Shared
.
Trong phần này, chúng ta sẽ thảo luận về View Start. Razor view trong MVC có một quy ước là nó sẽ tìm bất kỳ file nào có tên _ViewStart.cshtml
và thực thi mã bên trong file này trước khi thực thi mã bên trong một view bất kỳ. View Start được sử dụng để chỉ định view Layout cho những view khác.
Hãy để chúng tôi lấy một ví dụ đơn giản để xem View Start hoạt động như thế nào. Mỗi khi thêm một view mới, chúng ta sẽ phải chỉ định view Layout cho view đó. Chúng tôi không muốn lặp đi lặp lại việc này, và View Start sẽ giúp chúng tôi khắc phục vấn đề này. Để tạo ViewStart, bạn nhấp chuột phải vào thư mục Views và chọn Add → New Item.
Tiếp đó bạn chọn MVC View Start Page ở khung giữa. Giữ nguyên tên mặc định của View Start là _ViewStart.cshtml
và bấm vào nút Add. File _ViewStart.cshtml trông sẽ như hình dưới đây:
Các view nằm cùng thư mục hoặc thư mục con với View Start sẽ sử dụng view Layout được chỉ định trong file _ViewStart.cshtml
.
Bây giờ chúng ta đi đến file Index.cshtml và xóa dòng Layout = "~/Views/Shared/_Layout.cshtml";
.
_ViewStart.cshtml
trực tiếp vào thư mục Views. Điều này sẽ tác động đến tất cả các view trong tất cả các thư mục bên trong thư mục Views và cả các view trong thư mục Home, cũng như thư mục Shared, cũng như mọi thư mục khác mà chúng tôi có thể thêm trong tương lai._ViewStart.cshtml
vào trong thư mục Home, thì View Start sẽ chỉ có tác dụng lên những view trong thư mục Home._ViewStart.cshtml
trong trường hợp chúng ta có nhiều view Layout và muốn áp dụng những Layout này cho những controller khác nhau.Chạy ứng dụng và xem kết quả:
Ngoài file ViewStart, ASP.NET Core MVC còn có file View Imports mà hệ thống sẽ tìm kiếm khi hiển thị bất kỳ view nào.
Giống như file ViewStart, chúng ta có thể đặt ViewImports.cshtml vào một thư mục bất kỳ và file View Imports này sẽ ảnh hưởng đến tất cả các view trong phân cấp thư mục đó.
File View Imports là nơi chúng ta có thể khai báo sử dụng các namespace và inject các dịch vụ thường xuyên sử dụng trong các view.
Trong view Index.cshtml
chúng ta xóa dòng code @using FirstAppDemo.Controllers
đi. File Index.cshtml
bây giờ trông như sau:
@model HomePageViewModel
@{
ViewBag.Title = "Home";
}
<h1>Welcome!</h1>
<table>
@foreach (var employee in Model.Employees)
{
<tr>
<td>
@Html.ActionLink(employee.Id.ToString(), "Details", new { id = employee.Id })
</td>
<td>@employee.Name</td>
</tr>
}
</table>
Sử dụng các lệnh sẽ cho phép mã được tạo từ chế độ xem Dao cạo để biên dịch chính xác. Nếu không sử dụng các lệnh, trình biên dịch C # sẽ không thể tìm thấy loại Nhân viên này. Để xem loại nhân viên, chúng ta hãy xóa chỉ thị bằng cách sử dụng tệp Index.cshtml .
@model HomePageViewModel
@{
ViewBag.Title = "Home";
}
<h1>Welcome!</h1>
<table>
@foreach (var employee in Model.Employees)
{
<tr>
<td>
@Html.ActionLink(employee.Id.ToString(), "Details", new { id = employee.Id })
</td>
<td>@employee.Name</td>
</tr>
}
</table>
Chúng ta chạy ứng dụng và sẽ nhận được thông báo lỗi như hình sau.
Bạn sẽ thấy một trong những thông báo lỗi nói rằng không thể tìm thấy kiểu dữ liệu hoặc namespace HomePageViewModel. Để xử lý lỗi này, thay vì thêm đoạn code using trở lại view Index.cshtml
thì bạn có thể sử dụng ViewImports. Bạn nhấn chuột phải vào thư mục Views rồi chọn Add → New Item.
Trong ngăn giữa, bạn chọn MVC View Imports Page. Giữ nguyên tên mặc định là _ViewImports.cshtml
rồi nhấn vào nút Add.
Bây giờ bạn thêm dòng @using FirstAppDemo.Controllers
vào file _ViewImports.cshtml.
Cuối cùng, chạy chương trình và đây là kết quả.
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong bài viết này, chúng ta sẽ tìm hiểu cách đặt tên cho các endpoint để có thể tạo liên kết đến chúng từ bất kỳ đâu trong ứng dụng ASP.NET Core.
Trong bài viết này, chúng ta sẽ khám phá Model trong ASP.NET Core và các sub-framework khác như ASP.NET Core MVC, Razor Pages, Endpoints và Blazor.
Bài viết này sẽ giới thiệu cho bạn những điều cơ bản về việc thiết lập một dự án ASP.NET Core để sử dụng các component Svelte phía máy khách.
Bài viết này hướng dẫn cách triển khai một background service trong ứng dụng ASP.NET Core và cách giao tiếp với background service từ một HTTP request.