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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

                          You Might Also Like                
                         