How to use css files or js in Area on ASP .NET Core - asp.net-core

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" />

Related

Video not playing in ASP.NET Core MVC

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

How can I link another project's css file in a cshtml file? ASP.NET Core MVC

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/..."

Add support for legacy behavior in ASP.NET Core 3.1 Razor Pages

I'm migrating an application based on .net framework to .net core.
There's a web application which hosts user provided templates which are cshtml files, like this:
/Template/A.cshtml
<!DOCTYPE html>
<html>
<head></head>
<body>
link</body>
</html>
This should be used inside the new application without modification. Because the files reference each other, I cannot change the urls. The routes matched the filenames before:
Route
Page
/Template/A.cshtml
/Template/A.cshtml
/Template/B.cshtml
/Template/B.cshtml
The templates can be added after compilation. So runtime compilation must be supported (AddRazorRuntimeCompilation).
I already mapped the static files:
// Server static files
// -- from wwwroot
app.UseStaticFiles();
// -- from Templates
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Templates")),
RequestPath = new PathString("/Templates")
});
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
Can razor pages be configured to support routes like
"Template/A.cshtml"?
The legacy templates do not contain a "#page"
directive. Is it possible to pretend it is there?
Update
It is possible to add some preprocessing to the files. Thus the #page directive can be added to the cshtml files in some automated processing step.
More difficult is to get the routes right. This should be possible by searching the files on disk and adding some endpoints. Then the actions must be created for each file. That's where runtime compilation comes into play.
/* Pseudocode */
app.UseEndpoints(endpoints => {
foreach (var filename in Directory.GetFiles(...)) {
var action = GetPageAction(filename);
endpoints.MapSomething(filename, action);
}
}
I don't like to search the files in Startup class. There has to be some logic for that in Razor Pages. So I'd like to know how to configure that.

How can i access wwwroot of other Project in .net core 3?

I have 2 projects:
1st: Administrator_Part
2nd: Client_part
I have some photos in wwwroot of Administrator_Part project and my question is how can I access the wwwroot of Administrator_Part from Client_part project razor page?
actually I find a way for solving my problem
just add code blow into your startup.cs
// Access wwwroot For Current Root Project
app.UseStaticFiles();
//Access wwwroot of External Project
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), #"./../Administrator_Part/wwwroot/uploadImage/resize")),
RequestPath = new PathString("/MyImages")
});
and any whare eg into razor page you can use it like this:
<img src="/MyImages/1.jpg" />
just change the path....!

Unable to access local css file

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"
});