MVC submit multiple objects in model when form post - asp.net-mvc-4

Question

I am facing a problem that when I have a complex Model, if I submit the form it will not give me all the values of all the model properties, in the below example, I am not getting back the gridModel properties:
Model
public class InventoryModel {
public GridModel GridModel { get; set; }
public Int32 UserKey { get; set; }
}
public class GridModel {
public String GridId { get; set; }
public String GridName { get; set; }
public List<String> columns { get; set; }
}
Controller
public ActionResult Index(){
InventoryModel model = new InventoryModel();
model.UserKey= 20014;
model.GridModel = new GridModel();
model.GridModel.GridId = "jqgInventory";
model.GridModel.GridName = "Inventory Grid";
return View(model);
}
[HttpPost]
public ActionResult Index(InventoryModel model){
Int32 userId = model.UserKey; // This has a value
String gridId = model.GridModel.GridId; // This doesn't have a value
String gridName= model.GridModel.GridName; // This doesn't have a value
}
View
#model InventoryModel
#using (Html.BeginForm()) {
#Html.TextBoxFor(m => m.UserKey, new { #class = "w200" })
#Html.TextBoxFor(m => m.GridModel.GridId , new { #class = "w200" })
#Html.TextBoxFor(m => m.GridModel.GridName, new { #class = "w200" })
<input type="submit" value="Submit" />
}
Any suggestion please would be appreciated.
Thanks,
Alaa

Answer 1

You could instead use a ViewModel rather than the actual Model. This would be a flatter class that reflects the data specifically for the View.
public class InventoryViewModel{
Int32 UserKey {get; set; }
public String GridId { get; set; }
public String GridName { get; set; }
}
Your controller can map your model to your ViewModel if necessary