Articles in this section
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.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied