1
http://www.dotnetcurry.com/aspnet-mvc/933/knockoutjs-aspnet-mvc-tutorial-beginner에있는 자습서를 따라했습니다. 자습서는 훌륭하고 추가 및 업데이트를 다루지 만 업데이트 삭제 또는 취소에 포함 된 클릭 핸들러는 없습니다.MVC DataTable의 KnockoutJS 삭제 함수
작성자가 데이터 저장을 위해 제공 한 패턴과 동일한 패턴을 따르려고했지만 삭제할 함수를 만들었지 만 작동하지 않습니다.
<table class="table">
<tr>
<th>concerns_id</th>
<th>concerns_description</th>
<th></th>
</tr>
<tbody data-bind="foreach: ConcernCollection">
<tr data-bind="template: { name: Mode, data: $data }"></tr>
</tbody>
</table>
템플릿 :
<script type="text/html" id="display">
<td data-bind="text: concerns_id"></td>
<td data-bind="text: concerns_description"></td>
<td>
<button class="btn btn-success kout-edit">Edit</button>
<button class="btn btn-danger kout-delete">Delete</button>
</td>
</script>
<script type="text/html" id="edit">
<td><input type="text" data-bind="value: concerns_id " /></td>
<td><input type="text" data-bind="value: concerns_description" /></td>
<td>
<button class="btn btn-success kout-update">Update</button>
<button class="btn btn-danger kout-cancel">Cancel</button>
</td>
</script>
전체 JS 삭제 기능이없는 내가 추가 연결 :
$(document).ready(function() {
$.ajax({
type: "GET",
url: "/concerns/GetConcerns",
}).done(function (data) {
$(data).each(function (index, element) {
var mappedItem =
{
concerns_id: ko.observable(element.concerns_id),
concerns_description: ko.observable(element.concerns_description),
Mode: ko.observable("display")
};
viewModel.ConcernCollection.push(mappedItem);
});
ko.applyBindings(viewModel);
}).error(function (ex) {
alert("Error");
});
$(document).on("click", ".kout-edit", null, function (ev) {
var current = ko.dataFor(this);
current.Mode("edit");
});
$(document).on("click", ".kout-update", null, function (ev) {
var current = ko.dataFor(this);
saveData(current);
current.Mode("display");
});
$(document).on("click", "#create", null, function (ev) {
var current = {
concerns_id: ko.observable(0),
concerns_description: ko.observable(),
Mode: ko.observable("edit")
}
viewModel.ConcernCollection.push(current);
});
function saveData(currentData) {
var postUrl = "";
var submitData = {
concerns_id: currentData.concerns_id(),
concerns_description: currentData.concerns_description(),
};
if (currentData.concerns_id && currentData.concerns_id() > 0) {
postUrl = "/concerns/Edit"
}
else {
postUrl = "/concerns/Create"
}
$.ajax({
type: "POST",
contentType: "application/json",
url: postUrl,
data: JSON.stringify(submitData)
}).done(function (id) {
currentData.concerns_id(id);
}).error(function (ex) {
alert("ERROR Saving");
})
}
});
어떤 도움
function deleteData(currentData) {
var postUrl = "";
var submitData = {
concerns_id: currentData.concerns_id(),
concerns_description: currentData.concerns_description(),
};
if (currentData.concerns_id > 0) {
postUrl = "/concerns/delete"
}
$.ajax({
type: "POST",
contentType: "application/json",
url: postUrl,
data: JSON.stringify(submitData)
}).done(function (id) {
currentData.concerns_id(id);
}).error(function (ex) {
alert("ERROR Deleting");
})
};
이
테이블입니다 또는지도는 이것이 내 전나무 다. ST는 시간 코드를 따라하기 조금 어렵다, 나는 거 거짓말 아니에요감사합니다,