View doesn't render CSS and Javascript in ASP.NET MVC

Question

i work on a ASP.net MVC project, Ihave a view that contains some parts from shared layouts, I have three shared layout views one of them contain CSS files, second one contain Java Script files and the third one contain HTML code, and I use @RenderPage to set them as a part of a view.

My view contain :

//html code
@RenderPage("~/Views/Shared/_CssPage.cshtml")
//html code
@RenderPage("~/Views/Shared/_LeftSideBar.cshtml")
//html code
@RenderPage("~/Views/Shared/_JsPage.cshtml")

_CssPage.cshtml :

 <!-- Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Bootstrap Core Css -->
<link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Waves Effect Css -->
<link href="plugins/node-waves/waves.css" rel="stylesheet" />
<!-- Animation Css -->
<link href="plugins/animate-css/animate.css" rel="stylesheet" />
<!-- Morris Chart Css-->
<link href="plugins/morrisjs/morris.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="css/style.css" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="css/themes/all-themes.css" rel="stylesheet" />

_LeftSideBar.cshtml :

 <!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
 <!-- User Info -->
 <div class="user-info">
 <div class="image">
 <img src="images/user.png" width="48" height="48" alt="User" />
 </div>
 <div class="info-container">
 <div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-transform:uppercase">@ViewBag.User_ID</div>
 <div class="email">@ViewBag.User_Type</div>
 <div class="btn-group user-helper-dropdown">
 <i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
 <ul class="dropdown-menu pull-right">
 <li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a></li>
 <li role="separator" class="divider"></li>
 <li><a href="javascript:void(0);"><i class="material-icons">group</i>Followers</a></li>
 <li><a href="javascript:void(0);"><i class="material-icons">shopping_cart</i>Sales</a></li>
 <li><a href="javascript:void(0);"><i class="material-icons">favorite</i>Likes</a></li>
 <li role="separator" class="divider"></li>
 <li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a></li>
 </ul>
 </div>
 </div>
 </div>
 <!-- #User Info -->
 <!-- Menu -->
 <div class="menu">
 <ul class="list">
 <li class="header">MAIN NAVIGATION</li>
 <li class="active">
 <a href="/Authentication/Redirect_To_User_Space">
 <i class="material-icons">home</i>
 <span>Home</span>
 </a>
 </li>
 </ul>
 </div>
 <!-- #Menu -->
 <!-- Footer -->
 <div class="legal">
 <div class="version">
 <b>Version: </b> 1.0.5
 </div>
 </div>
 <!-- #Footer -->
</aside>
<!-- #END# Left Sidebar -->

_JsPage.cshtml :

 <!-- Jquery Core Js -->
<script src="plugins/jquery/jquery.min.js"></script>
@rende
<!-- Bootstrap Core Js -->
<script src="plugins/bootstrap/js/bootstrap.js"></script>
<!-- Select Plugin Js -->
<script src="plugins/bootstrap-select/js/bootstrap-select.js"></script>
<!-- Slimscroll Plugin Js -->
<script src="plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Waves Effect Plugin Js -->
<script src="plugins/node-waves/waves.js"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="plugins/jquery-countto/jquery.countTo.js"></script>
<!-- Morris Plugin Js -->
<script src="plugins/raphael/raphael.min.js"></script>
<script src="plugins/morrisjs/morris.js"></script>
<!-- ChartJs -->
<script src="plugins/chartjs/Chart.bundle.js"></script>
<!-- Flot Charts Plugin Js -->
<script src="plugins/flot-charts/jquery.flot.js"></script>
<script src="plugins/flot-charts/jquery.flot.resize.js"></script>
<script src="plugins/flot-charts/jquery.flot.pie.js"></script>
<script src="plugins/flot-charts/jquery.flot.categories.js"></script>
<script src="plugins/flot-charts/jquery.flot.time.js"></script>
<!-- Sparkline Chart Plugin Js -->
<script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
<!-- Custom Js -->
<script src="js/admin.js"></script>
<script src="js/pages/index.js"></script>
<!-- Demo Js -->
<script src="js/demo.js"></script>

when i try to access to my view it's look like this

This what the view look like when i try to access to it

please any help ?

• Jerdine Sabio: What browser are you using? Please check the browser console for errors, Right Click > Inspect Element > Go to Console tab.
• ADS MB: firstly thanks for your respond bro, I use Microsoft Edge based on Chromium as my browser
• Jerdine Sabio: what do you see on dev tools console tab?
• ADS MB: I see this message 'Failed to load resource: the server responded with a status of 404 (Not Found)' for all my css and js files
• Jerdine Sabio: I see, can you check sources tab next.If you hover a certain item for a few seconds, it will show the url. Are the urls correct? are your views working before or it's your first time building this page?

Answer 1

I think the Path of the CSS and JS files need to add / before the link.

Example :

the original path is

<link href="plugins/morrisjs/morris.css" rel="stylesheet" />

you need to add the slash before the link like that :

<link href="/plugins/morrisjs/morris.css" rel="stylesheet" />

hope this help you.