I want to deploy my ASP.NET MVC site to some location C:\home\MySite\, and I want to give it a config value to point to a different location on that server: C:\home\SomeOtherLocation\Albums, and display images from that location on my page.
My controller returns a list of AlbumLinks, which contain a property called ImagePath, which looks like "C:\home\SomeOtherLocation\Albums\Album1\Image1.jpg". My view looks like this:
#model IEnumerable<AlbumLink>
#{
ViewBag.Title = "Albums";
}
#foreach (AlbumLink l in Model)
{
<p><img src="#l.ImagePath" /></p>
}
But the image is not displayed. I verified that the image is in the right location. Is this the proper way to display an external image on a View? I know that I can add the album into the solution along with all its images, but I don't want to do that. I want to deploy the site and configure it to point to a collection of images to display. I know it's doable. What's the best way to achieve this? Thanks.
2 problems here:
Firstly, you can't use ImagePath, as the path is local to the server, not the client. You need to provide the full URL
Second, IIS cannot see directories out of your directory structure. You can add a directory within IIS that redirects to the location like
Root
MySite -> c:\home\MySite
SomeOtherLocation -> c:\home\SomeOtherLocation
MVC will not find a matching controller and so will fall back to IIS to find the content.
You cannot have links to files like C:\something it is because browser cannot access such path. All images must be hosted by your webserver.
You should use something like Server.MapPath.
Related
I have a master page which displays a footer with the company logo in it.
The URL is dynamic and pulled from the database as different companies have different logos when they log in.
The code is a simple view with <img src='#Model.TheUrl'> in.
The model is populated like:
model.TheUrl = "/Images/Logos/" + logoName;
The problem I have is that as you navigate around the site, the logo stops working, e.g. you're on www.site.com/home and you go to www.site.com/home/pages
I've tried all variations of / before and not before. I suspect the issue is that on my local machine, the URL of my website is localhost/MySiteName/ but on the staging server it's www.mydomain.com. I think this creates a problem. Maybe changing /Images/Logos... to /MySiteName/Images/Logos would work, but that wouldn't work when it was deployed.
How can I fix this?
You can use the UrlHelper to achieve this.
Change your model value to
model.TheUrl = "~/Images/Logos/" + logoName;
And then use the UrlHelper in the View:
<img src='#Url.Content(Model.TheUrl)'>
This will create a base-relative url.
I have an MVC 4 project with a layout page that I have setup with images that are links like this
<img id="logoImage" src="~/Content/siteImages/myLogo.png" alt="My logo" title="Welcome to my site" />
I have also tried this:
<img id="logoImage" src="../Content/siteImages/myLogo.png" alt="My logo" title="Welcome to my site" />
And this:
<img id="logoImage" src="#Url.Content("~/Content/siteImages/myLogo.png")" alt="My logo" title="Welcome to my site" />
These all work fine as long as the controller is the home controller. I use an Actionlink #Html.ActionLink("Northwind Demo", "Northwind", "Northwind", null, new { #class="links"}) to get to another controller.
As soon as the ActionLink is clicked, my images disappear. I examined the rendered link text in the browser and it is the same as it was before.
src="Content/siteImages/myLogo.png"
However, when examining the request in the network tab of the browser the url for the image is now
Northwind/Content/siteImages/myLogo.png
which does not resolve. For some reason the browser is adding the name of the controller to the beginning of the request for the image. I am sure that I am missing something really dumb but...
How do I fix this?
Edit
I wonder if this is an issue that only happens when running locally and may disappear when deployed to a server? I am still unable to fix this.
Edit
I am really struggling with the fact that no one else has encountered this before. I was under the impression that _layout.cshtml was like a master page in WebFroms. I need some suggestions here.
EDIT
So I had a moment of success. I changed the name of the entry method into the Northwind controller to Index and the images displayed properly in the index view. However, if I call another view, then the images disappear again.
I use radion buttons to select a different view based on which one is selected like this:
public ActionResult Search()
{
int id = Convert.ToInt32(Request.Form["radio"]);
switch (id)
{
case 1:
return View("Customer");
case 2:
return View("Orders");
case 3:
return View("Employees");
default:
ViewBag.Error = "Search parameter not found";
return View("Index");
}
}
I am still not able to fix this but I think that I am closer to a solution with someone's help.
Thanks in advance
Don't use relative addressing in MVC, since as you can tell you run into problems because views can be accessed from multiple routes (ie, /, /Home, /Home/Index, etc.. are all the same view, but different paths, if you use ../whatever then /Home/Index becomes /Home/whatever, / and /Home become /whatever)
Always use either #Url.Content to generate urls if you're not in a Razor 2+ view. If you're in Razor 2 or greater, then you can use src="~/Content/images/whatever"
If these methods are not working, then you need to look at your Application root, web.config, etc.. because MVC is becoming confused about where the root of the site is.
Well I have figured this out and I feel like an idiot! I have a script file that I use to change the images when it becomes small enough so that they continue to fit on the screen as it gets smaller for a responsive design. Like this:
$("#logoImage").attr("src", "Content/siteImages/logoSmall.png");
Well, the missing / at the very beginning is what was causing the issue. Adding the / fixed all my issues. Like this:
$("#logoImage").attr("src", "/Content/siteImages/logoSmall.png");
Even though I feel very silly at this moment, I am posting my answer in case someone else comes along and has a similar issue. Don't forget your script files and don't leave anything out when trying to fix a weird issue. Thanks to everyone that looked at this and tried to help.
I am new to MVC . I am creating a bookstore webpage application using aspx, and mvc. I have a database of books that says available or sold out. When a user clicks a dropdownlist they choose a book, it shows an image next to the book that is either supposed to show a green check mark if it is available or a red X if its not available. That information is all pulled from a database. My question is how do I change the image once a book becomes available. By the way my images are stored in my Content folder under imgs.
I have been searching for a while and haven't found a good answer. Any help or any websites you can suggest would be great thanks.
My image says this
<asp: Image ID = "Book_Availability" runat = "server" />
-----------Update----
When I mean change, I mean change the ImageURL so that it points to a different picture. On the server side I have value of 0 or 1. When I get a 1 i want to update the image URL to point to a different ImageURL from the controller, so that its from a X to a check mark. I am not sure how to accomplish this using MVC
Check out this link on Razor syntax. You could achieve what describe with something like:
#{
string availableImage = Url.Content("~/Images/availableImage");
string unavailableImage = Url.Content("~/Images/unavailableImage");
}
<img src= "#(Model.IsAvailable ? availableImage : unavailableImage)" alt="" />
You could perhaps add an click event handler onto the dropdown using jQuery. This could in turn do a $("#myimagewrapperexample").load() event against an action on some controller i.e BooksController
The action could return a partial view containing the books current image for example. Or it could return true, false depending on the books availability and you toggle the image in your javascript. All the action would need to be passed would be the id of the book and you could then look it up to determine it's status.
I've never used asp tags in a MVC project so can't comment on your usage there. AlexC suggestion of looking into the Razor syntax if your using MVC 3 is a good idea. Otherwise you might want to look into creating views using MVC 2. This Microsoft link might help you out on that front.
In my Views I have urls mapped like /My/Urls.something, for example in links (when I don't use View helpers), including static content like images, and mostly in javascript code (Ajax calls and the like).
This works fine when I deploy my app in a first level domain, like http://mysite.com/ because the / before the Url remaps it to the root of the domain, but if the site is deployed as a subsite, for example http://mysite.com/myapp/, this doesn't worka anymore, and omitting the / (for example /My/Urls.something -> My/Urls.something) doesn't work in inner pages like http://mysite.com/myapp/admin where I want to read http://mysite.com/myapp/My/Urls.something but I get http://mysite.com/myapp/admin/My/Urls.something.
Any help?
You should always use view helpers. Even if you don't want to use the ActionLink helper, you should use the Url.Action helper to generate your url. Why? Because of the very problem you're trying to solve, which the helpers were designed to fix.
For example:
<a href="#Url.Action("Index", "Home")" />
I'm using ASP.NET MVC 1.0 and I try to create a personal blog!
I have a problem with an url that it has to show all post wrote in a specific year and specific month.
My url is look like(http://localhost:2282/Blog/Archive/2010/5).
So... it work correctly, infact it show all record that have year=2010 and month=5 but my problem is that when I use this url, images in total my site are no longer loading.
I have this problem only with this url's type.
I think that the problem maybe is my maproute?
routes.MapRoute(
"ArchiveRoute",
"Blog/Archive/{anno}/{mese}",
new { controller = "Blog", Action = "Archive",anno = #"\d{4}", mese = #"\d{2}" }
);
Why images don't loading with this url?
Thanks
Your View may be referencing images using a relative path that doesn't work based on your current route. URLs you use in your view need to be relative to the resulting action's URL, not the folder where the view is stored.
You could use an absolute path or use <img src="<%=Url.Content("~/images")%>/image.jpg" alt="" /> (replace "~/images" with the path to your images, where "~/" equals the root of your application).
If you're using a Master page, it too should be careful to use something like Url.Content, because the Master can get used by different views that are accessible by different URLs!