Asp Net Core MVC

View Layout, View Start, View Imports trong ASP.NET Core

Posted on by ComdyVN

View Layout, View Start, View Imports trong ASP.NET Core

MVC tách giao diện người dùng (UI) của một ứng dụng thành ba phần sau:

  • Model: Một tập hợp các lớp mô tả dữ liệu bạn đang làm việc.
  • View: Định nghĩa giao diện người dùng.
  • Controller: Một tập hợp các lớp xử lý giao tiếp từ người dùng, luồng ứng dụng tổng thể và logic dành riêng cho ứng dụng.
Kiến trúc MVC

Ở 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.

View Layout 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ư:

  • Có một khu vực trên cùng trên mỗi trang để hiển thị logo và menu điều hướng.
  • Có một thanh bên trái hoặc phải với các liên kết và thông tin bổ sung.
  • Chân trang ở cuối trang với một số nội dung.

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.

View Layout là gì?

Bây giờ chúng ta sẽ cùng tìm hiểu view Layout là gì.

  • View Layout là một Razor view với phần mở rộng *.cshtml. Bạn có có thể đặt tên cho view Layout theo cách bạn muốn. Trong chương này, chúng tôi sẽ sử dụng tên mặc định của view Layout là _Layout.cshtml.
  • Đây là tên mặc định cho view Layout và dấu gạch dưới ở đâu là không bắt buộc. Đó chỉ là một quy ước mà nhiều nhà phát triển tuân theo để xác định nó chỉ là một phần của view (partial view).
  • Chúng ta có thể thiết lập những view khác hiển thị bên trong view Layout tại một vị trí cụ thể.
  • Khi sử dụng view Layout thì view 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, …
  • View Index.cshtml chỉ cần hiển thị nội dung của model, view Layout sẽ xử lý những thứ khác.
Mô hình sử dụng view Layout trong ASP.NET Core

Sử dụng view Layout trong ASP.NET Core

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.

Tạo view _Layout.cshtml trong ASP.NET Core

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.

Nội dung file _Layout.cshtml trong ASP.NET Core

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:

  • Trước tiên, chúng ta cần nói với ASP.NET Core MVC rằng chúng ta muốn sử dụng view Layout cho view này.
  • Thứ hai, chúng ta cần thiết lập giá trị cho thuộc tính Title trong ViewBag.

Khi bạn chạy ứng dụng, bạn sẽ thấy trang chủ như sau.

Home page sử dụng view Layout trong ASP.NET Core

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.

View Start trong ASP.NET Core

View Start là gì?

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.

ViewStart.cshtml trong ASP.NET Core

Sử dụng View Start trong ASP.NET Core

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.

Tạo ViewStart trong ASP.NET Core

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:

File _ViewStart.cshtml trong ASP.NET Core

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";.

  • Khi MVC framework hiển thị một view, nó sẽ tìm kiếm xem có file View Start ở đâu đó trong hệ thống phân cấp thư mục hay không.
  • Chúng tôi đã đặt _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.
  • Nếu chúng ta chỉ đặt _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.
  • Chúng ta có thể có nhiều file _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ả:

Home page sử dụng view Layout và ViewStart trong ASP.NET Core

View Imports trong ASP.NET Core

View Imports là gì?

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.

File _ViewImports.cshtml trong ASP.NET Core

Sử dụng View Imports trong ASP.NET Core

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.

File Index.cshtml

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.

MVC View Imports

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.

File _ViewImports.cshtml

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ả.

Trang chủ sử dụng _ViewImports.cshtml trong ASP.NET Core

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *