In my ASP.NET Core 6 MVC project, the .css file is not working in the view file.
I ran .NET externally as html file and it worked without any problems.
In my ASP.NET Core 6 MVC project, the .css file is not working in the
view file.
As you may know, Static files are stored within the project's web root directory.And the default directory is {content root}/wwwroot, You can refer to the official document here about static files.
Inside wwwroot:
Thus, You need to put your css files either in folder into wwwroot like following:
Then try to use:
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
In Program.cs file include the reference:
app.UseStaticFiles();
Outside wwwroot:
Furthermore, if you want to serve files outside of the web root in that scenario, Consider below directory hierarchy :
Program.cs
Include reference as following in your program.cs file:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, "StaticFilesFolderName")),
RequestPath = "/StaticFilesFolderName"
});
Use Reference:
<link rel="stylesheet" href="~/StaticFilesFolderName/site.css" asp-append-version="true" />
Note:
As per your scenario, it would be AdminLTE... so on and follow the accurate path. For more details and example please have a look our official document here.
Related
I have subfolders of JS and CSS in my wwwroot folder of asp.net core razor page application. Application works fine in local environment, but while deployment of the project on IIS, the wwwroot folder does not contain any subfolders or files in it.
Even if I manually upload the folders and files to wwwroot folder, it doesn't work and it does not load the JS and CSS files in the browser.
Note that I do not have "Environment" tags in my application.
Try to edit the .csproj file of your asp.net core project:
Remove all the ItemGroup tags and their contents then add this
<ItemGroup>
<None Include="wwwroot\*" />
</ItemGroup>
You could refer this link for more detail:
Visual Studio publish profiles for ASP.NET Core app deployment
There are two ways of setting the js/css path
Absolute Path
Relative Path
Absolute Path is, you have to give proper path in web server .
http://<website name>/css/site.css
Relative Path is, you can give file page relative to current page.
let say your page is from http://<website name>/index.html
relative path will be ./css/site.css
Better you try to access js or css file from browser. may be these folders do not have right permission to access.
if you open Dev Tool, you can see the error in Network tab or console. Base on HTTP code, you can decide what has happened
In my scenario I was adding MVC to my .Net 5 API
The solution was to add
app.UseStaticFiles();
to the Startup.cs
I'm building the ASP.Net Core Web Application
I installed bootstrap using Quick Install Package. So now I have it in my dependencies:
Also, there's a folder "node_modules" with bootstrap and everything is fine there, all classes are where they're supposed to be:
Then I created a view and in html wrote the following:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
When I hover the mouse over the href, I see a warning:
Path C:\Users\Shep\SportsStore\SportsStore\wwwroot\~node_modules not found
Well, it's true, because there's no such folder, but how to keep it from looking in wwwroot and use the specified folder? My wwwroot is empty, I guess it's because I didn't use bower
If I use the full path (href="C:/Users/Shep/SportsStore/SportsStore/node_modules/bootstrap/dist/css/bootstrap.css"), it seems right, but I bootstrap classes are unavailable:
<body>
<div class="panel-info">
</div>
</body>
and if I hover the mouse over, I see "Unknown CSS class 'panel-info'" even though there's this class in bootstrap.css
.panel-info {
border-color: #bce8f1;
}
I'm not using Angular and haven't created any js files of my own yet.
I have seen lots of similar issues and haven't found suitable solution, sorry if it's a duplicate
In ASP.NET Core, the runtime supports a piece of middleware called StaticFiles that allows anything in the /wwwroot folder to be accessible from the browser. But since the node_modules directory is outside of /wwwroot ,that problem occurs .
You can use Library Manager/Bundler and Minifier to copy the files into wwwroot . There are a lot of solutions you could find from here .
I spent almost 2-3 good hours on this and im here now, as the question states. The project works fine in VS but when I deploy/publish it through IIS (to access it on local network) some files (well most of them) aren't accessible. This happened when I added the Metronic theme within my web project. The files are like:
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
OR
<img src="../assets/pages/img/logo.png" alt="place Logo Here" />
Now once its published, it throws me a pile of errors that it could not find any of those files.
Notice: the url in both the pictures, the deployed project is under another folder. is it the culprit?
I am trying to figure out a solution that works for both VS debugging and the deployed project.
What I have tried is:
1: https://weblogs.asp.net/scottgu/tip-trick-how-to-run-a-root-site-with-the-local-web-server-using-vs-2005-sp1
2: Deploying asp.net application to root directory in IIS
3: How to avoid deploying ASP.NET MVC3 application in subpath on IIS 7.5
4: ASP.NET WebForms: Why do relative paths within user controls work locally, but not when deployed?
5: IIS virtual directory and ASP.NET directory paths
6: Relative path from site root
You might want to use absolute paths starting with '~/' as the base directory of your Web Site / Web App.
e.g. "~/assets/pages/img/logo.png"
and when working in Code Behind use the
Server.MapPath("~/")
as Base Folder.
g2 is the folder that I created inside wwwroot which has the published files
If your intent was to make that a "sub application" (of whatever is the "parent" in wwwroot then it can be a "virtual directory" or a "sub application"
If your intent was to publish it as it's own application, separate from any other, then you don't have to publish it under wwwroot. You create new IIS sites.
The previous answer using ~/ is based on what is defined as the application root
Hth...
I create new asp.net mvc project in visual studio 2015.The project has a wwwroot file.What is this?
Quoting the official website:
The wwwroot folder is new in ASP.NET 5.0. All of the static files in
your project go into this folder. These are assets that the app will
serve directly to clients, including HTML files, CSS files, image
files, and JavaScript files. The wwwroot folder is the root of your
web site. That is, http://some.hostname/ points to wwwroot, all URLs for
static content are relative to the wwwroot folder.
Code files should be placed outside of wwwroot. That includes all of your C# files and Razor files. > Having a wwwroot folder keeps a clean separation between code files and static files.
Source
It's worth mentioning that the term wwwroot itself is certainly not new and it's actually a convention used across many platforms (including J2EE applications and IIS itself with its c:\inetpub\wwwroot directory).
Similar conventions in the Unix/Linux world are htdocs, public_html and www.
The wwwroot folder is new in ASP.NET 5 to store all of the static files in your project. Any files including HTML files, CSS files, image files, and JavaScript files which are sent to the user's browser should be stored inside this folder.
Code files should be placed outside of wwwroot, including C# files and Razor views. Having a wwwroot folder keeps a clean separation between code files and static files. It brings clarity to the items that will be sent to the server and the items that should remain on the dev machine. If you look at the screenshot, wwwroot folder has css and lib sub folders. Css folder is a place to keep your custom css files, while lib folder is used by Bower package manager. The lib folder contains the packages downloaded by Bower and can contain css, js and images.
The screenshot shows that lib folder has a bootstrap package folder. If you expand it, you will find css, js, as well all other assets related to the bootstrap package.
In MVC4, we used the content folder to keep style sheets as well as scripts folder for referenced scripts. These folders are gone now, so it's important to understand that there is no single folder for style sheets or scripts. They could be in any of the folders within wwwroot.
It's interesting to note that if you wish to reference the css, js, or img files in your razor views, using the ~ keyword ensures direct path to the wwwroot folder. So suppose you wanted to reference site.css in your view, you can access it using the <link rel="stylesheet" href="~/css/site.css" /> syntax.
You can see that the ~ keyword points to the wwwroot folder.
I have an ASP .NET MVC 4 app with BundleConfig.cs in the App_Start folder and a call to this class and the RegisterBundles method within the Global.asax.
Everything works fine regarding the Script bundling, but the style bundling produces nothing.
var bundle = new StyleBundle("~/bundles/css")
.Include("~/Themes/Rikkle.Web/Styles/app.min.css");
BundleTable.Bundles.Add(bundle);
I access the above bundle on the page like so:
<link href="/bundles/css" rel="stylesheet" type="text/css"/>
I am manually calling the link as opposed to using #Styles.Render() because the page output NOTHING when I call this (again, all script bundling still works). When I go to localhost:xxx/bundles/css in the browser I get a Status Code of 200, everything is fine, just that the payload is nothing. When I go to localhost:/themes/rikkle.web/styles/app.min.css in the browser, it pulls up without an issue.
Also, I am referencing System.Web.Optimization, the latest drop from Nuget, in both my views folder web.config and the main web.config.
This question is answered by: Bundler not including .min files
Essentially, if you have "min," as in "app.min.css," then the bundling blows up.