Giap Hiep

I'm Giap Hiep

I'm a web developer, a gymer. I enjoy share something i know that help people's work!
Giap Hiep

Tác dụng của Data Annotation trong Asp .NET MVC

Trong Asp .net mvc ta thường thấy một số cặp dấu [ ] bên trong có định nghĩa một số nội dung, đó chính là sử dụng data annotation. Vậy annotation là gì ? Cách sử dụng như thế nào? Tác dụng ra sao ? Hãy cùng tìm hiểu trong bài viết này nhé :hugs:

I. Khái niệm data annotation trong ASP .NET MVC

  • Trong .NET Framework, Data Annotation dùng để thêm phần ý nghĩa mở rộng vào dữ liệu thông qua các thẻ thuộc tính.Thuận lợi của việc sử dụng tính năng của Data Annotation là chúng ta có thể quản lý dữ liệu được định nghĩa trong một vị trí hoặc không cần phải viết lại nhiều điều luật trên nhiều vị trí khác nhau.

  • Tính năng Data Annotation được Microsoft giới thiệu lần đầu ở .NET 3.5 tại namespace System.ComponentModel.DataAnnotations. Namespace này chứa các lớp dùng để định nghĩa thuộc tính mở rộng cho dữ liệu.

  • Các thuộc tính Data Annotation được phân chia thành 3 thể loại chính:

    • Thuộc tính xác nhận (Validation Attribute): dùng để thêm các tập luật xác nhận cho dữ liệu.
    • Thuộc tính hiển thị (Display Attribute): dùng để đặc tả cách dữ liệu từ một lớp được hiển thị ở giao diện.
    • Thuộc tính mô hình (Modelling Attribute): dùng để đặc tả mục đích sử dụng của lớp thành viên và mối quan hệ giữa các lớp.
  • Tác dụng của data annotation:

    • thích dữ liệu (Data Annotation) trong Entity Framework giúp ta định nghĩa dữ liệu thuộc tính trực tiếp trong mã nguồn được gieo từ các bảng cơ sở dữ liệu và giúp bạn kiểm soát được dữ liệu nhập vào từ người dùng tốt nhất cũng như cách định nghĩa dữ liệu hiển thị trên giao diện.
  • Cách Sử dụng data annotation trong ASP .NET MVC :

    • Khi chúng ta sử dụng các thuộc tính này thì phải đặt chúng ở trong dấu [] và phải đặt nó ở trên trường mà chúng ta muốn validate hoặc định nghĩa

II. Thực hành định nghĩa các data annotation trong 1 ứng dụng ASP .NET MVC

1. Chuẩn bị

  • Khởi tạo 1 project asp .net mvc

Mình sẽ làm nhanh bước kết nối database, để chi tiết hơn về cách kết nối các bạn có thể tìm hiểu bài viết Làm quen với ASP .NET MVC CODE FIRST

-Vào Sql Sever khởi tạo 1 database

Vào Project => Manager nuget package => Chọn tab browse và tìm entity framework như hình :

Sau đó kết nối đến database vừa tạo

Thêm đoạn XML sau vào trong tag configuration trong file web.config ( connectionString của máy bạn sẽ khác của mình )

<connectionStrings>
    <add name="DataAnnotationContext" connectionString="Data Source=DESKTOP-E2I8M9U\SQLEXPRESS;Initial Catalog=DataAnnotation;Integrated Security=True" providerName="System.Data.SqlClient"/>
  </connectionStrings>

2. Khởi tạo model, controller và view

  • Vào thư mục model tạo 1 file Employee.cs
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace DataAnnotation.Models {
    public class Employee {
        [Key] // Dùng để định nghĩa khóa chính cho bảng
        public int Id { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }

        public decimal Salary { get; set; }

        public string Email { get; set; }
    }
}
  • Tiếp theo ta thêm vào project 1 thư mục có tên là Context để chưa các context kết nối database, tạo file EmployeeContext.cs bên trong và cấu hình như sau
using DataAnnotation.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace DataAnnotation.Context {
    public class EmployeeContext : DbContext {
        public EmployeeContext() : base("DataAnnotationContext") {

        }
        public DbSet<Employee> Employees { get; set; }
    }
}
  • Rebuild lại project
  • Chuột phải thư mục controller => add => Add new scaffolded Item => MVC 5 Controller with view, using entity framewrok
  • Run app và được kết quả:

Bảng employee đã được tạo trên database

3. Thực hành sử dung Data Annotation

  • Quay lại Model Employee.cs trong thư mục model
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace DataAnnotation.Models {
    public class Employee {
        [Key] // Dùng để định nghĩa khóa chính cho bảng
        public int Id { get; set; }

        [DisplayName("Employee Name")]
        [Required(ErrorMessage = "Employee name is required")]
        [StringLength(35)]
        public string Name { get; set; }

        [Required(ErrorMessage = "Address is required")]
        [StringLength(300)]
        public string Address { get; set; }

        [Required(ErrorMessage = "Salary is required")]
        [Range(3000, 1000000, ErrorMessage = "Salary must be between 3000 and 1000000")]
        public decimal Salary { get; set; }

        [Required(ErrorMessage = "Email is required")]
        [DataType(DataType.EmailAddress)]
        [DisplayName("Email Address")]
        [MaxLength(50)]
        [RegularExpression(@"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}", ErrorMessage = "please enter correct address")]
        public string Email { get; set; }
    }
}
  • Ở đây mình đã sử dụng
    • DisplayName : Định nghĩa tên cột trong bảng
    • Required: Yêu cầu dây là trường bắt buộc nhập
    • StringLength : Định nghĩa độ dài tối đa cho trường dữ liệu
    • Range : Cài đặt min max cho giá trị
    • DataType : validate dữ liệu nhập vào có đúng theo các DataType được định nghĩa sẵn không (date, EmailAddress...)
    • RegularExpression : Kiểm tra chuỗi nhập vào theo 1 biểu thức chính quy tự định nghĩa
    • Còn nhiều thuộc tính khác các bạn truy cập docs annotation của microsoft tìm hiểu nhé.
  • Vì Model đã bị thay đổi nên muốn database thay đổi theo ta phải sử dụng cơ chế migration.
    Ta vào tool => Nuget package manager => Package manager console Thực hiện 3 câu lần lượt :
enable-migrations
Add-Migration updateModelEmployee
Update-Database

Tiếp theo hãy xóa controller và các view tương ứng của Employee và tiến hành tạo lại vì các bạn đã thay đổi cấu trúc của model

  • Cuối cùng run app và kiểm tra các thay đổi vừa tạo ra nhé

    • Trang hiển thị
    • Form nhập đã được validate

III. Tổng kết

Theo ý kiến cá nhân của mình thì annotation là một thư viện rất tốt, nó vừa giúp chúng ta validate một cách dễ dàng, và còn có một tính bảo mật cao.

Mọi người cho mình nhận xết để thay đổi tốt hơn cũng như động lực để mình làm các bài viết tiếp theo nhé 👍😇