Question

我已经查看了大量示例并尝试了许多不同的方法，而且我无法让我的Knockout使用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();
        }

Answer 1

对我而言，似乎是在尝试在静态JS文件中使用Razor帮助程序（@Url.Action），但该文件无法正常工作。 Razor代码仅适用于Razor视图（.cshtml）。

在静态JS文件中，您需要对URL进行硬编码，或者从其他位置获取URL。如果要通过@Url.Action使用路由表，可以选择将其渲染到视图中的数据属性中，然后在Javascript文件中从中读取它。

首先将@Url.Action部分替换为类似'/register/register'的硬编码路径，然后从那里开始工作。

Answer 2

我能够弄清楚出了什么问题，并且想要注意它，以防其他人蠢蠢欲动。

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

应用绑定。我把它移到了

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

然后会发布到我的控制器。此外，＆＃34; @ Url.Action（＆＃34;注册＆＃34;，＆＃34;注册＆＃34;）＆＃34;做得好。感谢大家的帮助。

淘汰赛未发布到控制器

2 个答案: