What's the correct way to query a many to many relationship in a MVC ViewModel and display it in a View while using EF code first?

Question

This has to be pretty simple to do, but I'm not finding a whole lot of examples on it. I am wanting to get all posts with their corresponding tags and display in a view. Basically a simple blog type thing. Here is my code with Models, ViewModel, Controller and View. Everything works minus the tags, so something is obviously wrong with my syntax.

public class MeWallPost
{
    public virtual int MeWallPostId { get; set; }

    public virtual string PostTitle { get; set; }        
    public virtual string PostContent { get; set; 
    public virtual DateTime PublishDate { get; set; }

    public virtual ICollection<MeWallPostMeTag> MeWallPostMeTags { get; set; }
}

public class MeTag
{
    public virtual int MeTagId { get; set; }

    public virtual string Name { get; set; }

    public virtual ICollection<MeWallPostMeTag> MeWallPostMeTags { get; set; }
}

public class MeWallPostMeTag
{
    [Key, Column(Order = 0)]
    public virtual int MeWallPostId { get; set; }
    [Key, Column(Order = 0)]
    public virtual int MeTagId { get; set; }

    public virtual MeWallPost MeWallPost { get; set; }
    public virtual MeTag MeTag { get; set; }
}

----

public class MeWallPostViewModel
{
    public string PostTitle { get; set; }
    public string PostContent { get; set; }
    public DateTime PublishDate { get; set; }

    private IEnumerable<MeTag> _Tags = new List<MeTag>();
    public IEnumerable<MeTag> Tags
    {
        get { return _Tags; }
        set { _Tags = value; }
    }

    public IEnumerable<MeWallPostViewModel> GetPosts()
    {
        var db = new DatselleDB();

        return from post in db.MeWallPosts             
               select new MeWallPostViewModel
               {
                   PostTitle = post.PostTitle,
                   PostContent = post.PostContent,
                   PublishDate = post.PublishDate,
                   Tags = post.MeWallPostMeTags.Select(a => a.MeTag)
               };
    }
}

-----

public ViewResult Index()
{
   return View(new MeWallPostViewModel());
}

------

@foreach (var item in Model.GetPosts()) {
<div class="postItem clear">
    <h3>@Html.DisplayFor(modelitem => item.PostTitle)</h3>
    <span class="date">@Html.DisplayFor(modelitem => item.PublishDate)</span>
    <p>@Html.DisplayFor(modelItem => item.PostContent)</p> 
    @foreach (var tag in Model.Tags) {
        @Html.DisplayFor(modelItem => tag.Name.ToString())
    }
</div> 
}

Answer 1

Raphaël Althaus is right about your viewmodel and controller code. Try this:

ViewModel:

public class MeWallPostViewModel
{
    public string PostTitle { get; set; }
    public string PostContent { get; set; }
    public DateTime PublishDate { get; set; }

    public MeTagViewModel[] Tags { get; set; }

    public class MeTagViewModel
    {
        public int MeTagId { get; set; }
        public string Name { get; set; }
    }
}

Controller:

public ViewResult Index()
{
    MeWallPostViewModel[] viewModels = null;
    using (var db = new DatselleDB())
    {
        viewModels = db.MeWallPosts
           .Include(p => p.MeWallPostMeTags.Select(t => t.MeTag))           
           .Select(p => new MeWallPostViewModel
           {
               PostTitle = p.PostTitle,
               PostContent = p.PostContent,
               PublishDate = p.PublishDate,
               Tags = p.MeWallPostMeTags.Select(t => 
                   new MeWallPostViewModel.MeTagViewModel
                   {
                       MeTagId = t.MeTagId,
                       Name = t.Name,
                   })
                   .ToArray()
               ),
           })
           .ToArray();
    }
    return View(viewModels);
}

View:

@model IEnumerable<MeWallPostViewModel>

@foreach (var item in Model)
{
    <div class="postItem clear">
        <h3>@Html.DisplayFor(m => item.PostTitle)</h3>
        <span class="date">@Html.DisplayFor(m => item.PublishDate)</span>
        <p>@Html.DisplayFor(m => item.PostContent)</p> 
        foreach (var tag in item.Tags)
        {
            @Html.DisplayFor(m => tag.Name)
        }
    </div> 
}

Another thought:

Use AutoMapper to clean up the controller's Select and ToArray code.

Reply to comments

To your first question, read this. Basically, don't convert it to a list unless you need to add or remove items later. In the case of converting entities to viewmodels, you should rarely need to add or remove items after querying out from the db.

To your second question, see my afterthought. Using AutoMapper, your controller code could end up looking like this:

public ViewResult Index()
    {
        // same # of lines as your original GetPosts (not counting this comment)
        MeWallPost[] entities = null;
        using (var db = new DatselleDB())
        {
            entities = db.MeWallPosts
               .Include(p => p.MeWallPostMeTags.Select(t => t.MeTag))
               .ToArray();
        }

        // technically, CreateMap should not be in the controller, but instead
        // bootstrapped once from the composition root (global.asax)
        Mapper.CreateMap<MeTag, MeWallPostViewModel.MeTagViewModel>();
        Mapper.CreateMap<MeWallPost, MeWallPostViewModel>()
            .ForMember(d => d.Tags, o => o.ResolveUsing(s => 
                Mapper.Map<MeWallPostViewModel.MeTagViewModel[]>
                    (s.MeWallPostMeTags.Select(a => a.MeTag))))
        ;

        var viewModels = Mapper.Map<MeWallPostViewModel[]>(entities);
        return View(viewModels);
    }

Also in your question you had an entity mixed in with a viewmodel:

public class MeWallPostViewModel
{
    private IEnumerable<MeTag> _Tags = new List<MeTag>();
    public IEnumerable<MeTag> Tags
    {
        get { return _Tags; }
        set { _Tags = value; }
    }

Each time you DTO from an entity to a viewmodel, you should implement separate viewmodels for the original entity's navigation and (in your case) collection properties that you want to include in the view.

Answer 2

Edit : sorry.

Your code is a little bit weird.

• don't put db in your viewmodel
• your GetPosts method make no sense as is (nothing to do with the class and it's properties... why ?)

I would do at least (far from good, but already better)

put your GetPosts() method in your Controller, as private (this is not the best way to do, but this will be better).

I hope your db implements Disposable, so use it with a using

then

public ViewResult Index() {
   return View(GetPosts())
}

your View Index should have @model IEnumerable

and then in your view

@foreach (var post in Model) {
 bla bla
}

EDIT 2: By the way, try to debug your query to see if it's return anything