پیاده سازی Custom Validation با استفاده از AngularJS در ASP.Net MVC

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

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

همانطور که گفته شد، AngularJs این امکان را می دهد که دایرکتیوهای دلخواه خود را ایجاد کنید که به ایجاد المنت های HTML، صفت های دلخواه و… کمک می کند. به لحاظ تکنیکی، یک دایرکتیو مانند تابعی تعریف می شود که روی یک عنصر DOM خاصی اجرا می شود تا قابلیت یا رفتار آن را بهبود ببخشد. دایرکتیو نقش مهمی را در DataBinding، رویدادها، اعتبارسنجی و… اجرا می کند.

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

گام ۱: ویژوال استودیو را باز کرده و یک ASP.Net MVC Application ایجاد می کنیم. در فولدر App_Data یک Sql Server database به نام Application.mdf ایجاد می کنیم. در این دیتابیس جدولی با نام EmployeeInfo و با ساختار زیر اضافه می کنیم:

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

گام ۲: در فولدر 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 در حال حاضر در دیتابیس وجود دارد یا خیر.

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

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

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

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

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

    ماژول 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 اضافه می کنیم:

 در کد بالا، تگ input با صفت name به عنوان EmpNo تعریف شده است. این عنصر با یک صفت به عنوان required-uniquevalue اعمال شده است، این همان custom directive ای  است که ایجاد شده است، که EmpNo scope را بااستفاده از عبارت angular به صورت {{Employee.EmpNo}} می پذیرد. در پیاده سازی custom directive، تابع link، scope.$watch() را فراخوانی می کند تا مفدار صفت required-uniquevalue برای اعتبارسنجی ارسال شود.

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

custom-validation-On-AngularJS-

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

 

پیاده سازی Custom Validation با استفاده از AngularJS در ASP.Net MVC
5 (100%) 2 رایs

(448 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *