ការសិក្សាពីរបៀបប្រើប្រាស់ Data Annotations ក្នុង ASP.NET MVC 5

មាតិកា

I.   សេចក្តីផ្តើម

II.  គោលបំណង

III. តម្រូវការ

IV. ប្រភេទ Attributes នៃ Data Annotations

V.  ជំហានទី១៖ បង្កើត Project

VI. ជំហានទី២៖ បង្កើត Class Model

III. ជំហានទី៣៖ បង្កើត Class Controller

IV. ជំហានទី៤៖ បង្កើត View

V.  ជំហានទី៥៖ Run Application

I.          សេចក្តីផ្តើម

នៅក្នុង Tutorial នេះ យើងនឹងសិក្សាពីរបៀបប្រើប្រាស់ Data Annotations នៅក្នុង ASP.NET MVC ដើម្បីធ្វើការ validate នៅក្នុង class របស់ model។ ការធ្វើដូចនេះគឺដើម្បីការពារ user កុំអោយព្យាយាមធ្វើការបញ្ចូលទិន្នន័យមិនត្រឹមត្រូវ ឬក៏កំណត់ rule ណាមួយអោយបានត្រឹមត្រូវមុនពេលចុចបញ្ចូនទៅកាន់ server ឧទាហរណ៍ដូចជាការកំណត់ required field ដែលតម្រូវអោយអ្នកប្រើប្រាស់ត្រូវតែបញ្ចូលព័ត៌មានជាចាំបាច់ជាដើម។ ដើម្បីយល់បន្ថែមទៀតសូមធ្វើការអនុវត្តន៍ដូចខាងក្រោម។

II.         គោលបំណង

ក្រោយពីអនុវត្តន៍តាម Tutorial នេះ លោកអ្នកនឹងយល់អំពី

• យល់ដឹងពីប្រភេទនៃ attribute របស់ Data Annotations
• យល់ដឹងពីការប្រើប្រាស់ data annotations និងរបៀបប្រកាសវា
• យល់ដឹងពីការប្រើប្រាស់ data annotations ជាមួយឧទាហរណ៍

III.        តម្រូវការ

• ដើម្បីអាចសិក្សា បានយើងត្រូវមាន
• Microsoft Visual Studio (any version)
• Microsoft SQL Server (any version)

IV.       ប្រភេទ Attributes នៃ Data Annotations

Attributes របស់ data annotations មានប្រភេទផ្សេងៗគ្នា និងការហៅយកមកប្រើប្រាស់ក្នុងគោលដៅខុសគ្នាផងដែរ។ ខាងក្រោមនេះគឺជា Attributes មួយចំនួនដែលយើងជាធម្មតាយកមកប្រើប្រាស់ញឹកញាប់ ទាំងនោះរួមមានដូចខាងក្រោម៖

• DisplayName:

ត្រូវបានគេប្រើប្រាស់សម្រាប់បង្ហាញជាឈ្មោះណាមួយទៅតាម field ដែលយើងចង់បង្ហាញប្រាប់គេ

[DisplayName(“StudentName”)]

• Required:

ត្រូវបានប្រើសម្រាប់តម្រូវអោយយើងបញ្ចូលទិន្នន័យជាដាច់ខាត

[Required(ErrorMessage = “Enter Student Name”)]

• DataType:

ត្រូវបានប្រើសម្រាប់បញ្ជាក់ពី data type សម្រាប់ធ្វើការ validation។ ឧទាហរណ៍ ដូចជា password ដើម្បីកុំអោយuser មើលឃើញ password នៅលើ textbox។

[DataType(DataType.Password)]

• StringLength:

ត្រូវបានប្រើសម្រាប់ធ្វើការកំណត់ចំនួនតួអក្សរជាអតិប្បរមាណាមួយនៅពេលដែលបញ្ចូលទៅក្នុង form

[StringLength(50, ErrorMessage = “Only 50 character are allowed”)]

 

• DisplayFormat: 

ត្រូវបានប្រើសម្រាប់បង្ហាញជា format ណាមួយ ដូចជាទម្រប់ date format ជាដើម

[DisplayFormat(DataFormatString = “{0:dd.MM.yyyy}”)]

• Regular Expression: 

ត្រូវបានប្រើសម្រាប់ធ្វើការ validate នូវតម្លៃរបស់ property មួយ ដោយបញ្ជាក់អោយបានត្រឹមត្រូវទៅតាម regular expression pattern ដែលបានកំណត់។

[RegularExpression(@”[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}”, ErrorMessage = “Please enter Valid Email ID”)]

 

• Range: 

ត្រូវបានប្រើសម្រាប់ធ្វើការកំណត់នូវ value range ពីចំនួនប៉ុន្មានទៅដល់ចំនួនប៉ុន្មាន ដែលយើងបានកំណត់អោយ

[Range(5000, 15000, ErrorMessage = “Please enter valid range”)]

 

• Bind: 

ត្រូវបានប្រើសម្រាប់ធ្វើការកំណត់ include ឬក៏ exclude fields ណាមួយ នៅពេលដែលមានការបន្ថែម parameter ឬក៏ form values ទៅកាន់ model properties

[Bind(Exclude = “StudentID”)]

 

• Compare: 

ត្រូវបានប្រើសម្រាប់ធ្វើការប្រៀបធៀបរវាង properties ចំនួន២

[DataType(DataType.Password)] [Required(ErrorMessage = “Please enter password”)] public string Password { get; set; }   [Required(ErrorMessage = “Please enter ConfirmPassword”)] [DataType(DataType.Password)] [Compare(“Password”, ErrorMessage = “Password not matching”)] public string ConfirmPassword { get; set; }

 

1. Key: 

