با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش ASP.NET MVC ، را دنبال می کنند. بعد از ایجاد فرم ها در MVC مبحث بعدی که مطرح خواهد شد، چگونگی پیاده سازی و استفاده از اعتبار سنجی های مختلف برای فیلدهای ورودی فرم است. اعتبار سنجی یکی از اصلی ترین بخش های تشکیل دهنده ی طراحی فرم ها و صفحات وب است، چرا که با استفاده از آن می توانیم وضعیت ورودی های فرم را از جمله خالی نبودن فیلدهای ورودی ، تعداد کاراکترها ، وارد شدن ورودی در قالب مشخص شده و …را کنترل کنیم. از این رو ما مباحث این فصل را به اعتبار سنجی در ASP.NET MVC و آموزش اولین بخش از این فصل را نیز به چگونگی پیاده سازی اعتبارسنجی در ASP.NET MVC و ویژگی DataAnnotations در ASP.NET اختصاص داده ایم.
در این بخش یاد خواهید گرفت که چه طور اعتبار سنجی داده ها را در یک برنامه ی ASP.NET MVC پیاده سازی کنید.
در بخش های قبلی ما یک نمای Edit را برای Student ایجاد کردیم. حالا می خواهیم که یک اعتبار سنجی داده برای نمای Edit ایجاد کنیم.
پیام های این اعتبار سنجی، پس از کلیک روی دکمه ی Save نمایش داده می شود.
فریم ورک ASP.NET MVC از ویژگی DataAnnotations برای پیاده سازی اعتبار سنجی نوع داده استفاده می کند.
DataAnnotations شامل ویژگی های تشکیل دهنده ی اعتبارسنجی برای انواع قوانین اعتبارسنجی می شود. که می تواند به ویژگی های مدل کلاس اضافه شود.
فریم ورک ASP.NET MVC بصورت خودکار قوانین و پیام های اعتبار سنجی را در نمای view نمایش می دهد.
ویژگی DataAnnotations در کلاس فضای نام System.ComponentModel.DataAnnotations قرار دارد.
جدول زیر لیستی از ویژگی های اعتبارسنجی را نمایش می دهد:
Attribute | Description |
---|---|
Required | نشان می دهد که یک فیلد نباید خالی باشد. |
StringLength | حداکثر طول رشته ورودی در یک فیلد را مشخص می کند. |
Range | بازه ی ورودی داده های عددی را در یک فیلد مشخص می کند. |
RegularExpression | مشخص می کند که داده های یک فیلد مانند ایمیل باید در یک قالب مشخص وارد شوند. |
CreditCard | مشخص می کند که ورودی یک فیلد فقط در قالب شماره کارت باید وارد شود. |
CustomValidation | برای ایجاد اعتبارسنجی مورد نظر بکار می رود. |
EmailAddress | مشخص می کند که ورودی فیلد باید در قالب ایمیل وارد شود. |
FileExtension | ورودی با پسوند فایل تایید می شود. |
MaxLength | حداکثر طول رشته ی ورودی را برای یک فیلد مشخص می کند. |
MinLength | حداقل طول رشته ی ورودی را برای یک فیلد مشخص می کند. |
Phone | مشخص می کند که ورودی یک فیلد باید یک قالب شماره تلفن باشد. |
۱- ابتدا باید ویژگی DataAnnotation را برای ویژگی های کلاس مدل Student تعریف کنید، که ما در این مثال می خواهیم مشخص کنیم که ویژگی های StudentName و Age نباید خالی باشد و همچنین ورودی Age باید بین ۵ تا ۵۰ باشد:
1 2 3 4 5 6 7 8 9 10 | public class Student { public int StudentId { get; set; } [Required] public string StudentName { get; set; } [Range(5,50)] public int Age { get; set; } } |
در مثال فوق، ما اعتبار سنجی Required را به ویژگی StudentName اعمال کرده ایم، بنابراین فریم ورک MVC بصورت خودکار پیام های خطا را نمایش می دهد.
اگر کاربر ورودی های StudentName و Age را وارد نکرده و روی save کلیک کند، پیغام خطای اعتبارسنجی Required ظاهر می شود.
همچنین اگر ورودی Age بیشتر از ۵۰ با کمتر از ۵ باشد نیز پیغام خطای اعتبارسنجی Range ظاهر می شود.
متدهای GET و POST متد اجرایی را همانند بخش های قبلی ایجاد کنید. متد GET نمای Edit را به حالت ویرایش student انتخاب شده می برد.
متد ویرایش POST نیز student ویرایش شده را نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 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); } } } |
ما ابتدا چک می کنیم که ModelState معتبر است یا خیر. اگر ModelState معتبر بود سپس student را در پایگاه داده بروزرسانی خواهیم کرد، و اگر معتبر نبود مجددا نمای Edit را با داده های student باز می گردانیم.
ModelState.IsValid تشخیص می دهد که مقادیری که ارسال شده، باید مورد تایید تمام اعتبار سنجی های ویژگی DataAnnotation که به ویژگی های کلاس model اعمال شده باشد.
در حال حاضر یک نمای Edit برای Student ایجاد کنید.
برای ایجاد نمای Edit داخل متد اجرایی Edit راست کلیک کرده و سپس روی ..Add View کلیک کنید.
در پنجره ی Add View نام نمایه را Edit تنظیم کنید.
قالب Edit را از منوی کشویی Template انتخاب کرده و مدل کلاس Student را نیز انتخاب نمایید.
اکنون روی Add برای تولید نمای Edit زیر فولدر View/Student کلیک کنید. Edit.cshtml تولید شده و نمایش داده می شود.
مثال – تولید Edit.cshtml :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | @model MVC_BasicTutorials.Models.Student @{ ViewBag.Title = "Edit"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Edit</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Student</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.HiddenFor(model => model.StudentId) <div class="form-group"> @Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Save" class="btn btn-default" /> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> |
همانطور که در Edit.cshtml در بالا مشاهده می کنید، آن را متد ValidationMessageFor برای هر فیلد و متد ValidationSummary در بالا می نامند.
ValidationMessageFor برای نمایش پیغام خطا برای برای فیلد مشخص شده ، انعطاف پذیر است.
ValidationSummary لیستی از تمام پیغام های خطا را نمایش می دهد.
بنابراین حالا اگر اطلاعات فرم Edit را بدون وارد کردن ورودی های Name یا Age ارسال کنید، پیغام های اعتبار سنجی نمایش داده می شود.
بنابراین شما می توانید اعتبارسنجی ها را با انواع ویژگی DataAnnotation به کلاس model و با استفاده از متدهای ()ValidationMessage یا ()ValidationMessageFor در نمای view اعمال کنید.
نکات زیر را به خاطر بسپارید:
۱- ASP.NET MVC از ویژگی های DataAnnotations برای اعتبار سنجی استفاده می کند.
۲- ویژگی های DataAnnotations می تواند به ویژگی های کلاس model اعمال شود.
۳- ویژگی های اعتبار سنجی زیر در بصورت پیش فرض در دسترس اند:
۴- از ValidationSummary برای نمایش دادن تمام خطاها در نمای view استفاده کنید.
۵- از متدهای کمکی ValidationMessageFor یا ValidationMessage برای نمایش سطح خطاها در view استفاده کنید.
۶- قبل از بروزرسانی متد اجرایی، معتبر بودن مدل را با استفاده از ModelState.IsValid بررسی کنید.
۷- اعتبار سنجی سمت سرور را برای نمایش پیغام های خطا بدون استفاده از postback فعال کنید.
با پیاده سازی اعتبارسنجی در ASP.NET MVC و استفاده از انواع اعتبارسنجی های نوع داده در سمت کاربر، شما به راحتی می توانید انواع ورودی های کاربر را قبل از ارسال به سرور، بررسی کرده و درصورت نامعتبر بودن ورودی ، به کاربر پیغام خطای مربوطه را نمایش دهید.
در بخش بعدی به آموزش استفاده از پیغام های اعتبار سنجی خواهیم پرداخت.
حسین مهدوی
سلام
من میخوام برای مدلهایی که با ef تولید شدند برای اعتبار سنجی استفاده کنم. این کلاسها با هر بار آپدیت مدل دوباره ساخته میشن . چطور باید عمل کنم؟
xdsadas
@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” })