Question

I’ve been learning MVC3 in the last few weeks and I’m trying to write what I believe should be a simple enough piece of functionality, but I’m having real problems getting it to work correctly.

The scenario

My website will contain news posts, summarised on the home page, with links to view the full details of each article in it’s own page.

Comments can be made on each article, and these comments are shown at the end of each article’s details page. Authenticated users should be able to post their own comments to the article from the page that shows the article itself. I want to avoid users being taken to a seperate page (although I understand this is easier from a code perspective, I disagree that it’s a good UX!).

For an example of how I want this to look, Scott Hanselman’s blog (http://www.hanselman.com) is a perfect example (albeit that his home page shows the entire article rather than just a summary!) – it links through to the comments page, and the “Add comments” form sits neatly at the bottom, inline with the article.

Where I’m at so far

I’ve managed to write the Controller for my news section, with an Index method (which retrieves X number of most recent posts) and a “Comments” method to show the full article and comments. I’ve also created a partal view called “CommentForm” with it’s own Controller method. Code snippets from the controller below:

//
// GET: /News/ 
public ActionResult Index()
{
    using (var nm = new NewsManager())
    {
        var news = nm.GetLatestActiveNewsArticles(50, "System");
        return View(news);
    }
}
//
// GET: /News/Comments/20
public ActionResult Comments(int id)
{
    using (var nm = new Rapallo.Core.Managers.NewsManager())
    {
        var article = nm.GetArticle(id);
        return View(article);
    }
}
// GET: /News/CommentForm/20
[HttpGet()]
public ActionResult CommentForm(int newsId)
{
    return View(new Rapallo.DataAccess.Comment() { NewsId = newsId });
}
// 
// POST: /News/Comments/20
[Authorize()]
[HttpPost()]
public ActionResult Comments(Comment comment)
{
    using (var nm = new NewsManager())
    {
        var article = nm.GetArticle(comment.NewsId.Value);
        if (null == article) HttpNotFound();
    }
    using (var cm = new CommentManager())
    {
        if (cm.AddCommentToNews(comment.NewsId.Value, CurrentUser.RapalloUser.Id, comment.Body))
        return RedirectToAction("Comments", "News", new { id = comment.NewsId.Value });
    }
    return HttpNotFound();
}

And from the Comments view, the code snippet to show where I’d like my add comment form:

@if (User.Identity.IsAuthenticated)
{
    @Html.Partial("Comment", new Rapallo.DataAccess.Comment() { NewsId = Model.Id });
}

This view specifies:

@model Rapallo.DataAccess.News

And finally, the comment form itself:

@model Rapallo.DataAccess.Comment
@using (Html.BeginForm())
{ 
    @Html.TextAreaFor(m => m.Body);
    <input type="submit" value="Send Comment" />
}

The problem

In a nutshell, when I submit the comment form (which renders correctly), NewsId on the Comment model is not populated so the controller cannot associate the new comment with the correct news post.

I’d appreciate if someone could point out where I’m going wrong! I’ve tried to adapt some code from NerdDinner to make this work, as well as spending countless hours on the train trying various combinations of partial views, different models, and even renaming methods in my controller in an attempt to get this to work.

I’m quite keen on encapsulating the “add comment” functionality into it’s own separate form and being able to use this to add comments to more than just news articles. The database schema and domain models already support this, I just can’t get the UI to work.

Any help would be very welcome and gratefully received.

Answer 1

The simple answer is that you need to have a representation of the NewsId on your form for the model binder to find it. So, change your comment form to:

@model Rapallo.DataAccess.Comment
@using (Html.BeginForm())
{ 
    @Html.HiddenForm(m => m.NewsId);
    @Html.TextAreaFor(m => m.Body);
    <input type="submit" value="Send Comment" />
}