How to put a #Model string inside a html string - asp.net-mvc

How do I put a #Model string inside a html string?
<img src="/img/users/#Model.Short.jpg.ashx?width=80&height=80" width="80" height="80" alt="" />
The #Model.Short is the string I need to have as a part if the img src. The problem I have is that it gives an error as it thinks .jpg.ashx is a part of the #Model.Short and doesn't know that it should print that as it is.
The only thing I can think of now is to do this in JavaScript, but it would make more sense to have it "hardcoded" in the html.

Use parentheses:
<img src="/img/users/#(Model.Short).jpg.ashx?width=80&height=80" ... />

Related

Why I get error when I try to display image?

I work use asp.net mvc5 in my project.
I try to display Image stored in my Shared folder in the project:
<img src="#Url.Content(~/Views/Shared/logo.png)" alt="" />
But I get this error on the fly:
Compiler Error Message: CS1525: Invalid expression term '/'
Any idea why I get the error above?
#Url.Content helper needs string as a parameter so you should write like this:
<img src="#Url.Content("~/Views/Shared/logo.png")" alt="" />
or you can use single brackets
<img src='#Url.Content("~/Views/Shared/logo.png")' alt='' />

Render attribute content on condition

I need to conditionally define the content of an HTML 5 data attribute:
<img #(String.IsNullOrEmpty(prd.Reference)
? String.Format("data-title='{0}'", prd.Name)
: String.Format("data-title='{0}({1})'", prd.Name, prd.Reference)) />
When I run this code it is rendered as follows (when reference is not null):
<img data-title="'Product"/>
Sometimes even more strange result ... The Reference is missing.
Does anyone knows what am I missing?
Try with Html.Raw:
<img #Html.Raw((String.IsNullOrEmpty(prd.Reference)
? String.Format("data-title='{0}'", prd.Name)
: String.Format("data-title='{0}({1})'", prd.Name, prd.Reference)) />

h:graphicImage value tag parses spaces as +

i have a file name that contains spaces: bw3 - Copy_1340627264571.jpg
and i use this name to load the image as follows:
<h:graphicImage value="/#{myBean.imageFolder}/#{image.name}" width="30" height="30" style="border:0;"/>
this is translated to:
<img width="30" height="30" style="border:0;" src="/MyAPP/image/bw3+-+Copy_1340627264571.jpg">
while if i tried to print the name in outputText, it's printed correctly:
<h:outputText value="#{image.name}"/>
this is translated to:
<span id="myForm:viewImagesTable:0:_t68">bw3 - Copy_1340627264571.jpg</span>
any ideas how to fix that ?
This seems to be a bug in <h:graphicImage>. Spaces in request URI should be URL-encoded as %20 using java.net.URI and spaces in request query string should be URL-encoded as + using java.net.URLEncoder. It seems that <h:graphicImage> encodes the entire URI using java.net.URLEncoder.
Better replace them yourself beforehand:
<h:graphicImage value="/#{myBean.imageFolder}/#{image.name.replace(' ', '%20')}" />
Or, much better, don't allow spaces in filenames at all. When it concerns uploaded files, replace them by _ or something before saving.
Note that this has nothing to do with EL as your question tagging suggest.

Using Url.Content with semi-relative URL

I am storing the location of images in my database in an MVC application...but i am only storing part of the location. For example:
/headers/image1.jpg
/headers/image2.jpg
The images are actually stored in the following folder:
~/content/images/headers/image1.jpg
~/content/images/headers/image1.jpg
In my view, I want to do something like this:
<img src="#Url.Content("~/content/images") + Model.ImageUrl" />
How can I do this?
Just do it!
<img src="#Url.Content("~/content/images" + Model.ImageUrl)" />
UPDATE:
As of ASP.NET MVC 4 it is valid to use the tilde URLs directly in HTML as the Razor View Engine will parse the URLs. Like this:
<img src="~/content/images/#Model.ImageUrl" />
You can write extension method which combine your ImageUrl with configured path to content directory.
<img src="#Model.ImageUrl.ToRelative()" alt="#Model.ImageAlt" />
PS
Remember about alt tag. ;)

asp.net mvc returning an image in an iframe

what i want i want to return a complete image from the controller that is uploaded. i want to display the complete image returning as the part of iframe response. here is my view code to get the idea. can it be done? Currently it is returning a string that a file is uploaded or not?
<form action="<%= Url.Action("FileUpload", "Organization")%>" method="post" enctype="multipart/form-data" target="uploadresult" onsubmit="return showStatus()">
<input type="file" id="a" name="a" />
<iframe id="uploadResult" name="uploadresult" width="200" frameborder="0" height="100" onload="showResult();" style="visibility:hidden">
</iframe>
return new FileStreamResult(new FileStream(CompletePhysicalPath, FileMode.Open), "image/jpeg");

Resources