cssasp.net-mvcasp.net-corerazor.net-8.0

Layout CSS and JS Not Rendering in New Views Despite Working in Other Views

my layout page is working properly on 9 different views (all of them index.cshtml)

when i add some another view for the controller, layout is still working but css and js files doesn't work properly. Is anyone experienced same situation on MVC app (.net 8) ?

To test ; i have added TestController , for the index method i have created Index view and layout worked properly again...

@{
    ViewData["Title"] = "Some Title";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

this how index views starts.

My bundleconfig file;

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    // An array of relative input file paths. Globbing patterns supported
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Optinally generate .map file
    "sourceMap": false
  }
]

Layout file head section ;

<!DOCTYPE html>

<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>

    <link rel="icon" href="images/2gurmepatilogo.jpg" type="image/gif" sizes="20x20">


    <!-- css file link -->
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/animate.css">

    <!-- bootstrap 5 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- box-icon -->
    <link rel="stylesheet" href="css/boxicons.min.css">

    <!-- bootstrap icon -->
    <link rel="stylesheet" href="css/bootstrap-icons.css">

    <!-- jquery ui -->
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/aos.css">

    <!-- swiper-slide -->
    <link rel="stylesheet" href="css/swiper-bundle.css">

    <!-- nice-select -->
    <link rel="stylesheet" href="css/nice-select.css">

    <!-- magnefic popup css -->
    <link rel="stylesheet" href="css/magnific-popup.css">

    <!-- animate css -->
    <link rel="stylesheet" href="css/jquery.fancybox.min.css">

    <!-- odometer css -->
    <link rel="stylesheet" href="css/odometer.css">

    <!-- style css -->
    <link rel="stylesheet" href="css/datepicker.min.css">

    <!-- style css -->
    <link rel="stylesheet" href="css/uiicss.css">

    <!-- style css -->
    <link rel="stylesheet" href="css/style.css">
</head>

layout file js references ;

</body>

<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/jquery.nice-select.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/morphext.min.js"></script>
<script src="js/odometer.min.js"></script>
<script src="js/jquery.marquee.min.js"></script>
<script src="js/viewport.jquery.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/SmoothScroll.js"></script>
<script src="js/jquery.nice-number.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/main.js"></script>

</html>

i have tried to put them inside body also but nothing changed.

I have created second action method in the controller and view for that method. In that view from layout html codes are working but css and js are not working.

I have copied html/css/js template inside mvc app , i haven't used Libman.

Solution

  • The JavaScript file references in the body and CSS file references in the head sections use relative paths, which may lead to incorrect paths in different views, causing the CSS and JS files to not work properly.

    To ensure the paths are correct, it is recommended to use absolute paths or a base URL.

    So:

    1.Edit all the relative paths to absolute paths.

    Or

    2.Add a base URL in the head.

    <base href="/" />

    Test:

    when I use the relative paths:

    image1

    after I added a base URL:

    image2