Question

I’m developing MVC application and I have following classes in my model:

public class Member 
{
    [Required]
    public string Name {get;set;}
    public virtual ICollection AgeBrackets{ get;set;}
}

public class AgeBracket
{
    [Required]
    public int MinAge {get;set;}

    [Required]
    public int MaxAge {get;set;}
    
    public virtual Member Member {get;set;}
}

In Create/Edit view for Member I would like to have kind of parent-child view: common edit-fields (Name) for Member and partial view for collection of AgeBrackets associated with the Member. I want to be able to add/edit/delete AgeBrackets using jQueryUI Dialog form and update list of agebrackets on client.

The question is – where should I store collection of brackets?

I don’t want to post any changes to collection of brackets to the server until whole Member form posted.

I was trying to accomplish it using knockout.js. It seems like most elegant way of doing it. Is it possible to use knockout.js only for collection of AgeBrackets and keep Member binding to MVC model binding and during Member post somehow combine Member-fields and knockout AgeBracket collection viewmodel?

Answer 1

When working with KO i find it much easier to work with pure json both as input and output from your action methods.

It makes things lot easier if you client-side model is as close to your server-side as possible. How you populate this model is up to you (manually code, map using the mapping plugin etc). Assuming your client side model for a Member looks like

var memberViewModel = function() {
    this.name = ko.observable("Alex");
    this.ageBrackets = ko.observableArray([
        { minAge: 15, maxAge: 20 },
        { minAge: 18, maxAge: 21 },
    ]);
};

Then your action method can be

public JsonResult Create(Member member) {
    ....
}

When you hit the create button your a function fire that converts your memberViewModel into JSON which will be posted back and mapped automatically to your Member model.

To convert to JSON you can use ko.toJSON(memberViewModel) or ko.mapping.toJSON(memberViewModel) if you used the mapping plugin initially.

Hope this helps.