带有部分视图的视图也有 IEnumerable

Question

I have an application for college football fightsongs. I want to display a single teams's details like school name, mascot, conference, etc... but also have a partial view on the same page where the partial view loops through the teams's fight songs. I was able to achieve this with using an IEnumerable for the fight songs and Viewbag for the data, but I don't believe that is best practices.

I want my code to be as lean as possible and having 30 Viewbags in my view is probably not the best way to do it.

My code blows up on @Html.Partial("_FightSongDetails")

Here is the error:

Additional information: The model item passed into the dictionary is of type 'SportSongs.Models.ViewModels.ConferenceTeamViewModel', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[SportSongs.Models.ViewModels.ConferenceTeamViewModel]'.

I believe this is saying my main view needs to have an IEnumerable of ConferenceTeamViewModel but then how do I pull data in without putting the entire page in a foreach loop?

ConferenceTeamViewModel is just my viewmodel with team, conference, and fightsong data.

My current Details Action is:

public ActionResult Details( int id = 0)
        {
            var team = _db.Teams.Find(id);
            var conference = _db.Conferences.FirstOrDefault(x => x.ConferenceId == team.ConferenceId);
            if (team == null)
            {
                return HttpNotFound();
            }

            return View(new ConferenceTeamViewModel()
            {
                Teams = team,
                Conference = conference
            });
         }

My Details View (I am able to pull in the single Model data, just not the fightsongs):

@model SportSongs.Models.ViewModels.ConferenceTeamViewModel
<div class="row">
     <div class="col-sm-12">
          @Model.Teams.School
     </div>
</div>
<div class="row">
     <div class="col-sm-12">
          @Html.Partial("_FightSongDetails")
     </div>
</div>

Here is my PartialView:

@model IEnumerable<SportSongs.Models.ViewModels.ConferenceTeamViewModel>
<tbody id="fightsongPlaylist">
@foreach (var song in Model)
{
    <tr>
        <td>@song.Fightsong.songname</td>
        <td><a href="@Url.Content(@song.Fightsong.songurl)" class="playbtn" onclick="myFunction()"><i data-songid="@Url.Content(@song.Fightsong.FightSongId.ToString())" class="fa fa-play"></i></a></td>
    </tr>
}

Answer 1

It sounds like you want to show the songs for that team in a partial view. If that's the case, make the model type for the partial view a collection of songs , not the team ).

Change your partial view to

@model IEnumerable<FightSong>
<tbody id="fightsongPlaylist">
@foreach (var song in Model)
{
    <tr>
        <td>@song.songname</td>
        <td><a href="@Url.Content(@song.songurl)" class="playbtn" onclick="myFunction()"><i data-songid="@Url.Content(@song.FightSongId.ToString())" class="fa fa-play"></i></a></td>
    </tr>
}

and pass the collection to the sub-view:

<div class="row">
     <div class="col-sm-12">
          @Html.Partial("_FightSongDetails",model.Teams.FightSongs)
     </div>
</div>