Category / Section
How to perform API service CRUD operation in Grid AngularJS
1 min read
The Server-Side CRUD operation can be performed in AngularJS by using the WebApiAdaptor.
WebAPIAdaptor extended from the UrlAdaptor of the DataManager is used for retrieving data from WebAPI service.
The following code snippet demonstrates how to perform the CRUD operation in Grid using AngularJS.
<div> <div ng-app="GridCtrl"> <div ng-controller="bodyCtrl"> <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowpaging="true" e-editsettings-allowadding="true" e-editsettings-allowdeleting="true" e-editsettings-allowediting="true" e-editsettings-showconfirmdialog="false" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools"> <div e-columns> <div e-column e-field="OrderID" e-headertext="Order ID" e-isprimarykey="true" e-textalign="right"></div> <div e-column e-field="CustomerID" e-headertext="Customer ID"></div> <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right"></div> <div e-column e-field="ShipCity" e-headertext="Ship City"></div> </div> </div> </div> </div> </div> <script> angular.module("GridCtrl", ["ejangular"]) .controller("bodyCtrl", function ($scope) { //Provide the datasource to the grid. Here the WebApiAdaptor is used. $scope.data = ej.DataManager({ url: "api/Employees", adaptor: "WebApiAdaptor" }); $scope.tools = ["add", "edit", "delete", "update", "cancel"]; }); </script>
You can perform CRUD operation using Entity Framework as follows,
public class EmployeesController : ApiController { NORTHWNDEntities1 db = new NORTHWNDEntities1(); // GET: api/Employees public PageResult<EmployeeDetail> Get(ODataQueryOptions opts) { List<EmployeeDetail> emp = db.EmployeeDetails.ToList(); return new PageResult<EmployeeDetail>(opts.ApplyTo(emp.AsQueryable()) as IEnumerable<EmployeeDetail>, null, emp.Count); } // POST api/<controller> public void Post(EmployeeDetail Value) { db.EmployeeDetails.Add(Value); db.SaveChanges(); } // PUT api/<controller>/5 public void Put(EmployeeDetail Value) { db.Entry(Value).State = EntityState.Modified; db.SaveChanges(); } // DELETE api/<controller>/5 public void Delete(int id) { var order = db.EmployeeDetails.Find(id); db.EmployeeDetails.Remove(order); db.SaveChanges(); } }
The following screenshot displays the console post.