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

[Dayakar Reddy]

Hi

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

Thanks,

Dayakar

[Thavasianand Sankaranarayanan]

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); 

        } 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/server2043218849  

 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#web-api  

Regards, 

Thavasianand S.