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>&nbsp;</div>
                    <div data-bind="foreach: subMatter">
                         <table style="width:100%">
                            <tr>
                                <td style="width:5%">&nbsp;</td>                                    
                                <td style="width:85%">
                                    <div data-bind="text: $data"></div> 
                                                                      
                                </td>                                
                                <td style="width:10%">&nbsp;</td>                               
                            </tr>
                        </table> 
                    </div>
                    <div> &nbsp;</div>
                   <div data-bind="foreach: subSubMatter">
                         <table style="width:100%">
                            <tr>
                                <td style="width:5%">&nbsp;</td>                                    
                                <td style="width:85%">
                                    <div data-bind="text: $data"></div>                           
                                </td>                                
                                <td style="width:10%">&nbsp;</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: