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.
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>
At the moment, I am using the NuGet package which allows me to define large bundles with many JS files,
bundles.Add(new ScriptBundle("~/Bundles/js/PartOfMyGiantAngularApp").Include(
// messages
"~/App/messages/service/messageCache.module.js",
"~/App/messages/service/messageCache.service.js",
"~/App/messages/message-list/message-list.module.js",
"~/App/messages/message-list/message-list.component.js",
"~/App/messages/message-detail/message-detail.module.js",
"~/App/messages/message-detail/message-detail.component.js",
"~/App/messages/message-edit/message-edit.module.js",
"~/App/messages/message-edit/message-edit.component.js",
"~/App/messages/message-create/message-create.module.js",
"~/App/messages/message-create/message-create.component.js",
"~/App/messages/message.module.js"
)
and the pull them all into my main html file:
#Scripts.Render("~/Bundles/js/PartOfMyGiantAngularApp.js")
Which will either produce one file in production:
<script src="/Bundles/js/PartOfMyGiantAngularApp.js"></script>
, or in dev it will render multiple script tags.
<script src="/App/messages/service/messageCache.module.js"></script>
<script src="/App/messages/service/messageCache.service.js"></script>
<script src="/App/messages/message-list/message-list.module.js"></script>
<script src="/App/messages/message-list/message-list.component.js"></script>
<script src="/App/messages/message-detail/message-detail.module.js"></script>
<script src="/App/messages/message-detail/message-detail.component.js"></script>
<script src="/App/messages/message-edit/message-edit.module.js"></script>
<script src="/App/messages/message-edit/message-edit.component.js"></script>
<script src="/App/messages/message-create/message-create.module.js"></script>
<script src="/App/messages/message-create/message-create.component.js"></script>
<script src="/App/messages/message.module.js"></script>
How do we get this automatic multiple files in dev mode when using the new build-time Bundler/Minifier without having to both specify each file in my bundle config AND in the main HTML page with an environment tag?
I want it to just work out the paths and give them to be just like the old one. It's hard to debug a single line of JS code when I have no idea which file it's from.
It's written very nicely here:
https://learn.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?tabs=visual-studio%2Caspnetcore2x
Under: Environment-based bundling and minification
That we will have to do things like this:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
This is a horrible solution when I have a lot of JS files!
I believe you want to disable bundling.
In your RegisterBundles method (BundleConfig class in the App_Start folder).
Add this, it will disable bundling
BundleTable.EnableOptimizations = false;
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.
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.