Question

在我的应用程序中，我想将Razor用于与Reading相关的所有功能，并利用knockoutJS和AJAX进行CUD操作。

在我的个人资料视图中，我完成了以下操作：

<div>
    <h4>About Me</h4>
    <!-- ko if: !isEditingAboutMe() -->
    <p>@Model.User.AboutMe</p>
    @if (Model.CurrentUserCanEdit)
    {
        <a data-bind="click: editAboutMe">edit</a>
    }
    <!-- /ko -->
    <!-- ko if: isEditingAboutMe() -->
    @Html.TextBoxFor(model => model.User.AboutMe, new { data_bind = "value: aboutMe" })
    <a data-bind="click: saveAboutMe">save</a>
    <a data-bind="click: cancelAboutMe">cancel</a>
    <!-- /ko -->
</div>

这样搜索引擎至少可以抓取内容，启用了javascript的用户可以执行CUD操作。

我上面的问题是 - 使用AJAX，如果我点击“保存”，如何将新值绑定到Razor模型（第四行）？

相应的JS：

function ProfileVm() {
    var self = this;

    self.aboutMe = ko.observable();

    self.saveAboutMe = function() {
        // AJAX call, after success close the field
        self.isEditingAboutMe(false);
    };

    self.cancelAboutMe = function() {
        // just for testing, would revert the value in practice
        self.isEditingAboutMe(false);
    };

    self.isEditingAboutMe = ko.observable(false);
    self.editAboutMe = function() {
        self.isEditingAboutMe(true);
    };

}

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

此外，欢迎提供有关此方法“正确性”的反馈。

Answer 1

目前还不清楚为什么你只将Knockout用于写操作（CUD）而不是用于读取。这样做可以自动解决您的问题：

而不是：

<p>@Model.User.AboutMe</p>

您应该遵循Knockout方式，因此您将拥有双向模型绑定：

<p data-bind="text: aboutMe()"></p>

现在，一旦aboutMe字段更新，Knockout将确保<p>元素中的数据也会更新。

修改

由于您希望搜索引擎可以看到用户详细信息，因此您可以尝试：

<p data-bind="text: aboutMe()">@Model.User.AboutMe</p>

这样，简单检索服务器响应（没有脚本调用）确实会包含所需的文本，但是一旦Knockout（几乎立即）启动，你仍然可以使用新数据进行完整的模型绑定。

混合MVC Razor和Knockout

1 个答案: