Bootstrap5 and other custom CSS not loaded in .net core web api

Question

Hi currently I am on a project of an api that render a cshtml template localy for reporting purpose. The issue is that when using the cdn link of bootstrap the cshtml is rendered acordinly but when using static css file locally all the style is not applied. I have looked on the web and found that you need to use static file middleware in the startup.cs but its not working either.

Here is the screenshoot of my directory:

and here is the code I added in the configure method:

app.UseStaticFiles(new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"StaticFiles")),
            RequestPath = "/StaticFiles"
        });

and here is a sample of the code loading the css in cshtml file:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>@Model.title</title>
    @*<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>*@
    <link href="grafana.light.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="bootstrap.min.css"/>
</head>

Does anyone have a fix for this? Kind Regards

Update:

Directory.GetCurrentDirectory() return the folowing path:

andh the folder where the project is located:

For confidentiality purpose I had to mask the name of the folder but I can testify its the same folder.

i think you misread the documentation: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-5.0 when using RequestPath, you have to call it with the prefix (href="~/StaticFiles/bootstrap.min.css") — Isitar, Aug 31 '21 at 09:39
@Isitar thanks for your answer. i have also tryed using href="~/StaticFiles/bootstrap.min.css" but the style is still not rendering. for more precision i am using bootstrap 5 and .net 5 — Harimanda Jerrys Randriamire, Aug 31 '21 at 10:02
can you tell us what your output folder looks like? did you copy the staticFiles folder to the output? also can you log the content of "Directory.GetCurrentDirectory()" i'm unsure if this is the correct directory (depends on your root directory config) — Isitar, Aug 31 '21 at 11:32
@Isitar i have update the question to show the directory you asked. sorry but for confidentiality issue i had to hide some of the path but is actually the same path — Harimanda Jerrys Randriamire, Aug 31 '21 at 12:53

Harimanda Jerrys Randriamire · Accepted Answer · 2021-09-03T13:21:55.530

0

I will put this one as closed cause I think the problem is not related to the static file but from the generated html i got. Instead i will post another question asking how to render html file from cshtml with css and static file enabled.new question

edited Sep 03 '21 at 13:21

answered Sep 03 '21 at 12:58

Harimanda Jerrys Randriamire

37
8

Bootstrap5 and other custom CSS not loaded in .net core web api

1 Answers1

Linked