title: Error: Unable to parse bindings. Message: ReferenceError: Id is not defined; Bindings value: text: Id
body: <p>I am new to knockout js and i am getting error as follows </p>
  
  <p><code>Error: Unable to parse bindings. Message: ReferenceError: Id is not defined; Bindings value: text: Id</code></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
     &lt;script src="http://code.jquery.com/jquery-1.9.0.js"&gt;&lt;/script&gt;
      &lt;script src="http://knockoutjs.com/downloads/knockout-2.2.1.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div id="body"&gt;
          &lt;h2&gt;
              Knockout CRUD Operations&lt;/h2&gt;
          &lt;h3&gt;
              List of Products&lt;/h3&gt;
          &lt;table id="products1" data-bind="visible: Products().length &gt; 0"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          ID
                      &lt;/th&gt;
                      &lt;th&gt;
                          Name
                      &lt;/th&gt;
                      &lt;th&gt;
                          Category
                      &lt;/th&gt;
                      &lt;th&gt;
                          Price
                      &lt;/th&gt;
                      &lt;th&gt;
                          Actions
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody data-bind="foreach: Products"&gt;
                  &lt;tr&gt;
                      &lt;td data-bind="text: Id"&gt;
                      &lt;/td&gt;
                      &lt;td data-bind="text: Name"&gt;
                      &lt;/td&gt;
                      &lt;td data-bind="text: Category"&gt;
                      &lt;/td&gt;
                      &lt;td data-bind="text: formatCurrency(Price)"&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;button data-bind="click: $root.edit"&gt;
                              Edit&lt;/button&gt;
                          &lt;button data-bind="click: $root.delete"&gt;
                              Delete&lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
              &lt;tfoot&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          Total :
                      &lt;/td&gt;
                      &lt;td data-bind="text: formatCurrency($root.Total())"&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tfoot&gt;
          &lt;/table&gt;
          &lt;br /&gt;
          &lt;div style="border-top: solid 2px #282828; width: 430px; height: 10px"&gt;
          &lt;/div&gt;
          &lt;div data-bind="if: Product"&gt;
              &lt;div&gt;
                  &lt;h2&gt;
                      Update Product&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="productId" data-bind="visible: false"&gt;
                      ID&lt;/label&gt;
                  &lt;label data-bind="text: Product().Id, visible: false"&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="name"&gt;
                      Name&lt;/label&gt;
                  &lt;input data-bind="value: Product().Name" type="text" title="Name" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="category"&gt;
                      Category&lt;/label&gt;
                  &lt;input data-bind="value: Product().Category" type="text" title="Category" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="price"&gt;
                      Price&lt;/label&gt;
                  &lt;input data-bind="value: Product().Price" type="text" title="Price" /&gt;
              &lt;/div&gt;
              &lt;br /&gt;
              &lt;div&gt;
                  &lt;button data-bind="click: $root.update"&gt;
                      Update&lt;/button&gt;
                  &lt;button data-bind="click: $root.cancel"&gt;
                      Cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-bind="ifnot: Product()"&gt;
              &lt;div&gt;
                  &lt;h2&gt;
                      Add New Product&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="name"&gt;
                      Name&lt;/label&gt;
                  &lt;input data-bind="value: $root.Name" type="text" title="Name" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="category"&gt;
                      Category&lt;/label&gt;
                  &lt;input data-bind="value: $root.Category" type="text" title="Category" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="price"&gt;
                      Price&lt;/label&gt;
                  &lt;input data-bind="value: $root.Price" type="text" title="Price" /&gt;
              &lt;/div&gt;
              &lt;br /&gt;
              &lt;div&gt;
                  &lt;button data-bind="click: $root.create"&gt;
                      Save&lt;/button&gt;
                  &lt;button data-bind="click: $root.reset"&gt;
                      Reset&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
  
               function formatCurrency(value) {
               return "$" + value.toFixed(2);
               }
  
               function ProductViewModel() {
  
               //Make the self as 'this' reference
               var self = this;
               //Declare observable which will be bind with UI 
               self.Id = ko.observable("");
               self.Name = ko.observable("");
               self.Price = ko.observable("");
               self.Category = ko.observable("");
  
               var Product = {
               Id: self.Id,
               Name: self.Name,
               Price: self.Price,
               Category: self.Category
               };
  
               self.Product = ko.observable();
               self.Products = ko.observableArray(); // Contains the list of products
  
               // Initialize the view-model
               $.ajax({
               url: 'SProduct.aspx/GetAllProducts',
               cache: false,
               type: 'POST',
               contentType: 'application/json; charset=utf-8',
               data: {},
               success: function (data) {
               console.log(data);
               self.Products(data); //Put the response in ObservableArray
               }
               });
  
               // Calculate Total of Price After Initialization
               self.Total = ko.computed(function () {
               var sum = 0;
               var arr = self.Products();
               for (var i = 0; i &lt; arr.length; i++) {
               sum += arr[i].Price;
               }
               return sum;
               });
  
               //Add New Item
               self.create = function () {
               if (Product.Name() != "" &amp;&amp; Product.Price() != "" &amp;&amp; Product.Category() != "") {
               $.ajax({
               url: 'SProduct.aspx/Add',
               cache: false,
               type: 'POST',
               contentType: 'application/json; charset=utf-8',
               data: ko.toJSON(Product),
               success: function (data) {
               self.Products.push(data);
               self.Name("");
               self.Price("");
               self.Category("");
  
               }
               }).fail(
               function (xhr, textStatus, err) {
               alert(err+","+textStatus+","+err);
               });
  
               }
               else {
               alert('Please Enter All the Values !!');
               }
  
               }
               // Delete product details
               self.delete = function (Product) {
               if (confirm('Are you sure to Delete "' + Product.Name + '" product ??')) {
               var id = Product.Id;
  
               $.ajax({
               url:  'SProduct.aspx/Delete',
               cache: false,
               type: 'POST',
               contentType: 'application/json; charset=utf-8',
               data: ko.toJSON(id),
               success: function (data) {
               self.Products.remove(Product);
  
               }
               }).fail(
               function (xhr, textStatus, err) {
               self.status(err);
               });
               }
               }
  
               // Edit product details
               self.edit = function (Product) {
               self.Product(Product);
  
               }
  
               // Update product details
               self.update = function () {
               var Product = self.Product();
  
               $.ajax({
               url: 'SProduct.aspx/Update',
               cache: false,
               type: 'PUT',
               contentType: 'application/json; charset=utf-8',
               data: ko.toJSON(Product),
               success: function (data) {
               self.Products.removeAll();
               self.Products(data); //Put the response in ObservableArray
               self.Product(null);
               alert("Record Updated Successfully");
               }
               })
               .fail(
               function (xhr, textStatus, err) {
               alert(err);
               });
               }
  
               // Reset product details
               self.reset = function () {
               self.Name("");
               self.Price("");
               self.Category("");
               }
  
               // Cancel product details
               self.cancel = function () {
               self.Product(null);
  
               }
               }
               var viewModel = new ProductViewModel();
               ko.applyBindings(viewModel);
  
      &lt;/script&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JSON resopnse from GetAllProducts webmethod is as follows :</strong> </p>
  
  <pre><code>{"d":[{"__type":"testModel.Product","Id":1,"Name":"Bat","Category":"Cricket","Price":5000.00,"EntityState":2,"EntityKey":{"EntitySetName":"Products","EntityContainerName":"testEntities","EntityKeyValues":[{"Key":"Id","Value":1}],"IsTemporary":false}},{"__type":"testModel.Product","Id":2,"Name":"FootBall","Category":"FootBall","Price":15000.00,"EntityState":2,"EntityKey":{"EntitySetName":"Products","EntityContainerName":"testEntities","EntityKeyValues":[{"Key":"Id","Value":2}],"IsTemporary":false}},{"__type":"testModel.Product","Id":3,"Name":"Racket","Category":"Badminton","Price":890000.00,"EntityState":2,"EntityKey":{"EntitySetName":"Products","EntityContainerName":"testEntities","EntityKeyValues":[{"Key":"Id","Value":3}],"IsTemporary":false}}]}
  </code></pre>
  
  <p>Here is web method definition which use Entity Framework </p>
  
  <pre><code> // to get all products 
      [WebMethod]
      public static IEnumerable&lt;testModel.Product&gt; GetAllProducts()
      {
          testEntities db = new testEntities();
          var data = from product in db.Products
                     select product;
          return data;
  
      }
  </code></pre>