I seem to be encountering an issue with binding Knockout to a model in my code. Despite the code firing and returning a JSON object, the table appears empty. Any advice or suggestions would be greatly appreciated.
HTML
<table style="border: double">
<thead>
<tr>
<td>jobId</td>
</tr>
</thead>
<!--Using foreach to iterate through an observableArray-->
<tbody data-bind="foreach: Jobs">
<tr style="border: solid" data-bind="click: $root.getselectedjob" id="updtr">
<td><span data-bind="text: $data.jobId "></span></td>
</tr>
</tbody>
</table>
Javascript
var JobViewModel = function () {
var self = this;
self.jobId = ko.observable("");
self.name = ko.observable("");
self.description = ko.observable("");
var jobData = {
jobId: self.jobId,
name: self.name,
description: self.description
};
self.Jobs = ko.observableArray([]);
GetJobs();
function GetJobs() {
$.ajax({
type: "GET",
url: "/Client/GetJobs",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
debugger;
self.Jobs(data);
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
}
self.getselectedjob = function (job) {
self.jobId(job.jobId),
self.name(job.name),
self.description(job.description)
};
};
ko.applyBindings(new JobViewModel());
C# Method for retrieving jobs
public ActionResult GetJobs(string AccountIDstr)
{
int AccountID = Convert.ToInt32(AccountIDstr);
AccountID = 1;
var jobs = (from c in db.jobs
select c).OrderByDescending(m => m.jobId).ToList();
var jobsFilter = (from e in jobs
where (AccountID == null || e.accountId == AccountID)
select e).ToList();
var jobsresult = from jobrows in jobsFilter
select new
{
jobId = jobrows.jobId.ToString(),
name = jobrows.name,
description = jobrows.description
};
return Json(new
{
Jobs = jobsresult
},
JsonRequestBehavior.AllowGet);
}
JSON Object
{"Jobs":[{"jobId":"5","name":"Job 5 ","description":"Job 5 description"},{"jobId":"1","name":"Job 1 ","description":"Job 1 description"}]}