代码之家 › 专栏 › 技术社区 › Stefan0309

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

knockout-mvc model-view-controller asp.net-mvc c# javascript

0

Stefan0309 · 技术社区 · 3 年前

我的前端有一个html格式的表(列表),每行都有一个按钮:

...
<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,如果api调用成功或失败,则返回信息。

0 回复 | 直到 3 年前

1

Nathan Fisher 3 年前

我假设您正试图在给定的表中显示信息

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

我还将假设存在 ko:foreach 在桌子或表体级别。如果是这样的话,那么sendDataToApi与父vm对象相关联,而不是与当前用于创建表行的对象相关联。

如果是这样的话,那么你需要使用 $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>

编辑

您只需要向接收函数添加一个参数,因为淘汰传递了当前对象。

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>