My ASP.NET razor page not seeing my bootstrap CSS files

Question

0.00/5 (No votes)

See more:

I decided to learn some ASP today and I made quite a remarkable progress by building one from scratch, I learnt that you need to create a folder in your project called Pages where you add new Razor pages. In this folder I have a razor page called index.cshtml, I also have another folder in my project called wwwroot which contains a folder called lib which contains css which has my bootstrap file bootstrap.css. The problem is that my index.cshmtl file does not see the bootstrap file despite the correct linking. Help me make my razor page see the bootstrap file

What I have tried:

<pre lang="HTML">
@page
@model Pages_Index


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/lib/css/bootstrap.css"/>
    <script src="/_framework/aspnetcore-browser-refresh.js"></script>
</head>
<body>
    <h1>Biography</h1>
    <p>
        My name is Leonardo Da Vinci and I am an avid .NET technology enthusiast and programmer.
        I started my journey with .NET development with C#(See Sharp)
    </p>
</body>
</html>

Posted 18-Jun-23 21:41pm

Tim the Gamer

Updated 18-Jun-23 23:16pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2023-06-18T23:16:00

Solution 1

Try using an app-relative path combined with the asp-append-version tag helper:

HTML

<link rel="stylesheet" href="~/lib/css/bootstrap.css" asp-append-version="true"/>
<script src="~/_framework/aspnetcore-browser-refresh.js" asp-append-version="true"></script>

asp-append-version Feature In ASP.NET Core[^]

Posted 18-Jun-23 23:16pm

Richard Deeming

Comments

Tim the Gamer 19-Jun-23 5:33am

I see your solution includes a tilde inside the href markup. Let me try that and follow up. I really wanna master this ASP as it's got a lot of demand out there.

Richard Deeming 19-Jun-23 5:37am

Yes, that's an "app relative" path. The tag helper (activated by the asp-append-version attribute) resolves that relative to the wwwroot folder.

There are a whole bunch of tag helpers for the various HTML elements which refer to paths within that folder:
UrlResolutionTagHelper Class (Microsoft.AspNetCore.Mvc.Razor.TagHelpers) | Microsoft Learn[^]

Tim the Gamer 19-Jun-23 5:45am

Still not working, I added the asp append version attribute and the tilde, is there a way to post a screenshot besides the question so I show my project structure clearly?

Andre Oosthuizen 19-Jun-23 5:58am

This is the correct answer, not sure why your code is not running as expected. Maybe show your folder structure something to this -

- Pages
  - Index.cshtml
  - About.cshtml
  - Contact.cshtml
  - ...
- Areas
  - Admin
    - Pages
      - Index.cshtml
      - Dashboard.cshtml
      - Users.cshtml
      - ...
- Models
  - PageModel.cs
  - UserModel.cs
  - ...
- Services
  - UserService.cs
  - EmailService.cs
  - ...
- Views
  - Shared
    - _Layout.cshtml
    - _LoginPartial.cshtml
    - _ValidationScriptsPartial.cshtml
  - Home
    - Index.cshtml
    - About.cshtml
    - Contact.cshtml
    - ...
  - Admin
    - Index.cshtml
    - Dashboard.cshtml
    - Users.cshtml
    - ...
- wwwroot
  - css
    - site.css
  - js
    - site.js
  - lib
    - bootstrap
      - css
        - bootstrap.css
      - js
        - bootstrap.js

This is the suggested folder structure for Razor which, of course, can change depending on your application requirements... Note the additional 'bootstrap' in 'lib/bootdtrap/css/bootstrap.css', maybe where the path error is coming from?

Tim the Gamer 19-Jun-23 6:04am

Is bootstrap a folder in the lib folder?

Richard Deeming 19-Jun-23 6:37am

In Andre's layout it is. But based on your description, it's not. :)

Tim the Gamer 19-Jun-23 6:40am

I will edit the post and add my project structure for debugging

Tim the Gamer 19-Jun-23 6:59am

The funny thing is that Visual Studio actually suggests the name of the bootstrap.css so I hit tab to complete it. Then it also fails to read the custom user style sheet. I opened the Console and it says 'Failed to load resource: server responded with a status of 404

Richard Deeming 19-Jun-23 7:09am

What's the URL it's trying to load?

Tim the Gamer 19-Jun-23 7:13am

The URL is trying to load the following
https://localhost:7119/lib/bootstrap/dist/css/bootstrap.css

Richard Deeming 19-Jun-23 7:15am

That suggests you should have:

- wwwroot
    - lib
        - bootstrap
            - dist
                - css
                    - bootstrap.css

whereas your question makes it sound like you have:

- wwwroot
    - lib
        - css
            - bootstrap.css

Tim the Gamer 19-Jun-23 7:17am

Yeah at the time I posted but now I used Andre's suggestion which didn't work and then I checked some other project I created where everything was created for me to see how the referencing of the styles sheet was done and that's where I saw dist folder

Richard Deeming 19-Jun-23 7:25am

Did you move the bootstrap.css file? Or did you just change the <link> element? You need to check what files you actually have in the project.

Tim the Gamer 19-Jun-23 7:28am

The bootstrap.css file is now in this location in my project
wwwroot/lib/bootstrap/dist/css/bootstrap.css

Richard Deeming 19-Jun-23 7:31am

That looks correct, based on the URL from your previous comment.

Does your startup code include a call to app.UseStaticFiles();, which is what allows it to serve the files from wwwroot?

Tim the Gamer 19-Jun-23 7:32am

No, should I add it? This could work?

Richard Deeming 19-Jun-23 7:33am

Yes, try adding it.

Tim the Gamer 19-Jun-23 7:35am

It worked like a charm. The bootstrap styling is now visible. You rock man and Thanks a lot. I have learnt a lot today

Tim the Gamer 19-Jun-23 7:30am

Maybe I need to use double slash to escape the characters and see whether it works

Tim the Gamer 19-Jun-23 7:13am

Is it a cross origin request problem? Over https does it need some special cros setting?

Richard Deeming 19-Jun-23 7:17am

It shouldn't be a cross-site request - your entire site will be loading at https://localhost:7719/

And even if it was, there's no setting required to allow CSS files to load from an external site. (Unless you've added a Content Security Policy (CSP)[^], which I'm guessing you haven't.)

Tim the Gamer 19-Jun-23 7:18am

Ni I haven't added any setting to the start up file for that. My startup file creates a builder then gets a service collection from that then it invokes add Razor Pages and then I call build on it and then I map the razor pages. That's all