ASP.使用AJAX时，asp.net MVC页面未更新

ASP.NET MVC Page not Updated when using AJAX

本文关键字：MVC 更新 net asp 使用 AJAX ASP      更新时间：2023-09-26

我有一个ASP。. NET MVC项目，我想发布一篇文章到数据库，然后在页面上显示文章的片段。当用户发表评论时，我还希望在保存到数据库后显示评论。我使用AJAX，并在这两种情况下调用OnFailure和OnSuccess方法。

OnFailure方法只有在我保存帖子而不是评论时才会触发(这是因为即使我保存成功，页面也没有更新)。OnSuccess方法根本没有被调用，这是因为我的页面没有更新。

我使用jquery 2.1.4和有jquery。ajax脚本加载到我的项目

这是我的代码。

//创建post的视图

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

//My JavaScript file 

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

//要更新的View部分

<div id="big-posts">
        <span id="insertnewpostbelow"></span>
        @Html.Partial("_Posts", Model.Posts)
    </div>

我错过了什么，提前感谢。

您需要将返回的部分视图的内容放在页面的某个位置

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

回调函数try:

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

希望这对你有帮助!

这是因为在_Posts PartialView中有一个Ajax表单。在放置之后，比如在<span id="insertnewpostbelow"></span>之后，您需要运行jquery。不引人注目-ajax再次出现在页面上。

请注意，脚本将在页面加载时呈现，而不是在页面发生任何更改(如PartialView的更新)之后呈现。

解决方案:在页面更新后再次调用脚本:)

首先你不需要有括号

OnSuccess = "postingSucceeded()"
                            ^^^
OnFailure = "postingFailed()"
                         ^^^


OnSuccess = "postingSucceeded",
OnFailure = "postingFailed"

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

和javascript code out side $(document).ready(....) 

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

希望这将工作!

相关文章：