Delete operation using KnockoutJS and Entity Framework 6 - entity-framework

Question

i'm having a problem with the delete operation using KOjs and EF6.when i click the remove button the confirmation dialog appears but the selected row is not deleted.
This is my controler:
public JsonResult FetchActivities()
{
return Json(_account.FindAllActivities(), JsonRequestBehavior.AllowGet);
}
[System.Web.Mvc.HttpDelete]
public void DeleteActivity(int id)
{
try
{
if (id != 0)
{
_account.Delete(id);
}
}
catch
{
throw new HttpResponseException(HttpStatusCode.BadRequest);
}
}
and this is the view:
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>URL</th>
<th>Thumbnail</th>
<th>Title</th>
</tr>
<tbody data-bind="foreach: Activities">
<tr>
<td data-bind="text: urlactivite"></td>
<td data-bind="text: thumbnail"></td>
<td data-bind="text: title"></td>
<td><button class="btn btn-mini btn-danger" data-bind="click: $parent.removeActivity">remove</button></td>
</tr>
</tbody>
and here is the view model:
var ProfilesViewModel = function () {
var self = this;
var url = "/WhiteList/FetchActivities";
var refresh = function () {
$.getJSON(url, {}, function (data) {
self.Activities(data);
});
};
// Public data properties
self.Activities = ko.observableArray([]);
self.removeActivity = function (profile) {
if (confirm("Are you sure you want to delete this profile?")) {
var id = profile.id;
waitingDialog({});
$.ajax({
type: 'DELETE', url: '/WhiteList/DeleteActivity/' + id,
success: function () { self.Activities.remove(profile); },
error: function (err) {
var error = JSON.parse(err.responseText);
$("<div></div>").html(error.Message).dialog({ modal: true, title: "Error", buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
},
complete: function () { closeWaitingDialog(); }
});
}
};
refresh();
};
ko.applyBindings(new ProfilesViewModel());
I see no errors in my code.Can any one help me

Answer 1

Your code has several mistakes:
the only observable property is the Activities observable array: when you load the data with refresh() you are creating an observable array of regular, non-observable, objects. That means that ypu are trying to make bindings between the regular, non-observable properties of your array and your activities.
you're not passing any parameter to your removeActivity, and you are expecting to get a profile (what is that) and get it's id to delete it.
You'd need to make modifications to your model:
Create an Activity constructor with the same properties of the activity, but declared as observable properties
One of these 2 options
Include the removeActivity in the Activity constructor, to get the id of the activity to remove using this (or self)
Include removeActivity in the root for your model, and recive the id as parameter, and pass the id of the activity in the click binding
Modify refresh so that you map each element of the received activities to a new Activity object created with your constructor
If you choose option 2.2 you can make it automatically using knockout mapping.
Please, look at your code and try to see why you expected to receive a profile in removeACtivity function. I suppose you'll understand it made no sense.