带有部分视图的 Ajax 部分更新在 ASP.NET MVC2 中不起作用
我在尝试让部分更新在 ASP.NET MVC2 中工作时遇到了一些麻烦。 (我认为)我非常仔细地遵循了网上找到的教程,但 Ajax 部分不起作用。控制器执行它应该执行的操作,没有错误,但页面不会自行更新。当我刷新页面时,我可以看到我的操作结果。
下面是应该自我更新的用户控件的代码:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Ideas.Models.Comment>" %> <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script type="text/javascript">
function AnimateVotebox() {
$("#commentbox").animate({ fontSize: "1.5em" }, 400);
}
</script> <div id="commentbox">
<div class="display-label">
<i><%: Html.ActionLink(Model.User1.UserName, "Details", "User", new { id = Model.User1.LoweredUserName.Replace(' ', '-') }, null)%> zegt:</i>
</div>
<div class="display-label"><%:Model.text %></div>
<% bool canPost = Ideas.Helpers.UserHelper.CanPost(HttpContext.Current); %>
<% if (Model.CommentVotes.Count != 0) %>
<% { %>
<div class="display-label"><%= Html.Encode(Model.UpVotes)%> van de
<%= Html.Encode(Model.Votes)%> gaan akkoord.</div>
<% if (canPost)
{ %>
<% if (Model.HasVoted((Guid)Membership.GetUser(Context.User.Identity.Name).ProviderUserKey) < 0) %>
<% { %>Stem:
<%= Ajax.ActionLink("-", "VoteComment", "Votes",
new { id = Model.id, up = false },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<%= Ajax.ActionLink("+", "VoteComment", "Votes",
new { id = Model.id, up = true },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<% } %>
<% else %>
<% { %>Wijzig stem:
<% if (Model.HasVoted((Guid)Membership.GetUser(Context.User.Identity.Name).ProviderUserKey)
== 0) %>
<% { %>
<%= Ajax.ActionLink("-", "ChangeCommentVote", "Votes",
new { id = Model.id, up = false },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<p style="color:gray; font-size:20;"">+</p>
<% } %>
<% else %>
<% { %>
<p style="color:gray; font-size:20;"">-</p>
<%= Ajax.ActionLink("+", "ChangeCommentVote", "Votes",
new { id = Model.id, up = true },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<% } %>
<% } %>
<% } %>
<br />
<% } %>
<% else %>
<% { %>
<div class="display-label">Nog geen stemmen</div><br />
<% if (canPost)
{ %>
Stem: <%= Ajax.ActionLink("-", "VoteComment", "Votes",
new { id = Model.id, up = false },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<%= Ajax.ActionLink("+", "VoteComment", "Votes",
new { id = Model.id, up = true },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<% } %>
<% } %>
<% if (HttpContext.Current.User.IsInRole("Moderator") || HttpContext.Current.User.IsInRole("Administrator"))%>
<% { %>
<%: Html.ActionLink("Geef probatie...", "ProbateUser", "Mod", new { comment = Model.id }, null) %>
<%: Html.ActionLink("Verwijder...", "BanUser", "Mod", new { comment = Model.id }, null) %>
<% } %>
</div>
请注意,如果我不使用 jQuery,也会出现问题。
这是控制器:
[UserAuthorize]
[Authorize]
public ActionResult VoteComment(int id, bool up)
{
Comment comment = crep.GetComment(id);
CommentVote vote = new CommentVote();
vote.isup = up;
vote.user = (Guid)Membership.GetUser(User.Identity.Name).ProviderUserKey;
comment.CommentVotes.Add(vote);
crep.Save();
return PartialView("CommentUserControl", crep.GetComment(id));
}
[UserAuthorize]
[Authorize]
public ActionResult ChangeCommentVote(int id, bool up)
{
Comment comment = crep.GetComment(id);
CommentVote vote = comment.CommentVotes
.Where(v => v.user == (Guid)Membership.GetUser(User.Identity.Name).ProviderUserKey
&& v.comment == id).SingleOrDefault();
vote.isup = up;
crep.Save();
return PartialView("CommentUserControl", crep.GetComment(id));
}
不知道这是否重要,但是用户控件加载到一个视图中,该视图链接到与上面的控制器不同的控制器。 ActionLinks 工作正常,并触发 VotesController 上的操作。
I've ran into some trouble trying to get partial updates to work in ASP.NET MVC2. (I think) I followed the tutorials I found online pretty closely, but the Ajax part isn't working. The controller does what it's supposed to do without errors, but the page doesn't update itself. When I refresh the page I can see the result of my action though.
Here is the code for the user control that's supposed to update itself:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Ideas.Models.Comment>" %> <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script type="text/javascript">
function AnimateVotebox() {
$("#commentbox").animate({ fontSize: "1.5em" }, 400);
}
</script> <div id="commentbox">
<div class="display-label">
<i><%: Html.ActionLink(Model.User1.UserName, "Details", "User", new { id = Model.User1.LoweredUserName.Replace(' ', '-') }, null)%> zegt:</i>
</div>
<div class="display-label"><%:Model.text %></div>
<% bool canPost = Ideas.Helpers.UserHelper.CanPost(HttpContext.Current); %>
<% if (Model.CommentVotes.Count != 0) %>
<% { %>
<div class="display-label"><%= Html.Encode(Model.UpVotes)%> van de
<%= Html.Encode(Model.Votes)%> gaan akkoord.</div>
<% if (canPost)
{ %>
<% if (Model.HasVoted((Guid)Membership.GetUser(Context.User.Identity.Name).ProviderUserKey) < 0) %>
<% { %>Stem:
<%= Ajax.ActionLink("-", "VoteComment", "Votes",
new { id = Model.id, up = false },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<%= Ajax.ActionLink("+", "VoteComment", "Votes",
new { id = Model.id, up = true },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<% } %>
<% else %>
<% { %>Wijzig stem:
<% if (Model.HasVoted((Guid)Membership.GetUser(Context.User.Identity.Name).ProviderUserKey)
== 0) %>
<% { %>
<%= Ajax.ActionLink("-", "ChangeCommentVote", "Votes",
new { id = Model.id, up = false },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<p style="color:gray; font-size:20;"">+</p>
<% } %>
<% else %>
<% { %>
<p style="color:gray; font-size:20;"">-</p>
<%= Ajax.ActionLink("+", "ChangeCommentVote", "Votes",
new { id = Model.id, up = true },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<% } %>
<% } %>
<% } %>
<br />
<% } %>
<% else %>
<% { %>
<div class="display-label">Nog geen stemmen</div><br />
<% if (canPost)
{ %>
Stem: <%= Ajax.ActionLink("-", "VoteComment", "Votes",
new { id = Model.id, up = false },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<%= Ajax.ActionLink("+", "VoteComment", "Votes",
new { id = Model.id, up = true },
new AjaxOptions { UpdateTargetId = "commentbox", OnSuccess = "AnimateVotebox" }, null)%>
<% } %>
<% } %>
<% if (HttpContext.Current.User.IsInRole("Moderator") || HttpContext.Current.User.IsInRole("Administrator"))%>
<% { %>
<%: Html.ActionLink("Geef probatie...", "ProbateUser", "Mod", new { comment = Model.id }, null) %>
<%: Html.ActionLink("Verwijder...", "BanUser", "Mod", new { comment = Model.id }, null) %>
<% } %>
</div>
Note that if I don't use jQuery the problem occurs as well.
And here's the controller:
[UserAuthorize]
[Authorize]
public ActionResult VoteComment(int id, bool up)
{
Comment comment = crep.GetComment(id);
CommentVote vote = new CommentVote();
vote.isup = up;
vote.user = (Guid)Membership.GetUser(User.Identity.Name).ProviderUserKey;
comment.CommentVotes.Add(vote);
crep.Save();
return PartialView("CommentUserControl", crep.GetComment(id));
}
[UserAuthorize]
[Authorize]
public ActionResult ChangeCommentVote(int id, bool up)
{
Comment comment = crep.GetComment(id);
CommentVote vote = comment.CommentVotes
.Where(v => v.user == (Guid)Membership.GetUser(User.Identity.Name).ProviderUserKey
&& v.comment == id).SingleOrDefault();
vote.isup = up;
crep.Save();
return PartialView("CommentUserControl", crep.GetComment(id));
}
Don't know if this matters, but the usercontrol is loaded inside a view that's linked to a different controller than the one above. The ActionLinks work fine though and trigger actions on the VotesController.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我没有看到你的 ajax 调用,但是从你的第一个代码块下的小片段来看,我假设你正在使用 jQuery。在添加“cache: false”标志之前,我发现 IE 显示 ajax 回调的更改存在问题。我想如果这不是问题,那么所有浏览器都会发生这种情况吗?也许也显示你的 ajax 调用。
I don't see your ajax call, but from the little snippet under your first code block I assume you are using jQuery. I was seeing problems with IE showing changes from an ajax callback until I added the "cache: false" flag. I guess if this isn't the problem, does it happen in all browsers? Maybe show your ajax call also.
为了调用部分更新并调用控制器操作,我像这样使用 jQuery
,然后更新内容。
我确实在 IE 显示新内容时遇到了问题,因为我在包含我正在更新的数据的选项卡上有缓存:true,所以浏览器只缓存旧值并且不显示新值,刷新时除外
To call partial update and invoke controller action i use jQuery like this
and update the content afterwards.
And i did have a problem with IE showing the new content, cause i had cache:true on tabs that contained the data i was updating so browser just cached the old value and didn't show the new one, except on refresh