我已经创建了一个用于填充数据的页面，该页面工作正常。现在我有一个按钮＆amp;点击我在对话框中打开一个表单。现在的问题是，当我点击保存时，数据被保存但网格没有更新。请帮助我...
下面是我的Js代码，用于将网格与模型绑定。
var EmpViewModel = function () {
//Make the self as 'this' reference
var self = this;
//Declare observable which will be bind with UI
self.EmpCode = ko.observable("0");
self.EmpName = ko.observable("");
self.ContactNo = ko.observable("");
self.MartialStatus = ko.observable("");
self.Email = ko.observable("");
//The Object which stored data entered in the observables
var EmpData = {
EmpCode: self.EmpCode,
EmpName: self.EmpName,
ContactNo: self.ContactNo,
MartialStatus: self.MartialStatus,
Email: self.Email
};
//Declare an ObservableArray for Storing the JSON Response
self.Employees = ko.observableArray([]);
GetEmployees();
debugger
this.addNewEmp = function () {
$.ajax({
type: "POST",
url: '/Employee/Exercise4',
contentType: 'application/json',
dataType: 'html',
success: function (data) {
$('#InnerDialogBox').html(data);
$("#OuterDialogBox").dialog({
title: 'Add New Employee',
height: 600,
width: 600,
modal: true,
buttons: [
{
text: "Close",
click: function () {
$.unblockUI();
$(this).dialog("close");
}
}]
});
},
error: function () {
alert('error');
},
complete: function () {
}
});
}
//Function to perform DELETE Operation
self.deleterec = function (employee) {
$("#InnerConfirmmBoxDel").dialog({
title: 'Are You Sure You want to delete this record ?',
buttons: {
"Confirm": function () {
var dialog = $(this);
$.ajax({
type: "POST",
url: "/Employee/DeleteEmployee?EmpCode=" + employee.EmpCode,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
dialog.dialog("close");
GetEmployees();
},
error: function (error) {
dialog.dialog("close");
alert(error.status + "<--and--> " + error.statusText);
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
};
function GetEmployees() {
$.ajax({
type: "POST",
url: "/Employee/GetAllEmployees",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
debugger
self.Employees(data.Data); //Put the response in ObservableArray
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
//Ends Here
}
};
ko.applyBindings(new EmpViewModel());
保存数据的逻辑
$(document).ready(function () {
$("#btnSave").live('click', function (e) {
e.preventDefault();
var form = $('form');
debugger;
if (form.valid()) {
Save();
}
});
});
function Save() {
var ob = new Object();
ob.EmpName = $("#EmpName").val();
ob.EmpCode = $("#EmpCode").val();
ob.DOB = $("#DOB").val();
ob.Age = $("#Age").val();
ob.ContactNo = $("#ContactNo").val();
ob.Email = $("#Email").val();
ob.Address = $("#Address").val();
ob.City = $("#City").val();
ob.IsEmpRefrence = $("#EmpRef").is(':checked');
var selectedVal = "";
var selected = $("input[type='radio'][name='MartialStatus']:checked");
if (selected.length > 0) {
selectedVal = selected.val();
}
ob.MartialStatus = selectedVal;
var param = { 'emp': ob };
$.ajax({
type: "POST",
url: '/Employee/SaveNewEmployee',
data: JSON.stringify(param),
contentType: 'application/json',
dataType: 'json',
success: function (data) {
$("#OuterDialogBox").dialog("close");
debugger
ko.applyBindings(new EmpViewModel());
},
error: function () {
alert('error');
}
});
}
网格数据的HTML
<table cellspacing="0" cellpadding="5" width="100%">
<thead>
<tr>
<td>
<b>Employee Code</b>
</td>
<td>
<b>Employee Name</b>
</td>
<td>
<b>Contact Number</b>
</td>
<td>
<b>Martial Status</b>
</td>
<td>
<b>Email</b>
</td>
<td>
</td>
<td>
</td>
</tr>
</thead>
<tbody data-bind="foreach:Employees">
<tr>
<td data-bind="text:EmpCode">
</td>
<td data-bind="text:EmpName">
</td>
<td data-bind="text:ContactNo">
</td>
<td data-bind="css: {UnMarried:MartialStatus!='Married',Married:MartialStatus=='Married'}">
</td>
<td data-bind="text:Email">
</td>
<td>
<a class="updateEmp" style="cursor: pointer">Edit</a> |
</td>
<td>
<button data-bind="click: $root.deleterec">
Delete</button>
</td>
</tr>
</tbody>
</table>
新员工表单的Html
<table cellpadding="5">
<tr>
<td align="right">
<b>Name</b>
</td>
<td>
:
</td>
<td>
@Html.TextBoxFor(x => x.EmpName)
</td>
<td style="width: 100px;">
@Html.ValidationMessageFor(x => x.EmpName)
</td>
</tr>
<tr>
<td align="right">
<b>Emp#</b>
</td>
<td>
:
</td>
<td>
@Html.TextBoxFor(x => x.EmpCode)
</td>
<td>
@Html.ValidationMessageFor(x => x.EmpCode)
</td>
</tr>
<tr>
<td align="right">
<b>Date of Birth</b>
</td>
<td>
:
</td>
<td>
@Html.TextBox("DOB")
</td>
<td>
@Html.ValidationMessageFor(x => x.DOB)
</td>
</tr>
<tr>
<td align="right">
<b>Age</b>
</td>
<td>
:
</td>
<td>
@Html.TextBoxFor(x => x.Age)
</td>
<td>
@Html.ValidationMessageFor(x => x.Age)
</td>
</tr>
<tr>
<td align="right">
<b>Contact Number</b>
</td>
<td>
:
</td>
<td>
@Html.TextBoxFor(x => x.ContactNo)
</td>
<td>
@Html.ValidationMessageFor(x => x.ContactNo)
</td>
</tr>
<tr>
<td align="right">
<b>Email</b>
</td>
<td>
:
</td>
<td>
@Html.TextBoxFor(x => x.Email)
</td>
<td>
@Html.ValidationMessageFor(x => x.Email)
</td>
</tr>
<tr>
<td align="right">
<b>Address</b>
</td>
<td>
:
</td>
<td>
@Html.TextAreaFor(x => x.Address)
</td>
<td>
@Html.ValidationMessageFor(x => x.Address)
</td>
</tr>
<tr>
<td align="right">
<b>City</b>
</td>
<td>
:
</td>
<td>
@Html.DropDownListFor(x => x.City, (SelectList)(ViewData["CityLst"]))
</td>
<td>
</td>
</tr>
<tr>
<td align="right">
<b>Martial Status</b>
</td>
<td>
:
</td>
<td>
@Html.RadioButtonFor(model => model.MartialStatus, "Married") Married
@Html.RadioButtonFor(model => model.MartialStatus, "UnMarried") UnMarried
</td>
<td>
</td>
</tr>
<tr>
<td align="right">
<b>Any Employee Refrence</b>
</td>
<td>
:
</td>
<td>
@Html.CheckBox("EmpRef", false) Yes
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3" align="right">
<br />
<input type="button" id="btnSave" value="Save" data-bind="click: $root.loadData"/>
<input type="button" id="btnCancel" value="Cancel" />
</td>
<td></td>
</tr>
</table>
答案 0 :(得分：0)
在对'/ Employee / SaveNewEmployee'的AJAX调用的成功回调中，看起来你正在用一个新的EmpViewModel（）实例再次调用ko.applyBindings（）;数据应映射到现有视图模型，因为无法多次将绑定应用于同一元素！
success: function (data) {
$("#OuterDialogBox").dialog("close");
debugger
ko.applyBindings(new EmpViewModel());
}
检查出来：
一切都很好，但是当你点击保存时，你会看到它是如何创建多重绑定错误的。这是你收到的错误吗？如果没有，请在浏览器解析后提供HTML - 如果我们不知道客户端是什么样的话，我们就无法调试HTML。