AJAX没有更新部分视图

时间:2016-12-14 19:52:56

标签: javascript jquery ajax asp.net-mvc

我目前无法使用Ajax更新部分视图而无需刷新整个页面。我使用MVC和实体框架来构建视图。

我会尝试尽可能多地帮助解释一下自己:

我有一个div,用于保存我所有评论的列表视图

<div id="ContainAnnouncementComments"> </div>

使用以下内容填充此div:

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Custom_Scripts/BuildAnnouncement.js"></script>
    @Scripts.Render("~/bundles/jqueryval")

$(document).ready(function () {
        $.ajax({
            url: '/Comments/BuildAnnouncementComment',
            data: { AnnouncementId: @Model.AnnouncementId},
            success: function (result) {
                $('#ContainAnnouncementComments').html(result);
            }
        });
    });

在我的控制器中调用BuildAnnouncementComment()方法:

 public ActionResult BuildAnnouncementComment(int? AnnouncementId)
        {
            return PartialView("_AnnouncementComment", db.Comments.ToList().Where(x => x.AnnouncementId == AnnouncementId));
        }

然后我有一个第二个div容器,用于容纳一个文本框供用户输入一些信息,这些信息应该是&#39;然后使用Ajax替换调用更新ContainAnnouncementComments

<div id="ContainAnnouncementCommentCreate">

        @using (Ajax.BeginForm("AJAXCreate", "Comments", new { announcementId = Model.AnnouncementId }, new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "POST",
            UpdateTargetId = "ContainAnnouncementComments"
        }))

        {
            <div class="form-group">
                @Html.AntiForgeryToken()

                <div class="col-md-10">
                    @Html.EditorFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
                </div>
            </div>
        }

    </div>

Ajax方法在控制器中调用AJAXCreate方法:

 public ActionResult AJAXCreate(int announcementId, [Bind(Include = "CommentId, Message")] Comment comment)
        {
            if (ModelState.IsValid)
            {
                comment.UserId = User.Identity.GetUserId();
                comment.AnnouncementId = announcementId; 
                db.Comments.Add(comment);
                db.SaveChanges();
            }

            return PartialView("_AnnouncementComment", db.Comments.ToList()); 
        }

从这里开始,我尝试创建一个新的评论,但是在提交时,而不是更新的部分视图,显示的所有内容都是部分视图。

我不确定我是否正确解释了这一点,所以如果我遗漏了任何信息,请告诉我,我会相应更新。

1 个答案:

答案 0 :(得分:0)

经过3个小时的盯着我的代码后,我意识到实现没有任何问题,所有错误的是我没有通过NuGet管理器安装AJAX。

乐趣。