我是淘汰js的新手,并且出现如下错误

Error: Unable to parse bindings. Message: ReferenceError: Id is not defined; Bindings value: text: Id

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script src="http://knockoutjs.com/downloads/knockout-2.2.1.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="body">
        <h2>
            Knockout CRUD Operations</h2>
        <h3>
            List of Products</h3>
        <table id="products1" data-bind="visible: Products().length > 0">
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Category
                    </th>
                    <th>
                        Price
                    </th>
                    <th>
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: Products">
                <tr>
                    <td data-bind="text: Id">
                    </td>
                    <td data-bind="text: Name">
                    </td>
                    <td data-bind="text: Category">
                    </td>
                    <td data-bind="text: formatCurrency(Price)">
                    </td>
                    <td>
                        <button data-bind="click: $root.edit">
                            Edit</button>
                        <button data-bind="click: $root.delete">
                            Delete</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                        Total :
                    </td>
                    <td data-bind="text: formatCurrency($root.Total())">
                    </td>
                    <td>
                    </td>
                </tr>
            </tfoot>
        </table>
        <br />
        <div style="border-top: solid 2px #282828; width: 430px; height: 10px">
        </div>
        <div data-bind="if: Product">
            <div>
                <h2>
                    Update Product</h2>
            </div>
            <div>
                <label for="productId" data-bind="visible: false">
                    ID</label>
                <label data-bind="text: Product().Id, visible: false">
                </label>
            </div>
            <div>
                <label for="name">
                    Name</label>
                <input data-bind="value: Product().Name" type="text" title="Name" />
            </div>
            <div>
                <label for="category">
                    Category</label>
                <input data-bind="value: Product().Category" type="text" title="Category" />
            </div>
            <div>
                <label for="price">
                    Price</label>
                <input data-bind="value: Product().Price" type="text" title="Price" />
            </div>
            <br />
            <div>
                <button data-bind="click: $root.update">
                    Update</button>
                <button data-bind="click: $root.cancel">
                    Cancel</button>
            </div>
        </div>
        <div data-bind="ifnot: Product()">
            <div>
                <h2>
                    Add New Product</h2>
            </div>
            <div>
                <label for="name">
                    Name</label>
                <input data-bind="value: $root.Name" type="text" title="Name" />
            </div>
            <div>
                <label for="category">
                    Category</label>
                <input data-bind="value: $root.Category" type="text" title="Category" />
            </div>
            <div>
                <label for="price">
                    Price</label>
                <input data-bind="value: $root.Price" type="text" title="Price" />
            </div>
            <br />
            <div>
                <button data-bind="click: $root.create">
                    Save</button>
                <button data-bind="click: $root.reset">
                    Reset</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">

             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 < arr.length; i++) {
             sum += arr[i].Price;
             }
             return sum;
             });

             //Add New Item
             self.create = function () {
             if (Product.Name() != "" && Product.Price() != "" && 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);

    </script>
    </form>
</body>
</html>


来自GetAllProducts网络方法的JSON重新操作如下:

{"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}}]}


这是使用实体框架的网络方法定义

 // to get all products
    [WebMethod]
    public static IEnumerable<testModel.Product> GetAllProducts()
    {
        testEntities db = new testEntities();
        var data = from product in db.Products
                   select product;
        return data;

    }

最佳答案

看起来响应是一个对象,该对象具有保存数组的属性d。填充Products时,您将要使用data.d而不是仅使用data

09-25 18:42