logo

Đang load dữ liệu

logo devmaster

VIỆN CÔNG NGHỆ VÀ ĐÀO TẠO DEVMASTER

Đào tạo - Phần mềm - Cho thuê nhân sự

  • 0969.609.003
  • 0978.611.889
  • Trang chủ
  • Các khoá đào tạo
    • Chuyên đề WEB - PHP

      • Lập trình web với HTML5 - CSS3- JQuery - Bootstrap - Ajax - [36 giờ]
      • Lập trình web frontend - reactjs - [75 giờ]
      • Lập trình web với mã nguồn mở PHP&MYSQL - PHP FRAMEWORK [126 giờ]

      Chuyên đề Mobile

      • Lập trình Games/Apps trên nền tảng Android - [120 giờ]
      • Lập trình Games/Apps trên nền tảng IOS - [120 giờ]

      Chuyên đề JAVA

      • Ngôn ngữ lập trình hướng đối tượng với java - [40 giờ]
      • Lập trình ứng dụng với java - [100 giờ]
      • Lập trình web site với java framework (JPA, HIBERNATE, SPRING MVC, SPRINGBOOT) - [276 giờ]

      Chuyên đề NETWORK/SECURITY

      • Khoá học Quản trị hạ tầng mạng CCNA v6 - [72 giờ]
      • Khoá học quản trị hệ thống với Windows SERVER 2012- [72 giờ]
      • Chuyên gia bảo mật hệ thống CompTIA + - [110 giờ]

      Chuyên đề .NET

      • Nền tảng lập trình hướng đối tượng với C# - [40 giờ]
      • Lập trình ứng dụng WINDOWS FORM - [100 giờ]
      • Lập trình Web với ASP.NET MVC 5, WebAPI - [145 giờ]

      Chuyên đề khác

      • Ngôn ngũ lập trình C/C++ - [80 giờ]
  • Lập trình cho trẻ em
  • Dịch vụ
    • Đào tạo theo như cầu
    • Cung cấp thiết bị - Phần mềm
    • Tư vấn - Thiết kế mạng hạ tầng
    • Tư vấn - Triển khai dịch vụ mạng
    • Tư vấn - Tư vấn, triển khai giám sát hệ thống
    • Thực tập dự án
  • Lịch khai giảng
  • Tin tức
    • Tin tức và sự kiện
    • Tin hoạt động
    • Tin công nghệ
    • Hội thảo, workshop, Codecam
    • Thông tin việc làm
    • Cẩm nang chia sẻ kiến thức
  • Tiện ích
  • Liên hệ

Cẩm nang chia sẻ kiến thức

Jul - 2021

30

Lab05 - Data Validation and Annotation In ASPNET MVC 5

Cẩm nang chia sẻ kiến thức

Lab 05
Data Validation and Annotation

Mục tiêu

  • Kiểm tra dữ liệu đầu vào.
  • Áp dụng các Annotation để kiểm tra dữ liệu đầu vào.

Phần I Bài tập step by step


Tạo ứng dụng ASP.NET MVC5 thực hiện những công việc sau:

  • Tạo một lớp Member bao gồm các thông tin (MemberId,Username, Password, Age, Email).
  • Tạo view với Form nhập dữ liệu cho Member.
  • Kiểm tra tính hợp lệ của dữ liệu trên form (các trường không để trống, Age phải là số, email đúng định dạng), sử dụng nhiều cách khác nhau(HTML5, tự code kiểm tra, Annotation).
  • Hiển thị thông tin chi tiết khi nhập thành công.

Bước 1: Mở Visual Studio 2019 -> vào File -> New -> Projects -> Chọn Web -> ASP.NET Web Appliction  ->  Nhập tên project -> Chọn đường dẫn lưu trữ -> Nhập tên solution -> Nhấn OK (xem hình dưới).

Bước 1: Mở Visual Studio 2017 -> vào File -> New -> Projects -> Chọn Web -> ASP.NET Web Appliction  ->  Nhập tên project -> Chọn đường dẫn lưu trữ -> Nhập tên solution -> Nhấn OK (xem hình dưới).

