ASP.NET MVC 与视图模型的多对多关系

Question

I'm trying to display a list of books that will show the details for each book. It all works properly, except for the properties which have many-to-many relationships with the Books model.
Here is my Book model (I removed annotations for readability):

public class Book
{
    public int BookId { get; set; } 
    public string title { get; set; }
    public Int32 isbn { get; set; }
    public string author { get; set; }
    public string summary { get; set; }
    public string series { get; set; }
    public string amazonLink { get; set; }
    public string pubLink { get; set; }
    public int? GradeLevelId { get; set; } //Foreign Key for GradeLevel
    public bool needsEdit { get; set; }
    public int? LexileLevelId { get; set; } //Foreign Key for LexileLevel
    public DateTime dateAdded { get; set; }
    public Book()
    {
        dateAdded = DateTime.Now;
    }

    public string comments { get; set; }

    public virtual GradeLevel GradeLevel { get; set; }
    public virtual LexileLevel LexileLevel { get; set; }

    //Navigation Properties
    public virtual ICollection<Recommendation> Recommendations { get; set; }
    public virtual ICollection<RelevantGenre> RelevantGenres { get; set; }

}

The two navigation properties (Recommendation and RelevantGenre) are for the associative/joining tables, and that's where I'm having issues. To keep things simple, I'm going to focus on the RelevantGenre model. Each book can have more than one Genre, so the RelevantGenre is the join table between Book and Genre.
Here's the Model for those:

public class RelevantGenre
{
    //Both are primary keys
    [Key]
    [Column(Order = 1)]
    public int BookId { get; set; } //Foreign Key to Book

    [Key]
    [Column(Order = 2)]
    public int genreId { get; set; } //Foreign Key to Genre

    public virtual Book Book { get; set; } //Nav property
    public virtual Genre Genre { get; set; } //Nav property
}

public class Genre
{
    public int GenreId { get; set; }
    public string genreTitle { get; set; }
    public int genreOrder { get; set; }

    //Navigation Property to RelevantGenre
    public ICollection<RelevantGenre> RelevantGenres { get; set; }
}

Here's the Controller:

// GET: Books
    public ActionResult Index(string filter, string searchString)
    {
        var viewModel = new BookListViewModel();

        if (String.IsNullOrEmpty(searchString) && String.IsNullOrEmpty(filter))
        {
            var results = from b in db.Books select b;
            var resultsList = (results.ToList());
            viewModel.Books = resultsList;
            return View(viewModel);
        }
        else
        {
            var results = from b in db.Books select b;
            //Filtering the book list
            switch (filter)
            {
                case "HR":
                    results = from b in db.Books
                              join r in db.Recommendations
                              on new { b.BookId } equals
                                  new { r.BookId }
                              where (r.RecommendationTypeId == 1)
                              select b;
                    break;

                default:
                    results = from b in db.Books select b;
                    break;
            }
            if(!String.IsNullOrEmpty(searchString))
            {
                //Search query results
                var searchResults = from b in db.Books
                    .Where(model => model.title.Contains(searchString) || model.author.Contains(searchString) 
                    || model.series.Contains(searchString)) 
                    select b;
                if (searchResults != null )
                {
                    results = searchResults;
                }
                else
                {
                    ViewBag.SpanText = "Sorry, no results founds. Please try your search again.";
                }
            }
            var resultsList = (results.ToList());
            viewModel.Books = resultsList;
            return View(viewModel);
        }

    }

As you can see, it's returning a viewModel, because I thought that made the most sense for how to return a combination of model data.
Here's the viewmodel:

public class BookListViewModel
{

    public List<Book> Books { get; set; }
    public int BookId { get; set; }
    public string title { get; set; }
    public string author { get; set; }
    public Int32 isbn { get; set; }
    public string series { get; set; }

    public int? GradeLevelId { get; set; }
    public string gradeLevelName { get; set; }

    public int? LexileLevelId { get; set; }
    public string lexileLevelName { get; set; }

    public Recommendation Recommendation { get; set; }
    public int RecommendationTypeId { get; set; }
    public string recName { get; set; }

    public RelevantGenre RelevantGenre { get; set; }
    public int genreId { get; set; }

}

And lastly, here's the view:

