Hello, I'm trying to implement a simple CRUD scenario with the IgniteUI, AngularJS and ASP.NET WebAPI
HTML:
<ig-grid id="grid1"data-source="data" primary-key="id" auto-generate-columns="false" auto-commit="true"
response-data-key="d.results.Results"
response-total-rec-count-key="d.results.Count">
<columns>
<column key="ID" header-text="ID" data-type="number" hidden="hidden"></column>
<column key="Projekt" header-text="Projekt" data-type="string"></column>
</columns>
<features>
<feature name="Updating" columnkey="ID"></feature>
</features>
</ig-grid>
BLOCKED SCRIPT
var sampleApp = angular.module('sampleApp', ['igniteui-directives', 'ui.bootstrap']);
sampleApp.service('dataService', ['$http', '$q', function ($http, $q) {
'use strict';
this.getAll = function () {
var deferred = $q.defer();
$http.get("/api/timeentries").success(deferred.resolve).error(deferred.reject);
return deferred.promise;
};
}]);
sampleApp.controller('timeCtrl', ['$scope', 'dataService', function ($scope, dataService) {
dataService.getAll().then(function (data) {
$scope.data = data;
}, function (error) {
$scope.error = error;
});
And an WebAPI Controller as an endpoint:
public IEnumerable<Object> Get()
{
TestEntities context = new TestEntities();
var res = from sa in context.TimeEntries
select new { ID = sa.SA_ID, Projekt = sa.Projekt.PJ_Bezeichnung };
return res.ToList();
}
My question is: How can I implement the update/create/delete functionaltiy?
I have seen different examples how this can be done with asp.net or angularjs in combination with the northwind database, but there is no example how the twoway databinding and updating/create/delete works with WebAPI and AngularJS in combination.
Can you help me? I would really like to use this combination for future Projects in my Company.
Hello Kevin,
The igGrid has a REST support. What you need to do is to configure its REST settings. After that calling igGrid.saveChanges API will do all the necessary AJAX requests to the Web API (For more information on the igGrid REST support please see the REST Updating (igGrid) topic.)
Here is how your igGrid configuration should look like:
<ig-grid id="grid1" data-source="data" primary-key="id" auto-generate-columns="false" auto-commit="true"
<rest-settings>
<create url="/api/timeentries" batch="false"></create>
<update url="/api/timeentries" batch="false"></update>
<delete url="/api/timeentries" batch="false"></delete>
</rest-settings>
There is nothing to do on the Angular side, because all the user interaction happens in the igGrid which keeps track of all the CRUD operations for you.
Hope this helps,Martin PavlovInfragistics, Inc.
Hello Kevin
Let me know if you have further questions regarding this subject.
Best regards,Martin PavlovInfragistics, Inc.
Hi Martin,
Thanks for your answer - unfortunately it didn't really work. I added the rest-Settings but when I delete or add a new row, no WebAPI method is being called. My API Controller has the following methods (of course the changes will not be persisted in the database this way, but I mean, at least the breakpoints should be reached right?
// POST api/<controller>
public void Post([FromBody]string value)
// PUT api/<controller>/5
public void Put(int id, [FromBody]string value)
// DELETE api/<controller>/5
public void Delete(int id)
You should call igGrid.saveChanges API on the client in order to send the changes to the server. I'm attaching a sample for your reference.
Hello Martin
Thanks a lot for your Support. I indeed forgot to call saveChanges.
Now the Post method in my WebAPI Controller gets called, but the Parameter "value" is null. When I check the network console in the browser, I see that the RequestBody is
[{"ig_pk":345,"Projekt":201505}]
But this json string is not inside the value parameter. I suppose my Post method signature is wrong? Do I have to give the Parameter a Special Name?
Let me know if you need further assistance regarding this subject.