How to bind products list in knockoutjs with Mvc

Anonymous User 2136 15 Oct 2015

Can anyone please help me how to solve this problem.

Anonymous User

Other

I am a content writter !

1 Answers

Anonymous User 15 Oct 2015



<!DOCTYPE html>
<html>
<head>
    <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> 
</head>
<body>
<div id="demo">
<table>
    <thead>
        <tr>
            <th>Product Id</th>
            <th>Product Name</th>
            <th>Price</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody databind="foreach:Products">
        <tr>
   <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>
        </tr>
    </tbody>
</table> 
</div>
<script>
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")); 
});
</script>
</body>
</html>
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);
 }
}

forum

How to bind products list in knockoutjs with Mvc

Can you answer this question?

1 Answers