Question

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

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

我正在使用 jquery 2.1.4 并在我的项目中加载 jquery.unobtrusive-ajax 脚本

这是我的代码。

//查看创建帖子

 @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>

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

Answer 1

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

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

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

Answer 2

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

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

在回叫功能上尝试：

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

希望这有帮助！

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

希望这会有效！

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

3 个答案: