How to create an ASP.NET MVC 3.2.7 page with 3 view models

Question

I'm building an ASP.NET MVC 3.2.7 web site. I have the following Entity Framework 6.4.4 database model:

[Table("Report")]
public class Report
{
    [Key]
    public class ReportId { get; set; }

    // Other irrelevant properties

    [NotMapped]
    public IEnumerable<DataSection> DataSections
    {
        get
        {
             return ReportDataSections
                    .OrderBy(rds => rds.OrderSeq)
                    .Select(rds => rds.DataSection);
        }
    }

    public virtual IColledction<ReportDataSection> ReportDataSections { get; } = new List<ReportDataSection>();
}

[Table("DataSection")]
public class DataSection
{
    [Key]
    public int DataSectionId { get; set; }

    // Other irrelevant properties

    [NotMapped]
    public IEnumerable<Report> Reports
    {
        get
        {
             return ReportDataSections
                    .OrderBy(rds => rds.Report.ReportName)
                    .Select(rds => rds.Report);
        }
    }

    public virtual ICollection<ReportDataSection> ReportDataSections { get; } => new List<ReportDataSection();
}

[Table("ReportDataSection")]
public class ReportDataSection
{
    [Key]
    [Column(Oder = 0)]
    [DatabaseGenerated(DatabaseGeneratedOption.None)]
    public int ReportId { get; set; }

    [Key]
    [Column(Oder = 1)]
    [DatabaseGenerated(DatabaseGeneratedOption.None)]
    public int DataSectionId { get; set; }

    public int OrderSeq { get; set; }

    public virtual DataSection DataSection { get; set; }

    public virtual Report Report { get; set; }
}

I want the home page of the site to look something like this:

I have a number of view models:

• DataSourcesViewModel: this has an ICollection<DataSourceViewModel> right now.
• ReportsViewModel: this has an ICollection<ReportsViewModel> right now.
• DataSectionsViewModel: this has an ICollection<DataSectionViewModel> right now.
• HomePageViewModel: this has three properties, a DataSourcesViewModel, and a ReportsViewModel, a DataSectionsViewModle`.

Here's the HomeController class:

public class HomePageController : Controller
{
    private readonly HomePageViewModel _viewModel = new HomePageViewModel();

    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    // GET: DataSources
    public ActionResult DataSources()
    {
        return View("DataSources", _viewModel.DataSources);
    }

    // GET: Reports
    public ActionResult Reports()
    {
        return View("Reports", _viewModel.DataSources);
    }

    // GET: DataSections
    public ActionResult DataSections()
    {
        return View("DataSections", _viewModel.DataSections);
    }
}

This class doesn't compile. I'm getting an error because the ViewModel classes aren't IEnumerables. Yet this code looks like other examples I've seen, especially the one with the Log-in and Registration forms.

In any event, I've created partial views, one for each tab in the tab control. The Index page looks like this:

@model HomePageViewModel
@{
    ViewBag.Title = "...";
    ViewBag.DataSources = "...";
    ViewBag.DatSections = "...";
    ViewBag.Reports = "...";
}

<h2>@ViewBag.Title</h2>

<div class="tab-content">
    <h4>@ViewBag.DataSources</h4>
    @Html.RenderPartial("DataSources", Model.DataSources)
</div>

<div class="tab-content">
    <h4>@ViewBag.Reports</h4>
    @Html.RenderPartial("Reports", Model.Reports)
</div>

<div class="tab-content">
    <h4>@ViewBag.DataSections</h4>
    @Html.RenderPartial("DataSections", Model.DataSections)
</div>

None of this is building. I don't know what I'm doing wrong. How do I get this to work.