Phần 4: Thêm Model vào ứng dụng ASP.NET Core MVC

Nguồn: Part 4, add a model to an ASP.NET Core MVC app

Tổng quan

Trong hướng dẫn này, các class được thêm để quản lý phim trong database. Các class này đại diện cho phần "Model" (mô hình) của ứng dụng MVC và được sử dụng với Entity Framework Core (EF Core) để làm việc với database.

Các class model được tạo ra được biết đến là POCO classes (Plain Old CLR Objects) - chúng không có bất kỳ dependency nào vào EF Core và chỉ định nghĩa các thuộc tính của dữ liệu sẽ được lưu trữ trong database.

Thêm class dữ liệu Model

Visual Studio

Nhấp chuột phải vào thư mục Models > Add > Class. Đặt tên tệp là Movie.cs.

Visual Studio Code

Thêm tệp tên Movie.cs vào thư mục Models.

Code Movie.cs

csharp

using System.ComponentModel.DataAnnotations;

namespace MvcMovie.Models;

public class Movie
{
    public int Id { get; set; }
    public string? Title { get; set; }
    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }
    public string? Genre { get; set; }
    public decimal Price { get; set; }
}

Những điểm chính:

Trường Id được database yêu cầu làm primary key (khóa chính).
Attribute (thuộc tính) [DataType(DataType.Date)] trên ReleaseDate đảm bảo người dùng không cần nhập thông tin thời gian.
? sau string chỉ ra nullable reference types (kiểu tham chiếu có thể null).
DataAnnotations (chú thích dữ liệu) được đề cập trong các hướng dẫn sau.

Thêm các NuGet Package

Visual Studio

Visual Studio tự động cài đặt các package cần thiết. Build dự án để kiểm tra lỗi compiler.

Visual Studio Code

Chạy các lệnh .NET CLI sau:

dotnetcli

dotnet tool uninstall --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool uninstall --global dotnet-ef
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools

Các lệnh này cài đặt:

EF Core CLI tools (công cụ dòng lệnh EF Core)
ASP.NET Core scaffolding tool (công cụ scaffolding)
EF Core design-time tools (công cụ thiết kế thời gian)
EF Core SQLite và SQL Server providers (nhà cung cấp)
Các package cần thiết để tạo code

Scaffold Movie Pages

Sử dụng scaffolding tool để tạo các trang CRUD (Create, Read, Update, Delete - Tạo, Đọc, Cập nhật, Xóa) cho movie model.

Visual Studio

Trong Solution Explorer, nhấp chuột phải vào thư mục Controllers và chọn Add > New Scaffolded Item
Chọn Installed > Common > MVC
Chọn MVC Controller with views, using Entity Framework
Trong hộp thoại Add MVC Controller:
Model class: Chọn Movie (MvcMovie.Models)
Data context class: Nhấp + để tạo mới
Class name: MvcMovie.Data.MvcMovieContext (được tạo tự động)
Database provider: SQL Server
Giữ nguyên Views và Controller name mặc định
Chọn Add

Những gì Scaffolding tạo ra:

