ASP.NET MVC 3 Adding comments in article view

Question

I have article model with public ICollection<Comment> Comments { get; set; } and comment model. I have created view for article (Details view) and I want to show everything from model article (not problem) and comments to article to and after comments then show form for adding comment to article (not in other page, I want it in the view with article). For now I have this:

@model SkMoravanSvitavka.Models.Article

@{
    ViewBag.Title = "Zobrazit";
}

<h2>Zobrazit</h2>

<fieldset>
    <legend>Article</legend>

    <div class="display-label">Title</div>
    <div class="display-field">@Model.Title</div>

    <div class="display-label">Text</div>
    <div class="display-field">@Model.Text</div>

    <div class="display-label">PublishedDate</div>
    <div class="display-field">@String.Format("{0:g}", Model.PublishedDate)</div>
</fieldset>

@if (Model.Comments != null)
{
    foreach (var comment in Model.Comments)
    {
        @Html.Partial("_Comment", comment)
    }
}



<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.ArticleID }) |
    @Html.ActionLink("Back to List", "Index")
</p>

It shows article and there is partial view for all comments to article. And now I am not sure how to add form for adding comments. Thank you

Edit: Here is my comment controller and create methods (vytvorit = create in czech :) ):

 public ActionResult Vytvorit(int articleID)
        {
            var newComment = new Comment();
            newComment.articleID = articleID; // this will be sent from the ArticleDetails View, hold on :).
           newComment.Date = DateTime.Now;
            return View(newComment);  
        } 

        [HttpPost]
        public ActionResult Vytvorit(Comment commentEntity)
        {
                db.Comments.Add(commentEntity);
                db.SaveChanges();
                return RedirectToAction("Zobrazit", "Clanek", new { id = commentEntity.articleID });
        }

When I change @Html.RenderAction to @Html.Action it works. It is showing textbox for comment and I can add comment but there is problem that it not just add textbox but it add my site again (not just partial view but all view) and I am sure I add Create view for comment as partial.

Answer 1

Create a new Partial view, make it a strongly typed one of type Comment.

from the scaffolding templates, choose "Create" template.

handle the normal add new scenario of the comment.

add this Partial view to the Article details page.

Note that when you are about to save a new comment, you will need to get the hosting Article ID.

Hope it's now clear, if not, let me know.

update: assuming that you will add the "AddComment" partial view to your "Article details" view, you can do the following in order to add the comment.

1- Modify the GET (Create) action inside your CommentController as the following:

public ActionResult Create(int articleID)
    {
            var newComment = new CommentEntity();
            newComment.articleID = articleID; // this will be sent from the ArticleDetails View, hold on :).

            return View(newComment);            
    }

1- make the POST (Create) action like this:

[HttpPost]
public ActionResult Create(Comment commentEntity)
{
    // Complete the rest..
}

2- The Partial view for the comment will look something like this:

@model NGO.Models.Comment

@using (Html.BeginForm())
        {            
            @Html.ValidationSummary(true)
            <div class="addcommentbox">
                <h2> Add Comment </h2>
                @Html.TextAreaFor(model => model.Description)
                <div class="ErrorMessage">
                @Html.ValidationMessageFor(model => model.Description)
                </div>                    
                <input id="addComment" type="button" onclick="" value="Add" />
            </div>

        }

3- inside the ArticleDetails page, in the desired place that you need the add comment section to show, use RenderAction method to render the AddComment Partial view like the following:

Html.RenderAction("Create", "Comment",new {articleID = Model.ID});

the previous line will call the GET(Create) action inside CommentColtroller and pass the current Article ID, so the AddComment Partial view will come already populated with the current Article ID (and this is what we want).

that's it, feel free to ask me if it's not clear yet, and do let me know if it worked for you