Question

我只需要将css和脚本加载到特定的部分视图，但此时此链接和脚本将加载到所有视图中。我所拥有的结构是嵌入了_Layout和Header的主视图，而Header嵌入了一个名为SearchHeader的局部视图。

_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？

Answer 1

如果不应用于整个页面，则无法专门为部分视图加载CSS和JavaScript资源。因此，您需要设计页面样式或JavaScript以仅定位相关部分。

<div id="header-section">
    <ul class="menu">
        ...
        <li>@Html.Partial("SearchHeader")</li>
    </ul>
</div>

...

<div id="search-header">
    <ul class="menu">...</ul>
</div>

如果我想以不同方式设置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; }

Answer 2

到目前为止，我所做的最简单的方法是，您可以在 _Layout 页面的所有CSS和脚本中提供 Url.Content 。希望它能解决您的查询，而不需要太多努力。例

Answer 3

这是一个说明。我在node.js中使用了express-handlebars。

创建一个公用文件夹，并将所有包含静态文件的文件夹放入其中：css，img，js等。然后将此代码添加到app.js（无论您如何命名）中，以表示静态文件的目的地。

const path = require（“ path”）;

app.use（express.static（path.join（__ dirname，“ public”）））;
在express-hndlebars中，您应该创建views文件夹，并在其中创建partials文件夹。在“视图/部分”中，我们保留了部分文件。无论您要添加css的哪个部分，在您的css文件夹中创建一个css文件“ partialName.css”。由于您将css文件夹放在“公共”文件夹中，因此目的地应如下所示：

“ public / css / partialName.css”

在此CSS文件中添加样式。 3.链接样式文件非常重要。由于我们给出了要表达的公用文件夹的目的地，因此Express将把“公用”文件夹视为根文件夹。因此，当您链接时，它应如下所示：

<link rel="stylesheet" href="css/partialName.css">

如果使用引导程序来覆盖样式，则应在样式行的末尾添加“！important”。例如：

.card { 宽度：100rem！ }

如何仅将css / script添加到Partial视图？

3 个答案: