Home > DeveloperSection > Forums > How to bind products list in knockoutjs with Mvc
Ankit Singh

Total Post:341

Posted on    October-15-2015 3:16 AM

 ASP.NET MVC JQuery  Mvc4  Entity Framework  Knockout.js 

 1 Reply(s)
 480  View(s)
Rate this:
Can anyone please help me how to solve this problem. 

aditya kumar Patel

Total Post:250

Posted on    October-15-2015 3:22 AM

<!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);



Don't want to miss updates? Please click the below button!

Follow MindStick