MVC with MVVM using Knockout.js


Previously, on Shawson.co.uk..

see “Creating an Order/ Order Details style view using ASP.net MVC2 & Entity Framework 4″

So following on from my last MVC post I posed my question to Scott Hanselman himself via email, and he took the time to write me a very helpful response;

Interesting solution. Good job getting it working.
Take a look at maybe using some cleaner JS on the client…check out my last podcast on Knockout and check out this demo: http://knockoutjs.com/examples/contactsEditor.html
The pod cast he’s refering to is here.  The contacts editor example he pointed me to is exactly what I’m trying to do here.  This implementation would totally resolve my issue as you are no longer binding directly to the entity framework objects- I could instead create simple cut down DTO’s for the sale and it’s associated sale lines and serialise it to JSON then use Knockout (an open source javascript library which deals with clientside binding of UI elements to a data structure, like your ViewModel represented as JSON) to deal with all the client-side binding and editing before posting the data back as JSON.  I shall post again once I have something up and working.
  1. #1 by gareth on December 10, 2010 - 14:57

    Interesting stuff, and welldone (As Scott said)!

    Cannot wait to tackle MVC/MVVC myself!

  2. #2 by Chevito on December 13, 2010 - 22:50

    The link for the podcast is not working, I would like to take a look at it. Thank you very much, nice blog!

  3. #3 by shawson on December 15, 2010 - 15:10

    Sorry- my bad! Link updated!

  4. #4 by Brendan Knowles on January 13, 2011 - 07:23

    Hey man, cool blog.. Keen to know how you got on with this – I’m looking to do the same thing myself, and wondering how hard it will be to manage the server side, ie when you receive the resulting object filled with data, how do you use that to decide what records need to be added/updated/deleted in Entity Framework – especially for an existing record. Hope that makes sense. Cheers, Brendan

  5. #5 by shawson on January 16, 2011 - 23:41

    Hi Brendan,

    I’m actually just finishing this off now. It’s gone well on the whole- I think it was definitely the way to go, but took some messing about to get going. I will be blogging it when i have it polished up a bit.

    The trickiest bits were server side- You know which record to edit as thats still passed via the query string on post back, so thats no different to a normal MVC post back- the main difference for me was mapping the posted data back to real object instances and validation, both things which I normally get for free using data annotations and strongly typed views- but even this wasn’t too hard.

    Validation wise, I used jquery validate to validate client side, then do TryValidateModel on the server side just as a safe guard, but theoretically it should never come into play.

    For model binding, I had to change my post back methods to accept a FormCollection, then I manually Deserialise the data sent from knockout back to the DTO’s using the JavaScriptSerializer. Let me know if you want some more info on this, as I’d be happy to help.

    Shaw.

  6. #6 by wordsearch on October 1, 2012 - 16:09

    You should try MVC 4 it’s even easier to work with knockoutJS, I just love it. it took me a few weekends to create a wordsearch game

(will not be published)