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
Related
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/..."
I have latest Visual Studio 2019 16.5.4 Enterprise.
I've just created an ASP .Net Core 3.1 MVC application from a template (with default settings).
And I've added some JavaScript code to a Home Page's Index.cshtml:
#{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
#section Scripts {
<script>
function GetJSON_Simple() {
var resp = [];
return resp;
}
debugger;
var simpleData = GetJSON_Simple();
</script>
}
And I'm not able to debug JavaScript code (breakpoints inside GetJSON_Simple function body or on var simpleData = GetJSON_Simple() is never hit). I've tried both Chrome and MS Edge (Chromium).
According to this article (Debug JavaScript in dynamic files using Razor (ASP.NET) section):
Place the debugger; statement where you want to break: This causes the
dynamic script to stop execution and start debugging immediately while
it is being created.
P.S. I've already have Tools->Options->Debugging->General with turned on Enable JavaScript Debugging for ASP.NET (Chrome and IE) checkbox and of course I'm compiling in Debug.
My test project is attached
Howto debug JavaScript inside ASP .Net Core 3.1 MVC applications
(Razor view - *.cshtml)?
In fact, it is already a well-known issue. We can not debug the js code under Net Core razor page but only for code in separate js or ts files. See this link.
Solution
To solve it, I suggest you could create a new single js file called test.js and then reference it in razor page and then you can hit into js code when you debug it.
1) create a file called test.js and migrate your js code into it:
function GetJSON_Simple() {
var resp = [];
return resp;
}
debugger;
var simpleData = GetJSON_Simple();
2) change to use this in your cshtml file:
#{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
#section Scripts {
<script scr="xxx/test.js">
</script>
}
3) clean your project, then rebuild your project and debug it and you will hit into Js code.
Another way is to explicitly define the source mapping name for the script directly in your javascript code via a sourceURL comment.
<script>
...your script code
//# sourceURL=blah
</script>
The script in that block will show up in Chrome with the value you specified. You can then view and debug just like a normal .js file.
This is especially useful if you don't want to refactor an existing codebase that has embedded javascript in the cshtml files or really ANY codebase that has javascript loaded on the fly.
Live Example
You can actually see an example with the built-in javascript runner here. Just click 'Run Snippet' and then search for "blahblah" in your Page sources. You should see this:
alert("test");
//# sourceURL=blahblah
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" />
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....!
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"
});