【发布时间】：2013-01-28 06:41:44
【问题描述】：
我想在 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 完全陌生。如果我的问题有任何问题，请告诉我。
【问题讨论】：
-
尝试分离服务器和客户端的问题。使用 JSON 和仅 html 视图创建 fiddle。
-
我没有太多的专业知识来创建一个小提琴..因为它只有 HTML 可以在其中放置我的 .cshtml 代码..bt 我应该将我的 Controller.cs 和属性定义在哪里Model.cs ..如果您希望我在 JSON 中进行相同的转换，那么我不知道..如果我在说一些愚蠢的事情..那么您可以预测我对 Knockout JS 的了解..所以在此基础上对待我.. .
-
既然你问了......看看my edit to your question，这些都是你可以做的事情来改善你自己的问题（让别人帮助你变得更容易和更有趣）。此外，您提出的问题越多succinct，就越容易（也更有可能）提供帮助。最后，具体说明您的问题和tell us what you've tried 来解决问题（目前您只是将代码扔在那里，它读起来就像“请为我做这件事”的问题）。祝你好运！
-
@Jeroen 非常感谢你....没有人回答我的问题..
标签： model-view-controller knockout.js datatable