AJAX not updating partial view

Question

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:

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

<div id="ContainAnnouncementComments"> </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);
            }
        });
    });

Which calls the BuildAnnouncementComment() method in my controller:

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

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>

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

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.

Answer 1

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.

Joys.