اعتبار سنجی (Validation) CheckBox در ASP.Net MVC Razor با استفاده از JQuery
در این مقاله با مثال توضیح خواهم داد که چگونه میتوان اعتبار سنجی CheckBox را در Client Side با استفاده از jQuery در ASP.Net MVC Razor انجام دهیم.
اعتبار سنجی سمت مشتری با استفاده از کلاس Model و ویژگی های Annotation داده می شود.
مشخصه Annotation مورد نیاز برای Validation Boolean یعنی انجام Validation Checked یا Unchecked برای CheckBox کار نمی کند.
پس یک کلاس جدید با نام CheckBoxRequired ایجاد میکنیم تا برای مشخص کردن علامت گذاری اطلاعات اعتبار سنجی سفارشی برای CheckBox ایجاد شود . این ویژگی CheckBox را بعنوان اعتبار Boolean معتبر می کند یعنی فقط دو مقدار True یا False را میگیرد و خطایی در هنگام مقدار False نمایش میدهد.
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web;
using System.Web.Mvc;
public class CheckBoxRequired : ValidationAttribute, IClientValidatable
{
public override bool IsValid(object value)
{
if (value is bool)
{
return (bool)value;
}
return false;
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
yield return new ModelClientValidationRule
{
ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
ValidationType = "checkboxrequired"
};
}
}
Model
کلاس Model زیر شامل یک فیلد Gender است که به آن مشخصه Annotation مورد نیاز داده شده است.
Annotation مورد نیاز داده شده با یک پیام Error Property با مقدار رشته مشخص شده است. هنگامی که اعتبار سنجی نتواند انجام شود، این مقدار رشته به کاربر نمایش داده می شود.
public class PersonModel
{
[Display(Name = "من شرایط و ضوابط فوق را قبول می کنم.")]
[CheckBoxRequired(ErrorMessage = "لطفا شرایط و ضوابط را تایید کنید.")]
public bool TermsConditions { get; set; }
}
Controller
کنترل کننده متشکل از دو عمل است.
روش GET
در داخل این روش ، به سادگی View بازگردانده می شود.
روش POST
این روش عمل عملیات POST را انجام می دهد و هنگامی که فرم ارسال می شود، شی کلاس PersonModel به این روش ارسال می شود.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(PersonModel person)
{
return View();
}
}
View
در داخل View، در خط اول، کلاس PersonModel به عنوان مدل برای نمایش اعلام می شود.
View شامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام اکشن در اینجا Index است.
ControllerName - نام کنترل کننده. در این مورد نام Home است.
FormMethod - این روش فرم را یعنی GET یا POST مشخص می کند. در این مورد به POST تنظیم خواهد شد.
در داخل نمایش، سه تابع HTML Helper زیر استفاده می شود: -
1. Html.CheckBoxFor - ایجاد CheckBox برای فیلد Model.
2. Html.LabelFor - نمایش نام فیلد مدل.
3. Html.ValidationMessageFor - نمایش پیام Validation برای فیلد.
همچنین دکمه Submit وجود دارد که هنگام کلیک، فرم ارسال می شود.
بسته های اسکریپت jQuery و jQuery Validation در انتهای مدل با استفاده از تابع Scripts.Render رندر می شوند.
در نهایت به منظور ایجاد Validation Annotation سفارشی اطلاعات CheckBoxRequired برای کار در سمت کاربر، روش اعتبار باید به Adverters Validation jQuery اضافه شود.
@model CheckBox_Validation_MVC.Models.PersonModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
.error {
color: red;
}
</style>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<table>
<tr>
<td>@Html.CheckBoxFor(m => m.TermsConditions)</td>
<td>@Html.LabelFor(m => m.TermsConditions)</td>
</tr>
<tr>
<td></td>
<td>
@Html.ValidationMessageFor(m => m.TermsConditions, "", new { @class = "error" })
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
(function ($) {
$.validator.unobtrusive.adapters.addBool("checkboxrequired", "required");
}(jQuery));
</script>
</body>
</html>