HOW TO BIND PRODUCTS LIST IN KNOCKOUTJS WITH MVC

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 858  View(s)
Ratings:
Rate this:
Can anyone please help me how to solve this problem. 
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to bind products list in knockoutjs with Mvc

    
    
    

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

    }

    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!