Đến hiện tại thì mọi việc gần như đã hoàn thành, ở phần trước chúng ta đã cùng nhau tìm hiểu về một khái niệm mới đó là Dependency Injection. Tới đây chúng ta sẽ đi vào những bước hoàn thiện cho MVC Basic: Hoàn thành Controller và cập nhật giao diện.

Hoàn thành Controller:
Controller hiện tại đã chứa một danh sách việc cần làm từ lớp dịch vụ, công việc tiếp theo của chúng ta là gán chúng vào View Model TodoViewModel và liên kết nó với View mà bạn đã tạo trước đó:

Controllers/TodoController.cs
public async Task<IActionResult> Index()
{
        var items = await _todoItemService.GetIncompleteItemsAsync();

        var model = new TodoViewModel()
        {
                Items = items
        };

        return View(model);
}

Hãy đảm bảo rằng các câu lệnh using này đã được khai báo ở đầu tệp:
using AspNetCoreTodo.Services;
using AspNetCoreTodo.Models;

Nếu bạn đang sử dụng Visual Studio hay Visual Studio Code, trình biên soạn sẽ gợi ý cho bạn khi bạn đưa con trỏ tới vùng báo lỗi gạch chân đỏ.

Tới lúc này bạn hoàn toàn có thể kiểm tra liệu mọi thứ có theo đúng mong muốn của bạn hay không. Bằng cách nhấn phím F5 để khởi chạy ứng dụng hoặc sử dụng câu lệnh dotnet run trong command. Nếu code của bạn biên dịch với 0 lỗi, server sẽ khởi chạy trên cổng 5000 mặc định.

Nếu trình duyệt của bạn không tự động mở, bạn sẽ phải thao tác bằng tay. Bạn sẽ nhìn thấy View mà bạn đã tạo, với dữ liệu được lấy từ cơ sở dữ liệu giả của bạn.

Mặc dù có thể đi trực tiếp đến đường dẫn http://localhost:5000/todo nhưng sẽ là tốt hơn để khi thêm một item gọi tới My To-dos trên thanh navbar. Để làm điều này bạn có thể chỉnh sửa tệp shared layout.

Cập nhật giao diện:
Tệp Views/Shared/_Layout.cshtml chứa mã HTML nền tảng cho mỗi view, bao gồm Navbar được hiển thị ở đầu mỗi trang.

Để thêm mục vào navbar, tìm mã Htlm chứa các mục đã tồn tại:
Views/Shared/_Layout.cshtml
<ul class=”nav navbar-nav”>
       <li><a asp-area=”” asp-controller=”Home” asp-action=”Index”>
                  Home
            </a></li>
       <li><a asp-area=”” asp-controller=”Home” asp-action=”About”>
                 About
            </a></li>
      <li><a asp-area=”” asp-controller=”Home” asp-action=”Contact”>
                Contact
            </a></li>
</ul>

Thêm mục trỏ đến controller Todo thay vì Home:
<li>
<a asp-controller=”Todo” asp-action=”Index”>My to-dos</a>
</li>

Các thuộc tính asp-controller và asp-action trên thẻ <a> được gọi là tags helper. Trước khi View hiển thị, Asp.Net Core thay thể các tags helper này bằng các thuộc tính HTML thực. Trong trường hợp này, một Url định tuyến Todo/Index được tạo và thêm vào thẻ <a> dưới dạng một thuộc tính href. Điều này giúp bạn không phải mã hóa định tuyến tới Controller bởi Asp.Net Core tự động tạo nó cho bạn.

Như vậy là chúng ta đã hoàn thành một project MVC cơ bản.

Chúng ta hãy cùng nhau tiếp tục tìm hiểu cách thêm một package bên ngoài vào project của chúng ta nhé:

Một trong những thuận lợi của việc sử dụng hệ sinh thái .NET là số lượng các package và plugin của bên thứ 3 rất lớn. Cũng giống như các hệ thống package khác, bạn có thể tải xuống và cài đặt các package .NET hỗ trợ hầu hết mọi tác vụ, hoặc vấn đề mà bạn đang gặp phải.

NuGet là vừa là công cụ quản lý package, vừa là nơi lưu trữ các package chính thức. Bạn có thể tìm kiếm các package Nuget trên web và cài đặt chúng từ máy cá nhân của bạn thông qua command hoặc GUI nếu bạn đang dùng Visual Studio.

Cài đặt Humanizer package:
Ở trên sau khi hoàn thành project MVC basic, ứng dụng To-do trình bày các mục to-do như sau:

Cột ngày đáo hạn đang hiển thị ngày ở định dạng mặc định, điều này thật gây khó chịu cho người sử dụng. Sẽ đẹp hơn nếu chúng được thay thế bằng ‘X ngày kể từ bây giờ’.

Bạn có thể viết code của chính bạn để chuyển đổi định dạng theo ý muốn nhưng điều đó thật mất thời gian. Humanizer package trên NuGet sẽ giúp bạn giải quyết vấn đề này một cách hiệu quả và nhanh chóng bằng các phương thức có thể viết lại hầu hết mọi thứ: ngày, giờ, thời gian,.. Đây là một dự án mã nguồn mở tuyệt vời được xuất bản theo giấy phép của MIT.

Để thêm chúng vào project, chạy câu lệnh sau đây trong command:
dotnet add package Humanizer
Nếu bạn lướt qua tệp dự án ToDo.cspoj, bạn sẽ thấy một dòng PackageReference với tham chiếu tới Humanizer.

Chúng ta đã có package trong dự án, vậy chúng ta sẽ sử dụng nó như thế nào? Để sử dụng package trong code, bạn cần thêm khai báo chúng trước khi sử dụng thông qua câu lệnh using. Vì Humanizer sẽ được sử dụng để viết lại ngày được hiển thị trong view nên bạn có thể sử dụng nó trực tiếp trong View:
Views/Todo/Index.cshtml
@model TodoViewModel
@using Humanizer

// …

Sau đó cập nhật dòng ghi thuộc tính DueAt để sử dụng phương thức Humanize:

<td>@item.DueAt.Humanize()</td>

Bây giờ chúng ta sẽ cảm thấy thoải mái hơn khi nhìn vào chúng:

Ở phần tiếp theo, chúng ta sẽ cùng nhau sử dụng một bộ package khác để viết mã tương tác với cơ sở dữ liệu.