MVC 4 Updating a partial view from another partial

Question

I have a comment section set up on one of my pages. The parent view has a partial view which shows the comments for that ID and gives the option to display another partial view to post a comment. When someone post a comment I want the first partial view within the parent to refresh displaying the new comment.

Currently when you click Post Comment, the AddComment method is called and added to the database. I get an error saying that I am passing the wrong type of model to the view. It seems to be trying to pass the return value to my AddComment partial view instead of injecting it into Partent View Div.

Parent View

@model QIEducationWebApp.Models.Course

@{
    ViewBag.Title = "Course Details";
}

<h1 class="page-header">@ViewBag.Title</h1>


Javascript is here
.
.
.

<table class="table">

        DETAILS HERE

</table>


<ul id="view-options">
    <li>@Html.ActionLink("Back to Courses", "Index", "Course")</li>
</ul>

<input type="button" id="View" class="ShowComment" value="Show Comments"/>


<div id="CommentSection"/>

Partial View to view comments

Javascript is here
.
.
.

<div class="CommentSection">
    @foreach (var item in Model)
    {
        <div class="Comment">
            <div class="CommentText">
                @Html.DisplayFor(modelItem => item.CommentText)
            </div>
            <div class="CommentSep">
                <span class="Commenter">@Html.DisplayFor(modelItem => item.UserName)</span> - <span class="CommentDate">@Html.DisplayFor(modelItem => item.CommentDate)</span>
            </div> 
        </div>     
    }

    <input type="button" id="Post" class="AddComment" value="Add a Comment"/>
    <br />
    <br />
</div>

<div id="AddComment" />

    <br />
    <br />
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("ViewComments",
    new { courseID = @ViewBag.courseID, page }),
            PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
                new PagedListRenderOptions { MaximumPageNumbersToDisplay = 5, DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded, 
                DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded },
                new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "CommentSection" }))

Method behind the is partial view

public PartialViewResult ViewComments(int courseID, int? page = 1)
        {
            ViewBag.courseID = courseID;
            var coursecomments = db.CourseComments.Where(cc => cc.CourseID == courseID);
            int pageSize = 10;
            int pageNumber = (page ?? 1);
            return PartialView(coursecomments.OrderByDescending(cc => cc.CommentDate).ToPagedList(pageNumber, pageSize));
        }

Partial to Post Comment

Javascript is here
.
.
.

@using (Ajax.BeginForm("AddComment", "CourseComment", new { courseID = @ViewBag.courseID, userName = @User.Identity.Name },
    new AjaxOptions { UpdateTargetId = "CommentSection" }))
{
    @Html.ValidationSummary(true)

    <div class="NewComment">
        <div class="editor-field">
            @Html.TextAreaFor(model => model.CommentText, new { maxLength = 500 })
            @Html.ValidationMessageFor(model => model.CommentText)
        </div>
        <input type="submit" class="PostComment" value="Post Comment" />
        <div id="Counter" class="CommentCounter"/>
    </div>


}

Controller method linked to the Post Comment Ajax.BeginForm()

public PartialViewResult AddComment(CourseComment coursecomment, int courseID, String userName)
{
    coursecomment.CommentDate = System.DateTime.Now;
    coursecomment.CourseID = courseID;
    coursecomment.UserName = userName;
    if (ModelState.IsValid)
    {
        db.CourseComments.AddObject(coursecomment);
        db.SaveChanges();
    }

    ViewBag.courseID = courseID;
    return ViewComments(courseID);

}

Adding pictures

Details

After selecting View Comments button

After selecting Add Comment

After Posting the the comment I want the list of Comments to refresh displaying the newly added Comment. Like So

Answer 1

For now I have it changed. I wanted to the comments section to be hidden until the show comments was clicked. Then after posting a comment on the comments section was refreshed, but I couldn't get that to work. So just reloading the whole page will refresh the comments section, but make it hidden at that time. I made it so that the comments section shows by default without the option to hide it. So unless anyone can figure out a way to get it to work how I wanted, this works for now.