Question

我创建了一个简单的项目来学习使用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>&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}]

更新 Image of table View in console 提前致谢

Answer 1

属性名称的大小写很重要。由于服务器端的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);
}

Knockout没有在mvc视图中显示数据

1 个答案: