<分区>
我创建了一个简单的项目来使用 knocout 学习 mvc。 这是我的东西的样子
查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/knockout-2.2.1.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><a href="/">your logo here</a></p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li><a href="/Account/Register" id="registerLink">Register</a></li>
<li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>
</section>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<table id="timesheets" class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody data-bind="foreach: viewModel.timesheets">
<tr>
<td data-bind="text: firstname"></td>
<td data-bind="text: lastname"></td>
<td data-bind="text: month"></td>
<td data-bind="text: year"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function () {
ko.applyBindings(viewModel);
viewModel.loadTimesheets();
});
function timesheet(timesheet) {
this.id = ko.observable(timesheet.id);
this.firstname = ko.observable(timesheet.firstname);
this.lastname = ko.observable(timesheet.lastname);
this.month = ko.observable(timesheet.month);
this.year = ko.observable(timesheet.year);
}
var viewModel = {
timesheets: ko.observableArray([]),
loadTimesheets: function () {
var self = this;
$.getJSON(
'/api/timesheet',
function (timesheets) {
self.timesheets.removeAll();
$.each(timesheets, function (index, item) {
self.timesheets.push(new timesheet(item));
});
}
);
}
};
</script>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2013 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
</body>
</html>
Controller
public IEnumerable<TimeSheet> GetTimeSheets()
{
return db.TimeSheet.AsEnumerable();
}
当页面加载时调用此方法并返回数据，正如我在 firebug 中看到的那样
这是返回的结果
[{"Id":1,"FirstName":"Ahsan","LastName":"Ashfaq","Month":8,"Year":2013},{"Id":2,"FirstName":"Ahsan","LastName":"Ashfaq","Month":9,"Year":2013},{"Id":3,"FirstName":"Ahsan","LastName":"Ashfaq","Month":10,"Year":2013}]
更新 Image of table View in console 提前致谢