I have a comment section created on one of my pages. The parent view has a partial view that shows comments for this identifier and makes it possible to display another partial view for posting a comment. When someone posts a comment, I want the first partial view of the parent element to be updated to reflect the new comment.
Currently, when you click 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 you are trying to pass the return value to my partial AddComment, instead of injecting it into the 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" }))
Partial View Method
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)); }
Partly for comments
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 associated with 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 Images
More details
After selecting the "View Comments" button
After selecting Add Comment
After posting a comment, I want the comment list to be updated to display the recently added comment. How so