我想在 KnockoutJS 的帮助下将员工详细信息绑定到来自 DataTable 的 HTML 表中。这是我的模型：
public class Employee
{
private string employeeCode;
private string employeeName;
public int ID { get; set; }
[Required(ErrorMessage="Employee Code is Required")]
public string EmployeeCode
{
get
{
return employeeCode;
}
set
{
employeeCode = value;
}
}
[Required(ErrorMessage = "Employee Name is Required")]
public string EmployeeName
{
get
{
return employeeName;
}
set
{
employeeName = value;
}
}
}
这是我使用 DataTable 的控制器代码。我将传递List<Employee>给我的视图：
public JsonResult Get(int customerID)
{
BAL.Employee dbProvider = new BAL.Employee();
DataTable dataTable = dbProvider.ShowEmployeeDetails();
List<Model.Employee> objExerciseList = new List<Model.Employee>();
foreach (DataRow dataRow in dataTable.Rows)
{
Model.Employee objExercise = new Model.Employee();
objExercise.ID = Convert.ToInt32(dataTable.Rows[0]["ID"].ToString());
objExercise.EmployeeCode = dataTable.Rows[0]["EmpCode"].ToString();
objExercise.EmployeeName = dataTable.Rows[0]["EmpName"].ToString();
objExercise.ContactNumber = dataTable.Rows[0]["ContactNumber"].ToString();
objExercise.MaritalStatus = Convert.ToBoolean(dataTable.Rows[0]["Is_MaritalStatus"].ToString());
objExercise.EmailID = dataTable.Rows[0]["EmailID"].ToString();
objExerciseList.Add(objExercise);
}
return Json(objExerciseList, JsonRequestBehavior.AllowGet);
}
最后是我的 View 和 ViewModel 页面和代码：
@model IEnumerable<Acidaes.CRMnext.TrainingExercises.Model.Employee>
@{
ViewBag.Title = "exercise7";
Layout = "../Shared/Master.cshtml";
}
<script src="../../Scripts/_references.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.2.1.js" type="text/javascript"></script>
<script src="../../Scripts/json2.js" type="text/javascript"></script>
<html>
<head>
<title>KO</title>
</head>
<body>
<form action="" method="post">
<div style="width: 990px; background-color: White; height: 710px;">
<table id="tbllist" align="center" style="border: 5px #fff solid;">
<tr>
<td colspan="6">
<h2>
Employee List</h2>
</td>
</tr>
<tr>
<td colspan="6" style="padding: 0px;">
<div id="title_p">
Listing</div>
</td>
</tr>
<tr>
<th align="left">
Employee Code
</th>
<th align="left">
Employee Name
</th>
<th align="left">
Contact Number
</th>
<th align="left">
Marital Status
</th>
<th align="left">
Email ID
</th>
<th align="left">
</th>
</tr>
<tbody>
<tr style="border-bottom: 1px solid #000000;">
<td>
@Html.LabelFor(model => model.EmployeeCode, new { data_bind = "text: EmpCode" })
</td>
<td>
@Html.LabelFor(model => model.EmployeeName, new { data_bind = "text: EmpName" })
</td>
<td>
@Html.LabelFor(model => model.ContactNumber, new { data_bind = "text: ContactNumber" })
</td>
<td>
@Html.CheckBoxFor(model => model.MaritalStatus, new { data_bind = "checked: MaritalStatus" })
</td>
<td>
@Html.LabelFor(model => model.EmailID, new { data_bind = "text: EmailID" })
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
// Initialized the namespace
var KnockoutDemoNamespace = {};
// View model declaration
KnockoutDemoNamespace.initViewModel = function (objExercise) {
var customerViewModel = {
EmpCode: ko.observable(objExercise.EmployeeCode),
EmpName: ko.observable(objExercise.EmployeeName),
ContactNumber: ko.observable(objExercise.ContactNumber),
MaritalStatus: ko.observable(objExercise.MaritalStatus),
EmailID: ko.observable(objExercise.EmailID)
};
return customerViewModel;
}
// Bind the customer
KnockoutDemoNamespace.bindData = function (objExercise) {
// Create the view model
var viewModel = KnockoutDemoNamespace.initViewModel(objExercise);
ko.applyBindings(viewModel);
}
KnockoutDemoNamespace.getCustomer = function (customerID) {
$.ajax({
url: "/Exercise/Get/",
type: 'post',
data: "{'customerID':'1' }",
contentType: 'application/json',
success: function (result) {
KnockoutDemoNamespace.bindData(result);
},
error: function (jqXHR, textStatus, errorThrown) {
var errorMessage = '';
$('#message').html(jqXHR.responseText);
}
});
}
KnockoutDemoNamespace.addCustomer = function () {
$.ajax({
url: "/Exercise/Add/",
type: 'post',
data: ko.toJSON(this),
contentType: 'application/json',
success: function (result) {
$('#message').html(result);
}
});
}
$(document).ready(function () {
KnockoutDemoNamespace.getCustomer(1);
});
</script>
</form>
</body>
</html>
请帮助我，我对 KnockoutJS 完全陌生。如果我的问题有任何问题，请告诉我。