将模型数据绑定到Knockout ViewModel?

时间:2012-05-24 19:43:18

标签: asp.net-mvc-3 knockout.js

是否可以将模型中的数据绑定到挖空视图模型。下面是一个例子:

public ActionResult Edit(int id)
{
    Product product = _db.Products.FirstOrDefault(x=>x.ItemId == id);
    return View(product);
}

然后在视图中我传统上会这样做:

@model myApp.Models.Product

@using(Html.BeginForm())
{
    @Html.EditorFor(x=>x.ItemName)
    @Html.ValidationMessageFor(x=>x.ItemName)

    <input type="submit" value="Update" />
}

但是使用Knockout,我会创建一个EditProductViewModel,我可以在这里做:

var EditProductViewModel = {
    ItemName = ko.observable('')
};

EditProductViewModel.Edit = function() {
    $.ajax({
        url: "Home/Edit",
        data: ko.ToJson(this),
        success: function() {
            // do something
        }
    });  
};

$(function() {
    ko.applyBindings(EditProductViewModel);
});

而不是使用Html助手,我会在我看来做这样的事情:

<form data-bind="submit: Edit">
    <input type="text" data-bind="value: ItemName" />
    <input type="submit" value="Update" />
</form>

那么如何使用我的控制器返回的数据来填充它?

3 个答案:

答案 0 :(得分:1)

我对淘汰赛没有任何经验,但在我看来你不再希望从你的控制器返回一个视图怎么样

return JSON(product)

这样你就可以在javascript成功函数中获得产品的json元素,你需要收集json元素

$.ajax({
    url: "Home/Edit",
    data: ko.ToJson(this),
    success: function(data) {
        // map to knockout view model
    }
});

然后从这里你可以调用地图绑定。

答案 1 :(得分:1)

使用淘汰赛时,你有两种方法可以做到这一点。 1.在一个视图中加载文本框等。在第一次加载该视图时,在初始加载时将模型转换为JSON以供淘汰使用。

所有其他来电/来自JSON的电话。

您可以在自己的视图中使用: @Html.Raw(Json.Encode(yourModel))

  1. 在视图中加载文本框(即它们是您视图的一部分) 在document.ready()上触发你的ajax调用以从控制器获取数据,转换为JSON即return Json(yourModel, JsonRequestBehavior.AllowGet)并将这些结果粗略地绑定在上面
  2. 注意 - 这种方法的缺点是验证。如果您有所有客户端验证,那么这是正常的,因为data- *的属性将由MVC写入您的文本框等。如果您有任何服务器端验证,则此处没有“平滑”内置集成淘汰赛。

    这里有一篇不错的文章: http://www.codeproject.com/Articles/305308/MVC-Techniques-with-JQuery-JSON-Knockout-and-Cshar 但仍缺乏服务器端验证提及。

答案 2 :(得分:0)

您可以将数据序列化到您的页面,然后使用来自服务器的值初始化knockout viewmodel。

ItemName = ko.observable(serializedModel.ItemName);