如何將css /腳本僅添加到部分視圖？

我只需將css和腳本加載到特定的部分視圖，但此時此鏈接和腳本將加載到所有視圖中。我擁有的結構是嵌入_Layout和Header的主視圖，而Header嵌入了一個名爲SearchHeader的局部視圖。如何將css /腳本僅添加到部分視圖？

_Layout -> View <- Header <- SearchHeader

部首：

<li id="_Header_Menu"> 
    <div> 
     <ul class="sf-menu"> 
      <li> 
       @Html.Partial("../Home/SearchHeader") 
      </li> 
     </ul> 
    </div> 
</li>

SearchHeader：

<html> 
<head> 
     <link href="@Url.Content("~/Content/fonts")" rel="stylesheet" type="text/css" /> 
     <link href="@Url.Content("../../Content/GlyphIcons.css")" rel="stylesheet" type="text/css" /> 
     <link href="@Url.Content("../../Content/bootstrap.css")" rel="stylesheet" type="text/css" /> 
     <link href="@Url.Content("../../Content/bootstrap.min.css")" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <input type="text" name="contentToSearch" class="form-control" id="contentToSearch" placeholder="Search">  

<script src="@Url.Content("../../Scripts/boostrap.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("../../Scripts/jquery.js")" type="text/javascript"></script> 
</body> 
</html>

CSS和腳本負載正確但有被施加到Header view。如何僅適用於SearchHeader view？

來源

2017-05-05 Angel Cuenca

您不能。如果你想要樣式和JavaScript只適用於這些部分部分，你需要專門針對這些部分。給它一個獨特的類'class =「header-menu」'或者選擇器#SearchHeaderMenu> sf-menu'。 – Jasen

您無法專門爲部分視圖加載CSS和JavaScript資源，而無法將其應用於整個頁面。因此，您需要設計您的頁面樣式或JavaScript以僅定位相關部分。

如果我想要的風格不同ul.menu，我會使用選擇規則

的JavaScript

$("#header-section > .menu").css({ ... }); 
$("#search-header > .menu").css({ ... });

或者在CSS文件

#header-section > .menu { ... } 
#search-header > .menu { ... }

或者只是使用不同類或特定的ID

<div class="header-only"></div> 
<div class="search-header-only"></div> 
<div id="special-item"></div> 

.header-only { font-size: 1em; } 
.search-header-only { font-size: 0.85em; } 
#special-item { font-size: 1.5em; }

來源

2017-05-05 18:04:29 Jasen

這是我迄今所做的最簡單的方法，你可以在_layout頁面提供Url.Content，所有的CSS和腳本。希望能夠毫不費力地解決您的查詢問題。示例

來源

2017-11-30 09:07:01 MayankGaur

如何將css /腳本僅添加到部分視圖？

回答

相關問題