Custom Validation

در این مقاله به برسی Custom Validation میپردازیم همراه ما باشید.AngularJS تقریبا برای همه کارهایی که می خواهیم در وب اپلیکیشن انجام دهیم directive دارد، اما با این حال امکان افزایش قابلیت های دایرکتیوها را با ایجاد directive سفارشی خود به ما می دهد.

اجازه بدهید کار را با یک ASP.Net Web API ای شروع کنیم که داده هایی را از UI و از طریق model می پذیرد.

این API یک شماره کارمندی را به سرور ارسال می کند و بررسی می کند که آیا در حال حاضر وجود دارد یا خیر.

اگر EmpNo در حال حاضر در سرور وجود داشته باشد یک خطای اعتبارسنجی نمایش داده می شود، در غیر این صورت مقدار آن پذیرفته می شود.

همانطور که گفته شد، AngularJs این امکان را می دهد که دایرکتیوهای دلخواه خود را ایجاد کنید که به ایجاد المنت های HTML، صفت های دلخواه و… کمک می کند.

به لحاظ تکنیکی، یک دایرکتیو مانند تابعی تعریف می شود که روی یک عنصر DOM خاصی اجرا می شود تا قابلیت یا رفتار آن را بهبود ببخشد.

دایرکتیو نقش مهمی را در DataBinding، رویدادها، اعتبارسنجی و… اجرا می کند.

ما می توانیم custom validation خود را با استفاده از custom directives در AngularJS پیاده سازی کنیم.

گام اول پیاده سازی Custom Validation

ویژوال استودیو را باز کرده و یک ASP.Net MVC Application ایجاد می کنیم.

در فولدر App_Data یک Sql Server database به نام Application.mdf ایجاد می کنیم.

در این دیتابیس جدولی با نام EmployeeInfo و با ساختار زیر اضافه می کنیم:

 CREATE TABLE [dbo].[EmployeeInfo] (
    [EmpNo]       INT          IDENTITY (1, 1) NOT NULL,
    [EmpName]     VARCHAR (50) NOT NULL,
    [DeptName]    VARCHAR (50) NOT NULL,
    [Designation] VARCHAR (50) NOT NULL,
    [Salary]      DECIMAL (18) NOT NULL,
    PRIMARY KEY CLUSTERED ([EmpNo] ASC)
);

چند داده آزمایشی در جدول وارد می کنیم.

گام ۲:در فولدر Models، یک ADO.Net Entity Framework با نام ApplicationEDMX اضافه می کنیم.

در Wizard آن، فایل Application.mdf را انتخاب می کنیم.

جدول EmployeeInfo را برای نگاشت(mapping) انتخاب می کنیم. به این ترتیب نگاشت جدول با کلاس EmployeeInfo در پروژه صورت می گیرد.

گام ۳:در فولدر Controllers، یک ASP.Net Web API جدید با Entity Framework اضافه می کنیم.

نام این کلاس Web API را EmployeeInfoAPIController می گذاریم.

کلاس EmployeeInfo Model و ApplicationEntities را به عنوان کلاس DataContext انتخاب می کنیم.

با این کار action method های مربوط به Get، Post، Put و Delete را تولید می کند.

در این کلاس، متد زیر را اضافه می کنیم تا بررسی کند آیا Employee در حال حاضر در دیتابیس وجود دارد یا خیر.

///summary
/// Method to Check if the Employee already present
////summary
///param name=e/param
///returns/returns
private bool CheckIfEmpExist(EmployeeInfo e)
{
    bool isExits = false;
 
    var Emp = db.EmployeeInfoes.Find(e.EmpNo);
    if (Emp != null)
    {
        isExits = true;
    }
 
    return isExits;
}

گام ۴:

تغییرات زیر را در متد PostEmployeeInfo() (کد رنگی شده) ایجاد می کنیم.

// POST: api/EmployeeInfoAPI
[ResponseType(typeof(EmployeeInfo))]
public IHttpActionResult PostEmployeeInfo(EmployeeInfo employeeInfo)
{
 
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
 
    if (CheckIfEmpExist(employeeInfo))
    {
        return Conflict();
    }
 
    if(employeeInfo.EmpName!=null)
    { 
    db.EmployeeInfoes.Add(employeeInfo);
    db.SaveChanges();
 
        return CreatedAtRoute("DefaultApi", new { id = employeeInfo.EmpNo }, employeeInfo);
    }
    return Ok();
     
}

متد بالا چک می کند که آیا Employee در حال حاضر وجود دارد یا خیر، اگر وجود داشت وضعیت conflict برگردانده می شود.

گام ۵:با استفاده از NuGet Package Manager رفرنس های jQuery، Bootstrap و AngularJs را اضافه می کنیم.