Nhấn OK -> màn hình tiếp theo xuất hiện bạn chọn template là MVC sau đó chọn Change Authentication -> No Authentication -> OK -> OK.


Bước 2: Kích chuột phải vào thư mục Models chọn Add -> Class -> Nhập tên “Member” -> Add và code như sau:

public class Member

{

//với cách 1 và 2 ta sử dụng khai báo thuộc tính như sau

//public int? Id { get; set; }

//public string Username { get; set; }

//public string FullName { get; set; }

//public string Password { get; set; }

//public int? Age { get; set; }

//public string Email { get; set; }

 

//với cách 3 khai báo như sau:

[Required(ErrorMessage = "Hãy nhập mã số")]

[DataType(DataType.Currency)]

public int? Id { get; set; }

[Required(ErrorMessage = "Hãy nhập tên đăng nhập")]

public string Username { get; set; }

[Required(ErrorMessage = "Hãy nhập họ và tên")]

public string FullName { get; set; }

[Required(ErrorMessage = "Hãy nhập mật khẩu")]

[DataType(DataType.Password)]

public string Password { get; set; }

[Required(ErrorMessage = "Hãy nhập tuổi")]

[Range(18, 50, ErrorMessage = "Tuổi từ 18-50")]

public int? Age { get; set; }

[Required(ErrorMessage = "Hãy nhập email")]

[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}", ErrorMessage = "Email phải đúng định dạng")]

public string Email { get; set; }

}


Bước 3: Mở trang _Layout.cshtml tìm đoạn code tạo menu và chỉnh lại như sau:

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li>@Html.ActionLink("Sử dụng HTML5 validate", "CreateOne", "Member")</li>

<li>@Html.ActionLink("Tự validate", "CreateTwo", "Member")</li>

<li>@Html.ActionLink("Sử dụng Annotation validate", "CreateThree", "Member")</li>

</ul>

</div>


Bước 4: Kích chuột phải vào thư mục Controller tạo 1 controller mới có tên “MemberController” và code như sau:

public class MemberController : Controller

{

// GET: /Member/CreateOne

public ActionResult CreateOne()

{

return View();

}

//POST: /Member/CreateOne

[HttpPost]

public ActionResult CreateOne(Member m)

{

//chuyển dữ liệu nhận được tới View Details

return View("Details",m);

}

//GET: /Member/CreateTwo

public ActionResult CreateTwo()

{

return View();

}

//POST: /Member/CreateTwo

[HttpPost]

public ActionResult CreateTwo(Member m)

{

//kiểm tra trống các trường và thông báo lỗi tới VIEW

if (m.Id==null)

{

ViewBag.error = "Hãy nhập mã số";

return View();

}

if (m.Username == null)

{

ViewBag.error = "Hãy nhập tên đăng nhập";

return View();

}

if (m.FullName == null)

{

ViewBag.error = "Hãy nhập tên họ và tên";

return View();

}

if (m.Age==null)

{

ViewBag.error = "Hãy nhập tuổi";

return View();

}

if (m.Email == null)

{

ViewBag.error = "Hãy nhập Email";

return View();

}

//mẫu kiểm tra Email

string regexPattern=@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}";

if (!System.Text.RegularExpressions.Regex.IsMatch(m.Email,regexPattern))

{

ViewBag.error = "Hãy nhập đúng định dạng";

return View();

}

//nếu không xảy ra lỗi thì chuyển dữ liệu tới View Details

return View("Details", m);

}

//GET: /Member/CreateThree

public ActionResult CreateThree()

{

return View();

}

//POST: /Member/CreateThree

[HttpPost]

public ActionResult CreateThree(Member m)

{

//nếu trạng thái dữ liệu của Model hợp lệ thì chuyển dữ liệu tới View Details

if (ModelState.IsValid)

return View("Details", m);

else

return View(); //quay lại view Three để báo lỗi

}

//GET: /Member/Details

public ActionResult Details()

{

return View();

}

}


Bước 5: Kích chuột phải vào các Action trong Controller để tạo view

  • Details

Kích chuột phải vào các Action trong Controller để tạo view

Chỉnh lại code Razor theo gợi ý sau:

@model Lab05.Models.Member

@{

    ViewBag.Title = "Chi tiết thành viên";

}

<div>

    <h2>Chi tiết thành viên</h2>

      <hr />

    <dl class="dl-horizontal">

        <dt>

            Mã số

        </dt>

 

        <dd>

            @Html.DisplayFor(model => model.Id)

        </dd>

        <dt>

           Tên đăng nhập

        </dt>

        <dd>

            @Html.DisplayFor(model => model.Username)

        </dd>

 

        <dt>

           Họ và tên

        </dt>

        <dd>

            @Html.DisplayFor(model => model.FullName)

        </dd>

        <dt>

            Mật khẩu

        </dt>

        <dd>

            @Html.DisplayFor(model => model.Password)

        </dd>

        <dt>

           Tuổi

        </dt>

        <dd>

            @Html.DisplayFor(model => model.Age)

        </dd>

        <dt>

           Email

        </dt>

        <dd>

            @Html.DisplayFor(model => model.Email)

        </dd>

    </dl>

</div>

<p>

    @Html.ActionLink("Quay lại", "CreateOne")

</p>

  • CreateOne

-	CreateOne

Chỉnh lại code Razor theo gợi ý sau:

@model Lab05.Models.Member

@{

    ViewBag.Title = "Sử dụng HTML validate data";

}

@using (Html.BeginForm())

