View trong ASP.NET MVC

Trong phần này, bạn sẽ tìm hiểu về View trong ASP.NET MVC.

View là giao diện người dùng. View hiển thị dữ liệu từ model cho người dùng và cũng cho phép họ sửa đổi dữ liệu.

View trong ASP.NET MVC được lưu trong thư mục Views. Các phương thức hành động khác nhau của controller có thể hiển thị các view khác nhau.

Do đó, trong thư mục Views chứa một thư mục riêng cho mỗi controller và có cùng tên với controller, thư mục này sẽ chứa các view của controller.

Ví dụ: view của HomeController sẽ nằm trong thư mục Views > Home. Tương tự, view của StudentController sẽ nằm trong thư mục Views > Student như được hiển thị bên dưới.

Thư mục Views trong ASP.NET CORE
Ghi chú: Thư mục Shared chứa view, layout hoặc partial view có thể được sử dụng ở trong bất kỳ controller hoặc view nào.

Razor View

Microsoft đã giới thiệu Razor View từ ASP.NET MVC 3. Bạn có thể viết hỗn hợp các thẻ HTML và mã C# trong Razor View.

Razor View sử dụng cú pháp Razor bắt đầu bằng ký tự @ cho mã C# thay vì cú pháp <% ... %> truyền thống. Bạn có thể sử dụng cú pháp C# hoặc Visual Basic để viết mã phía máy chủ bên trong Razor View.

Razor View tối đa hóa tốc độ viết mã bằng cách giảm thiểu số lượng ký tự cần thiết khi tạo View. Các tập tin xem Razor View có phần mở rộng là .cshtml hoặc vbhtml.

ASP.NET MVC hỗ trợ các loại tập tin của View như sau:

Loại tập tin Mô tả
.cshtml C# Razor view. Hỗ trợ C# với các thẻ HTML.
.vbhtml VB.NET Razor view. Hỗ trợ VB.NET với các thẻ HTML.

Tạo View trong ASP.NET MVC

Chúng tôi đã tạo StudentController và lớp model là Student trong phần trước. Bây giờ, hãy tạo view cho StudentController và tìm hiểu cách sử dụng lớp Model trong View.

Chúng ta sẽ tạo view sẽ được hiển thị từ phương thức Index của StudentController. Đầu tiên, hãy mở một lớp StudentController -> nhấp chuột phải vào bên trong phương thức Index -> bấm Add View...

Thêm view trong ASP.NET MVC

Trong hộp thoại Add View, giữ nguyên tên của view là Index. Cách tốt nhất là đặt tên view giống như tên phương thức hành động.

Việc này là để tránh nhầm lẫn và bạn cũng không phải chỉ định rõ tên view trong phương thức hành động khi trả về.

Chọn mẫu view. Trong danh sách sổ xuống có các mẫu view cho Create, Delete, Details, Edit, List hoặc view rỗng. Chọn mẫu "List" vì chúng ta muốn hiển thị danh sách sinh viên trong view.

Tạo View trong ASP.NET MVC

Bây giờ, chọn lớp model cho view trong mục Model class. Danh sách sổ xuống sẽ hiển thị tên của tất cả các lớp trong thư mục Models. Chúng tôi đã tạo lớp model Student trong phần trước, vì vậy nó sẽ được đưa vào danh sách sổ xuống như hình sau.

Tạo View trong ASP.NET MVC

Đánh dấu vào hộp kiểm "Use a layout page" và chọn trang _Layout.cshtml cho view này và sau đó nhấp vào nút Add. Chúng ta sẽ tìm hiểu chi tiết trang _Layout.cshtml là gì ở những bài viết sau, còn bây giờ hãy cứ xem nó giống như một trang chính trong ASP.NET MVC.

Điều này sẽ tạo view Index trong thư mục Views -> Student như được hiển thị trong hình ảnh bên dưới:

Tạo View trong ASP.NET MVC

Đoạn mã sau đây là nội dụng của view Index.cshtml đã được tạo ở trên.

@model IEnumerable<MVC_BasicTutorials.Models.Student>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.StudentName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.StudentName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
            @Html.ActionLink("Details", "Details", new { id=item.StudentId  }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.StudentId })
        </td>
    </tr>
}

</table>

Như bạn có thể thấy trong view Index trên, nó chứa cả mã HTML và Razor. Cú pháp biểu thức Razor một dòng bắt đầu bằng ký hiệu @. @Html là một lớp trợ giúp để tạo các thẻ HTML. Bạn sẽ tìm hiểu chi tiết về cú pháp Razor và lớp trợ giúp HTML trong các phần sắp tới.

Razor view trong ASP.NET MVC

Khi thực thi ứng dụng thì view Index ở trên sẽ có kết quả giống như hình ảnh dưới đây.

Index view trong ASP.NET MVC
Lưu ý: Tất cả view trong ASP.NET MVC đều được bắt nguồn từ lớp WebViewPage có trong namespace System.Web.Mvc.

Những điểm cần nhớ:

  1. View là giao diện người được dùng để hiển thị dữ liệu và xử lý tương tác của người dùng.
  2. Thư mục Views chứa các thư mục riêng cho mỗi Controller.
  3. ASP.NET MVC hỗ trợ thêm Razor View bên cạnh .aspx truyền thống.
  4. Các tập tin Razor View có phần mở rộng là .cshtml hoặc .vbhtml.


Bài viết liên quan:

Lớp HtmlHelper trong ASP.NET MVC là gì? Cách sử dụng HtmlHelper để tạo ra các phần tử HTML trong Razor View.

Cách sử dụng cú pháp Razor để viết mã C# hoặc VB.NET trong Razor View trong ASP.NET MVC.

Tìm hiểu cách tạo view cho chức năng chỉnh sửa thông tin sinh viên trong ASP.NET MVC.