I'm working on a asp.net web-form website in which I use ../ for routing files like js files, styles, etc. When I decided to apply ScriptBundle and replace ~/ instead ../ the website didn't work at.
js file completely are loaded on browser but they didn't work.
This is my code before ScriptBundle that work perfectly:
<!-- Page Scripts Starts -->
<script src="../Script/jquery.min.js"></script>
<script src="../Script/jquery.colorpanel.js"></script>
<script src="../Script/bootstrap.min.js"></script>
<script src="../Script/jquery.flexslider.js"></script>
<script src="../Script/bootstrap-datepicker.js"></script>
<script src="../Script/owl.carousel.min.js"></script>
<script src="../Script/custom-navigation.js"></script>
<script src="../Script/custom-flex.js"></script>
<script src="../Script/custom-owl.js"></script>
<script src="../Script/custom-date-picker.js"></script>
<!-- Page Scripts Ends -->
and this is after ScriptBundle:
<!-- Page Scripts Starts -->
<%: Scripts.Render("~/Script/js") %>
<!-- Page Scripts Ends -->
Cs file:
bundles.Add(new ScriptBundle("~/Script/js").Include(
"~/Script/bootstrap-datepicker.js",
"~/Script/bootstrap.min.js",
"~/Script/custom-date-picker.js",
"~/Script/custom-flex.js",
"~/Script/custom-navigation.js",
"~/Script/custom-owl.js",
"~/Script/jquery.colorpanel.js",
"~/Script/jquery.flexslider.js",
"~/Script/jquery.min.js",
"~/Script/owl.carousel.min.js"));
That is beacuse the order of the script files (in .cs) is wrong. jquery.min.js should most likely be first. Change the order so that it is the same as per your working example. Since atleast all jquery.*.js files uses jquery.min.js they must be loaded after jquery.min.js.
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 many scripts inside of my index.html file that holds all my Ractive scripts. I am wondering if there was some way to organize this all and have these scripts in different html or js files.
Here's what I mean:
//index.html
<script type="text/html" id="template-1">
...content...
</script>
<script type="text/html" id="template-2">
...content...
</script>
<script type="text/html" id="template-3">
...content...
</script>
Here's what I am trying to accomplish
//template1.html or js
<script type="text/html" id="template-1">
...content...
</script>
//template2.html or js
<script type="text/html" id="template-2">
...content...
</script>
//template3.html or js
<script type="text/html" id="template-3">
...content...
</script>
I have tried doing it this way, and I get errors since my ractive objects are on my index.html, and there's no way to include other html files. I'm sure other people have had this problem before, is this possible?
You should use per-file components. This allows you to package one component into one file, script, styles and markup while still keeping the separation between them. In order to use components, you need to use loaders which are available in just about every module management/bundling system out there.
You could use php or some other server side script
<?php
include_once('a.html');
include_once('b.html');
include_once('c.html');
?>
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 have just created some directories and tidied up my growing ASP.NET project but it has caused some issues that I can't solve. I have a directory in the root of the project called js and another one called Pages.
In Pages I have a file called MasterPage.master which is a master page. The Pages directory has Default.aspx and some subdirectories of other pages.
I have two main issues. In MasterPage.master I have code like this to reference javascript files:
<script src="js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
However none of my javascript can be found any more. I tried <script src="/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> and I tried <script src="~/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> but it still doesn't work.
The other issue is that I have a menu system written is CSS and that has some strange behaviour. When the page loads the menu works fine. If I navigate to /Pages/Trades/TradeInfo.aspx and then hover over that item the page path now says /Pages/Trades/Trades/TradeInfo.aspx
Why has the Trades directory been added twice?
Have you tried ResolveUrl?
It sure works for the script tags and your anchor tags.
<script src='<%=ResolveUrl("~/Scripts/jquery/ui/jquery-ui-1.8.11.custom.min.js") %>' type="text/javascript"></script>
Refer to my this question: Page not redirecting properly, URL rewriting (Asp.NET)
Which is resolved except one thing.
Though I have put the code to eliminate post back for .jpg and other file extension, JQuery at the web page is not working.
<script type="text/javascript" src="JS/jquery.js"></script>
I have written it like the above. I have tried to change the path like
<script type="text/javascript" src="~/JS/jquery.js"></script>
but no luck.
Any suggestion
Try this.
<script type="text/javascript" src= "<%=ResolveUrl("~/JS/jquery.js")%>" ></script>
you first check if the string contains /web/
if (app.Request.RawUrl.ToLower().Contains("/web/"))
and your .js file doesn't contain /web/
so either put the js file in the web folder, or check for the string to contain /js/ as well...
if (app.Request.RawUrl.ToLower().Contains("/web/") || if (app.Request.RawUrl.ToLower().Contains("/js/")))