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.

Partial View trong ASP.NET MVC

Ở phần này, bạn sẽ tìm hiểu partial view là gì và cách sử dụng nó trong ứng dụng ASP.NET MVC.

Partial view là một thành phần có thể sử dụng lại của một trang web. Nó là tệp .cshtml hoặc .vbhtml có chứa mã HTML. Nó có thể được sử dụng trong một hoặc nhiều View hoặc Layout View. Bạn có thể sử dụng cùng một partial view ở nhiều nơi giúp loại bỏ mã trùng lặp.

Hãy tạo một partial view cho menu sau, để chúng ta có thể sử dụng cùng một menu trong nhiều layout view mà không cần viết lại cùng một mã ở mọi nơi.

Partial View trong ASP.NET MVC

Chúng ta đã tạo ứng dụng MVC đầu tiên của mình trước đây. Mở tệp _Layout.cshtml và bạn sẽ thấy mã HTML sau cho thanh menu ở trên. Chúng ta sẽ cắt và dán mã này trong một partial view riêng biệt.

Tạo một partial view mới

Để tạo partial view, nhấp chuột phải vào thư mục Shared -> nhấp vào Add -> nhấp vào View. Cửa sổ Add View mở lên, như hình dưới đây.

Bạn có thể tạo partial view trong bất kỳ thư mục View nào. Tuy nhiên, bạn nên tạo tất cả các partial view của mình trong thư mục Shared để chúng có thể được sử dụng trong nhiều view khác nhau.

Trong cửa sổ Add View, nhập tên partial view là _MenuBar, chọn hộp kiểm "Create as a partial view". Chúng ta không cần sử dụng bất kỳ model nào cho partial view này, vì vậy hãy chọn Template là Empty (without model) và nhấp vào nút Add. Điều này sẽ tạo ra một partial view trống trong thư mục Shared.

Bây giờ bạn có thể cắt đoạn mã trên cho thanh điều hướng và dán nó vào _MenuBar.cshtml như hình dưới đây:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

Như vậy, bạn đã tạo xong một partial view mới. Hãy xem cách hiển thị partial view.

Hiển thị partial view

Bạn có thể hiển thị partial view trong view sử dụng các phương thức của HTML Helper là: @html.Partial(), @html.RenderPartial()@html.RenderAction().

Phương thức Html.Partial()

Phương thức @Html.Partial() hiển thị partial view được chỉ định. Nó nhận tên partial view dưới dạng tham số chuỗi và trả về MvcHtmlString. Nó trả về một chuỗi HTML, vì vậy bạn có cơ hội sửa đổi HTML trước khi hiển thị.

Truy cập MSDN để biết các quá tải của phương thức Html.Partial().

Bây giờ, thêm partial view _MenuBar vào trong _Layout.cshtml bằng cách sử dụng @html.Partial("_MenuBar"), như được hiển thị bên dưới.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    
    @Html.Partial("_MenuBar")
    
    @* you can modify result as below   *@
    @* var result = Html.Partial("_MenuBar") *@
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Phương thức Html.RenderPartial ()

Phương thức @html.RenderPartial() cũng giống như phương thức @html.Partial() ngoại trừ việc nó ghi HTML kết quả của partial view trực tiếp vào luồng HTTP response. Vì vậy, bạn có thể sửa đổi HTML của nó trước khi kết xuất.

Truy cập docs.microsoft.com để biết tình trạng quá tải của phương thức RenderPartial () .

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @{
      Html.RenderPartial("_MenuBar");   
    }
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

Phương thức RenderPartial() trả về void, do đó, một dấu chấm phẩy được yêu cầu ở cuối câu lệnh, và vì vậy nó phải được kèm theo trong @{ }.

Phương thức Html.RenderAction()

Phương thức @html.RenderAction() thực hiện phương thức hành động cụ thể và kết xuất kết quả. Phương thức hành động đã chỉ định phải được đánh dấu bằng thuộc tính [ChildActionOnly] và trả về PartialViewResult bằng phương thức PartialView().

Truy cập MSDN để biết thêm các quá tải của phương thức Html.RenderAction().

Để hiển thị partial view bằng phương thức RenderAction(), trước tiên hãy tạo một phương thức hành động HttpGet và áp dụng thuộc tính ChildActionOnly như được hiển thị bên dưới.

public class HomeController : Controller
{
    [ChildActionOnly]
    public ActionResult RenderMenu()
    {
        return PartialView("_MenuBar");
    }
}

Bây giờ, hãy gọi Html.RenderAction("RenderMenu", "Home") trong layout view, như được hiển thị bên dưới.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @{
        Html.RenderAction("RenderMenu", "Home"); 
    }
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

Bạn sẽ thấy kết quả sau trong trình duyệt, bất kể bạn sử dụng phương pháp kết xuất nào.

Phương thức Html.RenderAction()

Bằng cách này, bạn có thể tạo partial view cho các phần khác nhau của trang web trong ứng dụng ASP.NET MVC.

Sự khác nhau giữa Html.Partial() và Html.RenderPartial() trong ASP.NET MVC

Html.Partial() Html.RenderPartial()
Html.Partial() trả về chuỗi html. Html.RenderPartial() trả về void.
Html.Partial() đưa chuỗi html của chế độ xem một phần vào chế độ xem chính. Html.RenderPartial() ghi html trong luồng phản hồi.
Html.Partial() hiệu suất chậm. Html.RenderPartial() thực thi nhanh hơn so với Html.Partial().
Html.Partial() không cần phải ở bên trong dấu ngoặc nhọn. Html.RenderPartial() phải nằm trong dấu ngoặc nhọn @{}.

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.
ASP.NET MVC
Bài Viết Liên Quan:
Bundle và minify js, css trong ASP.NET MVC
Trung Nguyen 11/04/2021
Bundle và minify js, css trong ASP.NET MVC

Các kỹ thuật bundle (gộp file) và minify (rút gọn file) đã được giới thiệu trong ASP.NET MVC 4 để cải thiện thời gian tải trang.

Filter trong ASP.NET MVC
Trung Nguyen 10/04/2021
Filter trong ASP.NET MVC

Trong hướng dẫn này, bạn sẽ tìm hiểu filter trong ASP.NET MVC là gì? Có những loại filter nào và cách sử dụng filter trong ASP.NET MVC.

ViewBag, ViewData và TempData trong ASP.NET MVC
Trung Nguyen 10/04/2021
ViewBag, ViewData và TempData trong ASP.NET MVC

Trong hướng dẫn này, bạn sẽ tìm hiểu ViewBag, ViewData và TempData là gì và cách sử dụng chúng trong ASP.NET MVC

Layout View trong ASP.NET MVC
Trung Nguyen 10/04/2021
Layout View trong ASP.NET MVC

Trong hướng dẫn này, bạn sẽ tìm hiểu về Layout View là gì các cách sử dụng Layout View trong ASP.NET MVC.