Cannot submit since i'm getting error "System.ArgumentNullException: 'Value cannot be null"

Question

This is my auto generated model

public partial class User
{
    public int UserID { get; set; }
    public string UserType { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int ContactNo { get; set; }
    public string Gender { get; set; }
    public string Address { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
}

This overloading model

[MetadataType(typeof(UserMetaData))]
public partial class User
{
    [DisplayName("User Type")]
    [NotMapped]
    public List<UserType> UserTypeCollection { get; set; }

    [Compare("Password")]
    [DisplayName("Confirm Password")]
    [DataType(DataType.Password)]
    public string ConfirmPassword { get; set; }

}

public class UserMetaData
{
    [Required(ErrorMessage = "This field is required")]
    public string UserType { get; set; }

    [Required(ErrorMessage ="This field is required")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "This field is required")]
    [DataType(DataType.PhoneNumber)]
    public int ContactNo { get; set; }

    [Required(ErrorMessage = "This field is required")]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [DataType(DataType.Password)]
    public string Password { get; set; }
}

When the submit button is pressed on the following form the UserType value is not picked.

@using (Html.BeginForm("AddOrEdit", "User", FormMethod.Post)) 
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <hr />
    <div class="form-group">
        @Html.LabelFor(model => model.UserType, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.UserType, new SelectList(Model.UserTypeCollection, "id", "TypeName"), "Select")
            @Html.ValidationMessageFor(model => model.UserType, "", new { @class = "text-danger" })
        </div>
    </div>

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

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

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

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

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

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

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

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

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Submit" class="btn btn-default" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-2">
            <label class="label-success">@ViewBag.SuccessMessage</label>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-2">
            <label class="label-danger">@ViewBag.DuplicateMessage</label>
        </div>
    </div>
</div>
}

When i try to submit following fields are captured. Address, Password, Confirm Password, Contact no, Email, first name, lastname, Gender, usertype. But UserTypeCollection is null