Images' site don't loading with a specific url in mvc - asp.net-mvc

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!

Related

default parameter routing changes the reference of an image in asp.net mvc 4.51

I have two controllers. I copied one action from one controller (called Biz1Controller) to the other (called Biz2Controler). The only change I made is that in one action I have to state the parameter in the query string, and in the other I rely on the automatic route to take the parameter (id).
First action signature:
public ActionResult Page(int BizId)
Second action signature:
public ActionResult Page(int id)
Other than that everything is exactly the same, including the view.
However, the view loads some image:
<div style="background-image: url('#Model.PathToFG');"></div>
Now, the View Source of chrome shows that everything is just the same, I get this line of script:
<div style="background-image: url('../Images/FgResized/FG-10000001.jpg');"></div>
However, for the first controller which is called this way:
localhost:19417/Biz1/Page?BizId=10
I get the image correctly.
and for the second controller called this way:
localhost:19417/Biz2/Page/10
I get the following error in the browser's console:
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:19417/Biz2/Images/FgResized/FG-10000001.jpg
i.e., for some reason the controller (Biz2) now appears as part of the image path, which is incorrect and should be: http://localhost:19417/Images/FgResized/FG-10000001.jpg
if I call the action this way:
localhost:19417/Biz2/Page?id=10
I get the image. How does the browser even aware to this? I can't tell.
What is going on? this is not as I expected. What should I do so that this call
localhost:19417/Biz2/Page/10
will result in the correct reference to the image?
Add these to the routes in your configuration file
routes.MapRoute(
....
new { controller = "Biz2", action = "Page", id = UrlParameter.Optional } // Parameter defaults
);
I'm not sure what's going on. Maybe #NZeta520 is the right direction to check. However, instead of relative path ../Images/FgResized/FG-10000001.jpg I used absolute path /Images/FgResized/FG-10000001.jpg and it solved the problem.
This is how relative path works,
explanation using file-folder analogy,
for url localhost:19417/Biz1/Page?BizId=10, your current folder is Biz1 and current file is Page, query string doesn't matter.
now when a relative path, ../Images/FgResized/FG-10000001.jpg is applied to the current url, .. goes to the previous folder which is localhost:19417 then appends the rest of the path forming localhost:19417/Images/FgResized/FG-10000001.jpg
interestingly for url localhost:19417/Biz2/Page/10, your current folder is Page and current file is 10. So when relative path ../Images/FgResized/FG-10000001.jpg is applied, .. goes to the previous folder which is localhost:19417/Biz2 then appends the rest of the path forming localhost:19417/Biz2/Images/FgResized/FG-10000001.jpg which is the unintended one.
hope this helps.

Trouble with relative URLs in a master page logo between development and live

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.

Url.Content() not working on complex URLs

I have Url.Content() snippets everywhere in my views. They work fine on pages with a simple URL, but not when the URL gets longer.
Here's a sample:
<img src="#Url.Content("~/Content/Images/logo.png")" id="logo">
This works fine when I'm on the homepage, or a page with URL localhost:8080/s/chocolate (which shows the result for the "chocolate" search.
But when I'm trying to add some refinements, e.g. localhost:8080/s/chocolate/b/lindt (which means filter the previous results to only ones from brand Lindt), it doesn't work anymore. In this case, Url.Content points to /s/chocolate/Content/Images/logo.png, which obviously fails.
It's as if Url.Content only goes 2 levels up the current location instead of using the real root of the web app. I guess it makes sense in the convention that URLs are in the form host/controller/action, but here I have a more complex URL scheme (I use URL rewriter module to match these URL fragments to action's parameters).
Is there any way to tell the helper to go to the real root, or any other solution to this problem?
(BTW, I'm using MVC 4)
EDIT:
As Felipe answered, I've just discovered that Url.Content is no longer necessary with MVC 4. That works for all "design" images with a constant path. However, I use a lot of images where the path is constructed partly with some data, e.g.
<img src="#Url.Content(string.Format("~/Content/Images/stores/{0}.png", cart.Store.Retailer.Id))"/>
I simply removed the Url.content, as such:
<img src="#string.Format("~/Content/Images/stores/{0}.png", Model.PreferedCart.Store.Retailer.Id)"/>
When rendered, this gives the following src: ~/Content/Images/stores_v2/Fr_SimplyMarket.png. The ~ being still here, the image is not found. How can I fix that?
In ASP.NET MVC 4+, you do not need to use Url.Content in attribute values. Use the ~/ syntax directly and let razor view engine 2 process the path for you. So your examples can be coded as follows:
<img src="~/Content/Images/logo.png" id="logo">
In the case you need to create a dynamic path, so, you have to use Url.Content, for sample:
#{
string imagePath = Url.Content("~/Content/Images/stores/" + Model.PreferedCart.Store.Retailer.Id + ".png");
}
<img src="#imagePath"/>
If it does not work, the reason is because you have problems with your URL rewriter.
In ASP.NET Core 5, It's working fine using below code in razor page.
#{
string logoPath = Url.Content("~/img.jpg");
}
<div style="background-image:url(#logoPath);">

asp.net mvc display image external to the mvc deployment

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.

Using MVC Routes as Shortcodes

We have been trying to implement shortcodes on an ASP.NET MVC web app that allow users to uniquely invoke a given article/page using an assigned short code.
For e.g.: www.mysite.com/power would map to an actual URL: www.mysite.com/Power/Home/.
I have created various routes throughout the site that map these shortcodes to various actions and controllers within the application. From a shortcode/route point of view, everything is working great.
I, however, noticed a couple of interesting things. I have hyperlinks that I use Url.Action method to generate the URL pointing pages. Many of these pages also have short codes associated with them. For e.g.: I have a link that says:
Go to Power page
This is a page that also has the previously mentioned short-code assigned to it. When I use Url.Action, I ideally expect it to create a link as /Power/Home/Index or /Power/Home, but since I also have a route constraint mapped to it, it now generates the link as /power.
Is there a way I can just use the actual link URL when generating links? I only want short-codes when I am sending out emails etc. I want the site to generate actual URLs.
This may or may not be possible, but I wanted to see if there were any ideas out there that I could use.
Anup
Index and Home are likely defined in your route table as defaults for the Action and Controller element. When you generate the Url it wont include the defaults if they aren't needed.
You could write your own Action overload or helper, which would allow you to take more direct control of the generated URL or action link. You could approach it from two different ways: 1) a helper to generate short-code specific urls and links, and/or 2) a helper to generate the full url and/or link. If Url.Action is returning the short-code version due to your routing configuration, I'd think a good place to start would be the second option, creating a helper/extension method that will generate the full url for you.
Here's how I solved this:
Instead of naming a route with short code to point to the action url, I made the route point to a different Controller action which would then redirect to the actual route that I want it to.
For e.g.: Originally I had the code "power" defined in the route table such that it would point to www.mysite.com/Power/Home.
Now instead of pointing it to that action - Index, controller - Home, area - Power, I make it resolve to: action - Power, Controller - Home, Area - ShortCode.
In the controller now, I simply do a RedirectToAction("Index", "Home", new { Area = "Power" });
This ensures that the actual links to /Power/Home do not resolve to the shortcode "power".
This is a simple fix increased the work by a little bit, but works like a charm.

Resources