knockoutjs JSON Ajax MVC4 bind list object simple example view model

Binding DateTime list of object to knockout js MVC 4 view model
knockoutjs binding for a list of object using MVC 4
Bind list object using knockoutjs JSON Ajax in MVC 4

I'm going to implement to knockoutjs list object binding for a view model using to knockoutjs JSON Ajax and MVC 4

In this example we get the list object by JSON and display to View using ViewModel i.e.
JSON url - url: "/MyHome/Get/"

In the 1st step, we create a Matter property class

public class Matter
{
public int matterId { get; set; }
public string matterTitle { get; set; }
public DateTime createdOn { get; set; }
public string matterComment { get; set; }
public string totalHours { get; set; }
public string MyProperty1 { get; set; }
public int MyProperty2 { get; set; }
public int MyProperty3 { get; set; }
public int MyProperty4 { get; set; }
}

In the 2nd step, we create MyHomeController

public class MyHomeController : Controller
{
// Return testKnockout default view
public ActionResult testKnockout()
{
return View();
}

// Call by JSON request
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult GetMatter(int matterId)
{
// Get the matter ...

var matters = new[] {
new Matter { matterId = matterId, matterTitle = "1000:ABC", totalHours="6.5 hrs.",createdOn = DateTime.Now, matterComment = "some comment here....", MyProperty1="3000-015 : ABC v XYZ, LLL" },
new Matter { matterId = matterId, matterTitle = "2000:XYZ", totalHours="8.5 hrs.",createdOn = DateTime.Now, matterComment = "some comment here....", MyProperty1="3000-016 : XYZ v LMN, LLL" },
new Matter { matterId = matterId, matterTitle = "3000:LMN", totalHours="4.5 hrs.",createdOn = DateTime.Now, matterComment = "some comment here....", MyProperty1="3000-017 : XYZ v ABC, LLL" }
};
return Json(matters);
}

}

In the step 3, I'm going to display to view model data

<div data-bind="foreach: matters" class="data row selected">
<div>
<table style="width:100%">
<tr>
<td style="width:5%; ">
<div class="status">
<img src="~/Images/icon_status.png" alt="" title="" />
</div>
</td>
<td style="width:85%;">
<div data-bind="text: dateTime" style="font:bold"></div>
</td>
<td>
<div class="options"><a href="#">0.50<img src="~/Images/icon_options.png" /></a></div>
</td>
</tr>
</table>
</div>
<div> </div>
<div data-bind="foreach: subMatter">
<table style="width:100%">
<tr>
<td style="width:5%"> </td>
<td style="width:85%">
<div data-bind="text: $data"></div>

</td>
<td style="width:10%"> </td>
</tr>
</table>
</div>
<div>  </div>
<div data-bind="foreach: subSubMatter">
<table style="width:100%">
<tr>
<td style="width:5%"> </td>
<td style="width:85%">
<div data-bind="text: $data"></div>
</td>
<td style="width:10%"> </td>
</tr>
</table>
</div>
</div>

In the step 4, i'm going to writing Knockout view model send the Json request and get the response result data with the help of viewModel and display on the view.
<script type="text/javascript">

$(document).ready(function () {
$.ajax({
url: "/MyHome/Get/",
type: 'post',
data: "{'matterId':'1' }",
contentType: 'application/json',
success: function (result) {
// call to view model
getViewModel(result);
},
error: function (jqXHR, textStatus, errorThrown) {
var errorMessage = '';
$('#message').html(jqXHR.responseText);
}
});

function getViewModel(result)
{
// Define a "matter" class.
var matter = function (dateTime, subMatter, subSubMatter) {
this.dateTime = dateTime;
this.subMatter = ko.observableArray(subMatter);
this.subSubMatter = ko.observableArray(subSubMatter);

}
// view model
var viewModel = {
matters: [],
showRenderTimes: ko.observable(false)
};

// push all data in view model
for (var i = 0; i < result.length; i++) {
var matterRow = new matter(result[i].createdOn + " | " + result[i].totalHours, [result[i].matterTitle, result[i].MyProperty1,result[i].matterComment]);
viewModel.matters.push(matterRow);
}

// bind view model to knockout
ko.applyBindings(viewModel);
}
});
</script>

Output:

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2