Grouping items according to their id - asp.net-mvc

Question

I'm trying to group items in razor view by there id and put them all in one div
What I did put each one in a div .
<div class="tab-content" id="myTabContent">
#foreach (var item in Model)
{
<div class="tab-pane fade active in" id="genreTab ">
if (item.GenreId == 1)
{
#item.GenreId
}
</div>
if (item.GenreId == 2)
{
<div class="tab-pane fade " style="background-color:red;" id="genreTab ">
#item.GenreId
</div>
}
}
</div>
The classes in short:
public class Genre
{
public int GenreId { get; set; }
public string GenreName { get; set; }
public List<TakeAway> TakeAwys { get; set; }
}
public class TakeAway
{
public int TakeAwayId { get; set; }
public int GenreId { get; set; }
public virtual Genre genre { get; set; }
}

Answer 1

Your best bet is to loop over your genres instead of your items, if possible. You can accomplish this by grouping the items in your model by genres.
Then, loop over your genres in your view, with an inner loop of your items within the current genre.
Something like this:
#foreach (var genre in Model.Genres)
{
<div class="tab-pane fade active in" id="genreTab ">
#foreach (var item in genre.Items)
{
#item.SomeValueHere
}
</div>
}
Alternatively, if you are forced to receive your items flat like your OP, as much as I hate doing code like this in the view, using LINQ to group them in your view may be the lesser of the evils:
#foreach (var genre in Model.GroupBy(i => i.GenreId).Select(i => i.Key))
{
var innerGenre = genre; //to prevent modifed closure
<div class="tab-pane fade active in" id="genreTab ">
#foreach (var item in Model.Where(i => i.GenreId == innerGenre))
{
#item.SomeValueHere
}
</div>
}

Answer 2

An ID (genreTab) should be unique. If you want all in one div, you have to order them first.
When all are ordered, do this:
var lastId = 0;
<div class="tab-pane fade " style="background-color:red;" id="genreTab-#item.GenreId">
#foreach (var item in Model)
{
if (#item.GenreId != lastId)
{
</div><div class="tab-pane fade " style="background-color:red;" id="genreTab-#item.GenreId">
}
#item.GenreId
lastId = #item.GenreId;
}
</div>
Syntax may be wrong, I don't know razor syntax.