如何创建动态部分视图的动态ajax.actionlink.
例如：
>我有一个页面会生成x个注释
>每个评论可以被投票或者下降(单独)
>投票数和投票数被计入一个整数
>每个注释div将有自己的ajax.actionlink
>每个ajax.actionlink将传递给控制器注释的ID
>控制器将计算总投票数,并调用部分视图以正确的ID显示回div.
我到目前为止做了什么
>我已经能够创建成功的ajax.actionlink
>这将称为控制人,并得票
>这将称为部分视图并显示投票
有什么问题
>我不想硬编码30-100不同的ajax.actionlinks来调用30-100个硬编码部分视图.
我如何能够动态地完成这项工作？
现有代码：
我的剃刀视图中的我的ajax.actionlink
@Html.Raw(Ajax.ActionLink("[replacetext]","VoteUp",new { UserPostID = @Model.Id },new AjaxOptions { HttpMethod = "POST",InsertionMode = InsertionMode.Replace,UpdateTargetId = "CountVote" }).ToHtmlString().Replace("[replacetext]","<img src=\"/Images/up_32x32.png\" />"))
我的div在同一个剃刀视图中显示从部分视图返回的结果.
<div id="CountVote" class="postvotes"></div>
我的控制器
public PartialViewResult VoteUp(int UserPostID)
{
try
{
UserVotes vote = new UserVotes();
vote.SubmitedVote = 1;
vote.UserId = Convert.ToInt32(Session["id"]);
vote.UserPostID = UserPostID;
ViewBag.SumVotes = postRepository.InsertUserPostVote(vote);
}
catch (Exception e)
{
xxx.xxx.xxxx().Raise(e);
}
return PartialView("_TotalVotes");
}
最后我的部分视图(_TotalVotes.cshtml)
@ViewBag.SumVotes
现在我的Viewpost主视图使用viewbag在循环中显示注释.
foreach (var item in (List<UserComment>)ViewData["Comments"])
{
CommentVote = "cv" + i.ToString();
<div class="postlinewrapper">
<div class="postvotesframe">
<div class="postvotes">
@Html.Raw(Ajax.ActionLink("[replacetext]","<img src=\"/Images/up_32x32.png\" />"))
</div>
<div id="@CommentVote" class="@CommentVote">0</div>
<div class="postvotes">
@Html.Raw(Ajax.ActionLink("[replacetext]","VoteDown","<img src=\"/Images/down_32x32.png\" />"))
</div>
</div>
<div class="postleftbar">
@Html.Raw(item.Comment)
</div>
<div class="postrightbar">
<div>
<div class="post_spec">
<div class="post_spec_title">Call Sign: </div>
<div class="post_spec_detail">@item.CallSign</div>
</div>
<div class="post_spec">
<div class="post_spec_title">When: </div>
<div class="post_spec_detail">@item.CommentDate.ToString("dd/MM/yyyy")</div>
</div>
</div>
<br />
<br />
</div>
</div>
i += 1;
}
public PartialViewResult VoteUp(int userPostId)
{
try
{
UserVotes vote = new UserVotes();
vote.SubmitedVote = 1;
vote.UserId = Convert.ToInt32(Session["id"]);
vote.UserPostID = userPostId;
ViewBag.SumVotes = postRepository.InsertUserPostVote(vote);
}
catch (Exception e)
{
xxxx.xxxx.xxxx().Raise(e);
}
return PartialView("_TotalVotes");
}
public PartialViewResult VoteDown(int userPostId)
{
try
{
UserVotes vote = new UserVotes();
vote.SubmitedVote = -1;
vote.UserId = Convert.ToInt32(Session["id"]);
vote.UserPostID = userPostId;
ViewBag.SumVotes = postRepository.InsertUserPostVote(vote);
}
catch (Exception e)
{
xxx.xxxx.xxxx().Raise(e);
}
return PartialView("_TotalVotes");
}
解决方法
尝试这样.
主视图
@model MyNamespace.CommentAndOtherStuff
<ul>
@foreach(item in Model.Comments)
{
<li>
<a href="@Url.Action("VoteUp","VoteControllerName",new { UserPostId = item.Id })"
class="vote-link"
data-id="@item.Id">@item.Votes</a><img src="vote.jpg" />
</li>
}
</ul>
你的控制器只返回一个叫做VoteResult的类作为JSON.
[HttpPost]
public ActionResult VoteUp(int UserPostID)
{
...
var model = new VoteResult
{
UserPostID = UserPostID,Votes = service.tallyVote(UserPostID)
};
return Json(model);
}
现在可以使用jQuery事件处理程序钩住所有这些,并设置一个AJAX调用
$(document).ready(function() {
$("a.vote-link").on("click",function(event) {
event.preventDefault();
var link = $(this); // the link instance that was clicked
var id = link.attr("data-id");
var url = link.attr("href");
$.ajax({
url: url,type: "post"
})
.done(function(result) {
// JSON result: { UserPostID: 1,Votes: 5 }
// replace link text
link.html(result.Votes);
});
});
});
但我想要一个部分视图html fagment.
[HttpPost]
public ActionResult VoteUp(int UserPostID)
{
...
var model = new VoteResult
{
UserPostID = UserPostID,Votes = service.tallyVote(UserPostID)
};
return PartialView("_TotalVotes",model);
}
_TotalVotes部分
@model MyNamespace.VoteResult
@if (Model.Votes < 0)
{
<span class="unpopular">@Model.Votes</span>
}
else
{
<span class="awesome">@Model.Votes</span>
}
并调整AJAX回调
.done(function(result) {
link.html(result);
});
现在你可以为链接片段编写一个帮助器,但是在我看来会混淆一些事情(这是一个判断呼叫).你所需要的只是你的javascript将绑定的类名和数据id.
