We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

CRUD operations using asp.net core web api methods in Angular Grid


Can you provide sample example for Angular Grid CRUD operations using asp.net core web api methods?


1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team December 20, 2019 11:35 AM UTC

Hi Dayakar, 
Greetings from Syncfusion support. 
Query: Can you provide sample example for Angular Grid CRUD operations using asp.net core web api methods? 
We have validated your query and created a sample(Angular Grid CRUD operations using asp.net core web API methods) based on your requirement. Find the below code snippets and sample for your reference. 
[code snippets] 
export class FetchDataComponent { 
    ngOnInit(): void { 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
    this.data = new DataManager({ 
      url: 'api/Orders', 
      adaptor: new WebApiAdaptor 
<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' allowPaging="true" height="320"> 
        <e-column field='OrderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column> 
        <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column> 
        <e-column field='ShipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column> 
namespace AngularwithASPCore.Controllers 
    public class OrdersController : Controller 
       // POST: api/Orders 
        public object Post([FromBody]OrdersDetails value) 
            OrdersDetails.GetAllRecords().Insert(0, value); 
            var data = OrdersDetails.GetAllRecords().ToList(); 
            return Json(new { result = data, count = data.Count }); 
        // PUT: api/Orders/5 
        public object Put(int id, [FromBody]OrdersDetails value)   //update operation 
            var ord = value; 
            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
            val.OrderID = ord.OrderID; 
            val.EmployeeID = ord.EmployeeID; 
            val.CustomerID = ord.CustomerID; 
            val.Freight = ord.Freight; 
            val.OrderDate = ord.OrderDate; 
            val.ShipCity = ord.ShipCity; 
            return value; 
        // DELETE: api/ApiWithActions/5 
        public object Delete(int id) 
           OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault()); 
            return Json(id); 

Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon