2014-04-03 26 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“)”确实有效。感谢大家的帮助。