Binding Model data to Knockout ViewModel?

1
votes

Is it possible to bind data from your model to a knockout viewmodel. Heres an example:

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

Then in the View I would traditionally do something like so:

@model myApp.Models.Product

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

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

But with Knockout I would create a EditProductViewModel from where I would do something like:

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

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

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

And instead of using the Html Helpers I would do something like so in my view:

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

So how can I populate this with the data returned from my controller?

3
asp.net-mvc-3knockout.js

3 Answers

1
votes

I don't have a any experience with knockout but it would seem to me that you would no longer want to return a view from your controller how about

return JSON(product)

that way you would get a json element of the product on your javascript success function you would need to collected the json element

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

and then from here you would call the map bindings.

1
votes

When using knockout you have two ways to do this. 1. Load your textboxes, etc in one view. Upon loading that view for the first time convert your model to JSON upon in initial load to use by knockout.

ALL additional calls to/from go via JSON.

You can use in your View: @Html.Raw(Json.Encode(yourModel))

  1. Load your textboxes in your view (ie they are part of your vieW) Trigger off on document.ready() your ajax calls to get your data from your controller, convert to JSON ie return Json(yourModel, JsonRequestBehavior.AllowGet) and bind those results roughly as you are already doing above

Note - the downside with this approach is with validation. If you have all client side validation, then this is OK as the attributes for data-* will have been written out by MVC to your textboxes, etc. If you have any server side validation, there is no 'smooth' built in integration here with knockout.

There's a decent article here: http://www.codeproject.com/Articles/305308/MVC-Techniques-with-JQuery-JSON-Knockout-and-Cshar but still lacks on server side validation mention.

0
votes

You could serialize data to your page and then initialize knockout viewmodel with values from server.

ItemName = ko.observable(serializedModel.ItemName);