2015-02-11 36 views
0

我發現很難通過Ajax發送數據到控制器,因爲要發送到控制器的對象由於我的代碼的結構而無法在ajax中使用。我正在使用淘汰賽數據綁定更新按鈕的點擊事件。使用AJAX在使用挖空綁定時發佈數據

這是我的代碼

$(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> 

可能有人指導我如何,我可以將數據發送到控制器與此代碼structure.I不能把updateProviderDetails構造之外,否則,我不能綁定它。

+0

嗯,我想你可以從淘汰賽模型分開你的Ajax功能,並分別調用它,然後發送敲除對象作爲POST中的數據。 – Jordan 2015-02-11 19:11:22

+0

我無法將數據綁定到該情況下的點擊事件。我正在使用knockout綁定進行點擊事件。因此,該功能必須位於淘汰模式中。 – 2015-02-11 19:30:52

+0

函數中的'self'變量不可訪問嗎? – lagerone 2015-02-11 20:57:55

回答

1

使用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; 
      } 
     } 
    }); 
}; 

這也是在Knockout Tutorial

+0

感謝您的答覆。是的,我可以發送到控制器的JSON數據。但控制器端的參數爲null。控制器端的模型沒有視圖模型所有的字段。可以成爲一個問題? – 2015-02-12 03:26:06

+0

請更新您的文章以包含功能標題 – 2015-02-12 04:45:17