نحوه ی انجام عملیات CRUD در grid Kendo با استفاده از AngularJS، برای ساخت یک برنامه پیچیده ،مفید وبه راحتی صورت میگیرد ، به همین دلیل در این مقاله قصد با استفاده از AngularJS و ASP.NET WEB API عملیات CRUD را در Kendo Gird پیاده سازی میکنیم.

مراحل مقاله به شرح زیر است،

     ایجاد یک برنامه کاربردی API ASP.NET می باشد.
     ایجاد یک کنترل.
     اجرای عملیات CRUD در Kendo Gird با استفاده از AngularJS با  REST API.

 یک برنامه وب API با استفاده از installed web template در Visual Studio به  شکل زیر ایجاد کنید:

ایجاد کلاسهای مدل:

در Solution Explorer روی پوشه Model  راست کلیک کرده و   Addو سپس Class را انتخاب و کلاسی با نام Department میسازیم.

Department.cs

    public class Department  
        {  
            public int? DepartmentID { get; set; }  
            [Required]  
            public string DepartmentName { get; set; }  
        }  

 ایجاد کلاس Context

کلاس دیگری با نام DetailGridContext در پوشه مدل که Entity framework code first context است.

DetailGridContext.cs

    public class DetailGridContext : DbContext  
        {  
          
            public DetailGridContext() : base("name=DetailGridContext")  
            {  
            }  
      
            public System.Data.Entity.DbSet<DetailGrid.Models.Department> Departments { get; set; }  
        }  

Seedدر دیتابیس :

 در حال حاضر Package manager console را باز کرده و دستورات زیر را اجرا کنید.

Enable-migrations .1

 فایل configuration.cs در پوشه ی migration فراخوانی میکند

Add-Migration Initial .2

در فایل Web config رفته و SQL connection string خود را چک کنید .

فایل configuration.cs در پوشه migration را باز کرده و کد زیر را  به  seed method  آن اضافه کنید.

Configuration.cs

    protected override void Seed(DetailGrid.Models.DetailGridContext context) {  
      
    context.Departments.AddOrUpdate(new Department { DepartmentID = 4, DepartmentName = "Development" },  
             new Department { DepartmentID = 5, DepartmentName = "Testing" },   
    new Department { DepartmentID = 6, DepartmentName = "Infrastructure" });    }  

Update-Database .3

seed method را اجرا میکنیم.

بررسی دیتابیس که ایجاد شده است.

جدول Department

ایجاد WEB API Controller

نکته: قبل از ایجاد کنترلر ،پروژه را build کنید.

در Solution Explorer رو ی پوشه Controller راست کلیک کرده و Add -> Controller را انتخاب کرده و ونام کنترلر را DepartmentsController.cs میگذاریم.

 DepartmentController.cs

    public class DepartmentsController : ApiController

    {  
        private DetailGridContext db = new DetailGridContext();  
      
        // GET: api/Departments  
        public IQueryable<Department> GetDepartments()  
        {  
            return db.Departments;  
        }  
      
        // GET: api/Departments/5  
        [ResponseType(typeof(Department))]  
        public async Task<IHttpActionResult> GetDepartment(int id)  
        {  
            Department department = await db.Departments.FindAsync(id);  
            if (department == null)  
            {  
                return NotFound();  
            }  
      
            return Ok(department);  
        }  
      
        // PUT: api/Departments/5  
        [ResponseType(typeof(void))]  
        public async Task<IHttpActionResult> PutDepartment(Department department)  
        {  
            if (!ModelState.IsValid)  
            {  
                return BadRequest(ModelState);  
            }  
              
      
            db.Entry(department).State = EntityState.Modified;  
      
            try  
            {  
                await db.SaveChangesAsync();  
            }  
            catch (DbUpdateConcurrencyException)  
            {  
                if (!department.DepartmentID.HasValue)  
                {  
                    return NotFound();  
                }  
                else  
                {  
                    throw;  
                }  
            }  
      
            return StatusCode(HttpStatusCode.NoContent);  
        }  
      
        // POST: api/Departments  
        [ResponseType(typeof(Department))]  
        public async Task<IHttpActionResult> PostDepartment(Department department)  
        {  
            if (!ModelState.IsValid)  
            {  
                return BadRequest(ModelState);  
            }  
      
            db.Departments.Add(department);  
            await db.SaveChangesAsync();  
      
            return CreatedAtRoute("DefaultApi", new { id = department.DepartmentID }, department);  
        }  
      
        // DELETE: api/Departments/5  
        [ResponseType(typeof(Department))]  
        public async Task<IHttpActionResult> DeleteDepartment(Department _dept)  
        {  
            Department department = await db.Departments.FindAsync(_dept.DepartmentID);  
            if (department == null)  
            {  
                return NotFound();  
            }  
      
            db.Departments.Remove(department);  
            await db.SaveChangesAsync();  
      
            return Ok(department);  
        }  
      
        protected override void Dispose(bool disposing)  
        {  
            if (disposing)  
            {  
                db.Dispose();  
            }  
            base.Dispose(disposing);  
        }  
      
        private bool DepartmentExists(int id)  
        {  
            return db.Departments.Count(e => e.DepartmentID == id) > 0;  
        }  
    }  

