Concatenate string for @Url.Content with in the Underscore.js template

Question

I am unable to prepare string url for @Url.Content method.

Here is my block of code from Underscore template

 <%  var imgId = "~/Content/images/" +pocket.get('imageId'); %>   
        <div class="image1">       
            <% alert(imgId); %>         
            <img src= "@Url.Content("+<% imgId %>+")"  alt="Assigned Details" />

I'll pass the "imageId" through pocket object.

I tried using following approach as well. Getting compilation error for imgId variable

<img src= "<%= @Url.Content(string.Format("~/Content/Images/{0}", imgId)) %>" />

Community · Accepted Answer · 2017-05-23 12:29:39Z

0

Solution: Finally I figured out the solution from another thread: Call js function from underscore template 1. js function

<script type="text/javascript">
var fullPath = '@HttpContext.Current.Request.Url.Scheme://@HttpContext.Current.Request.Url.Authority';
function GetPath(url) {
    return fullPath + url;
}

call js from your code: <img src= '<%= GetPath(imgId) %>' alt="Med Assigned" />

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered May 16, 2012 at 1:35

Ramesh Tamma

131 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3335966 · Accepted Answer · 2015-09-01 13:45:10Z

0

You use <% ... %> to evaluate some JavaScript in an Underscore template but you use <%= ... %> if you want the output to end up in the result; from the fine manual:

Template functions can both interpolate variables, using <%= … %>, as well as execute arbitrary JavaScript code, with <% … %>.

You're looking to interpolate the imgId value into the result so you want this:

<img src= "@Url.Content("+<%= imgId %>+")"  alt="Assigned Details" />

Simplified Demo: http://jsfiddle.net/ambiguous/9gyKC/

Presumably @Url.Content is something that gets run on the server to produce a src attribute for a given resource. If that's the case then you'll have to rethink how this works; the <%= ... %> stuff happens in the browser after @Url.Content has been executed so it will be too late when the Underscore template runs. Your note about an imgId error with this:

<img src= "<%= @Url.Content(string.Format("~/Content/Images/{0}", imgId)) %>" />

supports this theory. Your server code doesn't know what imgId is, only the client-side JavaScript does.

edited Sep 1, 2015 at 13:45

user3335966

2,7494 gold badges32 silver badges33 bronze badges

answered May 8, 2012 at 1:44

mu is too short

436k71 gold badges863 silver badges822 bronze badges

4 Comments

Ramesh Tamma Over a year ago

Even though it prints out, if you include inside <img>/src tag it's not picking the value. src= + <%= imgId %> +

mu is too short Over a year ago

@RameshTamma: What is @Url.Content and when does it get executed? Does it get executed on the server?

Ramesh Tamma Over a year ago

I am trying to resolve the URL using @Url.Content, it's Razor syntax and we can embed with in the client syntax.

mu is too short Over a year ago

@RameshTamma: But @Url.Content and <%= imgId %> are being evaluated in different places at different times so you can't mix them like that. The Razor stuff is evaluated before Underscore gets to the template.

Collectives™ on Stack Overflow

Concatenate string for @Url.Content with in the Underscore.js template

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related