Local css file called site.css is stored in Content folder in .net core project
Tried the following in layout
<link rel="stylesheet" href="#Url.Content("~/Content/site.css")" />
as well as
<link rel="stylesheet" href="~/Content/site.css" />
but didn't work.
In startup I have
app.UseStaticFiles();
Is there anything I am missing? I am unable to access the css in the browser. Gives error in dev tools.
Thank you
UseStaticFiles() only serves content from wwwroot folder. It should works, if you move your css file to wwwroot/Content/.
If you want to serve static content from Content folder, you should apply config like below:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "Content")),
RequestPath = "/Content"
});
Related
I created a project with ASP.NET Core 6 MVC web app. In this project, videos are uploaded.
To prevent all users from accessing the videos, a folder named "File" was created outside the
wwwroot and the videos were uploaded to the File folder.
Videos will not play when referenced from the File folder with the code below. What is the reason for this problem and what should I do to solve it?
<video src="../File/Videos/VideoName.mp4" controls width="640" height="300" loop/>
When you want to Serve files outside of web root, You need to configure the Static File Middleware as follows
//.....other middleware...
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, "File")),
RequestPath = "/File"
});
//.....other middleware...
Then Use this code to show video:
<video src="#Url.Content("File/video/VideoDemo.mp4")" controls width="640" height="300" loop/>
Demo:
More details you can refer to this Docs
I want to link in cshtml-file on css-file from another project in asp.net core application.
My solution contains two projects, this look something like this:
Project1 (ASP.NET Core MVC)
There is wwwroot/css/site.css inside Project1
Project2 (ASP.NET Core MVC)
In file _Layout.cshtml (Project2) I want to link css-file from Project1, something like this:
<link rel="stylesheet" href="" asp-append-version="true" />
But I can't simple to write in href attribute path to Project1/wwwroot/css/site.css file. How can I do it?
You can try to copy the absolute path of wwwroot in Project1,and add the following code to project2:
app.UseHttpsRedirection();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine("xxx/xxx/xxx/wwwroot")),
RequestPath = "/StaticFiles"
});
app.UseRouting();
and then call the files from wwwroot in Project1 like:
href="~/StaticFiles/..."
You know ASP .NET Core MVC has a wwwroot static files folder. I need to put my custom js, css etc. into Content folder under Areas folder. Anyone tried this before or anyone know how to do this?
If the structure of our area is as follows :
You need to Copy these codes to the Configure section in Startup under the
app.UseStaticFiles()
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new
PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),
"Areas\\Foo\\Content")),
RequestPath = new PathString("/Foo/Content")
});
and link the file like below :
<link rel="stylesheet" href="/Foo/Content/bootstrap.min.css" />
It is a noobish question.
I am writing an expressjs app. I am not able to get jquery or bootstrap working.
// app.js
app.use(express.static(__dirname + '/public'));
Also tried
app.use(__dirname + '/public');
or
app.use(path.join(__dirname + '/public'))
or
app.set(__dirname + '/public');
or
app.set(path.join(__dirname + '/public'))
// views/home.html
<head>
<script src="/js/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
alert('hello');
});
</script>
</body>
//public>js>jquery.min.js
It is not working. I am using express 4.
Template works fine other than jquery
I have a need for this to work offline while writing this app, so can not use CDN
DIRECTORY STRUCTURE
app.js
views
--layouts
--partials
public
--js
----jquery.min.js
Using 'hbs' package, handlebars for templating
Thanks
Looks to me like you shouldn't be able to reach your view with your current setup. When you say app.use(express.static(__dirname + '/public'));, you are saying that when you hit http://{hostname}:{portNumber}, you'll be served content from the the /public folder. You shouldn't be able to access any resources on your file system that do not fall within the /public folder. So maybe if you set up a folder structure like:
app.js
--public
----views
------layouts
------partials
------home.html
----js
------jquery.min.js
that I think would work (assuming that your view.html still points to jquery.js in the folder structure correctly).
I am new to express. Basically my question is very simple.
I want to serve files like /css javascript from one public directory..
layout.hbs
<html>
<head>
<link href="css/style.css" rel="stylesheet" />
<script src="js/app.js"></script>
</head>
<body>
{{{body}}}
</body>
</html>
router.js --> I have three route that point to one index.hbs
router.get("/", function(req,res){
res.render("index.hbs");
})
router.get("/articles", function(req,res){
res.render("index.hbs");
})
router.get("/articles/show/:id", function(req,res){
res.render("index.hbs");
})
Now the problem is when I run this address:
curl "http://localhost:3000/"
http://localhost:3000/js/app
http://localhost:3000/css/style.css
----------------------------------------------
curl "http://localhost:3000/articles"
http://localhost:3000/articles/js/app
http://localhost:3000/articles/css/style.css
----------------------------------------------
curl "http://localhost:3000/show/1"
http://localhost:3000/show/1/js/app
http://localhost:3000/show/1/css/style.css
notice that the /css and /js path keep changing in accordance to UrlRequest. How to prevent this from happening?
I am using express and handlebars, and have already set my static file
app.use(express.static(path.join(__dirname, 'public');
You should specify the URLs to your JS and CSS as absolute URLs in your template: instead of css/style.css, use /css/style.css.
The first means "use this path relative to this page to browsers (and curl), the second "use this path relative to the host - which is what you want.