{

    @Html.AntiForgeryToken()

        <div class="form-horizontal">

        <h2>Thêm thành viên</h2>

        <hr />

        <div class="form-group">

            @Html.Label("Mã thành viên", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.TextBoxFor(model => model.Id, new { Required = "Required", type="number" })

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Tên đăng nhập", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.TextBoxFor(model => model.Username, new {Required="Required" })

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Họ và tên", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.TextBoxFor(model => model.FullName, new {Required="Required" })

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Mật khẩu", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.PasswordFor(model => model.Password, new { Required = "Required" })

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Tuổi", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.TextBoxFor(model => model.Age, new { Required = "Required", type = "number", min="18", max="60" })

            </div>

        </div>

 

        <div class="form-group">

            @Html.Label("Email", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.TextBoxFor(model => model.Email, new { Required = "Required", type = "email" })

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-offset-2 col-md-10">

                <input type="submit" value=" Lưu " class="btn btn-default" />

            </div>

        </div>

    </div>

}


  • CreateTwo ( làm tương tự CreateOne), chỉnh lại code Razor theo gợi ý sau:

@model Lab05.Models.Member

@{

    ViewBag.Title = "Kiểm tra dữ liệu theo cách 2";

}

<h2>Kiểm tra dữ liệu theo cách 2</h2>

@if(ViewBag.error!=null)

{

    <div class="alert alert-danger">@ViewBag.error</div>

}

@using (Html.BeginForm())

{

    @Html.AntiForgeryToken()

   

    <div class="form-horizontal">

        <hr />

        <div class="form-group">

            @Html.Label("Mã thành viên", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Id)

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Tên đăng nhập", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Username)

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Họ và tên", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.FullName)

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Mật khẩu", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.PasswordFor(model => model.Password)

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Tuổi", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Age)

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Email", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Email)

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-offset-2 col-md-10">

                <input type="submit" value=" Lưu " class="btn btn-default" />

            </div>

        </div>

    </div>

}


  • CreateThree (làm tương tự CreateOne), chỉnh sửa code Razor theo gợi ý sau:

@model Lab05.Models.Member

@{

    ViewBag.Title = "Kiểm tra dữ liệu theo cách 3";

}

<h2>Kiểm tra dữ liệu theo cách 3</h2>

@using (Html.BeginForm())

{

    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true)

        <div class="form-group">

            @Html.Label("Mã thành viên", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Id)

                @Html.ValidationMessageFor(model => model.Id)

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Tên đăng nhập", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Username)

                @Html.ValidationMessageFor(model => model.Username)

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Họ và tên", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.FullName)

                @Html.ValidationMessageFor(model => model.FullName)

            </div>

        </div>

        <div class="form-group">

           @Html.Label("Mật khẩu", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Password)

                @Html.ValidationMessageFor(model => model.Password)

            </div>

        </div>

        <div class="form-group">

            @Html.Label("Tuổi", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Age)

                @Html.ValidationMessageFor(model => model.Age)

            </div>

        </div>

        <div class="form-group">

           @Html.Label("Email", new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.Email)

                @Html.ValidationMessageFor(model => model.Email)

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-offset-2 col-md-10">

                <input type="submit" value=" Lưu " class="btn btn-default" />

            </div>

        </div>

    </div>

}


Bước 6: Chạy trang Index và kích vào từng cách để kiểm tra

  • Cách 1

Thêm mới thành viên


  • Cách 2

Kiểm tra dữ liệu theo cách 2


  • Cách 3

Kiểm tra dữ liệu theo cách 3


Phần II Bài tập tự làm


Phát triển tiếp bài số 2 phần bài tập tự làm của Lab 04 với 1 số yêu cầu sau

  • Kiểm tra dữ liệu rỗng
  • Kiểm tra giá phải là số dương
  • Kiểm tra trùng mã sản phẩm khi thêm vào

Nguồn: Devmaster Academy

Các bài viết cùng chủ đề

BÍ QUYẾT HỌC LẬP TRÌNH CHO CÁC BẠN ĐẦU NĂM HỌC MỚI ❤
BÍ QUYẾT HỌC LẬP TRÌNH CHO CÁC BẠN ĐẦU NĂM HỌC MỚI...
5 Phương pháp hay để mở rộng các dự án React của bạn một cách dễ dàng
5 Phương pháp hay để mở rộng các dự án React của b...
Lab06.1 - Data Access In ASPNET MVC 5
Lab06.1 - Data Access In ASPNET MVC 5
Lab05 - Data Validation and Annotation In ASPNET MVC 5
Lab05 - Data Validation and Annotation In ASPNET M...
Lab 04 - Model in ASP.NET MVC 5 - Phần tự thực hành
Lab 04 - Model in ASP.NET MVC 5 - Phần tự thực hàn...
Lab 04 - Model in ASP.NET MVC 5 - Bài 4.2
Lab 04 - Model in ASP.NET MVC 5 - Bài 4.2

Các khóa đào tạo chuyên đề

Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
Lập trình ứng dụng trên nền tảng android Lập trình ứng dụng trên nền tảng android
Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack

Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
Lập trình ứng dụng với WINDOWS FORM Lập trình ứng dụng với WINDOWS FORM
Lập trình ứng dụng với JAVA (FORM) Lập trình ứng dụng với JAVA (FORM)
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
Lập trình frontend với reacjs (Full) Lập trình frontend với reacjs (Full)
Viện Công Nghệ Và Đào Tạo Devmaster

DEVMASTER ACADEMY

Địa chỉ: Tầng 6 - Tòa nhà VIỆN CÔNG NGHỆ
Số 25, Vũ Ngọc Phan - Láng Hạ - Đống Đa - Hà Nội

Hotline: 0969 609 003 | 0978 611 889

devmaster.contact@gmail.com

hna.tvchung@gmail.com

CÁC KHÓA HỌC CHUYÊN ĐỀ

  • Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
  • Lập trình ứng dụng trên nền tảng android
  • Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
  • Lập trình ứng dụng với WINDOWS FORM
  • Lập trình ứng dụng với JAVA (FORM)
  • Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
  • Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
  • Lập trình frontend với reacjs (Full)
Viện Công Nghệ Và Đào Tạo Devmaster

VIỆN CÔNG NGHỆ VÀ ĐÀO TẠO DEVMASTER - Học thực tế * Làm thực tế * Cam kết việc làm
Copyright by Ⓒ DEVMASTER 2015