I have my CSS and JS in my layout page.
I need to add a param string to the CSS and JS when I do changes and I upload them with these changes.
For example:
<environment names="Production">
<link href="~/dist/mycss.bundle.css" rel="stylesheet"/>
</environment>
To:
<environment names="Production">
<link href="~/dist/mycss.bundle.css?param=withchanges" rel="stylesheet"/>
</environment>
What is the best way to do that? Has new ASP.NET 5 a way to do that?
there is a built in taghelper that is just for this purpose
<link href="~/dist/mycss.bundle.css" rel="stylesheet" asp-append-version="true"/>
by adding the asp-append-version=true, a hash of the file contents will be automatically appended to the url so it will change if the file contents change.
Related
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;
I have a view called homePage.blade.php which is my master page which resides in res/views/ in that file I have this.
<link rel="stylesheet" href="css/coreStyleSheet.css">
<link rel="stylesheet" href="css/animate.css">
<script src="js/coreScripting.js"></script>
<script src="js/moments.js"></script>
<link rel="stylesheet" href="icons/fontAwesome/css/font-awesome.css"> </head>
all is fine?
Now I create a folder called AppCreate who's path is res/views/AppCreate I have a blade file there called something.blade.php now when I use #extends('homePage') I am not able to access the css,js.
my tree looks like this.
-res
-views
homePage.blade.php
-AppCreate
-something.blade.php
I redirect something.blade.php tp public/admin/appcreate
I redirect homePage.blade.php to public/dashBoard.
I hope I have explained it well.
when I access the public /admin/appcreate laravel is not able to find the css and the js because it says this.
GET http://localhost/laravel/public/admin/css/coreStyleSheet.css
appcreate:12 GET http://localhost/laravel/public/admin/js/moments.js
appcreate:11 GET http://localhost/laravel/public/admin/js/coreScripting.js
appcreate:13 GET http://localhost/laravel/public/admin/icons/fontAwesome/css/font-awesome.css
Try using the Helper Functions like this:
<link rel="stylesheet" href="{{ asset('css/animate.css') }}">
<script src="{{ asset('js/coreScripting.js') }}"></script>
assuming you have your css and js folders inside public/assets
I am trying to get add a css file to my layout file, which is in the Shared folder. When I run the web application, my CSS is not rendered (CSS that is not in the solution (ie: Bootstrap CDN) renders.
I have tried linking the CSS using these methods, and they don't work:
<link rel="stylesheet" href="#Url.Content("~/Assets/Scripts/StyleSheet.css")" type="text/css"/>
<link rel="stylesheet" href="~/Assets/Scripts/StyleSheet.css" type="text/css"/>
The File Structure For my app is:
Is there something I should be adding to the Startup.cs file so it can read css files?
Thanks.
EDIT: ERROR 404 WITH THE STYLE SHEET
I ran the application on Mozilla Firefox, and used the built in Developers Console to see whats happening. After observing the network tab, it tells me ERROR 404 Occurred while trying to retrieve the style sheet. This is really odd.
Do other changes in your layout show up correctly? For instance if you add a random text string, does that show up? As far as startup.cs, you should have app.UseStaticFiles(); in the Configure section.
Once more note, my CSS in the _layout looks like this:
<environment names="Development">
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
I don't think it's required to be broken out, but I haven't tried it not broken out...
With Reference to a similar problem posted on StackOverflow: ASP.NET 5 MVC6 Custom CSS & Javascript placing convention
I placed the CSS File in the wwwroot directory, in a css folder.
Then, in my Layout file, I changed the href attribute:
<link rel="stylesheet" href="#Url.Content("../css/style.css")"/>
Finally, I made sure I had app.UseStaticFiles() in my Configure method:
public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles();
app.UseMvc(config => config.MapRoute(
name: "Default",
template: "{Controller}/{action}/{id?}",
defaults: new {controller = "Home", action = "Index"}
));
}
I am using asp.net 4 routing and im enjoying it so far. I have one problem only with my javascript files.
I am using a masterpage to add my css and javascript. The css is working fine however the javascript is not.
My links from my masterpage look like this
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="~/_styles/css/core.css" rel="stylesheet" type="text/css" />
<link href="~/_styles/css/facebox.css" rel="stylesheet" type="text/css" />
<script src="~/_styles/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="~/_styles/js/jquery.validate.js" type="text/javascript"></script>
<script src="~/_styles/js/facebox.js" type="text/javascript"></script>
<script src="~/_styles/js/corejs.js" type="text/javascript"></script>
Why does my css load correctly but the js doesnt?
This is question is bit old..but i faced same situation using ASP.NET 4.0 routing and referencing different js file or stylesheet when you move from different directory structure.. what i used to resolve is:
<script src='<%=ResolveClientUrl("~/js/fancybox/jquery.fancybox-1.3.4.js")%>' type="text/javascript"></script>
So key was using ResolveClientUrl
Hope this helps people in future.
Please check and make sure when you adding the link for your script.You just type the
<script src=" and Ctrl+Space then choose your file.If you can't find your project path,just try it to get in that path.Sometime,the file will not in that path when you may be copy & paste that file to your project path(not from your VS Project explorer).
you can use simply _styles/js and _styles/css.
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.