Aug - 2020

25 Data Validation and Annotation

Tạo ứng dụng ASP.NET MVC 5 thực hiện yêu cầu sau: Tạo một lớp Member (ID, Username, Fullname, Age, Email, Password); 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 được để trống, email phải đúng định dạng), sử dụng nhiều cách khác nhau (HTML5, tự code kiểm tra, Annotation) và hiển thị chi tiết khi nhập thành công

Bước 1: Mở Visual Studio 2019 chọn ASP.NET Web Application (.NET Framework) sau đó ấn Next.

Nhập tên project -> Chọn đường dẫn lưu trữ ->Create

- Màn hình tiếp theo xuất hiện chọn MVC sau đó ấn Create (Xem hình bên dưới)

Bước 2: Kích chuột phải vào Model chọn Add ->Chọn Class->nhập Member và thêm code theo gợi ý sau:

Bước 3: Kích chuột phải vào Controller chọn Add ->Chọn Controller->nhập MemberController và thêm code theo gợi ý sau:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Lab05.Models;//Note

namespace Lab05.Controllers

{

public class MemberController : Controller

{

public ActionResult CreateOne()

{

return View();

}

[HttpPost]

public ActionResult CreateOne(Member m)

{

return View("Details", m);// chuyển dữ liệu tới View nếu nhập dữ liệu hợp lệ

}

public ActionResult CreateTwo()

{

return View();

}

[HttpPost]

public ActionResult CreateTwo(Member m)

{

if (m.ID == null)

{

ViewBag.error = "Nhập mã số";

return View();

}

if (m.Username == null)

{

ViewBag.error = "Nhập tên đăng nhập";

return View();

}

if (m.Fullname == null)

{

ViewBag.error = "Nhập họ và tên";

return View();

}

if (m.Age == null)

{

ViewBag.error = "Nhập tuổi";

return View();

}

if (m.Password == null)

{

ViewBag.error = "Nhập mật khẩu";

return View();

}

if (m.Email == null)

{

ViewBag.error = "Nhập Email";

return View();

}

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();

}

return View("Details", m);

}

public ActionResult CreateThree()

{

return View();

}

[HttpPost]

public ActionResult CreateThree(Member m)

{

if (ModelState.IsValid)

return View("Details", m);

else return View();

}

public ActionResult Details()

{

return View();

}

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

- Details

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

@model Lab05.Models.Member

ViewBag.Title = "Details";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<div>

<h3>Thông tin thành viên </h3>

<hr />

<dd>

Mã số

</dd>

<dt>

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

</dt>

<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>

</dt>

<dd>

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

</dd>

</dl>

</div>

<p>

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

</p>

- CreateOne

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

@model Lab05.Models.Member

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

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Sử dụng HTML Validation data </h2>

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

<hr />

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

</div>

}

- CreateTwo (tạo View 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";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@if (ViewBag.error != null)

{

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

}

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

<hr />

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

</div>

}

- CreateThree (tạo View 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 3";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

<hr />

@Html.ValidationSummary(true)

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

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

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

</div>

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

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

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

</div>

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

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

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

</div>

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

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

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

</div>

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

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

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

</div>

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

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

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

</div>

</div>

}

Bước 5: Chạy kết quả và ấn từng muc để kiểm tra

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...

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

Lab05 - Data Validation and Annotation In ASPNET M...

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

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
	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)