0

以下是我使用 Knockout.js 和 MVC WebApi 的单页应用程序。我从 WebApi 服务获取数据没有问题。但是，我既不能对服务器进行 PUT 也不能 POST。当我单击绑定到 self.update() 的更新按钮时，它总是显示“baseApiUri/api/user/undefined”。我以为 self.user(new userViewModel(user)) 行会设置当前用户记录的范围，但似乎并非如此。我想使用 userViewModel 而不是硬编码获取和设置用户可观察对象中的每个属性。感谢您的帮助。

@model App4MVC4.Controllers.UserViewModel

@section scripts{
    <script type="text/javascript">
        function viewModel() {
            var baseApiUri = "@Model.apiBaseUrl";

            var self = this;

            /********** nested view model **********/
            function userViewModel(user) {
                var self = this;
                self.user_ID = user.user_ID;
                self.firstName = user.firstName;
                self.lastName = user.lastName;
                self.long_name = ko.computed(function(){return self.firstName + " " + self.lastName});
                self.Login = user.Login;
                self.dateAdded = user.dateAdded;
                self.email = user.email;
                self.alertOptIn = user.alertOptIn ? "Yes" : "No";
                self.active = user.active ? "Yes" : "No";
            }

            /********** properties **********/
            self.newUser = ko.observable();
            self.userBeforeEdit = ko.observable();
            self.users = ko.observableArray();
            self.user = ko.observable();
            self.operationStatus = ko.observable();


            /********** methods **********/

            // create new user (HttpPost)
            self.create = function (formElement) {
                self.operationStatus("Creating ...");
                $(formElement).validate();
                if ($(formElement).valid()) {
                    $.post(baseApiUri + "/api/user", $(formElement).serialize(), null, "json")
                    .done(function (o) {
                        self.users.push(o);
                    })
                    .fail(function (xhr, textStatus, err) {
                        self.operationStatus(err);
                    });
                }
            }

            self.cancelAdd = function () {
                self.newUser(new userViewModel());
            }
        }

        // instantiate the above ViewModel and apply Knockout binding
        ko.applyBindings(new viewModel());

        // make jQuery tabs
        $("#tabs").tabs();
    </script>
}


<div id="tabs">
    <ul>
        <li><a href="#detailTab" id="detailTabHandle">User Detail</a></li>
        <li><a href="#addNewTab" id="addNewTabHandle ">New User</a></li>
    </ul>

    <div id="addNewTab">
    <form>
    <div>
        <label for="firstNameNew">First Name</label>
        <input type="text" title="First Name" data-bind="value:newUser.firstName"/>
    </div>

    <div>
        <label for="lastNameNew">Last Name</label>
        <input type="text" title="Last Name" data-bind="value: newUser.lastName"/>
    </div>

    <div>
        <label for="fullNameNew">Full Name</label>
        <input type="text" title="Full Name" data-bind="value: newUser.long_Name"/>
    </div>

    <div>
        <label for="loginNew">Login</label>
        <input type="text" title="Login" data-bind="value: newUser.Login"/>
    </div>

    <div>
        <label for="emailNew">Email</label>
        <input type="text" title="Email" data-bind="value: newUser.email"/>
    </div>

    <div>
        <label for="emailAlertNew">Email Alert</label>
        <span><input data-bind="checked: newUser.alertOptIn" type="radio" title="Send Email Alert" value="Yes" name="alertOptIn"/>Yes</span>
        <span><input data-bind="checked: newUser.alertOptIn" type="radio" title="No Email Alert" value="No" name="alertOptIn"/>No</span>
    </div>

    <div>
        <input type="button" value="Save" data-bind="click: create" />
        <input type="button" value="Cancel" data-bind="click: cancelAdd" />
        <p data-bind="text: operationStatus" class="status"></p>
    </div>
    </form>
    </div>
</div>

4

1 回答 1

1

您在此处检索用户值时错过了括号：

url: baseApiUri + "/api/user/" + self.user().user_ID
于 2013-09-05T01:55:52.763 回答