ASP.NET MVC Knockout 按钮点击调用 POST API

Question

我在 html 的前端有一个 table（列表），对于每一行，我都有一个按钮：

...
<td>
  <button data-bind="click: sendDataToApi">Test button</button>
</td>
...

在 .js 文件中我有这样的东西：

define(['viewmodels/shell', 'durandal/services/logger', 'plugins/dialog', 'viewmodels/shell', 'toastr', 'knockout', 'kovalidationconfig', 'plugins/router', 'typeahead.bundle'],
    function (shell, logger, dialog, shell, toastr, ko, kvc, router, typeahead) {
        var vm = {
            activate: activate,
            shell: shell,
            data: ko.observableArray([]),
            close: function () {
                $(window).off('popstate', vm.goBack);
                $(window).off('resize', adjustModalPosition);
                dialog.close(vm, 'cancel');
            },
            goBack: function () {
                $(window).off('popstate', vm.goBack);
                $(window).off('resize', adjustModalPosition);
                dialog.close(vm, 'back');
            },
            editPreregisteredChildren: function () {
                router.navigate("#/function/" + this.id);
            },
           
            currentPage: ko.observable(1),
            itemsPerPage: ko.observable(10),
            hasNextPage: ko.observable(false),
            previousPage: previousPage,
            nextPage: nextPage,
            sendDataToApi: function () {console.log("sdsdsds")},
            searchCriteria: ko.observable(''),
            applySearch: applySearch,
            locations: ko.observableArray([]),
            locationId: ko.observable(),
            LocationName: ko.observable(),
            exportHref: ko.observable("/spa/ExportSchedulings"),
            bindingComplete: function (view) {
                bindFindLocationEvent(view);
            }
        };

        function sendDataToApi() {
            console.log("hello.")
        };

    });

所以，首先，我想让 console.log("something") 工作。

现在我在 chrome:

的控制台中收到错误

Uncaught ReferenceError: Unable to process binding "click: function(){return sendDataToApi }"
Message: sendDataToApi is not defined

我不明白为什么？

之后我需要对我的控制器进行 ajax 调用，最后在该控制器中调用一些 api，如果 [=31] 则 return 信息=]调用成功与否。

Answer 1

我假设您正尝试在给定

的情况下以 table 显示信息

<td>
  <button data-bind="click: sendDataToApi">Test button</button>
</td>

我还假设在 table 或 table 体层有一个 ko:foreach。如果是这种情况，则 sendDataToApi 与父 vm 对象相关联，而不是当前用于创建 table 行的对象。

如果是这种情况，那么您需要使用 $parent.sendDataToApi 或 $root.sendDataToApi

<td>
  <button data-bind="click: $parent.sendDataToApi">Test button</button>
</td>

或

<td>
  <button data-bind="click: $root.sendDataToApi">Test button</button>
</td>

编辑

因为knockout传递的是当前对象，所以接收函数只需要加一个参数即可。

var serverData = [{
    id: 1,
    name: 'Test 1'
  },
  {
    id: 2,
    name: 'Test 2'
  },
  {
    id: 3,
    name: 'Test 3'
  },
];

function ViewModel() {
  var self = this;
  self.data = ko.observableArray([]);

  self.checkServer = function checkServer(row) {
    console.log(ko.toJS(row));
  }


  self.fillTable = function fillTable() {
    var mappedData = serverData.map(r => new RowViewModel(r));
    self.data(mappedData);
  }


  
}

function RowViewModel(data) {
  var self = this;
  self.id = ko.observable(data.id || 0);
  self.name = ko.observable(data.name || '');


}
ko.applyBindings(new 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>
<button class="button" data-bind="click: fillTable">Fill Table</button>
<table class="table">

  <tbody data-bind="foreach: data">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: name"></td>
      <td>
        <button data-bind="click: $parent.checkServer">Check Server</button>
      </td>
    </tr>
  </tbody>
</table>

ASP.NET MVC Knockout 按钮点击调用 POST API

ASP.NET MVC Knockout button click call POST API

javascript

c#

asp.net-mvc

model-view-controller

knockout-mvc