Question

Perhaps there is an easy solution for my problem but I simply cannot seem to find it. I have read lots of tutorials about Knockout so I get the basics but I ask this question because my entity-structure is a bit more complicated than a person with a name and a list of friends which may or may not be on Twitter (Video on Channel9: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET). Here’s my situation:

I have a class PersonnelClass with this basic structure:

[Serializable]
//The interface is for the implementation of 'Name' and 'Description'
public class PersonnelClass : IPersonnelClassOrPerson 
{
    public PersonnelClass() : this(Guid.NewGuid(), "", "") { }

    public PersonnelClass(Guid id, String name, String description = null)
    {
        if (id == Guid.Empty) { throw new ArgumentNullException("id"); }
        Id = id;
        Name = name;
        Description = description;
        Properties = new PropertyCollection();
    }

    public Guid Id { get; private set; }
    public String Name { get; set; }
    public String Description { get; set; }
    public PropertyCollection Properties { get; private set; }
}

The PropertyCollection class and associated AbstractProperty class look like this:

[Serializable]
public class PropertyCollection: List<AbstractProperty> { }

[Serializable]
public abstract class AbstractProperty: IEntity, IProperty
{
    public AbstractProperty(String name, String description = null) : this(Guid.NewGuid(), name, description) { }

    public AbstractProperty(Guid id, String name, String description = null)
    {
        if (id == Guid.Empty) { throw new ArgumentNullException("id"); }
        if (String.IsNullOrEmpty(name)) { throw new ArgumentNullException("name"); }
        Id = id;
        Name = name;
        Description = description;
    }

    public Guid Id { get; private set; }
    public String Name { get; private set; }
    public String Description { get; private set; }
}

In my Controller, I create an instance of a PersonnelClassViewModel that has this structure:

public class PersonnelClassViewModel
{
    public PersonnelClass PersonnelClass { get; set; }
    public List<AbstractProperty> Properties { get; set; }
}

I fill this viewmodel with a new PersonnelClass and two test-properties to pass to my View like this:

var properties = new List<AbstractProperty>
{
    new TextProperty("prop1", "descr1"),
    new TextProperty("prop2", "descr2")
    //TextProperty is derived from AbstractProperty
};
var vm = new PersonnelClassViewModel { Properties = properties };
return View(vm);

I get everything in my View as I wanted. From the View I want to create a new PersonnelClass with a set of selected properties. I have the fields for Name and Description and to add the properties I have a ListBox with the properties that already exist (for demo-purpose they came from the controller now). Through a bit of Knockout JavaScript code I can select items from this list and populate an HTML select-control () with the selected properties to add to the PersonnelClass. This all works fine, until I want to build up an object to pass back to the Controller and create the PersonnelClass.

My question is: what Knockout JS code is needed to build up this object and pass it to the Controller by submitting the form and in my Controller how should I receive this object, meaning: what type of object should this be (PersonnelClass, PersonnelClassViewModel, …) ?

If any more info/code is needed, please do ask. Thanks in advance!

Update after answer of ‘B Z’:

I followed a few more of Steven Sanderson’s tutorials about this to be sure I understand this, especially the one you provided in your answer. Now I have following code in my View to start with:

var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));

var viewModel = {
    personnelClassViewModel : ko.mapping.fromJS(initialData),
    properties : personnelClassViewModel.Properties,
    selectedProperties : ko.observableArray([]),
    addedProperties : ko.observableArray([])
};

ko.applyBindings(viewModel);

The variable ‘initialData’ contains the values I expect it to have but then I get the following error:

Microsoft JScript runtime error: ‘personnelClassViewModel’ is undefined

I have no clue anymore. Can anyone help me fix this?

Answer 1

Steven Sanderson has an example of how to to work with variable length lists and knockoutjs

http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/

Having said that, I think your problem isn’t so much on the knockout side and more on the how to databind the data correctly on the server side. In the link above, Steven uses a FromJson attribute to model bind which you may find useful…

HTH