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

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 中有一个 Ajax 表单PartialView。放置之后，例如，<span id="insertnewpostbelow"></span>需要在页面上再次运行jquery.unobtrusive-ajax后。

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

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