Trang chủ / ASP.NET Core / Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC

Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC

Thêm một Model trong ứng dụng ASP.NET Core MVC. Trong bài này, mình sẽ hướng dẫn các bạn thêm một số lớp (class) để tiến hành quản lý các bộ phim trong cơ sở dữ liệu. Những lớp này sẽ trở thành hay được gọi là “Model” trong ứng dụng MVC.

Chúng ta sẽ sử dụng một công nghệ của .NET Framework để truy cập dữ liệu được gọi là Entity Framework Core để định nghĩa và làm việc với các lớp của Model. Entity Framwork Core (thường được tắt là EF Core) sử dụng một mô hình phát triển gọi là “Code First”. Có nghĩa là bạn chỉ cần viết các đoạn mã đầu tiên, lúc đó các bảng cơ sở dữ liệu sẽ được tạo ra nhờ những đoạn mã này.

Code First cho phép bạn tạo các đối tượng model bằng cách viết các lớp đơn giản. (Nó cũng được biết đến như là các lớp POCO). Cơ sở dữ liệu sẽ được tạo ra từ các lớp của bạn. Nếu bạn được muốn tạo ra các cơ sở dữ liệu ban đầu một cách tự động, bạn vẫn có thể làm theo hướng dẫn này để học về MVC và EF để phát triển ứng dụng.

Tạo một project mới với tài khoản người dùng cá nhân

Trong phiên bản hiện tại của công cụ ASP.NET Core MVC cho Visual Studio, model chỉ hỗ trợ khi bạn tạo một project mới với tài khoản người dùng cá nhân (individual user accounts), tương lai Microsoft sẽ sửa lỗi này, và cho đến lúc đó bạn chỉ có thể tạo một project mới giống vậy mà thôi.

Từ trang Start của Visual Studio, chọn New Project

Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC

Chọn tiếp File -> New -> Project

Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC

Trong cửa sổ New Project tiến hành:

  • Trong vùng bên trái chọn Web
  • Ở vùng giữa, chọn ASP.NET Core Web Application (.NET Core)
  • Chọn nơi để lưu trữ project của bạn lại từ Browse, mình khuyên bạn nên lưu ổ D cho an toàn
  • Đặt tên project là “MvcMovie” (Việc này nằm giúp bạn dễ dàng sao chép các đoạn mã)
  • Chọn Ok

Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 3Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 3

Trong hộp thoại New ASP.NET Core Web Application – MvcMovie

  • Chọn Web Application
  • Chọn nút Change Authentication và thay đổi cơ chế xác thực thành Individual User Accounts và chọn OK
 Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 4

Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 4
 Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 5
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 5

Thực hiện các hướng dẫn ở bài trước để thay đổi tiêu đề và liên kết trong tập tin layout để có thể hiển thị MvcMovie nhằm gọi đến MoviesController. Chúng ta sẽ tiếp tục sử dụng movies controller trong ví dụ này.

Thêm các lớp mô hình dữ liệu (data model class)

Trong Solution Explorer, chuột phải vào thư mục Models và chọn Add -> Class. Đặt tên class là Movie và thêm các thuộc tính dưới đây:

Trong các thuộc tính trên, bạn lưu ý ID chính là trường bắt buộc của database hay nó chính là khóa chính của database. Tiến hành build project. Nếu bạn không build ứng dụng, bạn sẽ nhận được một lỗi trong phần tiếp theo. Cuối cùng chúng ta đã thêm một Model trong ứng dụng ASP.NET Core MVC.

Scaffolding a controller

Trong Solution Explorer, kích chuột phải vào thư mục Controllers -> Add -> Controller

 Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 6
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 6

Trong hộp thoại Add Scaffold, chọn MVC Controller with views, using Entity Framework -> Add

 Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 7
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 7

Hoàn thành hộp thoại Add Controller như sau:

  • Model class: đặt tên là Movie (MvcMovie.Models)
  • Data context class: ApplicationDbContext (MvcMovie.Models)
  • Views: giữ mặc định
  • Tên Controller: giữ mặc định là MoviesController
  • Chọn ADD
 Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 8
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 8

Lúc này Visual Studio sẽ tự động tạo cho bạn:

  • Một Movies controller (Controllers/MoviesController.cs)
  • Các tập tin Razor với chức năng thêm xóa, chi tiết, chỉnh sửa và hiển thị với tên tương ứng (Create, Delete, Details, Edit và Index) nằm trong (Views/Movies)

Visual Studio sẽ tự động ta ra các CRUD (create, read, update, và delete) tức là các phương thức và tập tin View cho bạn. Bạn sẽ có một ứng dụng web đầy đủ chức năng cho phép bạn tạo, xem danh sách, chỉnh sửa và xóa các phim của bạn.

Lúc này nếu bạn chạy app và click vào MvcMovie, bạn sẽ nhận được lỗi như sau:

 Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 9
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 9

Lỗi này do bạn chưa có database cho nó. Bạn hãy tiếp tục làm theo hướng dẫn bên dưới để có một cơ sở dữ liệu cho ứng dụng Movie này. Có 2 cách:

Cách 1: Dừng IIS Expresss

Click chuột phải vào IIS Express từ icon bên dưới vùng bên phải máy tính của bạn  như hình:

 Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 9
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 9

Chọn Exit hoặc Stop Site

 Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 9
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 9

Cách 2: Thoát và khởi động lại Visual Studio

Tiếp theo tiến hành mở command line đến project của bạn. Ví dụ của mình nằm ở “E:\tutorial 3\MvcMovie”

thì mình sẽ dùng cách lệnh trong command line để di chuyển đến thư mục này:

