How to show nested data using MVC Views and PartialViews

Question

The problem I am working on is very similar to the way StackOverflow is displaying Question, its comments, Posts and comments related to the Posts. The hierarchy is the same.

How is this accomplished in ASP.Net MVC?

So far I have this: (I have named the files similar to SO site to make my question more readable)

Views/Questions/Details.aspx

public class QuestionsController : Controller
{
    public ActionResult Details(int? questionId)
    {
        Question question= _db.Question .First(i => i.QuestionId== questionId);
        return View(question);
    }
}

This loads the details and display the question.

I have a user control called QuestionComment, which should display the comments for the question but I am not sure how to go about wiring it up. I have been using the Dinners solution as a guide.

eu-ge-ne · Accepted Answer · 2009-07-14 10:27:55Z

4

Create ViewModel for displaying Question with Comments. Something like this:

public class QuestionViewModel
{
    public Question Question { get; set; }
    public IEnumerable<Comment> Comments { get; set; }
}

your controller become:

public class QuestionsController : Controller
{
    public ActionResult Details(int? questionId)
    {
        var question = _db.Question.First(x => x.QuestionId == questionId);
        var comments = _db.Comment.Where(x => x.QuestionId == questionId).ToList();
        var model = new QuestionViewModel {
            Question = question,
            Comments = comments
        };
        return View("Details", model);
    }
}

your "Details" View:

<%@ Page Inherits="System.Web.Mvc.ViewPage<QuestionViewModel>" %>

<% Html.Renderpartial("QuestionControl", model.Question); %>
<% Html.Renderpartial("CommentsControl", model.Comments); %>

"QuestionControl" partial View:

<%@ Control Inherits="System.Web.Mvc.ViewUserControl<Question>" %>

<h3><%= Model.Title %></h3>

...

"CommentsControl" partial View:

<%@ Control Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Comment>>" %>

<ul>
<% foreach (var comment in Model) { %>
    <li>
        <%= comment.Content %>
    </li>
<% } %>
</ul>

...

answered Jul 14, 2009 at 10:27

eu-ge-ne

28.2k6 gold badges73 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

littlegeek Over a year ago

+1 like this as it relives the view of doing things fits better with the pattern IMHO

griegs · Accepted Answer · 2009-07-13 22:58:38Z

0

In your view write something like this;

<% foreach (var question in Model.Questions) { %>

<%=question.bodyText%>

<%}%>

Hope this helps, if not post a comment and I'll be less cryptic.

answered Jul 13, 2009 at 22:58

griegs

22.8k33 gold badges132 silver badges208 bronze badges

5 Comments

griegs Over a year ago

Or, <% Html.Renderpartial("commentsControl", question); %>

Picflight Over a year ago

This means that I do not need to have my comments in a separate UserControl?

Picflight Over a year ago

How will I pass the Id of the Question so that I only get the comments associated with that question?

griegs Over a year ago

I think the best approach is to use a seperate user control for this. Take a look at my first comment for the RenderPartial. You could pass in the whole comments collection with say [question.comments] or you could render a partial control and pass in the id of the question. <% Html.RenderPartial("commentsControl", question.id);%>

griegs Over a year ago

Actually, I think you'll need to pass in the collection of comments to the control and not the question id. So you need to pass that model from your controller to the view. you can either write a custom model binder, which is quite easy, or simply create a class in your controller and pass that back to the view and then for each question pass the comments to the partial control.

Collectives™ on Stack Overflow

How to show nested data using MVC Views and PartialViews

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related