This article will show you how to get the Kendo UI support to work with widget using AngularJS and ASP.NET WEB API. This article flow as follows,
- Creating an ASP.NET Web API application.
- Creating a Controller.
- Testing the API.
- Implementing the Kendo List View with paging using AngularJS with the REST API.
1.Creating a Web API application using an installed web template in Visual Studio as in the following figures,
Creating a Model Classes:
In the Solution Explorer, right click the model folder, Add-> Class and name it as Employee.
Employee.cs
- public class Employee
- {
- public Employee(int Id, string Name,string Designation, string Image )
- {
- this.EmployeeID= Id;
- this.EmployeeName=Name;
- this.Designation=Designation;
- this.EmployeeImage = Image;
- }
- public int EmployeeID { get; set; }
- public string EmployeeName { get; set; }
- public string Designation { get; set; }
- public string EmployeeImage { get; set; }
- }
2. Creating WEB API Controller:
In Solution Explorer, right-click the Controller folder. Select Add -> Controller ->Web API 2 Controller-Empty name it as EmployeeController.cs,
EmployeeController.cs
- [RoutePrefix("api/Employee")]
- public class EmployeeController : ApiController
- {
- [HttpGet]
- [AllowAnonymous]
- [Route("EmployeeList")]
- public HttpResponseMessage GetEmployee()
- {
- try {
- List<Employee> EmpLists = new List<Employee>();
- EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst", "/Images/Img.png"));
- EmpLists.Add(new Employee(2, "Krishn Mahato", "Development", "/Images/Img.png"));
- EmpLists.Add(new Employee(3, "Bob Ross", "Testing", "/Images/Img.png"));
- EmpLists.Add(new Employee(4, "Steve Davis", "Development", "/Images/Img.png"));
- EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure", "/Images/Img.png"));
- EmpLists.Add(new Employee(6, "James Anderson", "HR", "/Images/Img.png"));
- EmpLists.Add(new Employee(7, "Arun Kumar", "Testing", "/Images/Img.png"));
- EmpLists.Add(new Employee(8, "Gowtham Kumar", "Testing", "/Images/Img.png"));
- return Request.CreateResponse(HttpStatusCode.OK, EmpLists, Configuration.Formatters.JsonFormatter);
- }
- catch(Exception ex)
- {
- return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
- }
- }
- }
3. Testing the API
Test the API using the POSTMAN/Fiddler as in the following figures,
API End Point: /api/Employee/EmployeeList.
Type : GET
4. Implementing the Kendo List View with paging using AngularJS with the REST API.
Amit DavePosted May 3, 2016, 10:27 AM
Keep up the Good work!
Bhavik PatelPosted May 2, 2016, 10:23 PM
good one
Vignesh ManiPosted May 2, 2016, 12:01 PM
Nice
Debasis SahaPosted May 2, 2016, 10:09 AM
Nice One..
Bhuvanesh MohankumarPosted May 2, 2016, 6:51 AM
Good one
Sonu ChaudharyPosted May 2, 2016, 5:51 AM
nice one
Gowtham RajamanickamPosted May 2, 2016, 5:04 AM
good one..