CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3jquery-templates
Justin
Justin

Reputation: 619

ASP.NET MVC ActionLink in jquery-tmpl template

I have a jquery-tmpl defined:

<script id="postTemplate" type="text/x-jquery-tmpl">
     <div class="div-msg-actions-inner">
          @Html.ActionLink("Edit", "Edit", "Post", new { postId = "${PostId}" }, new { @class = "button" })
          @Html.ActionLink("Reply", "Reply", "Post", new { topicId = "${TopicId}" }, new { @class = "button" })
     </div>
 </script>

The action link results in the "$" being encoded into "%24". Is there a way around this so the ID in my action link will get replaced correctly?

Upvotes: 2

Views: 4234

Answers (4)

Maziar Rezaei
Maziar Rezaei

Reputation: 190

Continue sending route value parameter the same, but Put this script in the end of your layout. it will replace all the ${propName} strings back in all templates in every page.

 $("script[type='text/x-jQuery-tmpl']").text(function (i, oldText) {
               return oldText.replace(/(%24%7B.+?%7D)&amp;/gi, "{$1}&")
                             .replace(/%24%7B(.+?)%7D/gi, "$${$1}");
});

Upvotes: 4

Click Ahead
Click Ahead

Reputation: 2852

One way you could achieve this is to skip the ActionLink Helper and use a simple HTML anchor tag e.g.

<a href='@Url.Content("~/Post/Edit/${PostId}")'>Post</a>
<a href='@Url.Content("~/Post/Reply/${TopicId}")'>Reply</a>

Not ideal I know but this worked for me.

Upvotes: 1

Robert Koritnik
Robert Koritnik

Reputation: 105029

Using Html.Raw with Url.Action

Have you tried using Html.Raw in combination with Url.Action? So instead of creating links with Html.ActionLink you rather generate regular HTML and don't encode URL of that particular link/anchor.

<a href="@Html.Raw(Url.Action("Edit", "Post", new { postId = "${PostId}"}, new { @class = "button" }))">Edit</a>

This should keep the template variable inside your template.

Using Html.Raw with Html.ActionLink

I suppose you've tried this:

@Html.Raw(Html.ActionLink("Edit", "Edit", "Post", new { postId = "${PostId}" }, new { @class = "button" }))

Upvotes: 0

Justin
Justin

Reputation: 619

@Html.ActionLink("Edit", "Edit", "Post", new { postId = "999" }, new { @class = "post-button", })
@Html.ActionLink("Reply", "Reply", "Post", new { topicId = "888" }, new { @class = "reply-button" })

...

$("#postTemplate").text($("#postTemplate").text().replace("999", "${PostId}"));
$("#postTemplate").text($("#postTemplate").text().replace("888", "${TopicId}"));

This is the solution I ended up using.

Upvotes: 2

Related Questions