How would I have two model classes in one view? – Asp.net

I am trying to use two models in one view in ASP.NET MVC. I have looked at questions that are related to mine here on StackOverflow, however I can’t seem to get it to work on mine. I understand the general idea of how to do it but for some reason I just can’t make it work on my code that I am working on.

These are the model classes:

public class Project
{
    public int Id { get; set; }

    [Required]
    [MaxLength(30)]
    public string Name { get; set; }

    [Required]
    public DateTime StartDate { get; set; }

    [Required]
    public DateTime DueDate { get; set; }

    public ICollection<ProjectRole> ProjectRoles { get; set; }
}

public class ProjectRole
{
    public int Id { get; set; }

    [Required]
    public double HourlyRate { get; set; }

    [ForeignKey("Person")]
    public int PersonId { get; set; }

    [ForeignKey("Project")]
    public int ProjectId { get; set; }

    [ForeignKey("AppRole")]
    public int RoleId { get; set; }

}

The controller:

[Authorize]
public class ProjectsController : Controller
{
    private readonly ApplicationDbContext _context;

    public ProjectsController(ApplicationDbContext context)
    {
        _context = context;
    }

    // GET: Projects
    [Authorize(Roles = "Member")]
    public async Task<IActionResult> Index()
    {
        return View(await _context.Projects.ToListAsync());
    }
}

And this is the view:

@model IEnumerable< Project2.Models.Entities.ProjectRole>

@{
    ViewData["Title"] = "Index";
}

<div class="text-center">
    <a href="/"><button>Home</button></a> |
    <a href="../People"><button>Manage People</button></a> |
    <a href="../People/Report"><button>View People Report</button></a> |
    <a href="../Projects"><button>Manage Projects</button></a> |
    <a href="../Projects/Report"><button>View Project Report</button></a> |
    <a href="../ProjectRoles"><button>Manage Project Role</button></a>
</div>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                Person Name
            </th>
            <th>
                Project Name
            </th>
            <th>
                @Html.DisplayNameFor(model => model.HourlyRate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RoleId)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.PersonId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ProjectId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.HourlyRate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RoleId)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

I appreciate any advice and help that is offered. Thanks!