@model FavBooks.ViewModels.BookListViewModel
@{
ViewBag.Title = "All Books";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Books</h2>
<p class="details">
    @Html.ActionLink("Browse All Books in List Format", "FullList", "Books")

</p>

@foreach (var item in Model.Books)
{
    <div class="row fullBorder">
        <div class="col-md-2 col-sm-2">
            <img src="~/Content/Images/harrypotterbook.png" class="bookThumb" alt="Book Image" />
        </div>
        <div class="col-md-3 col-xs-3">
            <h3>
                <a href="@Url.Action("Details", "Books", new { id = item.BookId })" class="darkLink bookTitle">
                    @Html.DisplayFor(modelItem => item.title)
                </a>
            </h3>
            <h4>By @Html.DisplayFor(modelItem => item.author)</h4>
            <p><strong>ISBN:</strong> @Html.DisplayFor(modelItem => item.isbn)</p>
        </div>
        <div class="col-md-3 col-sm-4 bookMargins">
            @{
                if (item.series != null)
                {
                    <p><strong>Series:</strong> @Html.DisplayFor(modelItem => item.series) </p>
                }
                else
                {
                    <p></p>
                }
            }

            <p><strong>Grade Level:</strong> @Html.DisplayFor(modelItem => item.GradeLevel.gradeLevelName )</p>
            <p><strong>Lexile Level:</strong> @Html.DisplayFor(modelItem => item.LexileLevel.lexileLevelName)</p>

        </div>
        <div class="col-md-4 col-sm-3">
            @Html.ActionLink("View Book Details", "Details", "Books", new { id = item.BookId }, new { @class="btn btn-default btnBookDetails" })
        </div>

    </div>   
}

You can see that my view displays a list of items from Model.Books using a foreach loop. For each book, I'd like it to also display the RelevantGenres that are connected to the book, but it's not letting me. The GradeLevel and LexileLevel properties connect just fine (those are one-to-many), but it doesn't seem to register any of the many-to-many relationships which are not directly part of the Book model.
I feel like I'm missing something basic here, or maybe there's an issue with my view-model setup. Do you see where I went wrong on this or what I can do to display each book's genres?

EDIT:
Let me get more specific with what I tried.
I saw here that it's possible to use a foreach inside of another foreach to display a loop. But when I try that, it tells me that the "foreach cannot operate on that... because Favbooks.Models.Book does not contain a public definition for GetEnumerator". So I tried changing the @model to an IEnumerable<> and looping through the whole Model ( instead of foreach(var item in Model.Books) but then it still wouldn't work. In that situation, it gave me an error saying:

'BookListViewModel' does not contain a definition for 'RelevantGenres' and no extension method 'RelevantGenres' accepting a first argument of type 'BookListViewModel' could be found (are you missing a using directive or an assembly reference?)

Because that wasn't working, I kept the @model with @model FavBooks.ViewModels.BookListViewModel like it was initially, and and tried putting in @Html.DisplayFor(modelItem => item.Genres.genreTitle) but it doesn't recognize Genre or RelevantGenre.
To sum up, the issue is that if I loop through Model.Books, then it won't recognize anything in the viewmodel other than the Books list. But if I loop through the overall Model, then it still won't recognize the RelevantGenres, and now it started giving me another error like this:

The model item passed into the dictionary is of type 'FavBooks.ViewModels.BookListViewModel', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[FavBooks.ViewModels.BookListViewModel]'.

I'm sorry if this isn't totally clear. I haven't worked so much with viewmodels before and I see that I must have set it up wrong, but I just don't know how to get this working...

Answer 1

Have you tried .Include() ? This will populate all the related data in the navigation property. Refer https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/reading-related-data-with-the-entity-framework-in-an-asp-net-mvc-application for more detials.

eg:

var BookList = _context.Book.Where(m=>m.BookId==id).Include(m=>m.Recommendations).Include(m=>m.RelevantGenres)

This will query a record of Book whose BookId=id and will populate all the related navigation properties.

There's also .ThenInclude()

A property of public List<Book> Books { get; set; } public List<Book> Books { get; set; } public List<Book> Books { get; set; } should be enough as this will store all the data related to your retrieved entity.

and below is example of how you can access the fields of a navigation property.

@model BookListViewModel

foreach(var b in Model.Books)
{
  @HtmlDisplayFor(modelItem=>b.title)

  foreach(var r in b.RelevantGenres)
  {
    @HtmlDisplayFor(modelItem=>r.GenereName)
  }
}

Myself being fairly new to .netcore mvc, I don't know much either. But I hope this helps to point you in the right direction if not completely solve your issue.