使用淘汰赛 js 导航到编辑视图的 ASP MVC 错误答案

【问题标题】：ASPMVC error navigating to Edit view using knockoutjs使用淘汰赛 js 导航到编辑视图的 ASP MVC 错误
【发布时间】：2018-02-20 09:38:09
【问题描述】：

我正在使用淘汰赛 js 导航到另一个视图。我有一个列表视图，将数据库中的所有项目显示到表中。每行都有编辑按钮，应该将用户转发到编辑视图，但是当我点击它时，它不会显示记录的属性。

这是我的列表视图：

<div>
    <span data-bind="text: catSearch"></span><br />
    <table class="table">
        <tr>
            <td><b>Name:</b></td>
            <td><input type="text" class="input-sm" id="txtName" data-bind="value: nameSearch"/></td>
            <td><b>Category:</b></td>
            <td><input type="text" class="input-sm" id="txtcategory" data-bind="value: catSearch" /></td>

        </tr>
        <tr>
            <td><button type="button" class="btn btn-primary" data-bind="click: filterList">Search</button></td>
        </tr>
    </table>
</div>
<br />
<table class="table ">
    <thead>
    <tr>
        @*<th>Id</th>*@
        <th class="navbar-header">Product</th>
        <th>Category</th>
        <th>Price</th>

        <th></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: Price"></td>

            <td>
                <a class="btn btn-default" data-bind="click: editProduct">Edit</a>
                <a class="btn btn-danger" data-bind="click: deleteProduct">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

</div>

@section Scripts {
    @Scripts.Render("~/bundles/knockout")
    @Scripts.Render("~/Scripts/jquery-3.1.1.min.js")
    @Scripts.Render("~/Scripts/knockout-3.4.2.js")
    @Scripts.Render("~/Scripts/ViewModels/ProductListVm.js")
}

这是我获取列表的淘汰赛js：

var urlPath = window.location.pathname;
$(function () {
    ko.applyBindings(ProductListVm);
    ProductListVm.filterList();
});

//View Model
var ProductListVm = {
    Products: ko.observableArray([]),

    Id: ko.observable(0),
    Name: ko.observable(""),
    Category: ko.observable(""),
    Price: ko.observable(0),
    StatId: ko.observable(0),
    nameSearch: ko.observable(""),
    catSearch: ko.observable(""),
    getPass: ko.observable(),
    Sess: ko.observable(""),



    filterList: function () {
        var self = this;
        var nameP = self.nameSearch();
        var catP = self.catSearch();


        $.ajax({
            type: "POST",
            url: "/Product/Retrieve",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{\"nameSearch\" : \"" + nameP + "\" , \"catSearch\" : \"" + catP + "\" }",
            success: function (data) {
                self.Products(data);
            }
        });
    }

};
//FORWARDING TO EDIT VIEW
self.editProduct = function (product) {
    window.location.href = '/Product/Edit/' + product.Id;
};
self.deleteProduct = function (product) {
    window.location.href = '/Product/Delete/' + product.Id;
};

//honestly, i dont know what is the use of this. it doesnt seem to have anything to do during runtime
function Products(data) {
    this.Id = ko.observable(data.Id);
    this.Name = ko.observable(data.Name);
    this.Category = ko.observable(data.Category);
    this.Price = ko.observable(data.Price);
    this.StatId = ko.observable(data.StatId);
}

当我在点击编辑按钮后检查页面时，它的状态是这样的：

Uncaught ReferenceError: Unable to process binding "value: function (){return Id }"
Message: Id is not defined
    at value (eval at parseBindingsString (knockout-3.4.2.js:68), <anonymous>:3:58)

【问题讨论】：

这个self.editProduct中的self是什么？我没有看到它在范围内声明。
您能否确认从您的POST 请求到/Product/Retrieve 的数据中返回了“Id”属性？使用从该方法返回的 JSON 输出更新您的问题可能会有所帮助。
您的 editProduct 方法将 product 作为输入，但我在 Edit 按钮的数据绑定中没有看到
CodingYoshi：我不知道，我只是复制它。现在我知道为什么有些人讨厌 js。所以，我应该删除“自我”对吗？
彼得：我不能。我不知道如何使用js。我正在努力学习它。那你能告诉我如何传递ID吗？

标签： c# knockout.js

【解决方案1】：

您必须在 ajax 成功调用中创建 Products 的新实例。

$.ajax({
type: "POST",
url: "/Product/Retrieve",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{\"nameSearch\" : \"" + nameP + "\" , \"catSearch\" : \"" + catP + "\" }",
success: function(data) {
    var tempProducts = [];
    for (var i = 0; i < data.length; i++) {
        var productVM = new Products(data[i])
        tempProducts.push(data);
    }
    self.Products.push.apply(Products, tempProducts)
}});

如果您不创建 Products 的新实例。在您的视图中，foreach 绑定不会找到 ProductsViewModel 的任何属性

【讨论】：