I am using Routing in ASP.Net 4.0.
Use of Routing and the side effects
I did routing of two pages, one page has url profile.aspx?id=yJkl, i converted it into /profile/yJkl. But my paths of CSS, Images and JS got disturbed. I took help from a lot of sites and links and found ignore method, but it did not work.
I want to use URL Rewriting
Whenever i add / before any image source or javascript path, it starts working because it takes path from root, i know this. What i want is URL Rewrite, i want that all links of js, aspx, css, images, which were used in my aspx html pages should have a / as prefix in their path. Forexample if i have <img src='images/blabla.png' />, asp.net should auto convert it into <img src='/images/blabla.png'>.
Please tell me what to add in web.config or tell me if you have any solid solution of routing to ignore. I am newbie in routing/rewriting so forgive me if i asked anything stupid.
Use ResolveUrl or ResolveClientUrl
ResolveClientUrl("~/Images/Test.jpg"); //yields "../Images/Test.jpg"
Page.ResolveUrl("~/Images/Test.jpg"); //yields "/Images/Test.jpg"
Related
I am writing a web page to show image (image is dynamically generate by .Net charting) in a web. I have used the asp.net web forms URL routing to navigate to this page. Once I use the URL routing the image appear on the page. Anyway this is working fine for normal page browse.
More than likely your link to the image is using a relative path, and once you introduce routing you are working with a URL structure that appears to be deeper nested in the folder structure than it is.
When linking to the image for display I would recommend using root relative path something like /Images/MyFile.jpg rather than ../Images/MyFile.jpg, or similar.
This way if your route changes, and additional "folders" appear in the route, the link will still work.
I'm using URL Rewriting under ASP.NET 4 (using ISAPI_Rewrite) and I'm finding that that some of my images are not loading as .NET does not seem to understand I'm using an html BASE tag (pretty standard and essential when doing URL Rewriting):
eg in my development environment I have:
<base href='http://localhost/venuefinder/Website/'></base>
and on my pages I have:
<asp:ImageButton runat="server" ImageUrl="~/images/button.gif" />
On the home page of the site (http://localhost/venuefinder/Website/) this works fine, however on a page that uses URL rewriting, the image does not work:
/venuefinder/Website/venues/ashton_gate_stadium/V18639/
..as the browser is trying to load:
http://localhost/images/buttons/search-button.gif
instead of:
http://localhost/venuefinder/Website/venues/images/buttons/search-button.gif
This is happening because .NET is rendering the button as:
src="../../../images/buttons/search-button.gif"
...which is incorrect.
Is there any way I can correct this problem so that .NET renders the correct src attribute for the image? (without all the ../../../ etc)
Instead of using ~/ in images, create a virtual folder in IIS called images which maps to your images directory (so: http://localhost/images => c:\myproject\somesubdir\content\images). Then you can use
<asp:ImageButton runat="server" ImageUrl="/images/button.gif" />
We do this for all our website content items (script / images / css).
If you use <base> in HTML, the browser takes the given url as base for images that begin with /. So in your case you can just ditch the tilde.
One of the advantages of the Virtual Directory approach however is that you never have to bother about the url structure again, neither in .NET or JS:
ScriptHelper.RegisterScript("/js/somefile.js")
or
$().append('<img src="/images/file.jpg"/>')
I am using WebRequest to retrieve a html page from the web and then displaying it using Response.Write.
The resulting page looks different from the original mostly in font and layout.
What could be the possible reasons and how to fix it?
Most probably, the HTML you retrieve contains relative URLs for loading images, stylesheets, scripts. These URLs are not correct for the page as you serve it from your site. You can fix this by converting all of the relative URLs into absolute URLs or by including a BASE tag in the head of the HTML, pointing to the URL of the original page.
Be advised though that deeplinking to images and other resources is considered bad practice. The source site may not like what you are doing.
The reason might be that the original html page contains relative (to the original site) paths to the stylesheet files so when you render the html in your site it cannot find the css.
Does the remote web site include CSS, JavaScript, or images?
If so, are any of the above resources referenced with relative links (i.e.: /javascript/script.js)?
If so, when the browser receives the HTML from your server, the relative links (which were originally relative to the source server) are now relative to your server.
You can fix this by either changing the HTML to use absolute links (i.e.: http://www.server.com/javascript/script.js). This is more complicated than it sounds: you'll need to catch <link href="..."/>, <a href="..."/>, <form action="..."/>, <script src="..."/>, <img src="..."/>, etc.
A more limited solution would be to place the actual resources onto your server in the same structure as they exist on the original server.
The remote site might look at the User-Agent and serve different content based on that.
Also, you should compare the HTML you can retrieve from the remote site, with the HTML you get by visiting the site in a browser. If they are not different, you are probably missing images and/or css and javascript, because of relative paths, as already suggested in another answer.
I am implementing themes to enable an existing website to be rebranded (logos, colors, images etc.) depending on the requesting URL. I understand how to do that and have got the skins working fine except for some exceptions related to the URLs of images.
Specifically I have a control property that it is not feasible to skin. Prior to implementing themes it looked like this:
<DisplayImageChecked Url="~/Images/BobIcon-Green.png" />
Obviously that will not work with themes. So after much trial and error and reading I am trying to implement it like this:
<DisplayImageChecked Url="~/AppThemes/<%= Page.Theme %>/Images/BobIcon-Green.png" />
However that does not work. The generated html looks like:
<img src="AppThemes/%3C%25=%20Page.Theme%20%25%3E/Images/BobIcon-Green.png"/>
Any pointers in the right direction would be appreciated.
David
Use the binding syntax inside a databound control (watch the single vs double quotes):
<DisplayImageChecked Url='<%# "~/AppThemes/" + Page.Theme + "/Images/BobIcon-Green.png" %>' />
Is there a reason that you can't just dump the images in the same folder as the theme? If you put an image say for example: "image.gif" into the theme folder, then you can simply refer to it directly in your skin.
ImageUrl="image.gif"
This will resolve just fine when you apply this skin on a control in your page. Also much easier than trying to do the dynamic URL thing.
You may also use "Images/BobIcon-Green.png" as Url. ASP will take care of resolving the Url to the directory within your theme.
Here's the right way to go about your task:
Adorn your property with the UrlProperty attribute, this will tell ASP.NET to automatically translate your partial URL into the proper url.
Using "~/AppThemes/" + Page.Theme + "/Images/BobIcon-Green.png" will do the trick, but it's NOT the preferred way because you need to do all the work yourself and it's always good practice to leave all the work to ASP
I tried using the IHttpModule and managed to convert the urls just fine,
but all of my images returned path error (all going through the new url directory).
whats the solution?
You need to make sure that you use the "~/" path notation on your images and make sure that they are all server controls with runat='server'. Otherwise the images urls won't get rewritten.
For example if you have a page that gets rewritten from:
/Item/Bicycle.aspx
to
/Item.aspx?id=1234
Then what will happen is that an image reference like this:
<img src='images/something.gif' />
will break. So instead you have to do something like this:
<asp:image imageurl='~/images/something.gif' runat='server' id='img1'/>
Alternatively you can use absolute paths for your images. Or you can push as much as possible into your .css files.
You can try using a URL rewriter such as IIRF.
With IIRF you can use regular expressions to parse the incoming URL as you wish, then send it to the right place.
They have examples built in on how to do all that in the IIRF download.
What's the solution? Use the new routing engine in .NET 3.5 that started in the MVC project and got elevated to stand-alone status. :)
If Keltex's suggestion doesn't solve your specific problem look at ResolveUrl and ResolveClientUrl.