I'm dipping my toes into ASP.NET 5 (vNext). To do that, I downloaded Visual Studio 2015 RC. I created a new ASP.NET Web Application. Then, in the next dialog I chose "Empty". From there I added a basic controller and a basic view.
I want to add bower and reference Zurb Foundation. However, I'm not sure how to do that. I've added a bower.json and .bowerrc file. Traditionally, I would install my bower packages in a directory called "libraries". I configured it like so:
.bowerrc
{
"directory" : "/public/libraries"
}
Then, in my views, I'd have code that looked like this:
<link rel="stylesheet" src="~/public/libraries/foundation/foundation.min.css" />
I can see that when I run bower, I am in fact downloading the libraries and they are being placed in /public/libraries. However, when I deploy it, there seems to be an issue. It looks like the deployment is getting ran from wwwroot. However, I'm not sure what to do about
Client-side packages loaded via bower
My resources (i.e. images, css, javascript, fonts, etc.) that I need my app to use.
What do I need to do to access static files a) during development which seems to use the typical file structure and b) during deployment where the stuff seems to run from wwwroot?
During development and production, you need to put stuff under the webroot if you have it defined. You can do this by gulp or grunt task. See here for an example.
Assuming you have the following structure:
└───wwwroot
├───js
│ └───foo.js
│ └───bar.js
You will be able to reach out to them by:
<link rel="stylesheet" src="~/js/bar.js" />
<link rel="stylesheet" src="~/js/foo.js" />
You should not be making reference in your views to the location of the bower dependencies, instead you should be referencing the relative path within wwwroot.
To see how it all fits I recommend creating a new project using the ASP.NET 5 Web Page template in VS 2015 RC.
In package.json your tool dependencies (resolved by npm) are listed. Notice for the default project gulp is included here. Gulp is the default task runner but you can use any task runner you like. The bower dependencies by convention are defined in bower.config.
By convention the location for bower dependencies is bower_components off the
project root.
If you look in gulpfile.js you will see that it copies the dependencies from bower_compontents to /lib off the project webroot (/wwwroot by default).
In the view _Layout.cshtml you will see the references to the libraries is ~/lib not /bower_components.
#inject IOptions<AppSettings> AppSettings
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - #AppSettings.Options.SiteTitle</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css"
asp-fallback-href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"
asp-fallback-test-class="carousel-caption" asp-fallback-test-property="display" asp-fallback-test-value="none" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
</head>
So in summary:
Define client side dependencies in bower.config (or using some
other package mananger)
Use gulp scripts to manage tasks (copying, minifying, etc).
Only make references in views to locations within webroot (using ~ relative paths).
When you build/publish all dependencies should be resolved prior to deploying
to server.
Related
I create nuget about my component(.razor,.razor.cs) and some staticwebassets(.css,.js).
Once packed I'm sure nuget .nupkg > staticwebassets folder contains my css and js
but when project use nuget just can reference the razor,static file doesn't work
I tried to link my.css in index.html
but not sure is the wrong URL or other mistakes
my_nuget_component
<link href="_content/my_nuget_component/staticwebassets/my.css" rel="stylesheet" />
antdesign
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
how can I link static file like antdesign?
I have created a simple web site in asp.net and I have used the two js file on my page Code of
customerpage.aspx page
<head runat="server">
<title>Sample Site</title>
<!-- jQuery -->
<script type="text/javascript" src="http://localhost:63645/Customer/GetResources?resourceName=CUST.Data.Scripts.3rdParty.jquery.min.js"></script>
<script src="http://localhost:63645/index.js"></script>
<link rel="stylesheet" href="http://localhost:63645/index.css">
</head>
I have used the ajax call.
When I ran the project it gives me error the server responded with a status of 401 (Unauthorized).
To use External java-script it might need username and password, so I have download these files to my local folder where project exists and tried to run the project and still getting same error.
Code after downloaded the files to local.
<script src="js/CUST.Data.Scripts.3rdParty.jquery.min.js"></script>
<script src="js/index.js"></script>
<link href="css/index.css" rel="stylesheet" />
I don't know what is wrong. Any help will be much appreciated.
After spending time I have found the solution by changing
Change:
settings.AutoRedirectMode = RedirectMode.Permanent;
To:
settings.AutoRedirectMode = RedirectMode.Off;
I have a kind of standard MVC web application built with VS Express 2013.
My BundleConfig.cs is like this:
using System.Web;
using System.Web.Optimization;
namespace AcompOrcEst.UI
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.flatly.min.css",
"~/Content/Site.css"));
}
}
}
I'm using this bootstrap.css alternative theme, bootstrap.flatly.min.css.
The section of my _Layout.cshtml is like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<title>#ViewBag.Title | Gestão do Orçamento Estrutural</title>
<link rel="shortcut icon" href="~/Content/Imagens/favicon.ico" type="image/x-icon" />
<link rel="icon" href="~/Content/Imagens/favicon.ico" type="image/x-icon" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
When running the app in my development machine, i.e. localhost server, everything works pretty fine.
So, I published the app to the server (running IIS 7.5). I checked that all the files were copied to the server properly.
But when the app runs in the server the instruction bellow returns the HTTP Error 500!
#Styles.Render("~/Content/css")
From IE Developer Tools - Network I got the following infos:
I've tried changing the bootstrap.flatly.min.csss to the original bootstrap.css. No success!
I have similar apps, running in the very same server, that were built with the very same structure and use the very same style files. The BundleConfig.cs file have the same content, the section in _Layout.cshtml are the same, except for the ViewBag.Title. And all of them run properly.
I noticed that in the similar apps, the value of Content-Length of that similar request (the bundled css) is much higher: 113004.
So, I think that something, that I don't know what is, is corrupting the loading of the bundled css.
Could anyone help me to figure out what is happening?
Thanks in advance.
Paulo Ricardo Ferreira
Am currently working on a spring mvc project on Eclipse. Am unable to get an external css working in a .jsp . My folder structure is as follows
Myproj, WebContent,
WEB-INF,
css,
.css files
I use the following piece of code to reference the css file.
<link href="<c:url value="/css/filename.css" />" rel="stylesheet" type="text/css" />
I use spring jars version 3.1.0. I have also added the following lines of code within myproj-servlet.xml
<mvc:annotation-driven />
<mvc:resources location="../css/" mapping="/css/**"/>
Still am unable to access my css file or get it apply to my jsp file. While using firebug i see that the css link gets a 404 not found only. Where could be the issue/ how can i resolve?
Change your resource location to
<mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
and while accessing on jsp you could very well write
<c:set var="context" value="${pageContext.request.contextPath}" />
<link rel="stylesheet" type="text/css" href="${context}/css/style.css" />
Cheers.
I'm trying to link css file to xhtml page in several ways but nothing what I did want to work.
Here is folders structure of project:
Project
Java serources
WebContent
**index.xhtml**
META-INF
WEB-INF
style
**style.css**
Now in index.xhtml file I have:
<link rel="stylesheet" href="style/style.css" />
Can someone tell me what I do wrong?
Add resources folder under the WebContent
and inside resources create css folder
then access the files like this
<h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" />
Here's a tutorial Resources (library) in JSF 2.0
Put your link tag as I mention below:
<link href="style/style.css" rel="stylesheet" type="text/css"/>