Страница ASP.NET MVC не обновляется при использовании AJAX

У меня есть проект ASP.NET MVC, где я хочу опубликовать статью в базе данных, а затем отобразить фрагмент статьи на странице. Когда пользователь комментирует, я также хочу отобразить комментарий после сохранения в базе данных. Я использую AJAX для этого и вызывать методы OnFailure и OnSuccess в обоих случаях.

Метод OnFailure запускается только при сохранении сообщения, а не комментария (это потому, что страница не обновляется, даже когда я успешно сохраняю). Метод OnSuccess не вызывается вообще, потому что моя страница не обновляется.

Я использую jquery 2.1.4 и jquery.unobtrusive-ajax script загружен в мой проект

Вот мой код.

//Просмотр для создания сообщения

 @using (Ajax.BeginForm("Create", "Post",
new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "insertnewpostbelow",
    InsertionMode = InsertionMode.InsertAfter,
    OnSuccess = "postingSucceeded()",
    OnFailure = "postingFailed()"
}))
 {
  //View code left out 
 }

//Серверная сторона для сохранения сообщения и обновления PartialView

 [HttpPost, ValidateAntiForgeryToken, ValidateInput(false)]
    public async Task<PartialViewResult> Create
        ([Bind(Include = "ID,Title,Message,PostedOn,isAbuse,By")] Post post)
    {
        if (ModelState.IsValid)
        {
            var list = new List<Post>();
            list.Add(post);

            try
            {
                db.Posts.Add(post);
                await db.SaveChangesAsync();

                return PartialView("_Posts", list);
            }
            catch (RetryLimitExceededException)
            {
                ModelState.AddModelError("", "Unable to login, please try again and contact administrator if the problem persists.");

                //If we got this far, model has errors.
                ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By);
                return PartialView("_Posts", post);
            }
        }

        //If we got this far, model has errors.
        ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By);
        return PartialView("_Posts", post);
    }

//Мой файл JavaScript

    function postingSucceeded() {
    alert("Posting succeeded.");
}

function postingFailed() {
    alert("Posting failured.");
}

//Порция представления для обновления

<div id="big-posts">
        <span id="insertnewpostbelow"></span>

        @Html.Partial("_Posts", Model.Posts)
    </div>

Что я упускаю, спасибо заранее.

Ответ 1

Это потому, что у вас есть форма Ajax в _Posts PartialView. После размещения, скажем, после <span id="insertnewpostbelow"></span> вам нужно снова запустить jquery.unobtrusive-ajax на странице.

Обратите внимание, что сценарии будут отображаться при загрузке страницы, а не после любых изменений на странице (например, обновления PartialView).

Решение: снова вызовите script после обновления страницы:)

Ответ 2

Вам нужно разместить содержимое возвращенного частичного представления где-нибудь на странице

<div id="big-posts">
   <span id="insertnewpostbelow"></span>
   <div id="newPost"></div>
</div>

В функции обратного вызова попробуйте:

function postingSucceeded(data) {
    $("#newPost").html(data);
}

Надеюсь, это поможет!

Ответ 3

Во-первых, вам не нужно иметь круглую скобку

OnSuccess = "postingSucceeded()"
                            ^^^

OnFailure = "postingFailed()"
                         ^^^

просто

OnSuccess = "postingSucceeded",
OnFailure = "postingFailed"

и теперь HTML-код

<div id="big-posts">
   <span id="insertnewpostbelow"></span>
   <div id="AppendPostsHere"></div>
</div>

и javascript код вне $(document).ready(....)

function postingSucceeded(newPosts) {
    $("#AppendPostsHere").html(newPosts);
}

надеюсь, что это будет работать!