Question

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

Image is here with error and alert.

我的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;
        }

Answer 1

你知道'朋友'是否真的被设置并且是一个阵列？你在foreach模板中使用它。它接缝Knockout无法加载数组...

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

Answer 2

您从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()会强制数据类型，因此根本不可靠。

Answer 3

您必须使用带有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)
    });
});

Javascript未捕获的ReferenceError - C＃

3 个答案: