Strongly Typed View trong ASP.NET Core

Trong bài viết trước mình đã hướng dẫn các bạn xây dựng một HTML Form đơn giản. Chúng ta dùng ViewModel nhưng không gán nó cho View. ViewModel có thể được gán từ controller sang View dùng ViewBag hoặc ViewData. ASP.NET Core cung cấp khả năng có thể gán strongly typed view model hoặc một object sang view. Cách tiếp cận này giúp chúng ta dễ dàng bảo trì code và phát hiện lỗi từ lúc biên dịch. Cơ chế Scaffolding trong Visual Studio có thể được dùng để tạo một View dựa trên ViewModel.

Strongly Typed View là gì?

View nào mà được kết hợp với một kiểu cụ thể của ViewModel thì được gọi là Strongly Typed View. Bằng cách chỉ ra model, Visual Studio cung cấp cơ chế gợi ý và kiểm tra kiểu lúc biên dịch. Chúng ta đã học cách truyền dữ liệu từ Controller sang View trước đây. Điều này thường được giải quyết với ViewBag hoặc ViewData. Trình biên dịch không biết gì về kiểu của model.

Trong Strongly typed view, chúng ta biết View sử dụng ViewModel nào sử dụng khai báo @model.

Khai báo @model

Strongly typed view được tạo sử dụng khai báo @model. ViewData có một thuộc tính đặc biệt gọi là Model. Nó là một đối tượng kiểu dynamic. Nó cho phép chúng ta sử dụng ViewData.Model.Prop. Sử dụng Model cách này không giúp Visual phát hiện và kiểm tra thuộc tính của model mà phải chờ lúc chạy chương trình mới phát hiện lỗi. Nhờ thế thì việc kiểm tra kiểu lúc biên dịch cũng không có.

Vấn đề ở trên đã được giải quyết bằng cách chỉ cho View biết kiểu của model sẽ được găn vào ViewData.Model. Nó được giải quyết bằng khai báo @model, nó được đặt ở trên cùng của file View và chỉ ra kiểu của ViewModel được gán.

Khi bạn sử dụng khai báo @model, Razor engine sẽ gán kiểu choViewData.Model. Thuộc tính Model sẽ trả về kiểu được khai báo.

Ví dụ:

@model ProductEditModel

Được hiểu thành:

ProductEditModel Model;

Vì thế nên kiểu của Model giờ được biết trước ở lúc biên dịch, chúng ta sẽ tận dụng được trình gợi ý cú pháp (IntelliSense) và kiểm tra kiểu lúc biên dịch.

Ví dụ về Strongly Typed View

Chúng ta tiếp tục đi từ điểm cuối của bài trước. Cập nhật code để thêm ProductEditModel vào đầu của View:

@model ProductEditModel

Và bạn sẽ dùng thuộc tính Model để truy cập đến thuộc tính của nó:

<form action="/home/create" method="post">
    <label for="@Model.Name">Name</label>
    <input type="text" name="@Model.Name" />
    <label for="@Model.Rate">Rate</label>
    <input type="text" name="@Model.Rate" />
    <label for="@Model.Rating">Rating</label>
    <input type="text" name="@Model.Rating" />
    <input type="submit" name="submit" />
</form>

Gán Model từ Controller sang View

Bước tiếp theo chúng ta sẽ gán thể hiện của ProductEditModel sang View. Mở HomeController.cs và đến phương thức Create:

[HttpGet]
public IActionResult Create()
{
    ProductEditModel model = new ProductEditModel();
    return View(model);
}

Giờ hãy chạy ứng dụng

Lợi ích của Strongly Typed View

1. Hỗ trợ IntelliSense
2. Kiểm tra kiểu lúc biên dịch
3. Không phải chuyển kiểu

Vì thế chỉ có một thuộc tính Model, bạn chỉ có thể có 1 ViewModel trên View.

Model và model

Rất dễ nhầm giữa Model và model. Khai báo model được dùng để khai báo kiểu của ViewModel. Còn Model là biến được dùng để truy cập vào ViewModel. Kiểu của Model được khai báo bằng từ khóa @model.

Sử dụng Scaffolding để tạo ra Strongly Typed View

Visual Studio Scaffolding System cho phép chúng ta tạo nhanh một view. Mở HomeController.cs và tạo một Action method là Edit.

[HttpGet]
public IActionResult Edit()
{
    ProductEditModel model = new ProductEditModel();
    return View(model);
}

Chọn template là Edit. Chọn Model class là ProductEditModel. Click vào Add để tạo ra một View. Sau đó mở View ra:

@model ASPNetCoreForms.Models.ProductEditModel
 
@{
    ViewData["Title"] = "Create";
}
 
<h2>Create</h2>
 
<h4>ProductEditModel</h4>
<hr />
<div class="row">
  <div class="col-md-4">
    <form asp-action="Create" method="post">
      <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
          <label asp-for="ID" class="control-label"></label>
          <input asp-for="ID" class="form-control" />
          <span asp-validation-for="ID" class="text-danger"></span>
        </div>
        <div class="form-group">
          <label asp-for="Name" class="control-label"></label>
          <input asp-for="Name" class="form-control" />
          <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        <div class="form-group">
          <label asp-for="Rate" class="control-label"></label>
          <input asp-for="Rate" class="form-control" />
          <span asp-validation-for="Rate" class="text-danger"></span>
        </div>
        <div class="form-group">
          <label asp-for="Rating" class="control-label"></label>
          <input asp-for="Rating" class="form-control" />
          <span asp-validation-for="Rating" class="text-danger"></span>
        </div>
        <div class="form-group">
          <input type="submit" value="Create" class="btn btn-default" />
        </div>
      </form>
   </div>
</div>
 
<div><a asp-action="Index">Back to List</a></div>

Tổng kết

Chúng ta đã kết hợp view vào ViewModel để tạo ra Strongly typed view. Chúng ta cũng học cách sử dụng Scaffolding để tạo ra Strongly typed view.

Trích nguồn từ: (https://www.tektutorialshub.com/)