在 jquery.tmpl 模板中使用 MVC 助手

Question

我有一个简单的 foreach 模板，在每个元素内我想要一个 ActionLink，但 ActionLink 需要发送一个 Id 来编辑该元素。

要模板化的项目：

<div data-bind="template: {
                    name: 'postsTemplate',
                    foreach: posts
                    }">
</div>

模板：

<script id="postsTemplate" type="text/html">
<h2 data-bind="text: Title"></h2>

<p class="post-info">
    <p class="post-info" data-bind="text UserName"></p>
    <span data-bind="Body"></span>
    <p class="post-footer">
        @Html.ActionLink("Comments", "IndividualPost", "Post", null, null, "comments", new {id = })
    </p>
</p>
</script>

如何通过 ActionLink 发送实际的帖子 Id？我的意思是，如何在不使用数据绑定的情况下访问帖子的 id？ （因为它是一个帮手）。

Answer 1

如果您要按照以下方式实现您自己的 ActionLink 扩展：

public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText,
                                       string actionName, string controllerName,
                                       object routeValues,  bool noEncode)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var url = urlHelper.Action(actionName, controllerName, routeValues);

        if (noEncode) url = Uri.UnescapeDataString(url);

        var tagBuilder = new TagBuilder("a");

        tagBuilder.MergeAttribute("href", url);
        tagBuilder.InnerHtml = linkText;

        return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.Normal));
    }

那么您可以使您的模板如下所示：

<p class="post-info">
    <p class="post-info" data-bind="text UserName"></p>
    <span data-bind="Body"></span>
    <p class="post-footer">
        @Html.ActionLink("Comments (${CommentCount})", "IndividualPost", "Post", 
                         new {id = "${id}"}, true)
    </p>
</p>

生成的服务器端 html 看起来像：

<p class="post-info">
    <p class="post-info" data-bind="text UserName"></p>
    <span data-bind="Body"></span>
    <p class="post-footer">
       <a href="/Post/IndividualPost/${id}">Comments (${CommentCount})</a>
    </p>
</p>

在我看来，这又是一个完美的模板。

ActionLink 扩展的原因是正常的 Html.ActionLink 将您的 url 编码为 /Post/IndividualPost/%24%7Bid%7D 这不适用于模板

Answer 2

选项1：
- 您的帖子视图模型可能来自服务器，它可能包含链接。

{
title:'post title', 
commentsUrl:'/Indivdualpost/comments/123'
} 

在服务器上

 return new post { comment='post title', commentsUrl=Url.Action('Comments','Individualposts', new {id=1234}); }

，然后在模板中渲染评论网址：

 <a data-bind="attr: {href:commentsUrl}">comments</a>

选项2：
使用表单

<form id="frm" action="@Url.Action("Comments","IndividualPost")>
<input type="hidden" name="id" id="postid"/>
<!-- template stuff -->
</form>

和模板中的

<p class="post-footer">
    <a data-bind="click:function(){ $('#postid').val(${$id}); $('#frm').submit(); }">comments</a>
</p>

脚本（单击属性非常难看，应该使用绑定处理程序或视图模型函数进行改进（ http://www.knockmeout.net/2011/08/simplifying-and-cleaning-up-views-in.html））