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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150090 Dec 20,2019 01:58 AM UTC Dec 20,2019 11:35 AM UTC Angular - EJ 2 1
loading
Tags: Grid
Dayakar Reddy
Asked On December 20, 2019 01:58 AM UTC

Hi

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

Thanks,
Dayakar

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon