۵
شهریور

جلسه ۲۵ : پیاده سازی اعتبارسنجی در ASP.NET MVC

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش ASP.NET MVC ، را دنبال می کنند. بعد از ایجاد فرم ها در MVC مبحث بعدی که مطرح خواهد شد، چگونگی پیاده سازی و استفاده از اعتبار سنجی های مختلف برای فیلدهای ورودی فرم است. اعتبار سنجی یکی از اصلی ترین بخش های تشکیل دهنده ی طراحی فرم ها و صفحات وب است، چرا که با استفاده از آن می توانیم وضعیت ورودی های فرم را از جمله خالی نبودن فیلدهای ورودی ، تعداد کاراکترها ، وارد شدن ورودی در قالب مشخص شده و …را کنترل کنیم. از این رو ما مباحث این فصل را به اعتبار سنجی در ASP.NET MVC و آموزش اولین بخش از این فصل را نیز به چگونگی پیاده سازی اعتبارسنجی در ASP.NET MVC و ویژگی DataAnnotations در ASP.NET اختصاص داده ایم.

پیاده سازی اعتبارسنجی در ASP.NET MVC

در این بخش یاد خواهید گرفت که چه طور اعتبار سنجی داده ها را در یک برنامه ی ASP.NET MVC پیاده سازی کنید.

در بخش های قبلی ما یک نمای Edit را برای Student ایجاد کردیم. حالا می خواهیم که یک اعتبار سنجی داده برای نمای Edit ایجاد کنیم.

پیام های این اعتبار سنجی، پس از کلیک روی دکمه ی Save نمایش داده می شود.

اعتبارسنجی در ASP.NET MVC

ویژگی DataAnnotations

فریم ورک 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	مشخص می کند که ورودی یک فیلد باید یک قالب شماره تلفن باشد.

مراحل ایجاد اعتبار سنجی در نمای Edit از کلاس student

۱- ابتدا باید ویژگی DataAnnotation را برای ویژگی های کلاس مدل Student تعریف کنید، که ما در این مثال می خواهیم مشخص کنیم که ویژگی های StudentName و Age نباید خالی باشد و همچنین ورودی Age باید بین ۵ تا ۵۰ باشد:

مثال :

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

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 ویرایش شده را نشان می دهد:

مثال :

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

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 کلیک کنید.

مرحله 3

در پنجره ی Add View نام نمایه را Edit تنظیم کنید.

قالب Edit را از منوی کشویی Template انتخاب کرده و مدل کلاس Student را نیز انتخاب نمایید.

انتخاب مدل کلاس

اکنون روی Add برای تولید نمای Edit زیر فولدر View/Student کلیک کنید. Edit.cshtml تولید شده و نمایش داده می شود.

مثال – تولید Edit.cshtml :

مثال :

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

@model MVC_BasicTutorials.Models.Student

ViewBag.Title = "Edit";

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

}

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

<h4>Student</h4>

<hr />

@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" })

</div>

@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" })

</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 اعمال شود.

۳- ویژگی های اعتبار سنجی زیر در بصورت پیش فرض در دسترس اند:

Required
StringLength
Range
RegularExpression
CreditCard
CustomValidation
EmailAddress
FileExtension
MaxLength
MinLength
Phone

۴- از ValidationSummary برای نمایش دادن تمام خطاها در نمای view استفاده کنید.

۵- از متدهای کمکی ValidationMessageFor یا ValidationMessage برای نمایش سطح خطاها در view استفاده کنید.

۶- قبل از بروزرسانی متد اجرایی، معتبر بودن مدل را با استفاده از ModelState.IsValid بررسی کنید.

۷- اعتبار سنجی سمت سرور را برای نمایش پیغام های خطا بدون استفاده از postback فعال کنید.

کلام آخر

با پیاده سازی اعتبارسنجی در ASP.NET MVC و استفاده از انواع اعتبارسنجی های نوع داده در سمت کاربر، شما به راحتی می توانید انواع ورودی های کاربر را قبل از ارسال به سرور، بررسی کرده و درصورت نامعتبر بودن ورودی ، به کاربر پیغام خطای مربوطه را نمایش دهید.

در بخش بعدی به آموزش استفاده از پیغام های اعتبار سنجی خواهیم پرداخت.

QR: جلسه ۲۵ : پیاده سازی اعتبارسنجی در ASP.NET MVC

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 2

حسین مهدوی
اردیبهشت ۱۳, ۱۳۹۸
سلام
من میخوام برای مدلهایی که با 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” })
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۵ : پیاده سازی اعتبارسنجی در ASP.NET MVC

مقدمه

پیاده سازی اعتبارسنجی در ASP.NET MVC

ویژگی DataAnnotations

مراحل ایجاد اعتبار سنجی در نمای Edit از کلاس student

مرحله ۲ :

مرحله ۳

کلام آخر

لیست مطالب دوره

مقدمات آموزش ASP.NET MVC

آموزش Html helper

اعتبارسنجی در ASP.NET MVC

نمای طراحی

تکنیک Bundling

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