Question

我发现很难通过Ajax post将数据发送到控制器，因为由于我的代码结构，要发送到控制器的对象不能在ajax帖子中使用。我使用knockout来进行数据绑定单击“更新”按钮的事件。

这是我的代码

$(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);
 });

在更新按钮的clck上，我正在调用＆quot; updateProviderDetails＆＃39;方法

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放在构造函数之外，否则我无法绑定它。

Answer 1

我从你的代码得到的是，providerEditInfo似乎是js对象。创建可观察对象而不是创建单独的属性。

ko.mapping.fromJS(providerEditInfo, null, self.observableProvider);

使用self.observableProvider进行绑定，因为这将使providerEditInfo的所有属性变得可观察，并在完成后将此observable发送给控制器

data: { ko.toJS(self.observableProvider)}

通过Ajax Post将数据发送到控制器

1 个答案: