0

Steve Sanderson による Knockout.js の簡単なビデオ チュートリアルに従っています: http://channel9.msdn.com/Events/MIX/MIX11/FRM08

最後に、AJAX 呼び出しを実行して、ノックアウトを使用してサーバー上のデータを処理する方法を示します。彼がしていることをすべて繰り返しますが、何らかの理由で私の JSON オブジェクトは POCO クラスに正しくバインドされません。これは私がビューから送信するオブジェクトです:

{"firstName":"Bartosz","lastName":"Malinowski","friends":[{"name":"Zofia"},{"name":"Zenon"}],"fullName":"Bartosz Malinowski"}

次に、このコードを使用してコントローラーで読み取ります。

public JsonResult Save(Person person)
    {
        var message = string.Format("Saved {0} {1}", person.firstName, person.lastName);

        return Json(new { message });
    }

    public class Person 
    {
        public string firstName { get; set; }
        public string lastName { get; set; }
        public string fullName { get; set; }
        public ICollection<Friend> friends { get; set; }
    }

    public class Friend
    {
        public string Name { get; set; }
    }
}

クライアント側の私のコードは次のようになります。

'@{
    ViewBag.Title = "Home Page";
}

<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>

<p>First name: <input data-bind="value: firstName"/></p>
<p>Last name: <input data-bind="value: lastName"/></p>

<p>Full name: <span data-bind="text: fullName"></span></p>

<h2>Friends (<span data-bind="text: friends().length"></span>)</h2>
<ul data-bind="template: { name: 'friendsTemplate', foreach: friends }"></ul>

<script id="friendsTemplate" type="text/html">
    <li>
    <input data-bind="value: name"/>
    <button data-bind="click: remove">Remove</button></li>

</script>

<button data-bind="click: addFriend, enable: friends().length < 5">Add Friend</button>
<button data-bind="click: save">Save</button>

<script type="text/javascript">
    function friend(name) {
        return {
            name: ko.observable(name),
            remove: function () {
                viewModel.friends.remove(this);
            }
        };
    }

    var viewModel = {
        firstName: ko.observable("Bartosz"),
        lastName: ko.observable("Malinowski"),
        friends: ko.observableArray([new friend("Zofia"), new friend("Zenon")]),
        addFriend: function () {
            this.friends.push(new friend("Jan"));
        },
        save: function () {
            $.ajax({
                url: "@Url.Action("Save")",
                type: "post",
                data: ko.toJSON(this),
                contenttype: "application/json",
                success: function (result) { alert(result.message) }
            });
        }
    };
    viewModel.fullName = ko.dependentObservable(function () {
        return this.firstName() + " " + this.lastName();
    }, viewModel);

    ko.applyBindings(viewModel);
</script>

デバッグ モードで実行し、Save メソッド パラメーターで person を確認すると、各 Person プロパティの値が null になっています。だから、それは私にバインドされていませんか??

4

1 に答える 1

1

私はまったく同じことをここに私のコードです

 $.ajax({
                url: url,
                type: "POST",
                dataType: "json",
                data: ko.toJSON(viewModel),
                contentType: 'application/json; charset=utf-8',
                success: function (returnedData)
                {
                    window.location.replace(urlRedirect);
                }
            });

いくつかの違いがあります: dataType と charset、私はそれが dataType だと思います。

私のアクションには [HttpPost] もあります。

于 2012-11-15T13:44:01.660 に答える