I am using Visual Studio 2013. I created a website (ASP.NET Web Site Razor v3) which works just fine in the browser under debug (with Chrome). However - when I deploy the website (simple copy to IIS local), the paths for the stylesheets do not work even though they appear to be accurate in view-source.
I looked over a few threads and saw one talking about url-rewrite. But I don't see any re-writing going on. Maybe I am missing it.
Anyway... the styles:
<link rel="stylesheet" href="~/css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="../css/fullcalendar.css" />
You can see I tried a couple of options there. When I look at the source code, I see the following:
<link rel="stylesheet" href="/MyMeds/css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="../css/fullcalendar.css" />
My IIS Website is in the /MyMeds/ folder. So that would appear correct. It is almost like it IS re-writing it. But I do not see any re-write rules in the web.config file.
thanks.
You need to use #Url.Content(). LIke this:
<link href="#Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" />
Related
I am using WebOptizimer in a C#.NET 6 core razor webapp. The css links I am using need absolute URLs (before you ask: there might be cross site requests).
In razor - within Layout.cshtml - it looks like this:
<link rel="stylesheet" href=#string.Format("{0}://{1}/css/layout.css", scheme, host) type="text/css" />
The generated html looks like this:
<link rel="stylesheet" href="https://localhost:5001/css/layout.css" type="text/css" />
There is no version fingerprint, nor is it minified.
How to make these minified and fingerprinted?
Please note: if I just use "/css/layout.css" everything works fine.
My project is here
(Look for "Laptop" branch, and "IsolatorUI" internal project)
I need to work with external css file I just saved in wwwroot/css.
I have a schtml Home view file and I would like to use it there.
So far, everything I tried did not work. Even using the site.css which was already there was unsuccessful.
Please ignore the different languague on cshtml HomeView file.
How can I establish a css file link? There are many discussions and suggestions I found on the internet, but none of them worked for me.
It's really frustrating when such simple thing doesn`t work...
Basically there is a disturbing bug with css in .NET framework files, but eventually this code worked for me:
In my View:
#section Styles {
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
}
And in my Layout:
<head>
...
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
#RenderSection("Styles", false)
</head>
I have developed a asp.net website(.aspx) using the bootstrap and the total look and alignments were good while debugging the code in my local system using IE10.
once the code is deployed in a asp.net server the button styles and the alignments of the controls in html table tags were totally different from the local site .
Please share your ideas for resolving the issue.
I have used the below tags in the master page.
<link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Content/bootstrap.min.css" runat="server" rel="stylesheet" type="text/css" />
<link href="Content/bootstrap-theme.css" runat="server" rel="stylesheet" type="text/css" />.
.
.
.
.
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
thanks.
My issue got resolved.
all the resources were linked correctly but the issue was due to the default browser version the pages are getting rendered.
So I needed to add the below the meta tag in the master page. After which all the pages were loading fine.
[link] meta http-equiv="X-UA-Compatible" content="IE=edge" />
Thank you all for the suggestions and help.
You do not need both versions of bootstrap.css - for production server use the minified version(s).
For example:
In your master page:
<webopt:BundleReference runat="server" Path="~/Content/bootstrap.min.css" />
In your Bundle.Config.cs class:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/css").Include(
"~/Content/bootstrap.min.css"));
}
As regards setting the correct path in master page, this is a known bug and an easy way to get it right is to drag the CSS file from VS Solution Explorer to the head section of your master page in code view.
In my .net application i have Styleshet.css in CSS folder.
Now i want to link this css in Sample.aspx.
What would be the best approach
1.
<link href="CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
OR
2.
<link href="<%=ConfigurationManager.AppSettings["ApplicationUrl"].ToString()%>/CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
In Web.Config
<appSettings>
<add key="ApplicationUrl" value="http://localhost/myapp/" />
</appSettings>
The best way in asp.net is option 3:
<link href="~/CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
The ~/ resolves to the site path root. The difference between this and just "css/... is that it will work no matter what subfolder you're in. For example if your code was in
/subsection/default.aspx
and your styles were in folder /css
using a link to "css/stylesheet.css" would resolve (incorrectly) to "/subsection/css/stylesheet.css" whereas using "~/css/stylesheet.css" would resolve (correctly) to "/css/stylesheet.css"
This also differs from a hard path root "/css/stylesheet.css" in that it will work correctly regardless of the virtual directory configuration of the site.
<link href="CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
Dont go for second approach as when you deploy your site to a server the /localhost/ reference wont work.
Well, always use relative paths so that you don't have to change your files after the deployment.
You can also use resolved app relative path such as
<link href="<%= ResolveUrl("~/CSS/StyleSheet.css") %> rel="Stylesheet" type="text/css" />
Reletive path approch is much better (your first approch), Absolute paths are not portable between applications. If you move the application that the absolute path points to, the links will break.
You can find more information on below mentioned link
Specifying Paths for Resources
In my application I have next problem. I created master page and some content pages, some of which are located in the nested folders. In the master page I added the link to .css file
<link href="default.css" rel="stylesheet" type="text/css" />
But pages are located in the nested folders can't use this .css file. How can I fix this? I want to have one .css file for all pages (:
Thanks!
<link href="~/default.css" rel="stylesheet" type="text/css" />
This problem can be resolved by adding next code in master page
<style type="text/css" runat="server">
#import '<%= ResolveUrl("~/default.css")%>';
</style>
But designer of VS can't process this and you couldn't view your styles in it.
The css shouldnt be relative to the master page but rather it should be relative to the location of the Page instance using the master page. In most cases this will be the same thing but I would always try to use either a fully qualified path or a site relative path
Fully qualified path
<link href="http://some.site.com/mysite/styles/default.css" rel="stylesheet" type="text/css" />
or a relative path (note this might not work if you have a version which can only host one site but many apps such as WinXP)
<link href="/default.css" rel="stylesheet" type="text/css" />
Win xp relative path
<link href="/path/to/application/default.css" rel="stylesheet" type="text/css" />
If you using website under website, change in subfolder masterpage CSS link
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
change with below
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
The way you defined you style sheet means: the style sheet is in the same folder as the page which uses it.
If you want to have one style sheet for all pages you should put in in one place (I prefer /assets/css folder in the application root) and define the path using this folder:
<link href="/assets/css/default.css" rel="stylesheet" type="text/css" />
The other way to archieve this is to use Themes, in this case styles will be added automatically.