In the website I'm creating, I'm trying to store a URL to an uploaded image into my model and calling to it in the view. So when I type out the file path in the source for the HTML, it works fine.
<dd><img src="~/uploads/image.jpg" alt="ASP.NET" style="width:350px;height:260px" />
</dd>
But if I try to call from the model, the URL gets messed up.
#string imagePath = "~/uploads/" + Model.Picture;
<dd><img src=#imagePath alt="ASP.NET" style="width:350px;height:260px" />
</dd>
That code links to "http://localhost:60847/Controller/Details/~/uploads/image.jpg" . Could someone explain to me why it's working differently? Thank you.
You are missing quotes around the src property value. Also make sure you use the Url.Content helper method to get the correct path. You may pass "~" to this method to get the correct path to your app root.
#{ string imagePath = Url.Content("~/uploads/" + Model.Picture); };
<img src="#imagePath" alt="ASP.NET" style="width:350px;height:260px" />
Or even a single liner without the variable
<img src="#Url.Content("~/uploads/" + Model.Picture)" />
Related
I have tried for more than two hours and I can not find an answer to this problem. I have this part of the code in a view strongly typed in MVC:
<td>
#foreach (var TitleBook in Directory.GetFiles(Server.MapPath("~/App_Data/Images"), "*.jpg"))
{
var fileName = Path.GetFileName(TitleBook);
if (Convert.ToInt32(fileName.Substring(0,3)) == item.IdBook)
{
<img src="#TitleBook" alt="Alternate Text" height="100" width="100">
}
}
</td>
The name of the image file is created so the three first characters in the filename are numbers.
When I run the code, I get the alternate message for the image in the hmtl view. However, the path to this image is well read and I know it because I can obtain it by doing inspect in the browser and calling only the src part of in another window which shows the image as expected (sorry for my English). The css is handled by the version of boostrap installed in VS2017.
Could someone point to my error here?
Your titleBook is a full physical path. But <img> wants an URL.
Untested:
<img src="~/App_Data/Images/#fileName" alt="Alternate Text" height="100" width="100">
BTW: with Directory.GetFiles(..., $"{item.IdBook:D3}*.jpg")) you wouldn't need the foreach loop.
So, I'm currently new to Umbraco and I'm following some tutorial videos on umbraco.tv. I have created my template and is currently using it to setup the Home Page for my website. I have all the front end working and its displaying properly.
My problem is on the images. I'm using a lot of images for my website and I'm trying to link it to content so the images can be easily changed(not sure if I'm making sense).
Navigation bar image
If you click the link above, that's how my current navigation bar look like. I want to be able to change the LOGO using Umbraco's media picker. However, everytime I do so, it either gives me the alt name or a runtime error.
This is the code for the image on the template.
<img src="#Umbraco.Field("navigationLogo")" height="100" width="50" alt="Logo">
I'd appreciate it if you can help me. I'm not sure if I've explained it properly so feel free to ask in detail. Thanks!
Edit -----
I am only coding on browser since it doesn't allow me to login to pull the codes locally (only on trial version since I'm just testing out if its a good CMS).
Not sure if I'm doing it correctly so I apologize. I wrote my code like this
#{
var navigationLogo = #Umbraco.AssignedContent.Site().GetPropertyValue("navigationLogo");
var navigationLogoMediaItem = #Umbraco.TypedMedia(navigationLogo);
<img src="#navigationLogoMediaItem.Url" height="100" width="50" alt="Logo" />
}
It's giving me the following error so far.
Compiler Error Message: CS1061: 'Umbraco.Web.UmbracoHelper' does not contain a definition for 'AssignedContent' and no extension method 'AssignedContent' accepting a first argument of type 'Umbraco.Web.UmbracoHelper' could be found (are you missing a using directive or an assembly reference?
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "WebBase.cshtml";
string navigationLogoMediaItem = "";
if (Model.Content.HasValue("navigationLogo"))
{
navigationLogoMediaItem = Model.Content.GetPropertyValue<IPublishedContent>("navigationLogo").Url;
}
}
<img src="#navigationLogoMediaItem" height="100" width="50" alt="Logo" />
you can try this
I'm going to make a few assumptions so please bear with me here.
Assumption 1) On your home node (assuming a document type of 'home") you have a property on it called "navigationLogo".
Assumption 2) This is a media picker data type
Assumption 3) You are using Umbraco 7.6 or newer.
Assumption 4) You aren't using Models Builder
So, assumptions in place there are a few steps you need to go through.
1) Get the navigation logo where ever you are in the site.
var navigationLogo = #Umbraco.AssignedContent.Site().GetPropertyValue("navigationLogo");
2) next, you'll need to get the media item as I belive you will only have a UDI at this stage.
var navigationLogoMediaItem = #Umbraco.TypedMedia(navigationLogo);
3) You'll want to put a null check in at this point but to get the url of the logo you simple need to do this:
<img src="#navigationLogoMediaItem.Url" height="100" width="50" alt="Logo" />
That should get you what you are after. :-)
You can simply try out this code.
memberImage is your document type field name
#{
var image = Umbraco.TypedMedia(#Umbraco.Field("memberImage").ToString());
<img src="#image.Url" style="max-width:250px">
}
I have an ASP.NET MVC app. I am using Razor in my views. Due to my IT dept. the app sits at a relative root like http://ourdomain.com/appRoot instead of at the top of the domain like http://ourdomain.com. The other challenge here is, appRoot is not static. It actually changes. For that reason, I need to get the name of the relative root via Razor. Currently, I have something like the following:
<input id="hiddenElem" type="hidden" value="12345" />
<script type='text/javascript'>
function doThis() {
var id = $('#hiddenElem').val();
var nextUrl = '#(Request.?)' + '/path/' + id;
alert(nextUrl);
}
</script>
When doThis is called, I want to see the alert window to display /appRoot/path/12345. What do I put into the Razor block associated with nextUrl to get the relative root?
Generally you would use the mvc routing function Url.Action().
function doThis() {
var id = $('#hiddenElem').val();
var nextUrl = '#Url.Action("MyAction","MyController")' + '/path/' + id;
alert(nextUrl);
}
The Html.ResolveUrl() function is fine for resolving relative paths, however, it does not take into consideration routing.
Also, using the Url.Content() function may produce a result you are expecting. For example, in the snippet below:
.Template("<img src='"+ #Url.Content("~/Images/Icons/16/STATE.png")+"'/> <mark>${data.StateName }</mark>");
The image will always resolve no matter where you are calling it from or how you accessed the view withing the root.
What is the correct way to obtain the URLs of children of the current node while using Umbraco 4.11 in MVC mode? This is what I tried and it keeps returning a blank URL:
#if (CurrentPage.Children().Count() > 0) {
<ul>
#foreach (var child in CurrentPage.Children()) {
<li>#child.Name</li>
}
</ul>
}
When that didn't work I resorted to the following:
#Umbraco.NiceUrl(child.Id)
This returns a URL, but it has .aspx extension on it. So my next hack is...
#Umbraco.NiceUrl(child.Id).Replace(".aspx", "")
That's not completely terrible, but I'm wondering if I'm missing something?
You need the NiceUrl() method to generate a valid Url.
To get rid of the .aspx extension, you need to set the setting "umbracoUseDirectoryUrls" to true in your web.config file:
<add key="umbracoUseDirectoryUrls" value="true" />
I can't add this as a comment, but there is a way to remove trailing slashes, in umbracoSettings.config:
<addTrailingSlash>true</addTrailingSlash>
Other way to get Only Node Name (Without .aspx) is
#Model.NodeById(#child.Id).urlName
But it will just give Node name without "/"
How can I create a dynamic url to display an image?
I am creating a web page that lists search results of products and their associated images.
I tried using Url.Content, but it does not format the url correctly.
Code I created:
<img src="../../Images/<%: product.PicFileName %>" alt="photo" />
Html that was output:
<img src=".. ..="" Images="" nopic.jpg="" alt="photo" ="">
I also tried creating a helper method but it created the exact same output:
public static string GetPicUrl(string picFileName)
{
string picUrl = "../../" + picFileName;
return picUrl;
}
Just tried this:
<img src="<%: Url.Content("/Images/" + filename) %>" alt="foo" />
where filename = "foo.jpg" and it gives me
<img src="/Images/foo.jpg" alt="foo"/> which links to http://hostname/Images/foo.jpg
Please let us know what format you want the Url in if this isn't what you had in mind and I will try to help you some more.