Controllers/MoviesController.cs - Movies controller
Các tệp Razor view: Views/Movies/*.cshtml (Create, Delete, Details, Edit, Index)
Data/MvcMovieContext.cs - Database context class

Những gì Scaffolding cập nhật:

Package references trong MvcMovie.csproj
Đăng ký database context trong Program.cs
Thêm connection string (chuỗi kết nối) vào appsettings.json

Visual Studio Code

Export đường dẫn scaffold tool (macOS/Linux):

console

export PATH=$HOME/.dotnet/tools:$PATH

Chạy lệnh scaffolding:

dotnetcli

dotnet aspnet-codegenerator controller -name MoviesController -m Movie -dc MvcMovie.Data.MvcMovieContext --relativeFolderPath Controllers --useDefaultLayout --referenceScriptLibraries --databaseProvider sqlite

Tham khảo tham số: | Tham số | Mô tả | |---------|-------| | -m | Tên Model | | -dc | Class data context | | --relativeFolderPath | Đường dẫn thư mục output | | --useDefaultLayout | Sử dụng default layout cho views | | --referenceScriptLibraries | Thêm validation scripts | | --databaseProvider sqlite | Sử dụng SQLite thay vì SQL Server |

Sử dụng SQLite cho Development, SQL Server cho Production

Thêm code sau vào Program.cs:

csharp

var builder = WebApplication.CreateBuilder(args);

if (builder.Environment.IsDevelopment())
{
    builder.Services.AddDbContext<MvcMovieContext>(options =>
        options.UseSqlite(builder.Configuration.GetConnectionString("MvcMovieContext")));
}
else
{
    builder.Services.AddDbContext<MvcMovieContext>(options =>
        options.UseSqlServer(builder.Configuration.GetConnectionString("ProductionMvcMovieContext")));
}

Initial Migration (Di chuyển cơ sở dữ liệu ban đầu)

Sử dụng EF Core Migrations (di chuyển) để tạo database schema (lược đồ database).

Visual Studio

Từ menu Tools, chọn NuGet Package Manager > Package Manager Console và nhập:

powershell

Add-Migration InitialCreate
Update-Database

Visual Studio Code

dotnetcli

dotnet ef migrations add InitialCreate
dotnet ef database update

Các lệnh này làm gì:

Add-Migration InitialCreate: Tạo Migrations/{timestamp}_InitialCreate.cs với code tạo database schema
Update-Database / dotnet ef database update: Thực thi migration và tạo database

Class Database Context được tạo ra

Scaffolding tạo Data/MvcMovieContext.cs:

csharp

using System;
using System.Collections.Generic;
using Microsoft.EntityFrameworkCore;
using MvcMovie.Models;

namespace MvcMovie.Data
{
    public class MvcMovieContext : DbContext
    {
        public MvcMovieContext (DbContextOptions<MvcMovieContext> options)
            : base(options)
        {
        }

        public DbSet<MvcMovie.Models.Movie> Movie { get; set; } = default!;
    }
}

Điều này tạo ra một thuộc tính DbSet<Movie> đại diện cho các phim trong database.

Dependency Injection (Tiêm phụ thuộc)

Constructor của MoviesController.cs được scaffolding sử dụng dependency injection (tiêm phụ thuộc):

csharp

public class MoviesController : Controller
{
    private readonly MvcMovieContext _context;

    public MoviesController(MvcMovieContext context)
    {
        _context = context;
    }

Database context được inject (tiêm) và sử dụng trong tất cả các phương thức CRUD.

Connection String (Chuỗi kết nối) Database

Visual Studio (SQL Server)

json

{
  "ConnectionStrings": {
    "MvcMovieContext": "Server=(localdb)\\mssqllocaldb;Database=MvcMovieContext-4ebefa10-de29-4dea-b2ad-8a8dc6bcf374;Trusted_Connection=True;MultipleActiveResultSets=true"
  }
}

Visual Studio Code (SQLite)

json

{
  "ConnectionStrings": {
    "MvcMovieContext": "Data Source=MvcMovie.db"
  }
}

Kiểm tra ứng dụng

Chạy ứng dụng và chọn link Movie App. Nếu bạn gặp lỗi database, hãy đảm bảo bạn đã chạy các lệnh migration.

Strongly Typed Models và chỉ thị @model

Scaffolding tạo strongly typed views (view kiểu mạnh) sử dụng chỉ thị @model. Ví dụ, Details.cshtml:

cshtml

@model MvcMovie.Models.Movie

@{
    ViewData["Title"] = "Details";
}

<h1>Details</h1>

<div>
    <h4>Movie</h4>
    <hr />
    <dl class="row">
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Title)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Title)
        </dd>
        <!-- Các thuộc tính khác... -->
    </dl>
</div>

View Index.cshtml sử dụng strongly typed collection (tập hợp kiểu mạnh):

cshtml

@model IEnumerable<MvcMovie.Models.Movie>

<table class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.Title)</th>
            <th>@Html.DisplayNameFor(model => model.ReleaseDate)</th>
            <th>@Html.DisplayNameFor(model => model.Genre)</th>
            <th>@Html.DisplayNameFor(model => model.Price)</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model) {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.Title)</td>
                <td>@Html.DisplayFor(modelItem => item.ReleaseDate)</td>
                <td>@Html.DisplayFor(modelItem => item.Genre)</td>
                <td>@Html.DisplayFor(modelItem => item.Price)</td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

Lợi ích của Strong Typing (Kiểu mạnh):

Kiểm tra kiểu tại compile-time (thời gian biên dịch)
Hỗ trợ IntelliSense
Compiler xác thực tất cả việc sử dụng kiểu

Lưu ý

Bạn có thể không nhập được dấu phẩy thập phân trong trường Price. Để hỗ trợ locale (ngôn ngữ địa phương) không phải tiếng Anh, ứng dụng phải được globalize (toàn cầu hóa).
Cột Price thập phân có thể tạo cảnh báo về precision/scale - điều này được đề cập trong các hướng dẫn sau.

Trước: Thêm View | Tiếp theo: Làm việc với Database