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
close icon

How to perform CRUD with Entity Framework in Angular Grid

Hi,

Do you have a sample code of how a i perform CRUD operations in angular grid using Entity Framework?

Thanks,
Esborn

3 Replies

PS Pavithra Subramaniyam Syncfusion Team September 17, 2019 06:08 AM UTC

Hi Esborn, 
 
Thanks for contacting Syncfusion Support. 
 
You can perform the server side CRUD operations with Entity Framework by using DataManager and Adaptor. Please refer to the below code example and Documentation link for more information. 
 
 
[component.html] 
<ejs-grid #grid [dataSource]='data' allowPaging='true' [editSettings]='pageSettings'> 
        <e-columns> 
            <e-column field='OrderID'  isPrimaryKey='true'  headerText='Order ID' width='120' textAlign='Right'></e-column> 
            .    .    . 
        </e-columns> 
    </ejs-grid> 
 
[component.ts] 
@Component({ 
    selector: 'ej2-griddatabind', 
    templateUrl: 'remote-data.html' 
}) 
export class DataBindingComponent implements OnInit { 
    .  .  . 
 
    ngOnInit(): void { 
        this.data = new DataManager({ url: 'Home/GetOrderData', updateUrl: 'Home/PerformUpdate’, removeUrl: 'Home/PerformDelete’, insertUrl: 'Home/PerformInsert',  adaptor: new UrlAdaptor }); 
    } 
} 
 
[controller.cs] 
//Provide grid datasource 
        public ActionResult GetOrderData() 
        { 
            .    .   . 
            return Json(new { result = result, count = result.Count },JsonRequestBehavior.AllowGet); 
        } 
        public ActionResult PerformInsert([FromBody]CRUDModel<OrdersDetails> 
param) 
        {         //Perform insertion 
                 .   .   . 
            return Json(param.value); 
        } 
         
        public ActionResult PerformUpdate([FromBody]CRUDModel<OrdersDetails> 
param) 
        { 
           //Perform update 
            .   .  . 
            return Json(param.value);        } 
         
        public ActionResult PerformDelete([FromBody]CRUDModel<OrdersDetails> 
param) 
        { 
           //Perform delete 
            .    .   . 
            return Json(param.Key); 
        } 
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S.  



ES Esborn September 17, 2019 08:50 AM UTC

 Thanks you Pavithra,

i have tried using Observable

see my code below, when i call the remote WebApi, it returns the error that follows

import { Injectable } from '@angular/core';
import { Subject, Observable } from "rxjs";
import { DataStateChangeEventArgs } from "@syncfusion/ej2-angular-grids";
import { HttpClient } from '@angular/common/http';
import { EmployeeTranstionModel } from './employee-transtion-model';
import { map  } from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class EmployeeTransationStoreService extends Subject<DataStateChangeEventArgs>{
apiurl ='http://localhost:64728/api/EmployeeTransactions1';
//apiurl ='app/employeeTranstations'
  constructor(private http: HttpClient) { super();}

public execute(state: any): void {
  this.getEmployeeTracations(state).subscribe(x => super.next(x as DataStateChangeEventArgs));
}

  getEmployeeTracations(state?:any): Observable<any[]> {
    return this.http.get<EmployeeTranstionModel[]>(this.apiurl).pipe(
      map((response: any)=> (<any>{
        result: state.take > 0 ? response.slice(0,state.take) : response,
        count: response.length
      })
      )
    );
  }
}

the error on the browser 


the webapi returns data as below



sample code of the webApi




kindly advice on this

Regards,
Esborn


PS Pavithra Subramaniyam Syncfusion Team September 18, 2019 09:24 AM UTC

Hi Esborn, 

Thanks for your update. 

We have validated the provided information and you are getting 404 not found issue which might be occurred(not from our side) for the below reasons so please check and refer below reference link that might be helpful to resolve the problem. 

  1. Change the order of the configuration registered in Global.aspx

  1. Ensure the HTTP root configuration and the default parameters are optional or not
 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon