首页 > 解决方案 > Knockoutjs 两次调用 REST API Post

问题描述

我正在使用用于 MVVM 的 knockoutjs 开发 ASP.NET MVC 应用程序。我在尝试向 ASP.NET Core API 发布帖子时,来自淘汰赛的请求似乎发布了 2 次。下面是knockoutjs viewModel

var viewModel = function () {
    var self = this;
    self.Surname = ko.observable("").extend({ required: { message: 'Please supply your surname' } });
    self.Firstname = ko.observable("").extend({ required: { message: 'Please supply your firstname' } });
    self.Middlename = ko.observable("");
    self.Title = ko.observable().extend({ required: true });
     
    self.save = function () {
       
            $.ajax({
                contentType: 'application/json',
                url: 'https://localhost:44337/api/Student/SaveStudent',
                type: 'post',
                data: ko.toJSON(self),
                dataType: "json",
                processData:false;
                success: function (data) {
                    alert(data);
                    
                },
                error: function (err) {
                    alert(err.status + " : " + err.statusText);
                    self.Kill(false);
                }
                
            });
        }

    }
    
}
ko.applyBindings(new viewModel());

[HttpPost]
        public IActionResult SaveStudent(StudentDTO student)
        {
            var st = _studentService.SaveStudent(student);
             
            return Ok(st);
        }

保存时,API 被命中两次,第一次命中返回状态 204,第二次显示:“请求失败”。但是如果我使用邮递员调用相同的 API,它会成功执行而没有任何错误

标签: asp.net-mvcapirestknockout.js

解决方案


我的猜测是这部分导致您的问题:数据:ko.toJSON(self)。淘汰 vm 架构中的常用模式是提取要发送到单独模型内的服务器的所有数据,并在整个 pageVm 函数中使用该模型的实例。

// separate model
function Person(){
    var self = this;
    self.Surname = ko.observable("").extend({ required: { message: 'Please supply your surname' } });
    self.Firstname = ko.observable("").extend({ required: { message: 'Please supply your firstname' } });
    self.Middlename = ko.observable("");
    self.Title = ko.observable().extend({ required: true });
}

// inside of pageVM create an instance
var data = new Person()

//inside of your ajax call
data: ko.toJSON(data),

推荐阅读