How to perform CRUD with Entity Framework in Angular Grid

[Esborn]

Hi,

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

Thanks,

Esborn

[Pavithra Subramaniyam]

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

        } 

 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#persisting-data-in-server  

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S.  

[Esborn]

 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

I used these steps: https://ej2.syncfusion.com/angular/documentation/grid/observables/

kindly advice on this

Regards,

Esborn

[Pavithra Subramaniyam]

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

               https://stackoverflow.com/questions/15556035/all-asp-net-web-api-controllers-return-404 

2. Ensure the HTTP root configuration and the default parameters are optional or not

 

https://www.tutorialsteacher.com/webapi/web-api-routing 

 

Regards, 

Pavithra S.