How to have navigational properties in ViewModel, ID or class object directly?

Question

In my MVC application, I normally have ViewModel for such actions as Edit, mainly for populating selection lists for the properties to modify. For example my Model looks like this:

class MyModel{
    public int? NavPropID {get; set;}
    public AnotherModel NavProp {get; set;}
    ...
}

Now I was wondering, how should I design my ViewModel to reference the NavProp.

 class MyViewModel{
    public int? NavPropID {get; set;}
    public AnotherModel NavProp {get; set;}
    ...
 }

Should I use both NavPropID and NavProp, or should I use only one (which?) in the ViewModel?

I wanted to use only NavProp at first, because it feels more natural to me (I feel it hides the database implementation detail and it is how I do in WPF and MVVM). But then in my Edit view, I have something like this:

@Html.DropDownListFor(model => model.NavProp, 
                         new SelectList(Model.AllAnotherModels.Select(
                           i => new {Item = i, Text = i.Name}), "Item","Text"))

In the postback of Edit action, I can see that NavProp is not correctly bonded by the binder because the attemptedValue is of type string and the value is the class name of NavProp (which I guess means it uses ToString() method to post back to the controller). How can I make it work for the post back action?

I then tried to only have NavPropID in the ViewModel. But there are two problems: 1) it means I have to load the actual NavProp in the controller before I use AutoMapper to map back from ViewModel to Model. I feel that this is beyond the responsibility of a controller and 2) even if I load the actual property in the controller, I have some problem later when I am updating by calling DBSet.Attach().

So what is the best practice for the ViewModel to reference a navigational property in the Model?

UPDATE: Here is my post back function of the Edit action. It is generic I think so I didn't paste it in the first place.

[HttpPost]
public ActionResult Edit(MyViewModel vm)
{
   if (ModelState.IsValid)     
   {
      ... // I use Automapper to map back to Model and then 
          // use UnitOfWork and Repository to update the Model
   }
}

And my ModelState.IsValid is false so it can't proceed. As I mentioned, I then checked the ModelState (a dictionary) and found out that NavProp is invalid and the attemptedValue is the class name while I think it should be the actual value of the property.

Answer 1

In terms of having your NavPropID within the base view model, we need to establish whether it's appropriate to flatten your view model down.

If the view model is for a page that displays a single navigation properties' information, I would be tempted to have the following:

// Domain model
public class MyModel
{
    public int? NavPropID { get; set; }
    public NavProp NavProp { get; set; }
    ...
}

// Nav prop domain model
public class NavProp
{
    public int? NavPropID { get; set; }

    // Another property of your navigation property
    public string AnotherProperty { get; set; }
}

// Flat view model containing all your navigation properties' properties
public class MyViewModel
{
    public int? NavPropID { get; set; }
    public string AnotherProperty { get; set; }
}

If you wanted you could introduce another view model to represent your NavProp item - but it's overkill if you are happy to flatten it:

// Domain model
public class MyModel
{
    public int? NavPropID {get; set;}
    public NavProp NavProp {get; set;}
    ...
}

// Nav prop domain model
public class NavProp
{
    public int? NavPropID {get; set;}

    // Another property of your navigation property
    public string AnotherPropery {get; set;}
}

// View model representing your navigation property
public class NavPropViewModel 
{
    public int? NavPropID { get; set; }
    public string AnotherProperty { get; set; }
}

// Main view model
public class MyViewModel
{
    // Use another view model that represents your NavProp
    public NavPropViewModel NavProp { get; set; }
    ...
}

I would say that it is definitely the responsibility of the controller to map from the objects received from your business layer to your view models and vice versa.

To make this cleaner, I would introduce DTOs to map to which can then be passed up to your business layer. Check out general comments on this post.

Update

Here's how you would create your form to post back to MyViewModel with a NavPropViewModel field:

Example View:

@model MyViewModel
@using (Html.BeginForm())
{
    @Html.LabelFor(x => x.NavProp.AnotherProperty)
    @Html.TextBoxFor(x => x.NavProp.AnotherProperty)
}

Example controller:

[HttpPost]
public ActionResult Edit(MyViewModel vm)
{
    // Get the posted value of AnotherProperty
    var postedValue = vm.NavProp.AnotherProperty;
}