Страница 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);
}
надеюсь, что это будет работать!