I have a problem with MVC4 CSS.
i m including a CSS file named registration.css in an another view page named "registerUser.cshtml". This page is like a content page in mvc4 razor.
but problem is that CSS is not working.
How can i resolve this.
I have also included in BundleConfig.cs as
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/registration.css"));
But it is also not working. Help me.
Use
#Styles.Render("~/Content/css")
instead of
#Styles.Render("~/Content/registration.css")
I got my answer. Actually another css file from _Layout.cshtml overwrites the view page css file. when i removed main.css from Viewpage.cshtml, it works fine. Well, Thanks to all, thanks #Exception - u gave me important knowledge.
If you want a single css file on a page then use this :
<link href="#Url.Content("~/Content/registration.css")" rel="stylesheet" type="text/css" />
OR
If you want many css files on Layout Page or at any View Page then make it's bundle and include it in this way:
#Styles.Render("~/Content/css")
You are using #Styles.Render("~/Content/registration.css") which is wrong..try above solution.
Related
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);
In my simple MVC application with only one page /Home/Index (for now) I noticed that some of my styles are being overwritten by a mysterious type.less:
Chrome says the file would come from
http://localhost:123/Content/less/type.less
but I couldn't find anything there.
The css files are also included in the right order so the main.css shouldn't actually be overriden:
The history of my actions:
I created a new MVC project in Visual Studio 2013 and I updated all references with the nugget-manager.
Then I and changed the following files:
(I list only changes related to css but I also added knockout and a few custom *.js files written by me)
BundleConfig.cs where I added jquery-ui.min.css:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/jquery-ui.min.css"));
and my main.css
bundles.Add(new StyleBundle("~/Content/Custom").Include(
"~/Content/Custom/main.css"
));
_Layout.cshtml to render my new bundle and excluded the modernizr because I thought I might be the reason (it didn't help):
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/Custom")
#*#Scripts.Render("~/Scripts/modernizr")*#
then I excluded another three lines there to make the tyle.less go away (but it didn't work either):
<body>
<div class="container center">
#RenderBody()
</div>
#*#Scripts.Render("~/Scripts/jquery")
#Scripts.Render("~/Scripts/bootstrap")
#RenderSection("scripts", required: false)*#
</body>
Index.cshtml contains only the title and html
#{
ViewBag.Title = "Lorem ipsum";
}
apart of this I didn't change anything else.
I was able to find a reference to the type.less only in the bootstrap.css.map file which is apparently minified and a long line of different styles but the file type.less physically doesn't seem to exist anywhere. I don't understand why it wants to override my css. Do you know what might cause this and how to disable it or load it before my css so that it doesn't distroy anything?
I found out that some strange bootstrap that is installed
by default in new MVC5 projects
Bootstrap for ASP.NET MVC
caused all that trouble. Because I wasn't able to find how to prevent it from overwriting my styles I decided to uninstall it and finally I have my styles back.
<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 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.