ត្រូវបានប្រើសម្រាប់ធ្វើការបញ្ជាក់នូវ properties​ មួយឬក៏ច្រើន ដែលវាត្រូវបានបញ្ជាក់ពី entity ដែលមានតែមួយគត់

[Key] public int StudentID { get; set; }

V.          ជំហានទី១៖ បង្កើត Project

សូមចូលទៅបើកកម្មវិធី Microsoft visual studio

• ចុច “Start”
• បន្ទាប់ “All Programs”
• ជ្រើសរើសយក “Microsoft Visual Studio 2015”.
• ចូលទៅកាន់ File à New à Project
• សូមមើលមេរៀនពីមុនៗអំពីរបៀបបង្កើត Project ជាមួយ MVC
• ក្រោយពីបង្កើត project រួចរាល់ហើយ យើងនឹងទទួលបាន project structure ដូចរូបខាងក្រោម៖

VI.          ជំហានទី២៖ បង្កើត Class Model

គោលបំណងដែលយើងបង្កើត class model ឡើង គឺដើម្បីអាចអោយយើងធ្វើការ apply នូវ validation ទៅលើ attribute នៃ field នីមួយៗបាន។

• សូមធ្វើការបង្កើត Class model “Student”
• right click លើ Model
• Add
• Class
• យើងនឹងទទួលបាន default class ដូចខាងក្រោម

namespace DataAnnotation.Models {     public class Student     {       } }

• បន្ទាប់មកសូមធ្វើការបន្ថែមនូវ properties មួយចំនួន រួមជាមួយនឹង data annotations ទៅអោយ class នេះ ដូចខាងក្រោម

using System;

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;

using System.Web.Mvc;

namespace DataAnnotation.Models

{

    [Bind(Exclude = “StudentID”)]

    public class Student

    {

        [Key]

        public int StudentID { get; set; }

 [DisplayName(“StudentName”)]

        [Required(ErrorMessage = “Enter Student Name”)]

        [StringLength(50, ErrorMessage = “Only 50 character are allowed”)]

        public string StudentName { get; set; }

 [DisplayFormat(DataFormatString = “{0:dd.MM.yyyy}”)]

        [Required(ErrorMessage = “Please enter Date of Birth”)]

        public DateTime StudentDOB { get; set; }

 [RegularExpression(@”[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}”,

        ErrorMessage = “Please enter Valid Email ID”)]

        [Required(ErrorMessage = “Please enter Student EmailID”)]

        public string StudentEmailID { get; set; }

 [Range(5000, 15000, ErrorMessage = “Please enter valid range”)]

        [Required(ErrorMessage = “Please enter Student Fees”)]

        public decimal StudentFees { get; set; }

 [Required(ErrorMessage = “Please enter Student Address”)]

        [StringLength(50, ErrorMessage = “Only 50 character are allowed”)]

        public string StudentAddress { get; set; }

 [DataType(DataType.Password)]

        [Required(ErrorMessage = “Please enter password”)]

        public string Password { get; set; }

 [Required(ErrorMessage = “Please enter ConfirmPassword”)]

        [DataType(DataType.Password)]

        [System.ComponentModel.DataAnnotations.Compare(“Password”, ErrorMessage = “Password not matching”)]

        public string ConfirmPassword { get; set; }

    }

}

• ចំណាំ សូមកុំភ្លេចធ្វើការ import នូវ namespace ដូចខាងក្រោម

using System; using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Web.Mvc;

VII.          ជំហានទី៣៖ បង្កើត Class Controller

ដើម្បីបង្កើត Controller យើងត្រូវ៖

• right click លើ folder របស់ Controllers
• Add
• Controller…

• វានឹងលោតផ្ទាំងមួយទៀតមក

• យក MVC 5 Controller – Empty
• ចុច Add
• វានឹងបង្ហាញផ្ទាំងមួយសម្រាប់អោយយើងដាក់ឈ្មោះ Controller

• ពេលនោះវានឹង generate នូវ default class controller ដូចខាងក្រោម

namespace DataAnnotation.Controllers

{

    public class StudentController : Controller

    {

        // GET: Student

        public ActionResult Index()

        {

            return View();

        }

    }

}

• បន្ទាប់មកទៀត សូមធ្វើការ add នូវ Action Selector [HttpGet], [HttpPost] នឹង Action Method “Index” ជាមួយនឹង parameter នៃ Model របស់ class Student

• យើងសង្កេតឃើញថា នៅខាងក្រោម Student មានគូសបន្ទាត់ពណ៍ក្រហម បញ្ជាក់ថាវាតម្រូវអោយយើងធ្វើការ import នូវ reference model ចូលមកក្នុង controllerរបស់យើង

• សូមជ្រើសរើសយក using DataAnnotation.Models;

VIII.          ជំហានទី៤៖ បង្កើត View

ដើម្បីបង្កើត view បាន យើងត្រូវ

• right click លើ Index
• ជ្រើសរើសយក Add View

• វានឹងលោតផ្ទាំងមួយទៀតមក

• សូមធ្វើការជ្រើសរើសដូចរូបខាងក្រោម

• ចុច Add
• វានឹង generate view “Index” សម្រាប់ធ្វើការ Create ដូចខាងក្រោម

IX.          ជំហានទី៥៖ Run Application

សូមធ្វើការ Run Application ដូចខាងក្រោម

• ចុច F5 លើ keyboard

• ករណីយើងមិនបានបញ្ចូលអ្វីទាំងអស់ ដោយគ្រាន់តែចុចលើប៊ូតុង Create តែម្តង

• ករណីយើងបានបញ្ចូលទិន្នន័យបានត្រឹមត្រូវទៅតាម validation ដែលយើងបានដាក់អោយ