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

Hi

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

Thanks,
Dayakar

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] 
[fetchdata.component.ts] 
 
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 
    }); 
  } 
 
} 
[fetchdata.component.html] 
 
<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' allowPaging="true" height="320"> 
    <e-columns> 
        <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> 
    </e-columns> 
</ejs-grid> 
[OrderController.cs] 
 
namespace AngularwithASPCore.Controllers 
{ 
    [Produces("application/json")] 
    [Route("api/Orders")] 
    public class OrdersController : Controller 
    { 
            ... 
 
       // POST: api/Orders 
        [HttpPost] 
        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 
        [HttpPut] 
        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 
        [HttpDelete("{id:int}")] 
        [Route("Orders/{id:int}")] 
        public object Delete(int id) 
        { 
           OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault()); 
            return Json(id); 
        } 
    } 
} 
 
 

Regards, 
Thavasianand S. 


Loader.
Up arrow icon