MVC 4更新使用Ajax.BeginForm另一部分观点的局部视图（）视图、局部、观点、部分

2023-09-10 14:47:45 作者：沉沦

我有建立在我的网页之一注释部分。父视图有一个局部图，显示了该ID的意见，并给出了显示另一部分观点发表评论的选项。当有人发表评论，我想家长之内的第一个局部视图刷新显示新的注释。

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.

目前，当您点击发表评论，该AddComment方法被调用，并添加到数据库中。我得到一个错误，说我传递了错误类型的模型到视图。这似乎是试图通过将其注入到Partent查看Div的返回值来我AddComment局部视图来代替。

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.

父视图

@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>


}

链接到张贴评论Ajax.BeginForm控制方法（）

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);

}

添加图片

详细信息

点击查看评论按钮后

选择添加评论后

发布的评论后，我想评论列表刷新显示新添加的注释。像这样

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