It seems that stylesheets can be referenced razoresque either this way:
<link href="#Url.Content("~/Content/jquery.duckbilledplatypus.css")" rel="stylesheet" type="text/css" />
...or this way:
<link href="#Href("~/Content/jquery.duckbilledplatypus.css")" rel="stylesheet" type="text/css" />
Is there an advantage to one way over the other?
I noticed that I had this, too:
<script src="#Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js")" type="text/javascript" defer ></script>
...which is probably bogus (the razoresque-ization of the href that way), as the file on the CDN doesn't need to be razorized.
Both are similar except Url.Content works with applications's virtual directory.
#Href comes from the System.Web.WebPages library and #Url.Content is part of the MVC.
#Url.Content is my favorite.
I prefer using #Href. As I only use Web Pages not MVC. Not because I don't like it but because I don't want to. So for me they are same. It just depends on your work. What ever you want to use.
I would try #Href always.
Related
When using the component the doc. (https://github.com/jdtcn/BlazorDateRangePicker) says that this
<script src="_content/BlazorDateRangePicker/clickAndPositionHandler.js"></script>
<link rel="stylesheet" href="_content/BlazorDateRangePicker/daterangepicker.min.css" />
needs to be added to the app. in the head section.
Now I am using the BlazorDateRangePicker in a Razor component library - MyLibrary.
To use that library in my app. I need to add those to lines to my app referencing them in my library
<script src="_content/MyLibrary/BlazorDateRangePicker/clickAndPositionHandler.js"></script>
<link rel="stylesheet" href="_content/MyLibrary/BlazorDateRangePicker/daterangepicker.min.css" />
this does not work - I get 404 when loading the files. I have also tried
_content/MyLibrary/_content/BlazorDateRangePicker
and all other possible combinations.
How is this done ?
I think you're getting confused with how Blazor references embedded resources.
The BlazorDateRangePicker library's resources would be referenced as per the instructions, e.g.
<script src="_content/BlazorDateRangePicker/clickAndPositionHandler.js"></script>
<link rel="stylesheet" href="_content/BlazorDateRangePicker/daterangepicker.min.css" />
You're importing your own library (MyLibrary) that references this package, but the reference path doesn't change - it's still the _content/BlazorDateRangePicker/.. prefix.
I have an ASP.NET web app hosted in a windows dedicated server.
In my app there are many folders. To simplify my problem let's say I have this scenario:
folder
default.aspx
css
js
I would like to setup default.aspx as my default page, meaning, when a user types domain.com, default.aspx is shown.
In order to do this, I edited my web.config file and it works.
The problem is styles and javascripts.
My default.aspx contains this:
<script type="text/javascript" src="js/xxxx.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
So the styles and javascripts aren't found.
I really don't want to remove the folder and put everything in the root, and just moving the default.aspx page is not really an option, as I have a MasterPage.
use resolveUrl or a path from root to resolve locations of js and css
<script src='<%= this.ResolveUrl("~/js/xxxx.js") %>' type="text/javascript"></script>
<link href="~/css/styles.css" rel="stylesheet" type="text/css" />
If you're wanting to link to items, you can use the path from the website root. Just place a slash in front of the path.. like this:
<link rel="stylesheet" href="/css/webedit.css" type="text/css" />
You could use Page.ResolveUrl method to get correct paths:
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/xxxx.js") %>'></script>
<link href='<%= Page.ResolveUrl("~/css/styles.css")' rel="stylesheet" type="text/css" />
For more info see Specifying Paths for Resources.
EDIT: it's mentioned in the comment that this is not working for stylesheets. It's partially true. It won't work for server-side, but will for client-side elements.
It seems your <link> element is located inside a server-side <head> tag, this means ASP.NET treats <link> inside <head> as a server-side controls even if you didn't specify runat="server" attribute there. So you don't need to use a server-side construct in that case:
<link href="~/css/styles.css" rel="stylesheet" type="text/css" />
For ASP.NET WebForms and MVC projects I strongly reccomend moving to Client Dependency framework and let it handle your page dependencies.
For your two dependencies you simply add these declarations to the page:
<CD:CssInclude ID="CssIncludeStyles" runat="server" FilePath="~/css/styles.css" />
<CD:JsInclude ID="JsIncludeXXXX" runat="server" FilePath="~/js/xxx.js" />
This is already cleaner then calling this.ResolveUrl on each dep. declaration.
You can furthermore facilitate the declaration of dependencies by introducing mapped paths in the dependency framework (see documentation for how-to).
An easiest way to start with client dependency is to add it via NuGet to your ASP.NET web site project.
It ensures you never have duplicate dependencies on one page and gives you a control over how dependencies are ordered.
I was hoping someone may be able to help out with an issue.
I have a site that is accessed through a root domain (originalDomain.com) and the CSS is linked as below.
<link href="../../Styles/Css/style.css" rel="stylesheet" type="text/css" />
This all works fine
However I can also access this site on a different domain. Rather than the absolute root of the domain this one is accessed at newDomain.com/login. This still points to the files at the location of the original domain but because of the /login is unable to locate the CSS file. I assume the ../../ takes it to newdomain.com rather than newdomain.com/login.
Is there an easy way to have a single CSS reference without any back end code changes that will allow the CSS to be successfully referenced at both of the above scenarios.
I hope this makes sense.
Any help is greatly appreicated.
Give absolute paths and not relative ones
<link href="/path/to/css/style.css" rel="stylesheet" type="text/css" />
Note the first character is a / (slash)
If your <head></head> tag contains runat="server" you can simply specify it as:
<link rel="stylesheet" type="text/css" href="~/CSS/Style.css" media="screen" />
Taken from here
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
Is there a better way to aggregate several css files ( based on what a give page requires ) than including them in a jsp file with c:if tags?
The top of the file (sitting outside of web-inf dir, alongside images files and such)
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
... followed by <%#include file="some.css" %> as needed. It works, it's simple, I'm just wondering if it could be done better.
If you were kind, your CSS request would follow some kind of aggregation pattern.
<link rel="stylesheet" type="text/css" href="core.css?part1&part2&part3">
And then, your result would be kind enough to set the caching headers properly, the ETag, and honor the "If-Modified-Since" header (perhaps based on the latest change date of the files you decide to include).
Is there any reason why you can't just include the CSS pages with normal HTML links, so that they can be cached?
<link rel="stylesheet" href="some.css" type="text/css" media="screen" />
<link rel="stylesheet" href="some2.css" type="text/css" media="screen" />
That way the browser can cache the file, and requests will only be made once for all the pages that use it. Then you could just have each page specify the links that it needs.
How about
<link rel="stylesheet" type="text/css" href="${pageSpecificCssFileName}.css">
wherein you define ${pageSpecificCssFileName} in page controller?