How to show name instead of ID from another table in dropdown list for user to select MVC

Question

I am currently working on a project, I have 2 tables for now, User and Designation. When a user registers they will have to select a designation, which means that DesignationID is a FK in User table, however in my view, I do not want to display the ID I want it to display the name in a dropdown list that the user can select when registering. I have tried a few solutions however I am still getting an error which I'm not sure how to fix as I am new to asp.net, Please can you assist? Here is what I've tried

User model:

public partial class User
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int UserID { get; set; }
    public User user { get; set; }

    [Required]
    [Display(Name ="First Name")]
    public string FirstName { get; set; }

    [Required]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [Required]
    [Display(Name = "Designation")]
    public int DesignationID { get; set; }
    public virtual Designation designation { get; set; }

    [Required]
    [Display(Name = "Email")]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [Required]
    [Display(Name = "Username")]
    public string UserName { get; set; }

    [Required]
    [Display(Name = "Password")]
    [DataType(DataType.Password)]
    public string Password { get; set; }

    [Required]
    [Display(Name = "Address")]
    public string Address { get; set; }

    [Required]
    [Display(Name = "Date of birth")]
    [DataType(DataType.Date)]
    public System.DateTime DOB { get; set; }
}

Designation model:

public partial class Designation
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]

    public int DesignationID { get; set; }

    [Required]
    [Display(Name ="Designation Name")]
    public string DesignationName { get; set; }

    public virtual ICollection<User> users { get; set; }
}

Controller code I used

public class HomeController : Controller
{
    private CompanyPrintersEntities db = new CompanyPrintersEntities();
    public ActionResult Index()
    {  
        return View(db.Users.Include(us => us.user).Include(us => us.designation).ToList());
    }
}

View:

<div class="form-group">
           
 @Html.LabelFor(model => model.DesignationID, htmlAttributes: new { @class = "control-label col-md-2" })

    <div class="col-md-10">
        @foreach (User item in Model)
        {
            <p>User @item.User.Name is in Designation @item.Designation.Name</p>
        }
    </div>
</div>

Error I am getting:

I am using Entity Framework DB first approach.

Answer 1

I think you must use thenInclude

 db.Users.Include(us => us.user).ThenInclude(us => us.designation).ToList()

Answer 2

create a list in your model as

public List<Designation> DesignationsList { get; set; }

you can use this list in your controller as

Designations.DesignationsList = _db.Designations.ToList();

then use the list in drop down as

 <div class="row form-group"> <div class="col-md-2"> <label asp-for="DesignationID" class="control-label"></label> </div> <div class="col-md-10"> <select id="drpEmpList" class="form-control" asp-for="DesignationID" asp-items="@(new SelectList(Model.DesignationList, "DesignationID", "DesignationName"))"> <option value="">--Select--</option> </select> <input type="hidden" asp-for="DesignationID" /> </div> </div>

NOTE: use the classname, connection and other class members as per your project