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.cshtmltrong 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.cshtmlvà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ả.
Trong bài viết này, tôi sẽ giới thiệu một số thư viện .NET Core hữu ích nhất mà mọi nhà phát triển cần biết.
Requets life cycle trong ASP.NET Core MVC là một chuỗi các thành phần tương tác với nhau để xử lý HTTP request và trả về response cho client.
Trong bài viết này, chúng tôi sẽ so sánh hiệu suất HTTP của ASP.NET Core và Go sử dụng mô hình kiến trúc MVC.
Trong bài viết này, tôi sẽ chia sẻ các best practice, mẹo và thủ thuật về việc sử dụng Dependency Injection (DI) trong ứng dụng ASP.NET Core.