Hi,
I am trying to display data simply from an array to the home page. I am following a tutorial but the data is not displaying. Can anyone help me what i am doing wrong. what i have done so far is given bellow.
Index.cshtml Contains:
<pre lang="text"><table class="table table-striped table-bordered table-condensed">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
<tbody data-bind="foreach: Profiles">
<tr">
<td data-bind="text: FirstName"></td>
<td data-bind="text: LastName"></td>
<td data-bind="text: Email"></td>
</tr>
</tbody>
</table>
<script src="~/Scripts/Contact.js"></script>
And the view _Layout.cshtml contains:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - Contact manager</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/knockout")
@Styles.Render("~/Content/bootstrap.css")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("scripts", required: false)
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
</ul>
<h3 class="muted">Contact Manager</h3>
</div>
<div id="body" class="container">
@RenderSection("featured", required: false)
<section>
@RenderBody()
</section>
</div>
<hr />
<div id="footer">
<div class="container">
<p class="muted credit">© @DateTime.Now.Year - Design and devloped by IC.</p>
</div>
</div>
</div>
</body>
</html>
What I have tried:
Contact.js contains:
var DummyProfile = [
{
"ProfileId": 1,
"FirstName": "Anand",
"LastName": "Pandey",
"Email": "anand@anandpandey.com"
},
{
"ProfileId": 2,
"FirstName": "John",
"LastName": "Cena",
"Email": "john@cena.com"
}
]
var ProfilesViewModel = function () {
var self = this;
var refresh = function () {
self.Profiles(DummyProfile);
};
// Public data properties
self.Profiles = ko.observableArray([]);
refresh();
};
ko.applyBindings(new ProfilesViewModel());
Submit an article or tip