در این مقاله شما درباره ی تکنولوژی AngularJs که یکی ازالگو های مفید طراحی برای توسعه ی آسان و حرفه ای تر برنامه های کاربردی تحت وب است را می آموزید

این آسان ترین آموزش در مبحث AngularJS والگو Repository  برای توسعه ی حرفه ای تر برنامه های کاربردی MVC میباشد که شامل یه کد منبع درباره ی پروژه ی مدیریت اجازه ی تمرینی میباشد

معرفی :

هدف این مقاله مشخص کردن تکنولوژی AngularJS و Repository میباشد که یکی از الگو های مفید طراحی به منظوره توسعه ی آسان و حرفه ای تر برنامه های کاربردی میباشد. تعدادی مشکل اساسی با جی کوئری هایی مانند گیر کردن میان کد های غیر ساختاری یا گیر افتادن در بن بست ها وجود دارد اما AngularJS قادر به حل موانع در جی کوئری ها میباشد. AngularJS قدرت کافی را دارد به خصوص برای برنامه های کاربردی  CRUD (ساختن . خواندن . به روز رسانی . حذف). آن از الگو های MVC پیروی میکند تا کد هایمان واضح و مرتب باشند. همچنین به ما این امکان را میدهد که تمیزتر کد بنویسیم و تست کردن کد ها وضعیت بسیار بهتری در AngularJS دارند . اگر چه این فاکتور ها منجر به کاهش قدرت جی کوئری برای نوشتن سایر مدل های برنامه های کاربردی مانند بازی و غیره نمیشود.

بحث عمده ی دیگر در این مقاله مربوط به این است که الگو Repository  را شرح دهد که درواقع کپسوله کردن لایه دسترسی به داده ها و رسم یک خط جداگانه بین پایگاه داده های واقعی و دیگر بخش های لایه دسترسی به داده ها. این شامل چندین مزیت برای توسعه دهندگان است. برای مثال : تغییرات و به روز رسانی زمینه ها را مناسب تر باشند و چارچوب تست کردن برای کد ها ی دسترسی داده ای فیزیکی اجرا نمیشود پس ایزوله بودنشان را انعطاف پذیرتر میکند.

و آخرین مورد نیز نحوه ی چگونگی اشکال زدایی اسکریپت ها در جستجوگر وب برای مبتدیان میباشد.
در رابطه با هرکدام از این بخش ها توضیحات بیشتری خواهم داد. من این الگو ها و تکنولوژی ها را با پروژه های واقعی باز میکنم تا تصویر واضحی از آنها داشته باشیم.

پس زمینه

Repository چیست؟

