Click here to Skip to main content
15,882,114 members
Please Sign up or sign in to vote.
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
Updated 18-Jun-23 23:16pm
v2

1 solution

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[^]
 
Share this answer
 
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?

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900