AJAX不更新局部视图 [英] AJAX not updating partial view

问题描述

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

I'm currently having difficulty using Ajax to update a partial view without having to refresh the whole page. I'm using MVC and entity framework to scaffold views.

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

I'll try and include as much as possible to help explain myself:

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

I have a div which is going to be used to hold a list view of all my comments

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

此div使用以下内容填充：

This div gets populated using the following:

<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（）方法我的控制器：

Which calls the BuildAnnouncementComment() method in my controller:

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

然后我有一个第二个div容器，用于容纳一个文本框用户输入一些应该然后使用Ajax替换呼叫更新 ContainAnnouncementComments 的信息：

I then have a second div container which is used to hold a text box for a user to enter some information which 'should' then update the ContainAnnouncementComments using Ajax replace call:

<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方法：

The Ajax method calls the AJAXCreate method in the controller:

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

从这里开始，我尝试创建一个新的评论，但是当提交，而不是更新partialView，所有正在显示的是部分视图。

From here, when running, I try to create a new comment, but when submitted, instead of the partialView being updated, all that is being displayed is the partialview.

不确定我是否已正确解释，如果我遗漏任何信息，请告诉我，我会相应更新。

Not sure if I've explained this properly so if i'm missing any information please let me know and i'll update accordingly.

推荐答案

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

After 3 hours of staring at my code I realised that nothing was actually wrong with the implementation and all that was wrong was I hadn't installed AJAX through the NuGet manager.

欢乐。

这篇关于AJAX不更新局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！