Repository یکی از الگو های طراحی سودمند است که داده های فیزیکی را از میان بقیه ی لایه های بخش های دسترسی داده ها پنهان میکند. به زبان حرفه ای تر Repository دستور العمل اینکه چگونه زمینه داده هایمان را از بقیه پرسش های پایگاه داده ها و منطق دسترسی به داده ها کپسوله کنیم در اختیارمان میگذارد. این مانند یک خط است که پایگاه داده های واقعی را نسبت به سایر اجزا ایزوله میکند.همچنین باعث میشود که برنامه های کاربردی وب مان مناسب تر برای تست کردن لایه به لایه بشوند. علاوه بر این یک مموری داخلی مانند (http://www.codeproject.com/Articles/832189/List-vs-IEnumerable-vs-IQueryable-vs-ICollection-v) تهیه میکند که با دسترسی به دامنه ی اشیاء منجر به چشم پوشی از تداوم و افزایش عملکرد میشود. پس ما ترجیح میدهیم که از Repository در برنامه های MVC استفاده کنیم تا از قابلیت تست و سرعت با انعطاف پذیری در تغییرات آینده برخوردار باشیم.

ما دو انتخاب برای ساختار مخزن داریم. یک ساخت یک کلاس مخزن و رابط مخزن برای هر موجودی و راه دیگر ساخت یک کلاس GenericRepository برای همه ی موجودی ها و مشخص کردن پایه ی عملیات CRUD (ساختن . خواندن به روز رسانی  . حذف) و یک کلاس UnitOfWork تا همه ی مخزن های هر موجودی بتوانند در کلاس UnitOfWork ساخته شوند. قطعا راه دوم برای زمانی که  تعداد زیادی موجودی دارید پیشنهاد میشود.
به همین ترتیب  برای هر موجودی یک کنترلر در MVC تحت X کنترلر تولید میکنیم.فولدری میسازیم و نامش را به GenericRepository تغییر میدهیم و یک کلاس  GenericRepository.cs تولید میکنیم. کلاس GenericRepository دارای توابع  CRUD برای کار در زمینه داده ها و سپس یک فولدر جدید میسازیم نام آن را به UnitOfWork تغییر میدیم و سپس کلاسی با همین نام میسازیم. شما باید داخل این کلاس لیست مخزن ها برای هر موجودی راعلاوه بر متد های "ذخیره" و "مرتب کردن" بسازید. کنترلر ها فقط به واحد کار دسترسی دارند. شما لایه ی کاری و لایه ی داده تان را از هم جدا میکنید و هروقت که بخواهید میتوانید سیاستتان را عوض کنید و با ترجیح "ORM" دیگری مانند "NHibernate" مشکلی با لایه ی بالاتر مانند "Business" بوجود نمی آید.

چرا Repository (مخزن)با  Entity Framework ؟

این سوال خوبی است که اگر ما از Entity Framework استفاده میکنیم پس دیگر چه احتیاجی به برپا کردن مخزن دیگری بالای بستر ارتباطی داده ها داریم؟ زیرا بستر ارتباطی داده ها خود یک Repository میباشد. تصور کنید یک روز شما میخواهید از لایه ی دسترسی داده های دیگری مانند "NHibernate"  یا " ADO.NET" و یا حتی فایل های "XML" استفاده کنید .شما تنها کافیست که پایگاه داده را از "SQL" به "Oracle" تغییر دهید. پس مشکلاتان بسیار کوچک است و تنها ناچار به تغییر کوچکی درکد های خود میباشید به جای تغییر تقریبا کل ساختار ها و بانویسی دوباره آنها. از این رو الگوی Repository به ما این امکان را میدهد که ازلایه های جدا به درستی استفاده کنیم و امکان تغییر لایه ها در آینده بسیار راحت تر خواد بود و در سوی دیگر تست نیز به راحتی انجام خواهد شد.

AngularJS چیست ؟

AngularJS یک چارچوب جاوا اسکریپت است که برای مرتب کردن کد های "Html" به صورت ساخت یافته تر و واضح تر و مختصر تر بکار میرود . این تکنولوژی مشتری مداری کد های آسان و ارزان به  منظور توسعه دادن و حتی طراحی وظایف ساده ارائه میدهد. انگولارجی اس اکثر کد های زائد را حذف میکند به خصوص کد های برنامه تحت وب "CRUD". این یک الگوی "MV" میباشد و فقط یک "MVC" نیست.
دو نوع لوازم وجود دارد که به ما کمک میکند تا بتوانیم پلی بزنیم بین رابط کاربر و هسته ی کار و لایه ی داده.
کتابخانه: این نوع شامل سری های تابعی مانند جی کوئری میباشند و زمانیکه شما از چند تا از آنها استفاده کنید ($.ajax) این تابع های مرتبط را برای مدیریت توابع صدا میزند.
چارچوب ها: این نوع شامل ساختار های مخصوصی برای برنامه های اجرایی است وتوسعه دهنده ها باید از این ساختار ها پیروی کنند. مانند "durandal" و "ember".
AngularJS از روش های متفاوتی برای حل نیاز های ما استفاده میکند.AngularJS خواص جدید را در تگ های "HTML" مانند "ng-model" و "ng-repeat" جاسازی می کند که به عنوان دستورالعمل  شناخته میشوند به منظور محو مونع ما برای تطبیق و انتقال داده میباشند.
در سوی دیگر AngularJs مخلوطی از "Ajax" و "HTML DOM" با ساختار های خوبی است که من به صورت زیر آنها را توصیف میکنم:

مزایای Angular :

1-برای برنامه های کاربردی وب "CRUD" بسیار خوب است.
2 - تست کردن را در برنامه های کاربردی وب "CRUD" بسیار آسان میکند.
3 -به نوشتن کد های کمتری احتیاج است.
4 -میتوانید از کد هایتان سریعتر اجرا بگبرید.
5- یکی از معروفترین و پرطرفدارترین خاصیت ها درAngularJs دو راه آسان برای انقیاد است

    <input type="text" ng-model="simpleBinding" /><span>{{simpleBinding}}</span>  

6 -احتیاجی به تغییر دادن "HTML DOM" نیست.
7 -با کمک دستورالعمل ها وظایف شما بسیار راحت تر و زودتر انجام میگیرد.
8 -با طراحی آن در "MVC" یا به عبارت بهتر "MVW"  تجزیه و تحلیل  واقعی و عالی است

راهنمای طراحی

همانطور که در عکس بالا میبینید شما باید فایل های Angular را دانلود نمایید و فایل های جی کوئری و Angular Js را درون فولدر  Scripts قرار دهید. داخل "Module.js" نام برنامه ی Angular را بنویسید مانند "MyApp". این نام فایل های Angular تان را به هم مرتبط میکند و شما باید برای مشاهده از آن درون تگ Html تان استفاده نمایید. در این سناریو من از"Layout.cshtml_" به عنوان ویواصلی خود (با توجه به الگوی MVC) استفاده میکنم. در تگ HTML شما باید یک دستورالعمل Angular بنویسید "ng-app='MyApp" که فایل های angular را در خود نگه میدارد

سپس شما باید این فایل ها را به ویو خود به شکل <script src> معرفی نمایید.

ویو index.cshtml از Layout ما یا Layout.cshtml_  ارث بری میکند حالا توسط اضافه کردن دستورالعمل دیگری مثل ng-controller='angularCtrl' درون یک Div ، یک ارتباط بین ویو و Controller.js ایجاد میشود چون angularCtrl نام Controller.js است.

شما فقط نیاز به استفاده از تگ های HTML نظیر <input type=button"> و اضافه کردن دستورالعمل ng-model=empid برای تگ input وهرگاه شما بخواهید به تگ input  مراجعه کنید(دریافت و ارسال داده) از کنترلر Controller.js فراخوانی میشود توسط دستور ()Scope.add$ .

برای نمایش داده درون جدول در angular  شما میتوانید به آسانی از تگ table استفاده کنید بوسیله کمک گرفتن از

ng-repeat="employee in employees"

حالا هرگاه شما بخواهید (دریافت و ارسال داده ) از کنترلر داشته باشید شما نیازمند استفاده از دستور زیر می باشید:

Scope.employees$ و به کار گرفتن عبارتی نظیر  

{{employee.ID}} or {{employee.FirstName}}

یا فیلدهای دیگر.

    <table>  
       <tr ng-repeat="employee in employees">  
          <td>  
             {{employee.ID}}  
          </td>  
       </tr>  
    </table>  

اگر شما میخواهید یک متد درون Controller.Js بنویسید شما باید ServiceName.FunctionName فراخوانی کنید مانند () angularservice.getemp که angularservice  نام Service.js می باشد حالا در Service.js شما میتوانید ادامه تابع ()  getemp  را با

 $http.get("/ControllerName/ActionName")

یا برای متد اضافه کردن(adding )  که شما برای فرستادن داده از ویو به کنترلر به کار می برید :

درون  Controller.js فرستادن داده به سرویس :

var Employee = {  
   FirstName: $scope.FirstName ,  
   LastName: $scope.LastName ,  
   UserName: $scope.UserName  
};  
  
angularService.Add(Employee)  

درون Service.js فرستادن داده به  EmployeeController.cs :

    this.Add = function (employee) {  
       var response = $http({  
          method: "post",  
          url: "/Employee/Add",  
          data: JSON.stringify(employee),  
          dataType: "json"  
      
       });  
       return response;  
    }  

Angularjs در برابر Jquery

1- مشکل جی کوئری : اگر شما میخواهید که از چندین شی استفاده کنید به شما اجازه استفاده از چندین مدل در یک view داده نمی شود بنابراین برای پشتیبانی از آن احتیاج به نوشتن ViewModel دارید.
2- راه حل  angularjs برای مشکل اول: میتوانید این مشکل را با استفاده از Scope Object$ کنترل کنید این شی کوچک و  فوق العاده  میتواند داده ها را نمایش و یا تغییر دهد.
3- مشکل Jquery : شما برای استفاده از حلقه ی foreach دارید اگر شما از viewmodel استفاده میکنید و برای آن شما باید از حلقه ی for استفاده کنید
4- راه حل angularjs برای مشکل سوم:شما میتوانید این مشکل را با استفاده از دستورالعمل "ng-repeat" در داخل جدول حل کنید.

حل کنید.
5- مشکل جی کوئری :شما باید "HTML" را دستکاری کنید و با توجه به نیاز های مربوط به طراحی مدلتان آن را اختصاصی کنید و چیزی مانند این بنویسید :

Html.EditorFor(model => model.ArticleTitle).

6- راه حل angularjs برای مشکل شماره پنجم : اما با کمک گرفتن از angularjs میتوانید با استفاده از <input> و تنها با اضافه کردندستورالعمل های خاص  به هدفتان برسید .

چگونه فایل های انگولارجی اس را مرتب کنید :

Dispose Pattern (از بین بردن الگو)

 برای فهمیدن Dispose Pattern احتیاج دارید که جمع کننده زباله ها (Garbage Collection) را نیز بشناسید.

جمع کننده زباله ها

    هنگامی که شما یک شئ از نوع داده ی "زبان مشترک زمان اجرا" (CRL) بسازید فضای اختصاصی در داخل حافظه به شئ جدیدتان اختصاص داده خواهد شد. در این پروسه مدیریت پشته بهCLR کمک میکند تا فضای مخصوص را در حافظه به شئ اختصاص بدهد. فضای حافظه محدود است و امکان  ندارد که بتوان از اشیا زیادی به عنوان مصرف کنندگان منابع استفاده کرد.به همین علت ما نیاز به ابزاری داریم که حافظه را از اشیایی که به مدت طولانی از حافظه استفاده نمیکنند و توسط برنامه ها برای مدتی صدا زده نمیشوند آزاد کند. جمع کننده زباله ها ابزاری مناسب برای مدیریت حافظه و آزاد نمودن فضا از اشیای قدیمی و بلااستفاده است.
"IDisposable" یک رابط کاربری است که منابع را برای بازپس گیری منابع خاص آزاد میکند که طول عمرشان برای برنامه نویس کاملا مشخص است. مزایای آن عبارتند از خدمات تخصیص سرعت بالا بدون مشکلات دراز مدت تکه تکه شدن.
در تصویر زیر شما سه مرحله میبینید .در اولی اشیایی با نام های "A" و "B" و "C" در نظر گرفته شده اند که واضح است که "A" و "B" مرده اند درحالی که " "C زنده است. در طرف دیگر شئ های جدیدمان "D" و ""E و""F در یک صف برای استفاده از منابع هستند. فرض کنید اگر ابزاری برای متوقف کردن و آزاد سازی حافظه یا منابع وجود نداشته باشد آنگاه سایر اشیای ما باید مدت های مدیدی در صف بمانند و این سرعت اجرا را بسیار پایین می آورد. جمع کننده ی زباله ها اینجاست تا به ما کمک کند و "A" و "B" را جمع آوری میکند و آن ها را از منابع میگیرد زیرا آنها قدیمی هستند و برنامه ای از آنها تا مدت طولانی استفاده نمیکند. پس در مرحله ی دوم ما فضای خالی بیشتری داریم و "D" و "E" و "F" نیز میتوانند در مرحله سوم وارد شوند. متد  Dispose یا به بیان بهتر Dispose Pattern  به ما کمک میکند که اجرای بهتری داشته باشیم. خصوصا زمانیکه  از طول عمر منابع اطلاعات کامل داشته باشیم.

    class X : IDisposable  
        {  
      
            //Define Flag: Show us if dispose has been called or not   
            bool disposed = false;  
      
            // Public implementation of Dispose pattern callable by consumers.  
            public void Dispose()  
            {  
                Dispose(true);  
                //Using SuppressFinalize helps us to do not finalize object later  
                GC.SuppressFinalize(this);  
            }  
      
      
            // Protected implementation of Dispose pattern and allow to override it later   
            protected virtual void Dispose(bool disposing)  
            {  
                if (disposed)  
                    return;  
      
                if (disposing)  
                {  
                    //Free any other managed objects here.   
                    context.Dispose();  
                }  
      
                // Free any unmanaged objects here.   
                disposed = true;  
            }  
      
      
            ~X()  
            {  
                // release resources  
                Dispose(false);  
      
            }  
        };  
      
      
        //Calling dispose inside Controller:  
        protected override void Dispose(bool disposing)  
        {  
            X.Dispose();  
            base.Dispose(disposing);  
        }  

چگونه AngularJS را نصب کنیم

به مسیر زیر بروید :
Tools menu -> library package manager -> package manager concole
ودستور زیر را بنویسید :

install-package angularjs –version 1.3.8
مراقب انواع ورژن های angular  باشید زیرا امکان دارد استایل کد ها اندکی با هم متفاوت باشد.

استفاده از کد:

سناریو: من میخواهم از سناریوی مدیریت اجازه برای توضیح بهتر این بخش استفاده کنم.(angularJS و مخزن در MVC)  که شامل دو صفحه میباشد , اولی فقط برای انجام تابع CRUD , ساخت کارکنان , خواندن یا انتخاب کارکنان ,  به روز رسانی یا حذف اطلاعاتشان , علاوه بر اشاره کردن به سایر امکانات در Angular مانند جهت یابی ,  فیلتر کردن.میباشد  صفحه ی دوم اختصاص دارد به اجازه برای هر یک از کارکنان . در اینجا شما به یک جعبه کمبو برای نگه داشتن نام کارکنان و نقش آنها احتیاج دارید. بنابراین الزامات اساسی در برخورد با یک برنامه ی تحت وب قوی MVC را پوشش میدهد.
⦁    CRUD کارکنان (Creat Read Update Delete) : این صفحه داده ها و کاربران میتوانند ویرایش یا حذف شوند و یا کارمند جدیدی اضافه شود :

⦁    AngularJS قابلیت فیلتر داده ها را دارد :

زمانی که کاربر روی دکمه Edit کلیک میکند بخش " به روز رسانی کاربر" ظاهر می شود:

 زمانی که کاربر بر روی دکمه ی Add یا افزودن کلیک کرد. بخش افزودن کارمند ظاهر شود و در نهایت با کلیک بر روی لینک "اجازه"یا Permission که Angular شما را به صفحه ی اجازه با جهت یابی امکانات هدایت شوید.

کاربر میتواند با انتخاب کارمند موردنظرش در ComboBox اجازه دسترسی را به او بدهد :

 بارگذاری داده ها در ComboBox :

قدم به قدم استفاده ی Repository و AngularJS در پروژه ی MVC :
⦁    پایگاه داده ای بسازید و نام آن را به "MVCAdvanced " تغیییر دهید.
⦁    دو جدول بسازید بنام های "Employee" و" EmpRole "

⦁    ساخت یک پروژه جدید MVC
⦁    ساخت یک مدل داده ی جدید
⦁    ساخت یک فولدر جدید در Solution و تغییر نام آن به "GenericRepository"
⦁    ساخت کلاس "GenericRepository.cs " :

    using System;  
    using System.Collections.Generic;  
    using System.Data;  
    using System.Data.Entity;  
    using System.Linq;  
    using System.Linq.Expressions;   
      
    namespace MvcAdvanced.GenericRepository  
    {  
        public class GenericRepository<TEntity> where TEntity : class  
        {  
            internal MvcAdvancedEntities context;  
            internal DbSet<TEntity> dbSet;  
      
            public GenericRepository(MvcAdvancedEntities context)  
            {  
                this.context = context;  
                this.dbSet = context.Set<TEntity>();  
            }  
                            
            public virtual IEnumerable<TEntity> Get()  
            {  
                IQueryable<TEntity> query = dbSet;  
                return query.ToList();  
            }  
      
            public virtual TEntity GetByID(object id)  
            {  
                return dbSet.Find(id);  
            }  
      
            public virtual void Insert(TEntity entity)  
            {  
                dbSet.Add(entity);  
            }  
      
            public virtual void Delete(object id)  
            {  
                TEntity entityToDelete = dbSet.Find(id);  
                Delete(entityToDelete);  
            }  
      
            public virtual void Delete(TEntity entityToDelete)  
            {  
                if (context.Entry(entityToDelete).State == EntityState.Detached)  
                {  
                    dbSet.Attach(entityToDelete);  
                }  
                dbSet.Remove(entityToDelete);  
            }  
      
            public virtual void Update(TEntity entityToUpdate)  
            {  
                dbSet.Attach(entityToUpdate);  
                context.Entry(entityToUpdate).State = EntityState.Modified;  
            }  
      
        }  
      
    }  

⦁    ساخت پوشه "UnitOfWork " و ساخت کلاس "UnitOfWork" :

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using MvcAdvanced.GenericRepository;  
      
    namespace MvcAdvanced.UnitOfWork  
    {  
        public class UnitOfWork : IDisposable  
        {  
            private MvcAdvancedEntities context = new MvcAdvancedEntities();  
             
            private GenericRepository<Employee> employeeRepository;  
            private GenericRepository<EmpRole> empRoleRepository;  
      
            public GenericRepository<Employee> EmployeeRepository  
            {  
                get  
                {  
                    if (this.employeeRepository == null)  
                        this.employeeRepository = new GenericRepository<Employee>(context);  
                    return employeeRepository;  
                }  
            }  
      
            public GenericRepository<EmpRole> EmpRoleRepository  
            {  
                get  
                {  
                    if (this.empRoleRepository == null)  
                        this.empRoleRepository = new GenericRepository<EmpRole>(context);  
                    return empRoleRepository;  
                }  
            }     
      
            public void Save()  
            {  
                context.SaveChanges();  
            }  
      
            private bool disposed = false;  
            protected virtual void Dispose(bool disposing)  
            {  
                if (disposed)  
                return;  
      
                if (disposing)  
                {  
                    //Free any other managed objects here.   
                    context.Dispose();  
                }  
      
                // Free any unmanaged objects here.   
                disposed = true;  
            }  
            public void Dispose()  
            {  
                Dispose(true);  
                GC.SuppressFinalize(this);  
            }  
      
        }  
    }  

ساخت "EmployeeController  " در داخل پوشه " Controllers " :

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Mvc;  
    using MvcAdvanced.GenericRepository;  
    using AutoMapper;  
      
    namespace MvcAdvanced.Controllers  
    {  
        public class EmployeeController : Controller  
        {  
            private UnitOfWork.UnitOfWork unitOfWork = new UnitOfWork.UnitOfWork();  
                 
            public ActionResult Index()  
            {  
                return View();  
            }  
      
            public JsonResult GetAllEmployees()  
            {  
                var employeeList = (List<Employee>)unitOfWork.EmployeeRepository.Get();  
                return Json(employeeList, JsonRequestBehavior.AllowGet);  
            }  
      
            public string Update(Employee employee)  
            {   
                if (employee != null)  
                {  
                    var emp = unitOfWork.EmployeeRepository.GetByID(employee.ID);  
                    emp.FirstName = employee.FirstName;  
                    emp.LastName = employee.LastName;  
                    emp.UserName = employee.UserName;  
                     
                    unitOfWork.EmployeeRepository.Update(emp);  
                    unitOfWork.Save();                      
                     
                   return "Record has been Updated";  
                     
                }  
                else  
                {  
                    return "Record has Not been Updated";  
                }  
            }  
      
            public string Delete(int id)  
            {  
                try  
                {  
                    if (id != null)  
                    {  
                        unitOfWork.EmployeeRepository.Delete(id);  
                        unitOfWork.Save();  
      
                        return "Employee Has Been Deleted";  
                    }  
                    else  
                    {  
                        return "Employee Hasnot Been Deleted";  
                    }  
                }  
                catch  
                {  
                    return "Employee Hasnot Been Deleted";  
                }  
            }  
      
            public string Add(Employee employee)  
            {  
                try  
                {  
                    if (employee != null)  
                    {  
                        unitOfWork.EmployeeRepository.Insert(employee);  
                        unitOfWork.Save();  
                        return "Record has been Added";  
                    }  
                    else  
                    {  
                        return "Record has Not been Verified";  
                    }  
                }  
      
                catch  
                {  
                    return "Record has Not been Added";  
                }  
            }  
      
            protected override void Dispose(bool disposing)  
            {  
                unitOfWork.Dispose();  
                base.Dispose(disposing);  
            }  
                     
        }  
    }  

ساخت "PermissionController" در داخل کلاس   "Controller" :

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Mvc;  
    using MvcAdvanced.GenericRepository;  
      
    namespace MvcAdvanced.Controllers  
    {  
        public class PermissionController : Controller  
        {  
            private UnitOfWork.UnitOfWork unitOfWork = new UnitOfWork.UnitOfWork();  
             
            public ActionResult Index()  
            {  
                return View();  
            }  
      
            public JsonResult GetAllEmpRole()  
            {  
                var employeeList = unitOfWork.EmpRoleRepository.Get();  
                return Json(employeeList, JsonRequestBehavior.AllowGet);  
            }  
              
            public JsonResult GetAllEmpNames()  
            {  
                var employeeList = unitOfWork.EmployeeRepository.Get();  
                return Json(employeeList, JsonRequestBehavior.AllowGet);  
            }  
      
            public JsonResult GetAllRoles()  
            {  
                var roleList = (from emp in unitOfWork.EmployeeRepository.Get() join role in unitOfWork.EmpRoleRepository.Get() on emp.RoleID equals role.ID select new { emp.ID, emp.FirstName, emp.LastName, emp.UserName, role.Role }).ToList();  
                return Json(roleList, JsonRequestBehavior.AllowGet);  
            }  
      
            public string UpdateRole(Employee permission)  
            {  
      
                if (permission != null)  
                {  
                    var emp = unitOfWork.EmployeeRepository.GetByID(permission.ID);  
                    emp.RoleID = permission.RoleID;  
                     
                    unitOfWork.EmployeeRepository.Update(emp);  
                    unitOfWork.Save();  
      
                    return "Record has been Updated";  
                }  
                else  
                {  
                    return "Record has Not been Updated";  
                }  
            }  
      
            protected override void Dispose(bool disposing)  
            {  
                unitOfWork.Dispose();  
                base.Dispose(disposing);  
            }  
      
        }  
    }  

دانلود angularjs :

من از Angular نسخه 1.3.8 استفاده میکردم.ممکن است ورژن به ورژن تفاوت وجود داشته باشد. Angular.JS و Angilar-route.JS در داخل فولدر Script قرار میدهیم.

ساخت فایل های Angular:

در پوشه Content یک پوشه جدید به نام Angular بسازید و داخل آن سه فایل javascript بسازید و نام های آنها را Module.js ، Controller.js و Service.js بگزارید و داخل فایل Modal.js کد زیر را بنویسید:

    var app = angular.module('MyApp', ['ngRoute']);  
      
    app.config(['$routeProvider',function ($routeprovider) {  
          $routeprovider.  
            when('/employee', {  
                templateurl: '/Views/Employee/index.cshtml',  
                controller: 'AngularCtrl'  
            }).  
            when('/permission', {  
                templateurl: '/Views/Permission/index.cshtml',  
                controller: 'AngularCtrlRole'  
            }).  
            otherwise({  
                redirectto: '/employee'  
            });  
      }]);  

داخل view -> Shared  ->_Layout.cshtml بنویسید : (شما در حال معرفی نام برنامه (myapp) به بخش  view با افزودن ng-app )

!DOCTYPE html>  
<html ng-app='MyApp'>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width" />  
    <title>@ViewBag.Title</title>  
   <script src="~/Scripts/angular.js"></script>  
     <script src="~/Scripts/angular.min.js"></script>  
    <script src="~/Scripts/angular-route.js"></script>  
  <script src="~/Content/Angular/Module.js"></script>  
    <script src="~/Content/Angular/Service.js"></script>  
    <script src="~/Content/Angular/Controller.js"></script>  
  
    @Styles.Render("~/Content/css")  
     
</head>  
<body>  
    @RenderBody()  
  
    @Scripts.Render("~/bundles/jquery")  
    @RenderSection("scripts", required: false)  
</body>  
</html>  

در ویو Views -> Employee -> Index.cshtml کد زیر را بنویسید:

@{  
    ViewBag.Title = "Index";  
}  
   
<h2>Index</h2>  
<div ng-controller="AngularCtrl">  
    <a href="/permission">Permission</a><br />  
      
  Filter: <input type="text" value="Name" ng-model="FilterByFirstName" />  
  <br />  
       
    
    <br />  
     <input type="button" value="Add" ng-click="add()" />  
        <table cellpadding="12">  
            <tr>  
                <td><b>ID</b></td>  
                <td><b>FirstName</b></td>  
                <td><b>LastName</b></td>  
                <td><b>UserName</b></td>  
                <td><b>Operation</b></td>  
            </tr>  
            <tr ng-repeat="employee in employees | filter:FilterByFirstName ">  
                 
                <td>  
                    {{employee.ID}}  
                </td>  
                <td>  
                    {{employee.FirstName}}  
                </td>  
                <td>  
                    {{employee.LastName}}  
                </td>  
                <td>  
                    {{employee.UserName}}  
                </td>  
               <td>  
                     <input type="button" value="Edit" ng-click="edit(employee)" />  
                     <input type="button" value="Delete" ng-click="delete(employee)" />  
                      
                </td>  
                
            </tr>  
             
        </table>  
     <div ng-show="divEmpModification">  
        <p>{{Operation}} Employee</p>  
        <table>  
            <tr>  
                 
                <td>  
                    <input type="text" style="width:20px;"  disabled="disabled" ng-model="ID" />  
                </td>  
              
                 
                <td>  
                    <input type="text" style="width:94px;" ng-model="FirstName" />  
                </td>  
              
                
                <td>  
                    <input type="text" style="width:94px;" ng-model="LastName" />  
                </td>  
             
                 
                <td>  
                    <input type="text" style="width:94px;" ng-model="UserName" />  
                </td>  
                 
                <td colspan="2">  
                    <input type="button"  value="Save" ng-click="Save()" />  
                </td>  
            </tr>  
        </table>  
    </div>  
  
    </div> 

و در داخل ویو Views -> Permission -> Index.cshtml :

    <h2>Index</h2>  
    <div ng-controller="AngularCtrlRole">  
         <a href="/employee">Employee</a>  
        <p ng-model="mahsa"> ID of selected LastName is : {{selectedItem.ID}} </p>  
         
            <select data-ng-Model="selectedItem" ng-options="item.LastName for item in items">  
          </select>  
      
        <p> ID of selected Role is : {{selectedItemRole.ID}} </p>  
         
         <select ng-model="selectedItemRole" ng-options="roleitem.Role for roleitem in roleitems">  
          </select>  
      
         <input type="button" value="Save Permission" ng-click="SavePermission()" />  
      
          
            <table cellpadding="12">  
                <tr>  
                    <td><b>ID</b></td>  
                    <td><b>First Name</b></td>  
                    <td><b>Last Name</b></td>  
                    <td><b>User Name</b></td>  
                    <td><b>Role Name</b></td>  
                </tr>  
                <tr ng-repeat="view in views ">  
                     
                    <td>  
                        {{view.ID}}  
                    </td>  
                    <td>  
                        {{view.FirstName}}  
                    </td>  
                    <td>  
                        {{view.LastName}}  
                    </td>  
                    <td>  
                        {{view.UserName}}  
                    </td>  
                    <td>  
                        {{view.Role}}  
                    </td>  
                 
                    
                </tr>  
                 
          </table>  
      
           
     </div>  

ودر داخل فایل Controller.js که در مسیر Content -> Angular -> Controller.js قرار دارد کد:

    app.controller("AngularCtrl", function ($scope, angularService) {  
        $scope.divEmpModification = false;  
        GetAll();  
        //To Get All Records    
        function GetAll() {  
            var Data = angularService.getEmp();  
                Data.then(function (emp) {  
                $scope.employees = emp.data;  
            }, function () {  
                alert('Error');  
            });  
        }  
      
        $scope.edit = function (employee) {  
                 
                $scope.ID = employee.ID;  
                $scope.FirstName = employee.FirstName;  
                $scope.LastName = employee.LastName;  
                $scope.UserName = employee.UserName;  
                $scope.Password = employee.Password;  
                $scope.Operation = "Update";  
                $scope.divEmpModification = true;       
        }  
      
        $scope.add = function () {  
      
            $scope.ID ="";  
            $scope.FirstName = "";  
            $scope.LastName = "";  
            $scope.UserName = "";  
            $scope.Password = "";  
            $scope.Operation = "Add";  
            $scope.divEmpModification = true;  
        }  
      
        $scope.Save = function () {  
            var Employee = {  
                FirstName: $scope.FirstName ,  
                LastName: $scope.LastName ,  
                UserName: $scope.UserName,  
                Password: $scope.Password   
            };  
            var Operation = $scope.Operation;  
      
            if (Operation == "Update") {  
                Employee.ID = $scope.ID;  
                var getMSG = angularService.update(Employee);  
                getMSG.then(function (messagefromController) {  
                    GetAll();  
                    alert(messagefromController.data);  
                    $scope.divEmpModification = false;  
                }, function () {  
                    alert('Update Error');  
                });  
            }  
            else {  
                var getMSG = angularService.Add(Employee);  
                getMSG.then(function (messagefromController) {  
                    GetAll();  
                    alert(messagefromController.data);  
                    $scope.divEmpModification = false;  
                }, function () {  
                    alert('Insert Error');  
                });  
            }  
        }  
      
        $scope.delete = function (employee) {  
            var getMSG = angularService.Delete(employee.ID);  
            getMSG.then(function (messagefromController) {  
                GetAll();  
                alert(messagefromController.data);  
            }, function () {  
                alert('Delete Error');  
            });  
        }  
    });  
      
    app.controller("AngularCtrlRole", function ($scope, angularServiceRole) {  
        GetAllNames();  
        GetAllRoles();  
        GetAllEmpRole();  
        //To Get All Records    
        function GetAllEmpRole() {  
            var Data = angularServiceRole.getEmpRole();  
            Data.then(function (emp) {  
                $scope.views = emp.data;  
            }, function () {  
                alert('Error');  
            });  
        }  
      
        //To Get All Records    
        function GetAllNames() {  
            var Data = angularServiceRole.getName();  
            Data.then(function (emp) {  
                $scope.items = emp.data;  
            }, function () {  
                alert('Error');  
            });  
        }  
      
        function GetAllRoles() {  
            var Data = angularServiceRole.getRole();  
            Data.then(function (role) {  
                $scope.roleitems = role.data;  
            }, function () {  
                alert('Error');  
            });  
        }  
      
        $scope.SavePermission = function () {  
            var Permission = {  
                ID: $scope.selectedItem.ID,  
                RoleID: $scope.selectedItemRole.ID  
             };  
                 
            var getMSG = angularServiceRole.updateRole(Permission);  
                getMSG.then(function (messagefromController) {  
                    GetAllNames();  
                    GetAllRoles();  
                    GetAllEmpRole();  
                    alert(messagefromController.data);  
                  }, function () {  
                    alert('Save Permission Error');  
                });  
             
             
        }  
      
    });  

و در همین مسیر درون فایل Service.js کد زیر را بنویسید:

    app.service("angularService", function ($http) {  
      
            this.getEmp = function () {  
                return $http.get("/Employee/GetAllEmployees");  
            };  
      
             
      
        //Save (Update)    
            this.update = function (employee) {  
                var response = $http({  
                    method: "post",  
                    url: "/Employee/Update",  
                    data: JSON.stringify(employee),  
                    dataType: "json"  
                });  
                return response;  
            }  
      
        //Delete   
            this.Delete = function (empID) {  
                var response = $http({  
                    method: "post",  
                    url: "/Employee/Delete",  
                    params: {  
                        id: empID  
                    }  
                });  
                return response;  
            }  
      
        //Add   
            this.Add = function (employee) {  
                var response = $http({  
                    method: "post",  
                    url: "/Employee/Add",  
                    data: JSON.stringify(employee),  
                    dataType: "json"  
                      
                });  
                return response;  
            }  
         
    });  
      
    app.service("angularServiceRole", function ($http) {  
        this.getEmpRole = function () {  
            return $http.get("/Permission/GetAllEmpRole");  
        };  
      
        this.getName = function () {  
            return $http.get("/Permission/GetAllEmpNames");  
        };  
        this.getRole = function () {  
            return $http.get("/Permission/GetAllRoles");  
        };  
              
        //Save Permission    
        this.updateRole = function (permission) {  
            var response = $http({  
                method: "post",  
                url: "/Permission/UpdateRole",  
                data: JSON.stringify(permission),  
                dataType: "json"  
            });  
            return response;  
        }  
    });