视图不呈现 ASP.NET MVC 中的 CSS 和 Javascript

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将它们设置为视图的一部分。

我的观点包含：

//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>

当我尝试访问我的视图时，它看起来像这样

请帮忙？

Answer 1

我认为 CSS 和 JS 文件的路径需要在链接之前添加/ 。

例子：

原来的路径是

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

您需要在链接之前添加slash ，如下所示：

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

希望这对你有帮助。