title: Master-Detail Create Views with Razor, ASP.NET MVC 3 and .NET 4.0
body: <p>I'm new to .NET all together, please be patient with me if I have any silly mistakes.</p>
  
  <p>I'm using ASP.NET MVC 3 with .NET 4.0</p>
  
  <p>I want to have a <em>"Create"</em> view for a model that has a child Model. This view should include the child model's <strong><em>partial</em></strong> <em>"Create"</em> view, I'll use the following simple example for illustration purposes:</p>
  
  <ul>
  <li><p>The <strong>Person</strong> model</p>
  
  <pre><code>class Person
  {
      public string Name { get; set; }
      public Address { get; set; }
  }
  </code></pre></li>
  <li><p>The <strong>Address</strong> model</p>
  
  <pre><code>class Address
  {
      public string City { get; set; }
      public string Zip { get; set; }
  
      //A List for creating a &lt;select/&gt; item in the view
      //containing cities fetched from the database.
      //The initialization is done in the controller action returning
      //the related partial view.
      public IEnumerable&lt;SelectListItem&gt; CityDropDown { get; set; } )
  }
  </code></pre></li>
  <li><p>The Controller Actions</p>
  
  <pre><code>    class MyController : Controller
      {
          public ViewResult Create()
          {
              var person = new Person();
              var address = new Address();
              // initialization of address.CityDropDown omitted
              person.Address = address;
              return View(MyViews.CreatePersonView, person);
          }
  
          [HttpPost]
          public ViewResult Create(Person person)
          {
              //persistance logic
          }
      }
  </code></pre></li>
  <li><p>The views hierarchy I want to have : </p></li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/gE4Mc.png" alt="Person Create View Hierarchy"> </p>
  
  <p>The solutions that I have tried in order to achieve this are the following :</p>
  
  <h2>First approach : Using <code>@Html.Partial(..)</code> or <code>@{Html.RenderPartial(..)}</code></h2>
  
  <hr>
  
  <h3>What I did :</h3>
  
  <ul>
  <li><p>The <strong>Person</strong> view</p>
  
  <pre><code>@model Person
  @using(Html.BeginForm()){
      @Html.EditorFor(m=&gt;m.Name)
      @Html.Partial(MyViews.AddressPartialView, @Model.Address)
  }
  </code></pre></li>
  <li><p>The <strong>Address</strong> partial view</p>
  
  <pre><code>@model Address
  @Html.EditorFor(m=&gt;m.Zip)
  @Html.DropDownListFor(m=&gt;m.City, @Model.CityDropDown)
  </code></pre></li>
  </ul>
  
  <h3>The problem :</h3>
  
  <p>When submitting the form, <code>person.Address</code> is null. After a bit of searching on Google, I found out that in order for the submit of the address field to work, the generated HTML markup must be the following (notice the <code>Address_</code> prefix) :</p>
  
  <pre><code>&lt;form...&gt;
      &lt;input type=text id="Name" /&gt;
      &lt;input type=text id="Address_Zip" /&gt;
      &lt;select id="Address_City"&gt;
          &lt;!-- options... --&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Needless to say, the generated HTML markup in my case isn't the same but instead it's the following (the <code>Address_</code> prefix is missing) :</p>
  
  <pre><code>&lt;form...&gt;
      &lt;input type=text id="Name" /&gt;
      &lt;input type=text id="Zip" /&gt;
      &lt;select id="City"&gt;
          &lt;!-- options... --&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <h2>Second approach : Using an <em>EditorTemplate</em> for the Address model</h2>
  
  <hr>
  
  <h3>What I did :</h3>
  
  <ul>
  <li><p>I moved the <strong>Address</strong> partial view to the folder <strong><em>View/Shared/EditorTemplates</em></strong> assuring that it has the same name as the <code>Address</code> property in the <code>Person</code> model, i.e <strong><em>Address.cshtml</em></strong>.</p></li>
  <li><p>The <strong>Person</strong> view</p>
  
  <pre><code>@model Person
  @using(Html.BeginForm()){
      @Html.EditorFor(m=&gt;m.Name)
      @Html.EditorFor(@Model.Address) //will automatically find the Address 
                               //partial view in the EditorTemplates folder
  }
  </code></pre></li>
  </ul>
  
  <h3>The problem :</h3>
  
  <p>Using this approach the generated markup has in fact the proper prefix (i.e. <code>Address_</code>), but I get an <strong><em>Object reference not set to an instance exception</em></strong> for the <code>Address.CityDropDown</code> property which tells me that the pre-initialised Address object in the controller's action isn't passed to the partial view for some reason.</p>
  
  <h2>Third approach : put all Address fields in the Person model</h2>
  
  <hr>
  
  <p>This approach works with no problems, but I don't want to use it as I don't want to have redundant code if I ever want to have a create view for address in another model.</p>
  
  <h2>To sum up</h2>
  
  <hr>
  
  <p>What should I do in order to have a <strong>reusable</strong> partial create view that I can use accross my application? </p>