26/10/2016

Sử dụng Data Validation ASP.NET MVC

Trong bài View Edit, sử dụng thay đổi thông tin Student. Bây giờ, chúng ta sẽ thực hiện kiểm tra tính hợp lệ dữ liệu nhập vào trong giao diện Edit, nếu dữ liệu không hợp lệ sẽ hiển thị thông báo khi bấm nút Save. Như hình dưới đây, nếu Student Name hoặc Age là trống.

validation-edit-asp-net-mvc
DataAnnotations

ASP.NET MVC sử dụng thuộc tính DataAnnotations để thực hiện kiểm tra tính hợp lệ dữ liệu. DataAnnotations bao gồm các thuộc tính kiểm tra tính hợp lệ sử dụng cho các quy tắc kiểm tra khác nhau, có thể được áp dụng cho các thuộc tính của lớp model.
Các thuộc tính DataAnnotations trong không gian tên System.ComponentModel.DataAnnotations.


Bảng sau đây liệt kê các thuộc tính DataAnnotations:
Attribute Mô tả
Required Xác định thuộc tính là bắt buộc
StringLength Xác định chiều dài lớn nhất có thể của thuộc tính kiểu chuỗi
Range Xác định giá trị lớn nhất và nhỏ nhất cho thuộc tính kiểu số
RegularExpression Xác định giá trị của trường phải đúng với biểu thức quy tắc xác định.
CreditCard Xác định trường là số credit card.
CustomValidation Xác định phương thức kiểm tra theo yêu cầu cho trường
EmailAddress Kiểm tra thuộc tính định dạng email
FileExtension Kiểm tra file mở rộng
MaxLength Xác định chiều dài lớn nhất của thuộc tính kiểu chuỗi
MinLength Xác định chiều dài nhỏ nhất của thuộc tính kiểu chuỗi
Phone Xác định trường là số điện thoại sử dụng biểu thức quy tắc cho số điện thoại
Các bước thực thi DataAnnotations

Bước 1: Trước hết, chúng ta áp dụng thuộc tính DataAnnotation vào các thuộc tính của lớp model Student trong ứng dụng ASP.NET MVC. Ví dụ, Student name bắt buộc, Age giữa 5 và 50.

Ví dụ:


public class Student{
public int StudentId { get; set; }
[Required]
public string StudentName { get; set; }
[Range(5,50)]
public int Age { get; set; }
}

Bước 2: Tạo phương thức action Edit sử dụng GET và POST trong StudentController. Phương thức action GET sẽ tạo ra view Edit để sửa Student đã chọn và phương thức action POST để lưu dữ liệu Student.

Ví dụ:


using MVC_BasicTutorials.Models;
namespace MVC_BasicTutorials.Controllers
{
public class StudentController : Controller
{
public ActionResult Edit(int id)
{
var std = studentList.Where(s => s.StudentId == StudentId)
.FirstOrDefault();
return View(std);
}
[HttpPost]
public ActionResult Edit(Student std)
{
if (ModelState.IsValid) {

//write code to update student

return RedirectToAction("Index");
}
return View(std);
}
}
}

Bước 3: Tạo một view Edit trong ứng dụng ASP.NET MVC sử dụng chỉnh sửa cho Student.
Để tạo một view Edit, click chuột phải vào bên trong phương thức Edit -> nhấn Add View.

add-view-asp-net-mvc

Chọn Edit Template trong dropdown Template và cũng chọn lớp model Student như hình dưới đây.

add-view-asp-net-mvc

Bây giờ, bạn nhấn Add để tạo Edit view trong thư mục View/Student. Edit.cshtml sẽ được tạo ra như hình dưới đây.


@model MVC_BasicTutorials.Models.Student
@{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}

Edit

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

Student


@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.StudentId)

@Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })


}
@Html.ActionLink("Back to List", "Index")

Như bạn có thể thấy ở trên Edit.cshtml, nó gọi phương thức HtmlHelper ValidationMessageFor cho mọi trường và phương thức ValidationSummary ở đầu trang. ValidationMessageFor có nhiệm vụ hiển thị thông báo lỗi cho các trường cụ thể. ValidationSummary sẽ hiển thị một danh sách của tất cả các thông báo lỗi cùng một lúc.

No comments:

Post a Comment