Using Razor to create a form for hierarchy of domain models

Question

Lets say I have the following classes (could you also consider if my classes in terms of that relation part is correct):

public class EFDbContext : DbContext
{
    public DbSet<Project> Projects { get; set; }
    public DbSet<Address> Addresses { get; set; } // *
    public DbSet<Country> Countries { get; set; } // *
    // Custom model builder bindings for * coz of the plural issue with EF
}

public class Project
{
    public int ProjectID { get; set; }
    public string Name { get ; set; }

    public int AddressID { get; set; } // Database relation column
    public Address Address { get ; set; }
}

public class Address
{
    public int AddressID { get; set; }
    public string Address1 { get ; set; }    
    public string Address2 { get ; set; }

    public int CountryID { get; set; } // Database relation column
    public Country Country { get ; set; }
}

public class Country
{    
    public int CountryID { get; set; }
    public string Name { get; set; }
}

How would I go about doing the Razor for this...

My "Create Project" page will need a form that looks something like this... but this is not correct right?

@model Project

    <div class="form-group">
        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Address, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Address)
        </div>
    </div>

So I ended up creating a Shared/EditorTemplates/Address.cshtml which then constructed the Address form:

@model Address

    <div class="form-group">
        @Html.LabelFor(model => model.Address1, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Address1)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Address2, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Address2)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Country, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Country)
        </div>
    </div>

And finally the Country one... Which needs a typeahead (so some custom classes added to the editorfor which you can't do so I did textbox ) - Shared/EditorTemplates/Country.cshtml

@model Country

    <div class="form-group">
        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBox("", Model.Name.ToString(), new { @class = "countries typeahead" })
        </div>
    </div>

Does this look correct? I find it very overwhelming and confusing (Btw, I have tried this and it's not working... but if I know it's the correct way, then I can push on in that direction)!

Answer 1

You're on the right track. Just be careful of where you place your EditorTemplates in the project structure and how you refer to them. The MVC convention doesn't always work the way you would hope e.g. using editor templates for a single model when the model is wrapped in a list.

One suggestion I have would be to use a completely separate "view model" for the model passed to your razor views. You can map between your view model and your entity framework model (aka data model) using something like automapper. Why? You'll find over time that they'll require different things e.g. mvc attributes on model properties.