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,
Let me know if you need further assistance regarding this subject.
Best regards,Martin PavlovInfragistics, Inc.
Yes, your Post method signature should be changed.Try adding an IEnumerable<T> param, where T is your model class.Here is an example code:public HttpResponseMessage Post(IEnumerable<Projects> projects)
Hope this helps,Martin PavlovInfragistics, Inc.
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 have further questions regarding this subject.
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.