2014-04-03 22 views
-1

我已經通過大量的例子,並嘗試了很多不同的方式,我一直無法讓我的淘汰賽發佈到我的控制器使用MVC 4.任何想法是什麼問題是?我是MVC和Knockout的新手,所以解釋會很有幫助。淘汰賽沒有發佈到控制器

**knockout.js** 
<script src="~/Scripts/jquery-1.8.2.min.js"></script> 
<script src="~/Scripts/knockout-2.2.0.js"></script> 
<!-- <script src="~/MyJS/AddTeamMember.js"></script> --> 
<script src="~/Scripts/knockout.mapping-latest.js"></script> 
<script type="text/javascript"> 

    var initialData = [ 
    { 
     name: "", email: "", phone: "", dept: "" 
    } 
    ]; 
    var ContactsModel = function (contacts) { 
     var self = this; 
     self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) { 
      return { name: contact.name, email: contact.email, phone: contact.phone, dept: contact.dept }; 
     })); 


     self.addContact = function() { 
      self.contacts.push({ 
       name: "", 
       email: "", 
       phone: "", 
       dept: "" 
      }); 
     }; 

     self.removeContact = function (contact) { 
      self.contacts.remove(contact); 
     }; 

     self.save = function() { 
      self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2)); 
      var jsonString = ko.mapping.toJSON(self.contacts); 
      $.ajax({ 
       type: 'POST', 
       url: '@Url.Action("Register", "Register")', 
       data: jsonString,    
       contentType: 'application/json; charset=utf-8', 
       dataType: 'json' 
     }); 
    }; 



    self.lastSavedJson = ko.observable("") 
}; 
</script> 

查看代碼:

<div class='memInfoForm'> 

       <h2>Team Members</h2> 
       <div id='contactsList'> 
        <table class='contactsEditor'>     
         <tr> 
          <th>Name</th> 
          <th>Email</th> 
          <th>Phone</th> 
          <th>Dept</th> 
         </tr> 
         <tbody data-bind="foreach: contacts"> 
          <tr> 
           <td> 
            <input data-bind='value: name' /> 
            <div><a href='#' data-bind='click: $root.removeContact'>Delete</a></div> 
           </td> 
           <td><input data-bind='value: email' /></td> 
           <td><input data-bind='value: phone' /></td> 
           <td><input data-bind='value: dept' /></td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 

       <p> 
        <button data-bind='click: addContact'>Add a Member</button> 
        <button data-bind='click: save, enable: contacts().length > 0' id="saveMembers">Save Member List</button> 
       </p> 

控制器代碼

[HttpPost]  
     public ActionResult Register(ContactsModel model) 
     { 

      ... 

      return View(); 
     }    
+0

注 - 我沒有在這個例子的控制器中進行處理。我的問題是我甚至無法將表格發送給我的控制器。 – Hope

+0

你有什麼嘗試?當您點擊保存按鈕時,瀏覽器控制檯中是否有錯誤?是否調用save函數?是否有AJAX請求出去?發佈包括Excel操作代碼(WTF?)在內的整個應用程序代碼並希望社區能夠指出您的問題並不是一個好主意。將其縮小到特定的問題,然後我們可以提供幫助。 – Avish

+0

是的,保存的功能正在被調用。它首先使用json字符串填充textarea,然後工作,但是帖子沒有發生。我已經嘗試了硬編碼控制器和使用剃刀幫手(我從一個例子中拉出),但從Avish注意到,該幫手將無法正常工作我已經返回的網址被硬編碼。我沒有在瀏覽器中看到錯誤,因爲沒有任何反應。 – Hope

回答

0

我看來,像你試圖用剃刀助手(@Url.Action)一世在一個靜態的JS文件中,這是行不通的。剃刀代碼只能在剃刀視圖中使用(.cshtml)。

在一個靜態JS文件中,您需要對URL進行硬編碼,或者從其他位置獲取它。如果你想通過@Url.Action使用路由表,一種選擇是將它渲染成視圖中的數據屬性,並在Javascript文件中從那裏讀取它。

首先用類似'/register/register'的硬編碼路徑代替@Url.Action零件,然後從那裏開始工作。

+0

謝謝你的評論。我之前嘗試過硬編碼地址,但沒有發佈。我明白爲什麼剃刀幫手不起作用。 – Hope

+1

一旦我能夠讓帖子工作,我就可以在js腳本中使用剃刀助手。只是fyi。 – Hope

0

我能夠弄清楚什麼是錯誤的,並希望記下它,以防其他人被愚弄。我有

<body onload="ko.applyBindings(new ContactsModel(initialData));"> 

來應用綁定。我把它移動到

$(document).ready(function() 
    { 
     ko.applyBindings(new ContactsModel(initialData)); 
    }); 

然後它會發布到我的控制器。此外,「@ Url.Action(」Register「,」Register「)」確實有效。感謝大家的幫助。