Multiple models for one view not working - asp.net-mvc

Question

I have a Customer model and a Project model that I made into a Partial View.
I basically have a class and the two models that I'm using for the View are inside the main class.
The DataAnnotations are working just fine for both models.
When I hit the submit button and post back, the ViewModel that I'm using is null for the CustomerDTO & ProjectDTO models. In other words, the variable customerProject is null for both classes.
I think it must have something to do with the model binding.
I would appreciate very much if someone can point out what I'm doing wrong.
Note that if I just use one class without wrapping the sub-classes inside the superclass, the "customer" object is populated.
public ActionResult CreateCust(CustomerDTO customer)
This one class is defined as follows:
using Models.Models;
namespace Models.ViewModels.Customers
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
public class CustomerDTO
{
[Key]
[ScaffoldColumn(true)]
[Display(Name = "ID")]
public short CustomerID { get; set; }
[Required]
[StringLength(50)]
public string UserName { get; set; }
[Required]
[StringLength(50)]
[EmailAddress]
public string Email { get; set; }
[StringLength(50)]
public string Company { get; set; }
[StringLength(50)]
public string FirstName { get; set; }
[StringLength(50)]
public string LastName { get; set; }
[StringLength(50)]
public string Address1 { get; set; }
[StringLength(50)]
public string Address2 { get; set; }
[StringLength(50)]
public string City { get; set; }
[StringLength(2)]
public string State { get; set; }
[StringLength(10)]
[DataType(DataType.PostalCode)]
[RegularExpression(#"^\d{5}(-\d{4})?$")]
public string Zip { get; set; }
[StringLength(12)]
[DataType(DataType.PhoneNumber)]
[RegularExpression(#"^\s*([\(]?)\[?\s*\d{3}\s*\]?[\)]?\s*[\-]?[\.]?\s*\d{3}\s*[\-]?[\.]?\s*\d{4}$")]
public string HomePhone { get; set; }
[StringLength(12)]
[DataType(DataType.PhoneNumber)]
[RegularExpression(#"^\s*([\(]?)\[?\s*\d{3}\s*\]?[\)]?\s*[\-]?[\.]?\s*\d{3}\s*[\-]?[\.]?\s*\d{4}$")]
public string CellPhone { get; set; }
[StringLength(100)]
[DataType(DataType.Url)]
public string Website { get; set; }
[StringLength(50)]
[DataType(DataType.Url)]
public string IMAddress { get; set; }
[DataType(DataType.DateTime)]
[Display(Name = "Created")]
public DateTime CreatedDate { get; set; }
[DataType(DataType.DateTime)]
[Display(Name = "Updated")]
public DateTime? UpdatedDate { get; set; }
public virtual ICollection<Project> Projects { get; set; }
}
}
Here is my model (Please use your favorite viewer to view the image to enlarge it).
My Main View is defined as follows:
#model Models.ViewModels.Customers.CustomerDTO
#{
ViewBag.Title = "Create Customer & Project";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create</h2>
#using (Html.BeginForm("CreateCustProj", "Home", FormMethod.Post, new { #id = "frm1", #class = "form-horizontal" }))
{
<div class="body-content">
<h4>Customer/Project</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<fieldset>
<legend>Customer</legend>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control", #placeholder = "UserName" } })
#Html.ValidationMessageFor(model => model.UserName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control", #placeholder = "Email" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Company, new { htmlAttributes = new { #class = "form-control", #placeholder = "Company" } })
#Html.ValidationMessageFor(model => model.Company, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-5 col-md-5 col-sm-5 col-xs-5">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control", #placeholder = "First Name" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control", #placeholder = "Last Name" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Address1, new { htmlAttributes = new { #class = "form-control", #placeholder = "Address1" } })
#Html.ValidationMessageFor(model => model.Address1, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Address2, new { htmlAttributes = new { #class = "form-control", #placeholder = "Address2" } })
#Html.ValidationMessageFor(model => model.Address2, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-6 col-md-6 col-sm-6 col-xs-6">
#Html.EditorFor(model => model.City, new { htmlAttributes = new { #class = "form-control", #placeholder = "City" } })
#Html.ValidationMessageFor(model => model.City, "", new { #class = "text-danger" })
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
#Html.EditorFor(model => model.State, new { htmlAttributes = new { #class = "form-control", #placeholder = "State" } })
#Html.ValidationMessageFor(model => model.State, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-3 col-md-3 col-sm-3 col-xs-3">
#Html.EditorFor(model => model.Zip, new { htmlAttributes = new { #class = "form-control", #placeholder = "Zip" } })
#Html.ValidationMessageFor(model => model.Zip, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-5 col-md-5 col-sm-5 col-xs-5">
#Html.EditorFor(model => model.HomePhone, new { htmlAttributes = new { #class = "form-control", #placeholder = "Home Phone" } })
#Html.ValidationMessageFor(model => model.HomePhone, "", new { #class = "text-danger" })
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
#Html.EditorFor(model => model.CellPhone, new { htmlAttributes = new { #class = "form-control", #placeholder = "Cell Phone" } })
#Html.ValidationMessageFor(model => model.CellPhone, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-5 col-md-5 col-sm-5 col-xs-5">
#Html.EditorFor(model => model.Website, new { htmlAttributes = new { #class = "form-control", #placeholder = "Website" } })
#Html.ValidationMessageFor(model => model.Website, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-5 col-md-5 col-sm-5 col-xs-5">
#Html.EditorFor(model => model.IMAddress, new { htmlAttributes = new { #class = "form-control", #placeholder = "IM Address" } })
#Html.ValidationMessageFor(model => model.IMAddress, "", new { #class = "text-danger" })
</div>
</div>
</fieldset>
<fieldset>
<legend>Project</legend>
#Html.Partial("_Projects", Model)
</fieldset>
<div class="form-group">
<div>
<button type="submit" id="btnCustomerProjectCreate" class="btn btn-primary col-offset-2"><span class="glyphicon glyphicon-save"></span>Create</button>
</div>
</div>
</div>
}
My Partial View (noted above as #Html.Partial) is as follows:
#model Models.ViewModels.Projects.ProjectDTO
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.DropDownListFor(model => model.CategoryID, new SelectList(ViewBag.Categories, "CategoryID", "Description", ViewBag.CategoryID == null ? null : ViewBag.CategoryID), "-- Select Category --", new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CategoryID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.DropDownListFor(model => model.PriorityID, new SelectList(ViewBag.Priorities, "PriorityID", "Description", ViewBag.PriorityID == null ? null : ViewBag.Priority), "-- Select Priority --", new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PriorityID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.DropDownListFor(model => model.StatusID, new SelectList(ViewBag.Statuses, "StatusID", "Description", ViewBag.StatusID == null ? null : ViewBag.StatusID), "-- Select Status --", new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.StatusID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Quote, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Quote, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
#Html.EditorFor(model => model.Notes, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Notes, "", new { #class = "text-danger" })
</div>
</div>

Answer 1

I think you are confusing yourself of what to pass where and how it will be rendered.
You have two models
CustomerDTO
ProjectDTO
You are Creating a ViewModel and passing it to View that is of type CustomerDTO. When you Pass same model to partial #Html.Partial("_Projects", Model) , You are passing CustomerDTO. However, partial view is expecting to recieve ProjectDTO. Means You should pass ProjectsDTO.
Now I can see that You have
public virtual ICollection Projects { get; set; }
set in there, I am assuming Projects Contains ProjectDTO model in it by looking at your namespace declaration.
Pass ProjectDTO model with foreach loop using
#foreach(var item in Model.Projects)
{
#Html.Partial(item.ProjectDTO)
}
This will work. However, this is not best practice. You should get ICollection and use DisplayTemplate to Render your data.
Please post, your ProjectsDTO model and also post what is expected output that you want so that We can answer specifically of where are things going wrong,
Update
I think now I understand where things are going Wrong. I will try to keep it simple while I explain.
You said , Your models are coming back as null. There could be three reasons for that to happen.
You never Instantiated your model. Do it by (CustomerDTO cDTO = new CustomerDTO()
Get it from somewhere , for example CustomerDTO cDTO = getCustomerDTO() where getCustomerDTO() function returs CustomerDTO model.
Even though you had a Model with you , you never passed it to View. You can do this in Action something like follow.
Public ActionResult ShowCustomer()
{
CustomerDTO cDTO = new CustomerDTO();
return View("ViewName" , cDTO);
}
Moving to Second issue where You want to have a superClass that contains Multiple Classes.
You have DTO are your DomainModels, whose job is to get data from Database, I think they are doing Their Job. NOw If Both of those Domain models needs to go to View, you need to Create ViewModel that will look something like this,
public class DTOViewModel
{
public CustomerDTO Customer {get ; set ;}
public ProjectsDTO Projects {get; set;}
}
Then you can Create Action that will look something like following,
public ActionResult DTOViews()
{
DTOViewModel model = new DTOViewModel();
model.Customer = getCustomer();
model.Projects = getProjects();
return View("YourView" , model); //Make sure ViewName exist in Respective Folder.
}
Then in View You may have following;
#model namespace.DTOViewModel
<h2> This is your main View. </h2>
#Html.Partial("_CustomerPartial" , model.Customer )
#Html.Partial("_ProjectPartial" , model.Projects )
Hope this helps.

Answer 2

Check the generated Html of the helpers. You need the name of the form elements to be something like "CustomerProjectDto.CustomerDto.Description". With Partials I thing you get "Description".
Try to use your own Editor Templates that create the right html for complex nodells.
Check this article to read about it. https://lostechies.com/jimmybogard/2011/09/07/building-forms-for-deep-view-model-graphs-in-asp-net-mvc/