使用AJAX发布数据，同时使用淘汰绑定

Posting data using AJAX while using knockout bindings

本文关键字：绑定 淘汰 AJAX 布数据 数据 使用      更新时间：2023-09-28

我发现很难通过Ajax post将数据发送到控制器，因为由于我的代码结构，要发送到控制器的对象无法在Ajax post中使用。我正在使用敲除来绑定更新按钮的点击事件。

这是我的代码

 $(document).ready(function () {  
 var provider = function () {
var self = this;
self.providerID = ko.observable(providerEditInfo.ProviderID);
self.firstName = ko.observable(providerEditInfo.FirstName);
self.lastName = ko.observable(providerEditInfo.LastName);
self.contactEmail = ko.observable(providerEditInfo.ContactEmail);
self.NPI = ko.observable(providerEditInfo.NPI);
self.updateProviderDetails = function () {
    $.ajax({
        url: "/Provider/UpdateProviderDetails/",
        type: "POST",
        data: { providerForUpdate }, -- Cant send this
        contentType: "application/json; charset=utf-8",
        async: false,
        success: function (result) {
            if (result.url) {
                location.href = result.url;
            }
        }
    });
};
self.cancelEdits = function () {
    if (confirm("Are you sure you want to Cancel?")) {
        window.location.href = "/Provider/ShowTheListOfProviders";
      }
   };
}; //End of Constructor.
var providerForUpdate = new provider();
ko.applyBindings(providerForUpdate);
 });
On the clck of Update Button,I am calling the 'updateProviderDetails' method.
HTML
  @model Greenway.Demo.DataAccess.Entity.Provider
<body>
<div class="container">
<h1 class="col-sm-offset-2">Edit Provider Details:</h1>
<br />
<form class="form-horizontal" role="form" id="editProviderDetailsForm">
    <div class="form-group">
        <label class="col-sm-2 control-label labelfont">First Name:</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="firstName" name="firstName" data-bind="value:firstName , event: { keypress: allowOnlyAlphabets }">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label labelfont">Last Name:</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="Enter the Last Name" id="lastName" name="lastName" data-bind="value:lastName ,event: { keypress: allowOnlyAlphabets }">
        </div>
    </div>
   <div class="form-group text-center">
        <button type="Submit" data-bind="click: updateProviderDetails" class="btn btn-primary">Update</button>
        <button type="button" data-bind="click: cancelEdits" class="btn btn-primary">Cancel</button>
    </div>
</form>
</div>
  </body>
  <script type="text/javascript">
       var providerEditInfo = @Html.Raw(Json.Encode(Model));
  </script>
  <script type="text/javascript" src="../../App_Scripts/Shared/Functions.js"></script>

有人能指导我如何用这种代码结构将数据发送到控制器吗。我不能把updateProviderDetails放在构造函数之外，否则我就无法绑定它。

使用ko.toJSON将视图模型序列化为json:

self.updateProviderDetails = function () {
    $.ajax({
        url: "/Provider/UpdateProviderDetails/",
        type: "POST",
        data: ko.toJSON(self),
        contentType: "application/json; charset=utf-8",
        async: false,
        success: function (result) {
            if (result.url) {
                location.href = result.url;
            }
        }
    });
};

这也在淘汰教程

中
相关文章：