unobtrusive validation trong mvc là gì?

Chúng ta có thể hiểu đơn giản là unobtrusive validation của ASP.NET MVC giúp cho những lập trình viên giảm bớt việc viết code để kiểm tra tính hợp lệ phía client.

Ví dụ như chúng ta cần kiểm tra tính hợp lệ email người dùng nhập vào thì chúng ta cần viết đoạn mã lệnh như sau:

function isValidEmailAddress (email) {
  var validEmail = false;
  if (email) {
  email = email.trim().toLowerCase();
  var pattern = /^[w-']+(.[w-']+)*@([a-zA-Z0-9]+[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*?.[a-zA-Z]{2,6}|(d{1,3}.){3}d{1,3})(:d{4})?$/;
  validEmail = pattern.exec(email);
  }

  return validEmail;
}

Với MVC, mọi thứ trở nên đơn giản hơn.

public class UpdateUser
{
  [EmailAddress(ErrorMessage = "Please enter a valid email address.")]
  public string EmailAddress {get; set;}

}

Lớp UpdateUser giúp chúng ta kiểm tra tính hợp lệ phía server bằng cách dùng những attribute MVC cung cấp cho chúng ta, ở đây là EmailAddress attribute.

Tuy nhiên để tăng tính tương tác, phản hồi của ứng dụng với người dùng, chúng ta có thể bật unobtrusive validation lên.

Vậy làm sao bật tính năng mà ASP.NET MVC đã hỗ trợ chúng ta đây?

1. Bật chế độ hỗ trợ kiểm tra dữ liệu phía client trong file web.config

<appSettings>

  <add key="ClientValidationEnabled" value="true"/>

</appSettings>

1. Thêm unobtrusive validation script vào page

Chúng ta có thể thêm từng file script vào từng view nếu chúng ta muốn. Tuy nhiên, nếu chúng ta làm như vậy thì mất nhiều công sức quá. Để nhanh gọn, chúng ta dùng bundle trong ASP.NET MVC như sau.

Mở file App_Start/BundleConfig.cs thêm vào đoạn mã sau hay không? Nếu có là được rồi đấy

public static void RegisterBundles(BundleCollection bundles)
{
  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

"~/Scripts/jquery-{version}.js"));

  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

"~/Scripts/jquery.validate*"));
}

1. Tạo view sử dụng thử

@model Demo.ViewModels.Home.UpdateUser
@{
  ViewBag.Title = "Test";
}
@using (Html.BeginForm())
{

  <div>
    <div>
    @Html.LabelFor(x => x.EmailAddress)
    @Html.TextBoxFor(x => x.EmailAddress)
    @Html.ValidationMessageFor(x => x.EmailAddress)
    </div>
    <div>
      <input type="submit" value="Save" />
    </div>
  </div>
}

@section Scripts
{
  @Scripts.Render("~/bundles/jqueryval")
}

Chúng ta có thể bỏ qua việc kiểm tra dữ liệu phía client nhưng phải luôn luôn kiểm tra tính đúng đắn của dữ liệu phía server, đó là điều bắt buộc.

Nếu chúng ta chỉ kiểm tra dữ liệu của người dùng phía client mà không làm phía server thì nếu chẳng may người dùng tắt JavaScript ở trình duyệt thì coi như mình tèo à.