اجرای CRUD در Kendo Grid با استفاده از AngularJS و API REST

ایجاد صفحه HTML

یک صفحه HTML جدید در پروژه ایجاد میکنیم.

طراحی:

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="utf-8">  
        <title>Untitled</title>  
      
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">  
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">  
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">  
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">  
      
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
        <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>  
        <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>  
        <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>  
    </head>  
    <body>  
        <div id="example" ng-app="KendoDemos">  
            <h3 style="font-style:italic;color:#F35800">CRUD in Kendo Gird using AngularJS and ASP.NET WEB API </h3>  
            <br />  
             
            <div ng-controller="MyCtrl">  
                <kendo-grid k-options="mainGridOptions">  
                  
                </kendo-grid>  
      
      
            </div>  
        </div>  
      
        <script>  
        angular.module("KendoDemos", [ "kendo.directives" ])  
            .controller("MyCtrl", function ($scope) {  
      
                $scope.mainGridOptions = {  
                    
                        dataSource: {  
                            type: "json",  
                            transport: {  
                                read:  
                 {  
                     url: "api/Departments",  
                     dataType: "json",  
                 },  
                                destroy:  
                 {  
                     url: "api/Departments",  
                     type: "DELETE"  
                 },  
                                create:  
                                {  
                                    url: "api/Departments",  
                                    type: "POST"  
                                },  
                                update:  
                                {  
                                    url: "api/Departments" ,  
                                    type: "PUT",  
                                  
                                parameterMap: function (options, operation) {  
                                    if (operation !== "read" && options.models) {  
                                        return {  
                                            models: kendo.stringify(options.models)  
                                        };  
                                    }  
                                }  
                                },  
      
      
                            },  
                            schema:  
             {  
                 model:  
                 {  
                     id: "DepartmentID",  
                     fields: {  
                         DepartmentID: { editable: false, nullable: true, type: "number" },  
                         DepartmentName: { editable: true, nullable: true, type: "string" },  
                     }  
                 }  
             },  
                            pageSize: 5,  
                            serverPaging: true,  
                            serverSorting: true  
                        },  
      
                        editable: "inline",  
                        toolbar: ["create"],  
                        sortable: true,  
                        pageable: true,  
                        resizeable: true,  
                        columns: [{  
                            field: "DepartmentID",  
                            title: "DepartmentID",  
                            width: "180px"  
                        }, {  
                            field: "DepartmentName",  
                            title: "Department Name",  
                            width: "180px"  
                        },  
                            {  
                                command: ["edit",  
                                {  
                                    name: "destroy",  
                                    text: "remove",  
                                    width: "120px"  
                                }  
                                ],  
                            }  
                        ]  
                    };  
                 
      
                  
            })  
        </script>  
    </body></html>  

عملیات Read

در ابتدا ،زمانی که صفحه لود میشود ، پروپرتی read در DataSource از grid فراخوانی خواهد شد که برای ارائه ردیف های جدول مورد استفاده قرار میگیرد.

read:  
{  
    url: "api/Departments",  
    dataType: "json",  
},

نتیجه :

 عملیات Create

پروپرتی toolbar  برای اجرای دکمه افزودن رکورد در grid مورد استفاده قرار میگیرد.که مسئول انجام عملیات create توسط invoke در POST API است.

    toolbar: ["create"],//add create button in grid  

    create:  
    {  
        url: "api/Departments",  
        type: "POST"  
    },  

پروپرتی create  در DataSource از grid  برای فراخوانی API POST  استفاده شده است.

نتیجه:

عملیات Update

پروپرتی command برای اجرای دکمه Edit در grid است که مسئول انجام عملیات به روز رسانی با فراخوانی PUT API است.

  command: ["edit",  
                            {  
                                width: "120px"  
                            }  
                            ],  

  update:  
                            {  
                                url: "api/Departments" ,  
                                type: "PUT",  
                        
                             }  

پروپرتی update  در DataSource از grid برای فراخوانی PUT API استفاده میشود.

عملیات Delete

پروپرتی command برای اجرای دکمه حذف در grid است که مسئول  انجام عملیات حذف با فراخوانی API DELETE. است.

command: [  
                            {  
                                name: "destroy",  
                                text: "remove",  
                                width: "120px"  
                            }     
                            ],  

destroy:  
                 {
                  url: "api/Departments",  
                   type: "DELETE"  
                  },  

پروپرتی destroy موجود در DataSource از grid برای صدا زدن API DELETE استفاده میکند.

نتیجه گیری:

نحوه ی انجام عملیات CRUD در grid Kendo با استفاده از AngularJS،  برای ساخت یک برنامه پیچیده ،مفید و آسان است .

آموزش angular