AJAX 不更新部分视图答案

【问题标题】：AJAX not updating partial viewAJAX 不更新部分视图
【发布时间】：2016-12-14 19:52:55
【问题描述】：

我目前在使用 Ajax 更新部分视图而无需刷新整个页面时遇到了困难。我正在使用 MVC 和实体框架来搭建视图。

我会尝试尽可能多地包括在内以帮助解释我自己：

我有一个 div 用于保存我所有 cmets 的列表视图

<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 容器，用于保存一个文本框，供用户输入一些“应该”然后使用 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()); 
        }

从这里开始，在运行时，我尝试创建一个新评论，但是在提交时，不是更新部分视图，而是显示的只是部分视图。

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

【问题讨论】：

您缺少 jquery-unobtrusive-ajax.js 文件，将其包含在主布局中
我已将包含在使用实体脚手架生成的 .cshtml 详细信息视图中。我只是没有在问题中包含它，对不起。我现在将更新以包含我所有的。
像<script src='@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")'></script> 那样做，因为如果视图位于嵌套目录中，url 可能会出错，请显示您的布局文件，您是否还有其他相关的 js 文件也加载为 jquery。 unobtrusive-ajax.min.js 可能有依赖关系
试过了，出现编译错误：意外字符？
查看更新的评论，试试这种方式

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

盯着我的代码看了 3 个小时后，我意识到实现实际上并没有什么问题，而唯一的问题是我没有通过 NuGet 管理器安装 AJAX。

欢乐。

【讨论】：