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.
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 developed a asp.net website(.aspx) using the bootstrap and the total look and alignments were good while debugging the code in my local system using IE10.
once the code is deployed in a asp.net server the button styles and the alignments of the controls in html table tags were totally different from the local site .
Please share your ideas for resolving the issue.
I have used the below tags in the master page.
<link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Content/bootstrap.min.css" runat="server" rel="stylesheet" type="text/css" />
<link href="Content/bootstrap-theme.css" runat="server" rel="stylesheet" type="text/css" />.
.
.
.
.
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
thanks.
My issue got resolved.
all the resources were linked correctly but the issue was due to the default browser version the pages are getting rendered.
So I needed to add the below the meta tag in the master page. After which all the pages were loading fine.
[link] meta http-equiv="X-UA-Compatible" content="IE=edge" />
Thank you all for the suggestions and help.
You do not need both versions of bootstrap.css - for production server use the minified version(s).
For example:
In your master page:
<webopt:BundleReference runat="server" Path="~/Content/bootstrap.min.css" />
In your Bundle.Config.cs class:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/css").Include(
"~/Content/bootstrap.min.css"));
}
As regards setting the correct path in master page, this is a known bug and an easy way to get it right is to drag the CSS file from VS Solution Explorer to the head section of your master page in code view.
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.
This is really hard to tell but I will give a try.
I am developing a website using ASP.NET on VS2010 IDE. After Running my web site on my local computer the page works properly.
Once, I wanted to see the resource code on the browser (Mozilla Firefox 20). Well Nothing was looking wrong. Let me share my web page's <head> part:
<link href="../../Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Scripts/jquery.hoverIntent.minified.js" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="Scripts/superfish.js" type="text/javascript"></script>
Now hold tight!
When I click on a path (for example: Scripts/jquery.hoverIntent.minified.js), I will show you what happens then:
<link href="../../../Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="Scripts/superfish.js" type="text/javascript"></script>
Normally the browser opens the js file's content in the code view, but here it prepends a ../ to the ../../Styles/Site.css. The more I click the more it adds.
Is there any logical explanation of this behaviour? I have tried it in Firefox and Chrome.
By the way I am using UrlRewritingNet.UrlRewriter.dll add-on.
My best guess is that the URL gets rewritten during the request. Perhaps UrlRewritingNet.UrlRewriter.dll is to blame for this?
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.