C# 如何仅向局部视图添加css/脚本?
我只需要将css和脚本加载到一个特定的局部视图中,但此时此链接和脚本将加载到所有视图中。我的结构是嵌入了一个_布局和标题的主视图,标题嵌入了一个称为SearchHeader的局部视图C# 如何仅向局部视图添加css/脚本?,c#,razor,C#,Razor,我只需要将css和脚本加载到一个特定的局部视图中,但此时此链接和脚本将加载到所有视图中。我的结构是嵌入了一个_布局和标题的主视图,标题嵌入了一个称为SearchHeader的局部视图 _Layout -> View <- Header <- SearchHeader \u Layout->View如果不将CSS和JavaScript资源应用于整个页面,则无法为部分视图专门加载CSS和JavaScript资源。因此,您需要将页面样式或JavaScript设计为只针对相关部分 &
_Layout -> View <- Header <- SearchHeader
\u Layout->View如果不将CSS和JavaScript资源应用于整个页面,则无法为部分视图专门加载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>
或在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; }
.仅限页眉{字体大小:1em;}
.仅搜索标题{字体大小:0.85em;}
#特殊项目{字体大小:1.5em;}
到目前为止,我所做的最简单的方法是,您可以在\u Layout页面上为所有CSS和脚本提供Url.Content。希望它能解决您的问题,而无需付出太多努力。
例子
这里有一个操作说明。我在node.js中使用express Handlebar
创建一个公共文件夹,并将所有包含静态文件的文件夹放入其中:css、img、js等。
然后将这段代码添加到app.js(不管你给它起什么名字)中,告诉express静态文件的目的地
常量路径=要求(“路径”)
app.use(express.static(path.join(u dirname,“public”))
在express hndlebars中,您应该创建views文件夹,并在其中创建partials文件夹。
“视图/部分”在这里,我们保留部分文件。无论你想添加哪个部分css,在你的css文件夹中创建一个css文件“partialName.css”。由于您将css文件夹放在“public”文件夹中,因此目标应如下所示:
<link rel="stylesheet" href="css/partialName.css">
“public/css/partialName.css”
在此css文件中添加您的样式。
3.链接样式文件非常重要。由于我们给出了公用文件夹的目的地来表达,Express将考虑“公用”文件夹作为根文件夹。因此,当您链接时,它应该如下所示:
<link rel="stylesheet" href="css/partialName.css">
如果使用引导,要覆盖样式,应在样式行末尾添加“!important”。例如:
.卡片{
宽度:100雷姆!重要;
}
你不能。如果您希望样式和javascript只应用于这些部分,那么需要专门针对这些部分。给它一个不同的类class=“header menu”
或在选择器#SearchHeaderMenu>sf menu
中。
<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; }
<link rel="stylesheet" href="css/partialName.css">