معرفی
رابط کاربری Kendo از کار با ویجت خود با استفاده از AngularJS پشتیبانی می کند .
این مقاله به شرح زیر است،
- ایجاد یک برنامه ASP.NET WEB API.
- ایجاد یک کنترلر
- تست REST API
- پیاده سازی Kendo Grid با استفاده از AngularJS با REST API.
ایجاد یک برنامه ASP.NET WEB API
یک برنامه WEB API با استفاده از یک قالب وب نصب شده در ویژوال استودیو مانند شکل های زیر ایجاد کنید:
![](https://www.c-sharpcorner.com/article/remote-bind-kendo-grid-using-angular-js-and-Asp-Net-web-api/Images/76.png)
در Solution Explorer، روی پوشه مدل کلیک راست کرده، Add و سپس Class را انتخاب کنید و نام آن را Employee.cs بگذارید.
کد در Employee.cs:
- public class Employee
- {
- public Employee(int EmployeeID, string FirstName, string LastName)
- {
- this.EmployeeID = EmployeeID;
- this.FirstName = FirstName;
- this.LastName = LastName;
- }
- public int EmployeeID { get; set; }
- public string FirstName { get; set; }
- public string LastName { get; set; }
- }
ایجاد یک کنترلر
روی پوشه Controller کلیک راست کرده و یک WEB API 2- Empty controller مانند شکل 3 زیر اضافه کنید، در مورد من نام آن را EmployeeDetailsController.cs گذاشتم:
کد در EmployeeDetailsController.cs:
- [RoutePrefix("api/EmployeeList")]
- public class EmployeeDetailsController : ApiController
- {
- [HttpGet]
- [Route("List")]
- public HttpResponseMessage EmployeeList()
- {
- try
- {
- List<Employee> _emp = new List<Employee>();
- _emp.Add(new Employee(1, "Bobb", "Ross"));
- _emp.Add(new Employee(2, "Pradeep", "Raj"));
- _emp.Add(new Employee(3, "Arun", "Kumar"));
- return Request.CreateResponse(HttpStatusCode.OK, _emp, Configuration.Formatters.JsonFormatter);
- }
- catch (Exception ex)
- {
- return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
- }
- }
- }
اقدام کنترلر کارمند بالا EmployeeList لیستی از Employees را برمی گرداند.
تست REST API
API را با استفاده از POSTMAN/Fiddler مانند شکل 4 زیر آزمایش کنید:
نقطه پایانی API: /api/EmployeeList/List
نوع: GET
![](https://www.c-sharpcorner.com/article/remote-bind-kendo-grid-using-angular-js-and-Asp-Net-web-api/Images/4.png)
پیاده سازی Kendo Grid با استفاده از AngularJS و REST API
ایجاد یک صفحه 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">
- <div ng-controller="MyCtrl">
- <kendo-grid options="mainGridOptions">
- </kendo-grid>
- </div>
- </div>
- <script>
- angular.module("KendoDemos", [ "kendo.directives" ])
- .controller("MyCtrl", function($scope){
- $scope.mainGridOptions = {
- dataSource: {
- type: "json",
- transport: {
- read: "/api/EmployeeList/List"
- },
- pageSize: 5,
- serverPaging: true,
- serverSorting: true
- },
- sortable: true,
- pageable: true,
- columns: [{
- field: "EmployeeID",
- title: "EmployeeID",
- width: "120px"
- },{
- field: "FirstName",
- title: "First Name",
- width: "120px"
- },
- {
- field: "LastName",
- title: "Last Name",
- width: "120px"
- }]
- };
- })
- </script>
- </body>
- </html>
نتیجه در مرورگر: