1

我创建了一个简单的项目来学习 mvc 与 knocout 。这是我的东西的样子

看法

<!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>&copy; 2013 - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>


</body>
</html>

控制器

    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}]

在控制台 中更新表格视图的图像 提前致谢

4

1 回答 1

3

属性名称的大小写确实很重要。而且由于服务器端的 C# 命名约定，您的 JSON 响应具有大写Id等FirstName属性名称。

因此，您需要在创建timesheet对象时使用正确的大小写

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);
}
于 2013-06-02T06:30:45.880 回答