How to bind products list in knockoutjs with Mvc

Can anyone please help me how to solve this problem. 
Last updated:10/15/2015 3:22:51 AM

1 Answers

Anonymous User
Anonymous User

<!DOCTYPE html>



    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <script src='/Scripts/jquery-2.1.4.min.js'></script>

  <script src='/Scripts/knockout-3.3.0.js'></script>



<div id='demo'>




            <th>Product Id</th>

            <th>Product Name</th>





    <tbody databind='foreach:Products'>


<td><label data-bind='text:ProductId'></label></td>

      <td><label data-bind='text:ProductName'></label></td>

      <td><label data-bind='text:Price'></label></td>

      <td><p data-bind='text:Description'></p></td>






function viewModel() {

    var self = this;

self.Products = ko.observableArray();

    $.getJSON('/Home/Products', function (data) {

        self.Products (data);



$(function () {

    var NewViewModel = new viewModel ();

    ko.applyBindings(NewViewModel, document.getElementById('demo')); 





public class HomeController : Controller


public JsonResult Products ()


var data = db.Database.SqlQuery<Manufacturers>(@'SELECT DISTINCT ProductId ,

ProductName,Price,Description FROM products_table').ToList();

return Json(data, JsonRequestBehavior.AllowGet);