Use MVC helpers inside jquery.tmpl templates

Question

I have a simple foreach template and inside every element I want an ActionLink but that ActionLink needs to send an Id to edit the element.

The item to be templated:

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

The template:

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

How can I send the actual post Id through the ActionLink? I mean, How I can access to the post's id without using data-bind? (Because it's a helper).

Is Post part of your view model? If yes, can't you say `id= @model.Post.Id`? — Mrchief, Aug 08 '11 at 22:01
Posts is an IEnumerable and then serialized to javascript, so "posts" is an observableArray. I can't do what you say. — Jesus Rodriguez, Aug 08 '11 at 22:11

Major Byte · Accepted Answer · 2011-08-24T08:41:24.267

If you would implement your own ActionLink extension along the line of:

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));
    }

Then you could make your template like:

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

the serverside html generated would then look like:

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

which in turn is a perfect template in my opinion.

The reason for an ActionLink extension is the fact that the normal Html.ActionLink encodes your url to /Post/IndividualPost/%24%7Bid%7D which doesn't work for the template

Great solution! url = Uri.UnescapeDataString(url) will convert the url to lowercases so jquery tmpl will only work for lowercase variables. url = HttpUtility.UrlDecode(url) wont convert it to lowercase. — Bas, Feb 17 '12 at 16:28

score 1 · Answer 2 · edited Jul 05 '12 at 01:05

1

option 1: - your posts viewmodel is probably coming from the server, it could contain the link.

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

on the server

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

and then render the comments url in the template:

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

option 2: script using a form

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

and in the template

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

(the click attribute is quite ugly, should be improved using a binding handler or a viewmodel function ( http://www.knockmeout.net/2011/08/simplifying-and-cleaning-up-views-in.html ))

edited Jul 05 '12 at 01:05

JRoughan

1,635
12
32

answered Aug 08 '11 at 23:08

Martijn

1,440
11
18

Not bad but is just a workaround. I need the link title to be "Comments " + CommentsCount so I need to concat a string with a post property. So your solution doesnt work. Maybe knockout is still young. – Jesus Rodriguez Aug 08 '11 at 23:34
Well, for the other things I can use ${CommentsCount} but would be good use that too for the parameter ;( – Jesus Rodriguez Aug 08 '11 at 23:44
You have choice to make, build you're post-info on the server or on the client. On the client is possible providing the url in the json. The title and the count can also be added using databiding,
() But rendering on the server using razor is also not a bad idea ;-)
– Martijn Aug 09 '11 at 06:48

Use MVC helpers inside jquery.tmpl templates

2 Answers2

Linked