Kết quả giống hình này

Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 13
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 13
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 14
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 14

Nhập vào dòng lần lượt các dòng code vào command line

Trong đó:

dotnet (.net Core) là nền tảng của .NET

dotnet ef migrations add Initial : Giải thích thì hơi phức tạp, đơn giản là tạo ra cơ sở dữ liệu trong đó có chứa bảng Movie trong database của bạn

dotnet ef database update: cập nhật cơ sở dữ liệu.

Nếu bạn thấy không có lỗi gì giống như hình bên dưới thì đã thành công rồi đó.

Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 15
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 15
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 16
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 16

Bây giờ bạn đã tạo xong cơ sở dữ liệu. Tiến hành chạy ứng dụng và nhấp vào liên kết Mvc Movie

Sau đó vào Create New và tiến hành tạo một bộ phim bất kỳ

 Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 17
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 17

Nếu bạn muốn xác định định dạng ngày thì thêm một dòng code bên dưới

Vào trước public DateTime ReleaseDate. Cụ thể như sau:

Khi bạn chọn Create, lúc này form sẽ được gởi đến máy chủ, nơi các thông tin bộ phim được lưu trong một cơ sở dữ liệu. Sau đó bạn có thể được chuyển hướng đến /URL/Movies, nơi bạn xem được danh sách các bộ phim mới được tạo ra

Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC - Ảnh 18
Thêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC – Ảnh 18

Bây giờ hãy thử tạo một vài bộ phim. Hãy thử các chỉnh sửa, chi tiết, và xóa liên kết, nói chung là tất cả các chức năng cơ bản bạn thấy trong tập tin Index của Movies

Giải thích các đoạn mã vừa được tạo ra

Mở tập tin Controllers/MoviesController.cs và xem lại các đoạn mã trong phương thức Index. Cụ thể là các đoạn mã này

Hàm khởi tạo sử dụng Dependency Injection để đưa nội dung cơ sở dữ liệu (database context) đến controller. Trong đó các Database context đều được sử dụng mỗi phương thức CRUD trong controller tức là được phép tạo, đọc, cập nhật và xóa dữ liệu.

Strongly typed models and the @model keyword

Trong hướng dẫn trước đó, bạn đã sử dụng controller để truyền dữ liệu hoặc đối tượng đến View bằng cách sử dụng ViewData. ViewData là một đối tượng động cung cấp một cách thức thuận tiện cho bạn có thể chuyển thông tin đến View.

Kiểm tra cách thức details được tạo ra từ tập tin Controllers/MoviesController.cs

Các tham số id thường được sử dụng như một một dữ liệu định tuyến, ví dụ:

http://localhost:xxxx/movies/details/1. Trong đó:

  • Controller là MoviesController (đoạn đầu tiên của URL)
  • Action là details (đoạn URL thứ hai)
  • Id là 1 (đoạn URL cuối cùng)

Bạn có thể sử dụng id với một chuổi truy vấn như sau:

http://localhost:xxx/movies/details?id=1

URL này có nghĩa là sẽ tiến hành tìm kiếm một bộ phim có id=1, nếu tìm thấy một phim với id này, một thể hiện của model Movie được đưa đến View Detail

Giải thích các đoạn mã trong Views/Movies/Details.cshtml

Bằng cách khai báo một @model ở đầu tập tin View, bạn có thể chỉ định được đối tượng model mà bạn cần. Khi bạn tạo ra movie controller, Visual Studio đã tự động đưa vào @model ở đầu tập tin Details.cshtml

@model cho phép bạn truy cập các bộ phim mà controller đưa đến cho View bằng đối tượng model. Ví dụ trong giao diện Details.cshtml, đoạn mã sẽ đưa đến từng trường DisplayNameForDisplayFor tên thông tin theo model của HTML Helpers.

Kiểm tra tập tin Index.cshtml và phương thức Index trong Moves controller. Chú ý cách các đoạn mã tạo ra một danh sách các đối tượng khi nó gọi đến phương thức View. Các đoạn mã này đưa danh sách các phim vào phương thức Index trong View

Khi bạn tạo ra movies controller, Visual Studio sẽ tự động đưa @model vào đầu tập tin Index.cshtml:

Chỉ thị @model cho phép bạn truy cập vào danh sách các phim trong controller thông qua View sử dụng đối tượng Model. Ví dụ, trong giao diện Index.cshtml, bạn sẽ thấy đoạn mã về vòng lặp để hiển thị tất cả các bộ phim với một lệnh foreach qua đối tượng Model.

Bây giờ bạn có một cơ sở dữ liệu và các trang để hiển thị, chỉnh sửa, cập nhật và xóa dữ liệu. Trong phần tiếp theo, mình sẽ hướng dẫn bạn làm việc với cơ sở dữ liệu.

Đây là bài viết mình tổng hợp và chỉnh sửa lại từ Microsoft. Nếu có sai sót mong được góp chỉnh sửa từ các bạn để cải thiện bài viết

 

Series Navigation<< Thêm một View trong ứng dụng ASP.NET Core qua mô hình MVCLàm việc với SQL Server LocalDB >>

Thông tin Nguyễn An Hoàng Nguyên

Đam mê về lập trình, thích viết lách. Có hứng thú với thương mại điện tử và kinh doanh

Check Also

widget trong template này

Generic Repository Pattern là gì ? Cách sử dụng trong ASP.NET Core

Cũng đã gần 3 tháng mình mới viết bài mới. 3 tháng trước mình đã …

Một bình luận

  1. Admin đưa mấy cái link cụ thể đi, ghét lắm mấy cái link mà phải đi vòng vô mấy cái page quảng cáo.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *