1

我使用 $.getJson 将 json 对象检索到我的视图模型和应用绑定中。它不会显示 foreach 中的数据绑定。[代码] - index.cshtml

@{
    ViewData["Title"] = "Home Page";
}
@section Scripts {
    <script>
        require(['knockout', 'jquery', 'bootstrap', 'components/clients-list.component'], function (ko) {
            ko.applyBindings();
        });
    </script>
}
<!DOCTYPE html>

<head>
    <title>Index</title>
</head>
<body>
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Machine Grid</p>
        <div>
            <table>
                <tbody data-bind="foreach: machines">
                    <tr style="border-bottom: 1px solid #000000;">
                        <td>
                            <span data-bind="text: machineid"></span>
                        </td>
                        <td>
                            <span data-bind="text: ports"></span>
                        </td>
                        <td>
                            <span data-bind="value: Weight"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div>

    </div>
</body>


<script type="text/javascript">

    var AppViewModel = function () {
        var self = this;
        self.machines = ko.mapping.fromJS([]);
        $.getJSON('/Home/Index/', function (data) {
            self.machines = ko.mapping.fromJS(data);
        });
    };

    $(document).ready(function () {
        var viewModel = new AppViewModel();
        ko.applyBindings(viewModel);
    });
    
</script>
//Models.MachineModel
 public class MachineModel
    {
        public int MachineId { get; set; }

        public string HardDrive { get; set; }

        public string Ports { get; set; }

        public string GraphicsCard { get; set; }

        public string Weight { get; set; }

        public string Power { get; set; }

        public string Processor { get; set; }

        public string Ram { get; set; }
    }

//Controller


        public async Task<IActionResult> Index()
        {

            IEnumerable<MachineModel> machineList;
                using (var httpClient = new HttpClient())
                {
                    using (var response = await httpClient.GetAsync("https://localhost:44336/api/Machine"))
                    {
                        string apiResponse = await response.Content.ReadAsStringAsync();
                        machineList = JsonConvert.DeserializeObject<IEnumerable<MachineModel>>(apiResponse);
                    }
                }
            return View(machineList);
            
        }

我在调试时检查了一个填充对象。我也尝试过使用 Json(machineList) 但这会出现一个对话框来下载 json 然后终止。

4

2 回答 2

0

public async Task Index() {

        return View();
       
    }

    public async Task<JsonResult> Machine()
    {
        IEnumerable<MachineModel> machineList;
        using (var httpClient = new HttpClient())
        {
            using (var response = await httpClient.GetAsync("https://localhost:44336/api/Machine"))
            {
                string apiResponse = await response.Content.ReadAsStringAsync();
                machineList = JsonConvert.DeserializeObject<IEnumerable<MachineModel>>(apiResponse);
            }
        }
        return Json(machineList);
    }
于 2021-04-22T08:44:02.750 回答
0

我能看到的几件事，

  • 对象属性名称大小写很重要，因此请检查从服务器返回的数据的大小写，并确保数据绑定匹配。

  • 作为一般规则，只使用data-bind="value: someProperty"可以输入数据的 for 元素。通常是这个<input />元素。

  • 检查浏览器控制台 (F12) 是否存在绑定错误，因为这对发现错误所在有很大帮助。 在此处输入图像描述

  • 如果您真的卡住了，请添加<pre data-bind="text: ko.toJSON($root)"></pre>到 html 以帮助查看视图模型中数据的状态

var data = [{
  "machineId": 1,
  "hardDrive": "2TB",
  "ports": "USB Type-C",
  "graphicsCard": "3080",
  "weight": "5.3 kg",
  "power": "650w",
  "processor": "Intel I7",
  "ram": "32GB"
}, {
  "machineId": 2,
  "hardDrive": "2TB",
  "ports": "USB Type-C x2",
  "graphicsCard": "3080",
  "weight": "5.3 kg",
  "power": "650w",
  "processor": "Intel I7",
  "ram": "32GB"
}]


var AppViewModel = function() {
  var self = this;
  self.machines = ko.mapping.fromJS(data);
};

var viewModel = new AppViewModel();
ko.applyBindings(viewModel);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<pre data-bind="text: ko.toJSON($root)"></pre>
<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Machine Grid</p>
  <div>
    <table class='table'>
      <thead>
        <tr>
          <th>Machine Id</th>
          <th>Ports</th>
          <th>Weight</th>
        </tr>
      </thead>
      <tbody data-bind="foreach: machines">
        <tr style="border-bottom: 1px solid #000000;">
          <td>
            <span data-bind="text: machineId"></span>
          </td>
          <td>
            <span data-bind="text: ports"></span>
          </td>
          <td>
            <span data-bind="text: weight"></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

于 2021-04-22T01:13:57.297 回答