How to bind a nested property in a view with aspnet core

Question

I am starting to learn ASP.NET Core, and I would like to know how to bind a nested property in the view.

I have these two objects:

public partial class Club
{
    public Guid Id { get; set; }
    public string IdUser { get; set; }
    public string Name { get; set; }
    public string Position { get; set; }
    public virtual ApplicationUser IdUserNavigation { get; set; }
}

public class UserViewModel
{
    public string Id { get; set; }
    public string UserName { get; set; }
    [DataType(DataType.Password)]
    public string Password { get; set; }
    [Display(Name = "Confirm Password")]
    [DataType(DataType.Password)]
    public string ConfirmPassword { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }

    public Club Club { get; set; }

    public List<SelectListItem> ApplicationRoles { get; set; }
    
    [Display(Name = "Role")]
    public string ApplicationRoleId { get; set; }
}

now I want to bind the UserViewModel to the view

    @model TestingViewModels.Users.UserViewModel
    @using Testing.ViewModels.Roles
<form asp-action="AddUser" role="form">
    @await Html.PartialAsync("_ModalHeader", new ModalHeader { Heading = "Add User" })
    <div class="modal-body form-horizontal">
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label asp-for="Name" class="col-lg-3 col-sm-3 control-label"></label>
                    <div class="col-lg-6">
                        <input asp-for="Name" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Email" class="col-lg-3 col-sm-3 control-label"></label>
                    <div class="col-lg-6">
                        <input asp-for="Email" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="ApplicationRoleId" class="col-lg-3 col-sm-3 control-label"></label>
                    <div class="col-lg-6">
                        <select asp-for="ApplicationRoleId" asp-items="@Model.ApplicationRoles" class="form-control">
                            <option>Please select</option>
                        </select>
                    </div>
                </div>
            </div>
            ....    
            
            <div class="col-lg-6">
                <div class="form-group">
                    <!--THIS DON´T WORK-->
                    <label asp-for="Club.Name" class="col-lg-3 col-sm-3 control-label"></label>
                    <div class="col-lg-6">
                        <input asp-for="Club.Name" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                <!--THIS DON´T WORK-->
                    <label asp-for="Club.Position" class="col-lg-3 col-sm-3 control-label"></label>
                    <div class="col-lg-6">
                        <input asp-for="Club.Position" class="form-control" />
                    </div>
                </div>
            </div>

        </div>
    </div>
    @await Html.PartialAsync("_ModalFooter", new ModalFooter { })
</form>

How can I Bind Club.Name and Club.Position?

score 1 · Accepted Answer · answered Mar 02 '17 at 21:58

once the object is loaded into memory, you can reference it within your viewmodel. One of the things with EF is that loading usually requires explicit loading.

for example: (in this example, your referenced entity is single not a collection)

_dbContext.Entity(club).Reference(a => a.IdUserNavigation).Load();

for completeness, for a collection (a list of items) lets assume your user property is a list of users like

 public ICollection<ApplicationUser> IdUserNavigations {get;set;}

...

_dbContext.Entity(club).Collection(a => a.IdUserNavigations).Load();

notice that collection is for enumerables and reference is for single entity.

once this is executed you can access the entity in your view when you pass your viewmodel.

...

reference the model the same way you would any class.

<input asp-for="Club.Name" class="form-control" />

Thansk Marc, for the explanation. – jolynice Mar 03 '17 at 09:46 — jolynice, Mar 03 '17 at 09:46

How to bind a nested property in a view with aspnet core

1 Answers1