asp.net-mvc-4 – 具有动态部分视图创建的MVC Ajax

如何创建动态部分视图的动态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");
        }

现在所有这些代码都适用于1个ajax调用,但是我需要的是动态地显示单独的div的单独的ajax调用.

解决方法

主视图

我假设你有一个具有集合属性的模型评论项目的评论

@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.

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!