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

ASP.NET MVC Page not Updated when using AJAX

提问人:Dev 提问时间:9/26/2015 最后编辑:Amirhossein MehrvarziDev 更新时间:10/6/2015 访问量:1561

问:

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

该方法仅在我保存帖子而不是评论时启动(这是因为即使我成功保存页面也不会更新)。该方法根本没有被调用,这是因为我的页面没有更新。OnFailureOnSuccess

我正在使用 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>

我错过了什么,提前致谢。

ajax asp.net-mvc unobtrusive-javascript

评论

1赞 Alex Art. 9/27/2015
ajax.beginform 参数中不需要括号,它应该是OnSuccess = "postingSucceeded", OnFailure = "postingFailed"
0赞 Dev 9/28/2015
感谢@AlexArt指出这一点。但是更改代码后,我的问题没有解决
0赞 Mustafa ASAN 9/29/2015
您能分享一下您的部分观点吗?
0赞 Amirhossein Mehrvarzi 10/1/2015
@AlexArt。没有区别。
0赞 Mustafa ASAN 10/3/2015
@Dennis我需要看到_Posts.cshtml,你能分享吗

答:

4赞 Amirhossein Mehrvarzi 10/1/2015 #1

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

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

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

4赞 Mr. Robot Jr. 10/2/2015 #2

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

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

在回调功能上,尝试:

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

希望这有帮助!

2赞 Muhammad Usman 10/6/2015 #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);
}

希望这能奏效!