How can I link to resources such as css and javascript files? My default project is using links like ../../Content/styles.css. How can I do something like ~/content/styles.css?
<link rel="stylesheet" href="<%= Url.Content("~/content/styles.css") %>"
type="text/css" />
<script src="<%= Url.Content("~/content/scripts/file.js") %>"
type="text/javascript"></script>
Leave out the ~. "/Content/styles.css"
Related
I have set up materialize css in my project, however the local copy does not appear to work with checkboxes or radio buttons. I am not sure why this would be the case. When I use the CDN version everything works as expected.
Here is a slightly messy .master file.
<%-- Font Awesome --%>
<link href="~/includes/css/all.css" rel="stylesheet" />
<%-- Includes the Materialize CSS --%>
<%--<link href="~/includes/css/materialize.css" rel="stylesheet" />--%>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<%-- Jquery because I need it still, hope to remove this in the future --%>
<%-- <script type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src=<%= ResolveUrl("~/includes/js/materialize.js") %>></script>--%>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I don't really want to call a third party CDN forever in this case.I feel I am missing something simple here and that I am being an idiot.
I got a UI issue on bootstrap with sharepoint-2013. I had given all CSS and JS file path are correctly, but if i change CDN link from fire bug its working properly(only working in firebug), actually i am confusing why its not working directly from sharepoint. can you please help me anyone?
I have given file path
<link href="../../_layouts/15/Site/css/bootstrap.min.css" rel="stylesheet">
<script src="../../_layouts/15/Site/js/jquery.min.js" type="text/javascript"></script>
<script src="../../_layouts/15/Site/js/bootstrap.min.js" type="text/javascript"></script>
CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
CDN working only when I change it from firebug. It is also not working from sharepoint after compiling.
Access the layout directly
Change path to
<link href="/_layouts/15/Site/css/bootstrap.min.css" rel="stylesheet">
<script src="/_layouts/15/Site/js/jquery.min.js" type="text/javascript"></script>
<script src="/_layouts/15/Site/js/bootstrap.min.js" type="text/javascript"></script>
Also will be better if you can use ~SiteCollection and ~Site using Sharepoint:scriptLink
<SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/_layouts/...js" runat="server" />
<SharePoint:CssRegistration ID="CssRegistration1" Name="<% $SPUrl:~SiteCollection/_layouts/....css" %>" runat="server" After="corev15.css" />
I am using the resources plugin (1.2.8) to load my css and js files. it work great but the thing is that the URLs are "relative".
Example:
<r:require module="core"/>
I get something like this
<script src="/app/static/js/core.js" type="text/javascript"></script>
<link href="/app/static/css/core.css" type="text/css" rel="stylesheet" media="screen, projection">
But i want the URL to be ABSOLUTE. Something like this:
<script src="http://myServer.com/app/static/js/core.js" type="text/javascript"></script>
The behaviour i am looking is the same as the "absolute" option when using grails resources
<g:resource dir="css" file="main.css" absolute="true" />
Thanks in advance!
I am trying to link a stylesheet to a masterpage in SharePoint with asp.net. It is a print-only stylesheet. The problem im having is that #media print does not work in IE8.
Can i add a stylesheet in asp.net that only applies to print media?
<SharePoint:CssRegistration ID="CssRegistrationCommon" Name="<% $SPUrl:/Style Library/CSS/common.css %>" After="corev4.css" runat="server"/>
Thanks
You can also specify the media on the link for the stylesheet.
media="print"
make sure you main stylesheet points to something like screen/projector so they don't overlap
<link rel="stylesheet" href="<%= Page.ResolveUrl("~/CSS/mystyles.css") %>" type="text/css" media="screen, projection" />
<link rel="Stylesheet" href="<%= Page.ResolveUrl("~/CSS/print.css") %>" type="text/css" media="print" />
Every time I put an inline tag on the link's href attribute it somehow gets auto-encoded. Is this ASP.NET's default behavior? How can I dynamically set the Href attribute using code? This is in MVC btw.
Attempted something like this
<link href="<%: Link.Content.Jquery_css %>" rel="stylesheet" type="text/css" />
which rendered this (nothing changed)
<link href="<%: Link.Content.Jquery_css %>" rel="stylesheet" type="text/css" />
and this
<link href="<%= Link.Content.Jquery_css %> rel="stylesheet" type="text/css" />
which produced this (I couldn't remember the exact numbers, but it seems the bracket-percent-equals was encoded to link format)
<link href="/View/Shared%25Link.Content.Jquery_css%25" %>" rel="stylesheet" type="text/css" />
Link.Content.Jquery_css is a strongly typed string containing the link made using T4MVC.
Add'l info: I used ASP.NET MVC 2, in .NET 4 and testing in Firefox.
I got the same issue in the master page. (It doesn't happen in an individual page.) I found removing "runat=server" from the head tag fixed the problem.
It's getting auto-encoded because of the tag your using (<%: %>). If you don't want the URL to be Encoded, use the following:
<link href="<%= Link.Content.Jquery_css %>" rel="stylesheet" type="text/css" />
Change the ":" to "=" and that remove the auto encoding
Your view is unable to access Link.Content.Jquery_css property. ASP.NET unhelpfully doesn't throw any error.
Move that line inside the body of the page and you will see compilation error.
You could do this:
<head>
<style type="text/css">
#import "<%= ResolveUrl("~/content/styles.css") %>";
#import "<%= ResolveUrl("~/content/print.css") %>" print;
</style>
</head>