Knockoutjs with Asp.net MVC4

   public class HomeController : Controller
    {
        [AllowAnonymous]
        public ActionResult Index()
        {
            ViewBag.Message = "Sample Application - Knockoutjs with Asp.net MVC4";
            string viewKey = string.Empty;
            if (Request.Form.AllKeys.Count() > 0)
            {
                if (Request.Form.AllKeys.Contains("viewName"))
                    viewKey = Request.Form["viewName"].ToString();
                if (viewKey.Equals("JSON"))
                    return GetPerson();
                else
                    return null;
            }
            return View();
        }
        public JsonResult GetPerson()
        {
            List<Person> persons = new List<Person>
                              {
                                  new Person(){Name="James", Address="Delhi"},
                                  new Person(){Name="Scott", Address="Bangalore"},
                                  new Person(){Name="Dennish", Address="Australia"},
                                  new Person(){Name="Victor", Address="England"},
                                  new Person(){Name="Adam", Address="Kolkata"},
                                  new Person(){Name="Kate", Address="Delhi"},
                                  new Person(){Name="Christan", Address="Bangalore"},
                                  new Person(){Name="Milanda", Address="Australia"},
                                  new Person(){Name="Thayo", Address="England"},
                                  new Person(){Name="Bjorn", Address="Kolkata"},
                              };
            System.Web.Script.Serialization.JavaScriptSerializer jSearializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            string jsonString = jSearializer.Serialize(persons);
            return Json(jsonString, JsonRequestBehavior.AllowGet);
        }
    }

Design 

UI include js files of jquery and knockout. Both files are available in the MVC bundle itself.

Data-bind is a property of knockoutjs to bind data to the UI. In tbody “persons” is an observable array which contains value for Name and Address. 

Index.cshtml

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../Scripts/knockout-2.1.0.js"></script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "myForm" }))
{
    @Html.Hidden("viewName");
    <div id="jsonDiv">
        <input id="btnGetJSON" type="button" value="Get JSON Data and bind to UI using Knockoutjs" onclick="javascript:GetJSONData('JSON','myForm')" /><br />
        <table border="1">
            <thead>
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Address
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: persons">
                <tr>
                    <td data-bind="text: Name">
                    </td>
                    <td data-bind="text: Address">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>   
}
<script type="text/javascript" src="../../Scripts/MyScript.js"></script>

function GetJSONData(hiddenValue, formID) {
    $("#viewName").val(hiddenValue);
    var form = $('#' + formID)
    $.ajax({
        url: form.attr('action'),
        type: "POST",
        data: form.serialize(),
        success: function (response) {
            if (hiddenValue == 'JSON') {
                // parseJSON
                response = $.parseJSON(response);
                //Get div context and Call knockout method
                var dn = document.getElementById('jsonDiv');
                var x = ko.contextFor(dn);
                x.$root.getPersons(response);
            }
        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
    });
}

function Person(pname, paddress) {
    this.Name = pname;
    this.Address = paddress;
}

function personVM() {
    var self = this;
    self.Name = ko.observable();
    self.Address = ko.observable();
    self.persons = ko.observableArray([]);
    self.getPersons = function (data) {
        self.persons.removeAll();
        $.each(data, function (key, val) {
            self.persons.push(new Person(val.Name, val.Address));
        });
    };
}
$(document).ready(function () {
    var dn = document.getElementById('jsonDiv');
    ko.applyBindings(new personVM(), dn);
});