گام ۶:در فولدر Scripts، فولدر جدیدی با نام MyScripts اضافه می کنیم. در این فولدر، فایل جاوا اسکریپت جدیدی با نام logic.js وارد می کنیم. کد زیر را در آن می نویسیم:

var app;
(function () {
app = angular.module('appmodule', []);
})();

//The Directive for Custom Validation for the Attribute Directive
app.directive('requiredUniquevalue', function ($http) {
return {
require: 'ngModel',
link: function (scope, element, attribute, ctrl) {
scope.$watch(attribute.ngModel, function () {
$http({
method: 'POST',
url: '/api/EmployeeInfoAPI/' + attribute.requiredUniquevalue,
data: { 'EmpNo': attribute.requiredUniquevalue }
}).success(function (res) {
if (res) {
ctrl.$setValidity('requiredUniquevalue', false);
} else {
ctrl.$setValidity('requiredUniquevalue', true);
}
}).error(function (err) {
ctrl.$setValidity('requiredUniquevalue', false);
});
});
}
}
});

//The Controller
app.controller('appctrl', function ($scope) {
$scope.Employee = {
EmpNo: 0,
EmpName: ,
DeptName: ,
Salary: ,
Designation: ,
};

});

کد جاوا اسکریپت بالا بخش های زیر را دارد:

  • ماژول angular به نام “appmodule”
  • یک Custom Directive به نام requireUniquevalue. این دایرکتیو $http را به عنوان dependency می پذیرد چرا که ما باید Web API را فراخوانی کرده و بررسی کنیم که آیا EmpNo در حال حاضر وجود دارد. این دایرکتیو با تابعی که پارامترهای زیر را می پذیرد، با یک property link تنظیم شده است:
    • Scope: این property برای بررسی آپدیت ها و تغییر مقادیر تعریف شده است.
    • Attribute: این پارامتر مقدار صفات عناصر DOM را می گیرد.
    • Element و ctrl: این دو برای مدیریت اجرای عناصری که به controller scope متصل شده اند برای کنترل وضعیت اعتبار استفاده می شوند. این پارامتر از تابع $setValidity() برای اعتبارسنجی عنصر استفاده می شود.
  • تابعی که برای link property اعمال شده است، Web API را فراخوانی کرده و EmpNo را برای آن پست می کند. اگر EmpNo وجود داشته باشد، $setValidity() مقدار false برمی گرداند، در غیر این صورت True است.
  • Angular Controller با نام “appctrl” برای اعلان و تعریف شی ای که به UI متصل می شود استفاده می شود.

گام ۷: در فولدر Controller، یک MVC controller خالی با نام EmployeeController و یک empty index view از آن ایجاد می کنیم.

گام ۸: کد زیر را در Index.chtml اضافه می کنیم:

@{
    ViewBag.Title = Index;
}
 
h2Index/h2
link href=~/Content/bootstrap.min.css rel=stylesheet /
script src=~/Scripts/jquery-2.1.3.min.js/script
script src=~/Scripts/bootstrap.min.js/script
script src=~/Scripts/angular.min.js/script
script src=~/Scripts/MyScripts/Logic.js/script
div ng-app=appmodule
    div ng-controller=appctrl
        form novalidate role=form name=frmEmployee
            table class=table table-condensed table-bordered table-striped
                tr
                    td
                        EmpNo
                    /td
                    td
                        div
                            input type=text name=EmpNo ng-model=Employee.EmpNo
                                   required-uniquevalue={{Employee.EmpNo}} /
                            span class=help-block ng-if=frmEmployee.EmpNo.$error.requiredUniquevalue amp;amp; frmEmployee.EmpNo.$dirtyEmpNo is already Present/span
                        /div
                    /td
                /tr
            /table
        /form
    /div
/div

در کد بالا، تگ input با صفت name به عنوان EmpNo تعریف شده است.

این عنصر با یک صفت به عنوان required-uniquevalue اعمال شده است، این همان custom directive ای  است که ایجاد شده است، که EmpNo scope را بااستفاده از عبارت angular به صورت {{Employee.EmpNo}} می پذیرد.

در پیاده سازی custom directive، تابع link، scope.$watch() را فراخوانی می کند تا مفدار صفت required-uniquevalue برای اعتبارسنجی ارسال شود.

برنامه را اجرا کرده و EmpNo را در TextBox وارد نمایید، اگر EmpNo وجود داشت، خروجی به شکل زیر خواهد بود

 آموزش Validation

دایرکتیوهای AngularJs برای پیاده سازی آسان اعتبارسنجی های مخصوص دامنه بسیار مفید هستند.

در این مقاله نشان دادیم که چگونه می توان به سادگی از آن ها در اپلیکیشن سمت سروری که با ASP.Net MVC ایجاد شده استفاده کرد.

فاطمه زکایی

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

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.