Javascript Uncaught ReferenceError - C#答案

【问题标题】：Javascript Uncaught ReferenceError - C#Javascript Uncaught ReferenceError - C#
【发布时间】：2017-10-30 12:29:46
【问题描述】：

我从数据库发送信息没有任何问题。但我无法在页面中加载表格。但是，当我发出警报以查看我收到的内容时，信息似乎以 json 的形式出现，但它继续在图片中给出错误的图像。我该如何解决？

我的 HTML：

<!DOCTYPE html>
<script src="Scripts/knockout-3.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-3.1.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
</head>
<body>
    <table border="1">
        <thead>
            <th>Id</th>
            <th>Name</th>
            <th>Sales</th>
            <th>Price</th>
            <th>Sil</th>
        </thead>
        <tbody data-bind="foreach:friends">
            <tr>
                <td data-bind="text:id"></td>
                <td data-bind="text:name"></td>
                <td data-bind="text:sales"></td>
                <td data-bind="text:price"></td>
                <td><input type="button" data-bind="click:$parent.removeUser" value="X" /></td>
            </tr>
        </tbody>
    </table>

    <div>Name</div> <input data-bind="value: Name" /> <br />
    <div>Sales </div> <input data-bind="value: Sales" /> <br />
    <div>Price </div> <input data-bind="value: Price" /> <br />

    <button data-bind="click:addUser">Ekle</button>
    <button data-bind="click:removeUserAll">Hepsini Sil</button>

    <script type="text/javascript">

        this.Name = ko.observable();
        this.Sales = ko.observable();
        this.Price = ko.observable();

        function functionViewModel() {
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    url: "KnockoutGrid2.aspx/GonderUrunler",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        alert(msg.d);
                        var initialData = msg.d;
                    }
                });
            });
            var fn = {
                friends: ko.observableArray(initialData)
            };

            return fn;
        };

        ko.applyBindings(functionViewModel());
    </script>
</body>
</html>

我的后端代码：

[WebMethod]
        public static string GonderUrunler()
        {
            denemeDBEntities db = new denemeDBEntities();
            var result = from d in db.urunler.ToList()
                         select d;
            string output = new JavaScriptSerializer().Serialize(result);
            return output;
        }

【问题讨论】：

标签： javascript jquery ajax knockout.js

【解决方案1】：

您必须使用带有 ajax 的回调。因为 ajax 工作是异步的检查This文档。

 $(document).ready(function () {

      function functionViewModel(callback) {
            $.ajax({
                type: "POST",
                url: "KnockoutGrid2.aspx/GonderUrunler",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                  callback({friends: ko.observableArray(msg.d)});
                }
            });
    };

    functionViewModel(function(response){
       ko.applyBindings(response.friends)
    });
});

【讨论】：

【解决方案2】：

你知道'friends'是否真的被设置并且是一个数组？您在 foreach 模板中使用它。看起来 Knockout 无法加载数组...

<tbody data-bind="foreach:friends">

【讨论】：

如果我这样写 foreach 正在工作，但这次我没有来自数据库的数据。 var fn = { friends: ko.observableArray([{ "id": 1, "name": "Well-Traveled Kitten", "sales": "352", "price": "75.95" }, { "id" : 2, "name": "Speedy Coyote", "sales": "89", "price": "190.00".... }]) };

【解决方案3】：

您正在从 WebMethod 返回一个 JSON 格式的字符串，因此在您的 JS 代码中您需要将其反序列化为一个对象，以便您可以使用其中包含的数据。为此，请使用 JSON.parse:

success: function (msg) {
  var data = JSON.parse(msg);
  console.log(data[0].id);
  console.log(data[0].name);
}

这里有几点需要注意。首先，data 将是一个数组，因此如果您需要检索其中包含的所有信息，则需要使用循环。其次，调试时始终使用console.log 或console.dir。 alert() 会强制数据类型，所以根本不可靠。

【讨论】：