提问人:Dev 提问时间:9/26/2015 最后编辑:Amirhossein MehrvarziDev 更新时间:10/6/2015 访问量:1561
ASP.NET 使用 AJAX 时 MVC 页面未更新
ASP.NET MVC Page not Updated when using AJAX
问:
我有一个 ASP.NET MVC 项目,我想将一篇文章发布到数据库,然后在页面上显示该文章的片段。当用户发表评论时,我还希望在保存到数据库后显示评论。我为此使用 AJAX,在这两种情况下都使用 call 和方法。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>
我错过了什么,提前致谢。
答:
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);
}
希望这能奏效!
评论
OnSuccess = "postingSucceeded", OnFailure = "postingFailed"