ASP.Net MVC ViewModel contains List<anotherViewModel> dynamically add list entry for anotherViewModel

Question

i cant find and solution how to dynamically add a ViewModel entry through another ViewModel thats loaded in the Edit View.

Lets say i have a ViewModel thats contains a List of anotherViewModel.

Database Model:

public class ViewModel
{
    public ViewModel()
    {
        anotherViewModel= new List<anotherViewModel>();
    }

public string idViewModel{ get; set; }
public string description{ get; set; }
public List<anotherViewModel> aViewModel { get; set; }
}

The User loads the Edit View containing the ViewModel, that currently has 2 entrys of type anotherViewModel.

the user should have the possibility to add another entry of type anotherViewModel to the ViewModel and even change the properties from the anotherViewModel entrys.

the another ViewModel is in an partial view. i tryd to reload it with ajax, if i do so, the changes made in the current model, are lost. because i cant hand over the model the controller.

i know there must be some solution with jquery, but i cant find one.

thanks for your help.

Answer 1

The traditional way (in pseudo code): in your view you'd create something like:

<form>
Your html code for ViewModel properties.
create list of partials:
@foreach(anotherModel in Model.aViewModel)
{
   @Html.Partial("_yourPartialView", anotherViewModel)
}
Code for adding a new anotherView element.
ie: @Html.Partial("_createNewElement", new anotherViewModel)
<submit button>
</form>

Your page will list the anotherViewModel list, and in the partial view you have the html markup for anotherViewModel. When the user has edited the existing ones and/or added a new element, the submit button will post the whole viewmodel with the list of anotherViewModels to your action. That action will then handle the adds and updates.

However, this does tend to only work for applications where the chance of concurrency exceptions are low. A smoother way of doing it is to have each partial view take responsibility for the data it contains and persist it through ajax. This will negate the need for posting all the changes in one go.

Answer 2

Your viewmodel will be translated with the help of razor helpers, into html elements. When the users edits the viewmodels data on the client you actually edit html. When you post back to the controller the default model binder in mvc will try to convert your post data into the model the controller action is expecting as a parameter. When you have complex models it gets a bit tricky. Have you tried to build a custom model binder?

public class CustomBinder : IModelBinder
{
public object BindModel(ControllerContext controllerContext, 
                        ModelBindingContext bindingContext)
{
    HttpRequestBase request = controllerContext.HttpContext.Request;

    string idViewModel= request.Form.Get("idViewModel");
    string description= request.Form.Get("description");
    var list = new List<anotherViewModel>(); //create list from form data


    return new ViewModel
               {
                   idViewModel= idViewModel,
                   description= description,
                   aViewModel = list
               };
}

}

and in your controller action:

public ActionResult Edit([ModelBinder(typeof(CustomBinder))] ViewModel vm)

Otherwise, Maybe you should rethink your data structure. Maybe have a separate partial view where you edit the anotherViewModel.