I am building a web store and I am having a bit of a problem with some of the urls.
I have a large directory of departments and categories in my database that I am using to form my main menu.
The URLs have the form Application/Store/Department/Category
(All store URLs are rewritten to store.aspx?Querystringstuff)
The problem is that some of the urls generated by my code work, but prevent the page's CSS from loading properly.
It is specifically the URLs who's source text contain slashes.
I am URL encoding the source text of course but I'm still having the problem.
My css is linked in a master page-
<link rel="stylesheet" type="text/css" href="~/CSS/Layout.css" runat="server">
Example Links that work -
Ice Machines
http://localhost:1079/ABCWeb/Store/Refrigeration+Equipment/Ice+Machines.aspx
Steam Table Pans
http://localhost:1079/ABCWeb/Store/Catering+%26+Buffet/Steam+Table+Pans.aspx
Example Links that break-
Napkin Holders/Dispensers
http://localhost:1079/ABCWeb/Store/Tabletop/Napkin+Holders%2fDispensers.aspx
Salamanders/Cheesemelters
http://localhost:1079/ABCWeb/Store/Cooking+Equipment/Salamanders%2fCheesemelters.aspx
If it matters here is my code for building URLs-
The array contains an array of items in the path
The first element is not encoded as it contains the the current store path.
private static System.Text.StringBuilder AppendAnchor(this System.Text.StringBuilder str, string[] path)
{
return str.Append("<a href='")
.Append(path.Aggregate((a, b) => a + "/" + HttpUtility.UrlEncode(b)))
.Append(".aspx'><span>")
.Append(HttpUtility.HtmlEncode(path[path.Length-1]))
.Append("</span></a>");
}
Thanks for the help!
Try including your style-sheets using a path relative to the web root. An easy way to do this in ASP .NET webforms is to use ~ on a server-side control eg.
<link rel="Stylesheet" type="text/css" href="~/Css/MyCssFile.css" runat="server" />
ASP.NET should then resolve the correct URL for you, regardless of what the URL is.
Well I looked a little further into it-- The "~" actually seems to be where the problem is occurring.
The links are working correctly but I think the server isn't parsing it correctly when it generates the relative paths...
Here is the css link from the generated code on a working link
../../CSS/Layout.css
Here is the css link on a broken page at the same depth
../../../CSS/Layout.css"
Here is a very ugly fix that works- not sure if there is a better way though
<link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath+"/Css/Layout.css" %>" />
The strange thing is that the navigation links generated from similar paths in the sitemap are working fine. Maybe it understands the full hierchy better when it is generating paths from the site-map and doesn't try to build a relative path.
Related
<link href="CSS/make.css" rel="stylesheet" />
This an external css file for a page named "Default.aspx" which is located in "Root/Pages" directory.
so In "Root/Pages" we will have these:
Default.aspx
CSS/make.css
It will work fine if I launch Default.aspx from current location, But user can change the directory of Default.aspx from main page. Then in Code-Behind I will copy all of Pages contents into another directory.
Just think I will copy Default.aspx and CSS folder from Root/Pages to Root/Backup and try to launch Default.aspx from new location. In this situation it can not read and load external css file!
How can I change css href link dynamically from its container page's location?
For example changing href="CSS/make.css" to href="BackUp/CSS/make.css".
After some research I found that I should use Global and URL Routing, but I did not get any working result.
If you put the css file in the root directory then refer to it using:
<link href="/make.css" rel="stylesheet" />
It should now work even when you move your Default.aspx to another location. The downside to this is that it can clutter your root directory if you plan to use it for multiple different pages with different CSS files.
Let me know if it works and if I am understanding your question right.
function DynamicURL()
{
var URL='CSS/make.css';
var BackUp ='BackUp/';
if (Your condition when it changes directory)
URL = Backup + URL;
document.getElementById('Field').href= URL;
}
Don't forget to set ID to your link href field.
I have faced a lot of issues with CSS and JS caching, so i decided to add timestamps to CSS and JS files.
so i added this param at the end of links:
?t=<%= DateTime.Now.Ticks %>
So here how it looks like:
JS:
<script type="text/javascript" src="Scripts/global_scripts.js?t=<%= DateTime.Now.Ticks %>"></script>
CSS:
<link rel="stylesheet" type="text/css" href="Styles/mysite.css?t=<%= DateTime.Now.Ticks %>" />
The JS file work fine. But for CSS files this param ?t=<%= DateTime.Now.Ticks %> gets recognized as a string. Why? I cannot find the difference
You can easily solve your problem with this simple adjustement
<link rel="stylesheet" type="text/css" href="Styles/uberhint.css?t=<%= "" +DateTime.Now.Ticks %>" />
Just add "" +.
ASP.NET is treating the link as an HtmlLink control, and rendering the contents of the href attribute as a literal. Inserting that Extra string forces ASP.NET to accept that you are trying to generate a dynamic string
While this is not an answer to your original question, I can suggest you to use a different approach altogether. Instead of adding ticks, you can use default Microsoft libraries to make bundles. When you do it that way, the engine will automatically add a string like ?v=dfsdf9fsdfasd which will be a hash of the content, so every time it changes it will be different. Then you can just cache forever the resources forever on the client.
Your approach is problematic since the browser will download js every time, this is extremely inefficient.
You can get some details on how to use bundles with minification e.g. here. Please see my answer for some details on how to make script bundles properly.
P.S. If you don't want to do bundling yourself, you can still implement the hash of the file content yourself. Another easy option is to do ?v=1, where you get the version from config, then by changing the config, you will be able to force cache update on all you clients.
With all of the approaches you should set cache for 1 year (max if I remember correctly).
If the above answers dont work, you can try to add a
<asp:placeholder runat="server" id="ph">
above script and css tag, and in the page_load you can bind placeholder.
ph.DataBind();
I'm currently working on a small application that simply loads one webpage into webview and I want to be able to make this webpage look different while browsing using this application..
This page uses one .css and I want to use my own version of that .css instead of the original one or just replace part of the original with mine (by using the original and then overwriting it with my version)..
Is it possible to modify source code of the page (optionaly before it even loads) so I can change some styles to make the webpage look different?
Just to explain:
I want change
<link rel="stylesheet" type="text/css" href="original.css">
to
<link rel="stylesheet" type="text/css" href="original.css">
<link rel="stylesheet" type="text/css" href="http://www.something.com/edited.css">
I'm using Xamarin Studio, C# Android WebView project, by the way..
Also, this is very likely going to be called duplicate of this: Override web page style in Android WebView but it was never answered so it's not very helpful for me..
Have you looked at:
addJavascriptInterface (Object object, String name) of the WebView?
You could inject code to manipulate the DOM. This probably a bad idea as it is a SECURITY ISSUE in a number of ways.
Less intrusive and more secure, the WebSettings object allows you to change some presentation aspects: http://developer.android.com/reference/android/webkit/WebSettings.html
In this area another tool to explore is to create and set a WebViewClient subclass: http://developer.android.com/reference/android/webkit/WebViewClient.html
Just a few avenues to explore.
You can inject your css using Javascript. You can inject following javascript after the WebView is finished loading:
var link = document.createElement("link");
link.href = "http://example.com/mystyle.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);
So your final Java code will look something like this:
String jsToInject = "var link=document.createElement('link');link.href='http://example.com/mystyle.css';link.type ='text/css'; link.rel ='stylesheet';document.getElementsByTagName('head')[0].appendChild(link);";
myWebView.loadUrl("javascript:" + jsToInject);
<link rel="stylesheet" type="text/css" href="../Content/Dashboard/CustomTooltip.css?v=<%= System.Diagnostics.FileVersionInfo.GetVersionInfo(System.Reflection.Assembly.GetExecutingAssembly().Location).FileVersion %>" />
Couple of questions:
Is this an alright way of going about this? The idea is that when our products assembly information changes, the version updates, the path to the CSS file gets modified and invalidates the cache.
If I place the C# code into a watch window I see the proper version info, but in the .aspx page it fails to load it. No error message, but it just says .css?v= with no version.
Thanks
Edit: It seems like its something to do with the reflection that's going on. If I say:
System.Reflection.Assembly.GetExecutingAssembly().GetName().Name
I see the proper name in the watch window, but when evaluated on the .aspx page it is App_Web_35 (not correct). Any idea how to fix this?
Edit2: I ended up going with a solution I'm not quite happy with, but would love to hear other inputs. I just put:
protected string GetApplicationVersion()
{
return System.Diagnostics.FileVersionInfo.GetVersionInfo(Assembly.GetExecutingAssembly().Location).FileVersion;
}
on my related CS page -- and then in the code behing I called <% GetApplicationVersion() %> and now it happily returns the proper information. I wish it could be inlined, though.
A css file is static, like html. Think about create different css files and call it like this
<link rel="stylesheet" type="text/css" href="../Content/Dashboard/CustomTooltip_<%= `System.Diagnostics.FileVersionInfo.GetVersionInfo(System.Reflection.Assembly.GetExecutingAsse`m`bly().Location).FileVersion %>.css" />`
so you need a css file like this ../Content/Dashboard/CustomTooltip_1.0.css
I have a small asp.net mvc app running on WIN2k3 and IIS6.
I'm using a wildcard mapping under the application settings in IIS as described in this article http://haacked.com/archive/2008/11/26/asp.net-mvc-on-iis-6-walkthrough.aspx . The application works fine under my local asp.net development server. When I publish from VS2008 out to the production server above the styles are looking partially rendered. For instance. I have an overflow: hidden; set on the body {} and the browser is showing a scrollbar horizontally and vertically. Also, the z-index on all my layers are incorrect. Any ideas would be much appreciated.
Here's a sample of my document head.
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page title | <%= ViewData["PageTitle"]%></title>
<link rel="shortcut icon" href="/content/images/misc/favicon.ico" type="image/x-icon" />
<%= Html.MooFrameworkConfig("Default")%>
<%= Html.JavaScript("/scripts/framework.js")%>
</head>
framework.js includes the CSS like so:
this.loadCSS("layout.css", "screen");
here is the loadCSS method:
framework.loadCSS = function(fileName,mediaType) {
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '/content/skins/' + skinBase + '/css/' + fileName;
cssNode.media = mediaType;
headID.appendChild(cssNode);
}
Just as a test, does linking to the CSS file in the HTML (as opposed to loading it with JS) fix the problem?
It is unlikely to be a problem with the web server, per say. Is it possible that the stylesheet you're using isn't being served by the webserver? Maybe the URL to it is slightly different? Check by navigating manually to the stylesheet or by checking that it is being loaded in firebug.
Did you include the CSS fix from the article?
HttpContext.Current.RewritePath(Request.ApplicationPath, false);
I think you may need to post snippets from your website where you include the CSS file and where you simulate the article so that you can get better tips.
You can use Fiddler tool to check if all the files are loaded correctly, I mean no HTTP 403 or 500 or some other status codes for all the files (.css,.js) included in your page.
There maybe some server settings preventing displaying your page correctly.