Using MVC Helpers in jquery.tmpl Templates

Question

I have a simple foreach template and inside each element I want ActionLink, but ActionLink needs to send an identifier to edit the element.

The item to be scheduled:

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

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 Id message via ActionLink? I mean, how can I access the message id without using data binding? (Because it's an assistant).

Answer 1

If you use your own ActionLink extension line by line:

 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 can make your template as follows:

 <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 created server html will look like this:

 <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 the perfect template in my opinion.

The reason for the ActionLink extension is that the regular Html.ActionLink encodes your URL /Post/IndividualPost/%24%7Bid%7D , which does not work for the template

Answer 2

Option 1: - Probably your message viewer model may come from the server, it may contain a link.

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

on server

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

and then render the comment url in the template:

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

option 2: script using 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 rather ugly, it should be improved using the binding handler or the viewmodel function ( http://www.knockmeout.net/2011/08/simplifying-and-cleaning-up-views-in.html ))