布局页面头:
<head>
<link href="@Url.Content("~/Content/themes/base/Site.css")"
rel="stylesheet" type="text/css" />
</head>
应用程序需要的 View(AnotherView):
<link href="@Url.Content("~/Content/themes/base/AnotherPage.css")"
rel="stylesheet" type="text/css" />
和 AnotherView 有一个局部视图(AnotherPartial)需要:
<link href="@Url.Content("~/Content/themes/base/AnotherPartial.css")"
rel="stylesheet" type="text/css" />
问题:我们如何添加这些 CSS 文件链接AnotherView 和 AnotherPartial 链接到布局头?
RenderSection 不是一个好主意,因为 AnotherPage 可以有多个 Partials。添加所有 CSS 到头部是没用的,因为它将动态更改(它取决于 Anotherpages)。
10 回答
这是一个名为暗盒的NuGet插件,除此之外,它还提供了在 partials 中引用脚本和样式的功能。
虽然这个插件有许多配置可用,但它非常灵活。以下是引用脚本或样式表文件的最简单方法:
根据文件:
path 参数可以是以下之一:
捆绑路径
资产路径 - 引用包含此资产的整个捆绑包
一个 URL
布局:
视图:
更新:https://github.com/speier/mvcassetshelper的基本示例
我们使用以下实现将 JS 和 CSS 文件添加到布局页面中。
查看或部分查看:
布局页面:
HtmlHelper 扩展:
遗憾的是,默认情况下,这不可能像其他用户建议的那样使用
section
,因为section
仅适用于View
的child
。然而,有效的是在每个视图中实现和重新定义部分,意思是:
这样每个视图都可以实现头部,而不仅仅是直接的孩子。这只能部分起作用,尤其是多个部分故障开始(正如你在问题中提到的那样)。
因此,问题的唯一真正解决方案是使用
ViewBag
。最好的可能是 CSS 和脚本的单独集合(列表)。为此,您需要确保在执行任何视图之前初始化List
used。然后,您可以在每个 view/partial 的顶部执行此类操作(如果Scripts
或Styles
值为 null,则无需关心:在布局中,您可以遍历集合并根据
List
中的值添加样式。我觉得它很难看,但它是唯一可行的。
****UPDATE**因为它首先开始执行内部视图并且正在逐步实现布局并且 CSS 样式是级联的,所以通过
ViewBag.Styles.Reverse()
反转样式列表可能是有意义的。这样就可以首先添加最外层的样式,这与 CSS 样式表的工作方式无关。
您可以在布局中通过 RenderSection 方法定义节。
布局
然后,您可以将 css 文件包含在视图中的区域区域除了局部视图。
该部分在视图中工作,但不能在部分视图中按设计工作。
如果您确实想在局部视图中使用剖面区域,可以按照文章重新定义 RenderSection 方法。
剃刀,嵌套布局和重新定义的部分 - Marcin On ASP.NET
我试图解决这个问题。
我的回答在这里。
“DynamicHeader” - http://dynamicheader.codeplex.com/,https://nuget.org/packages/DynamicHeader
例如,_Layout.cshtml 是:
并且,您可以在任何地方将.js 和.css 文件注册到“DynamicHeader”。
例如,AnotherPartial.cshtm 中的代码块是:
然后,最终输出 HTML 是:
我有一个类似的问题,最后用下面的代码应用卡尔曼的优秀答案(不是很整洁,但可以说更可扩展):
该项目包含一个静态 AssignAllResources 方法:
在_layout 页面
并在 partial(s)和观点
尝试 out-of-the-box 解决方案(ASP.NET MVC 4 或更高版本):
对于我们这些使用 ASP.NET MVC 4 的人来说 - 这可能会有所帮助。
首先,我在 App_Start 文件夹中添加了一个 BundleConfig 类。
这是我用来创建它的代码:
其次,我在 Global.asax 文件中注册了 BundleConfig 类:
第三,我在我的 CSS 文件中添加了样式助手:
最后我在任何视图中使用了这种语法:
我写了一个简单的包装器,允许您在每个局部视图中动态地将样式和描述注册到 head 标签中。
它基于 DynamicHeader jsakamoto 提出,但它有一些性能改进和调整。
它非常易于使用,而且功能多样。
用法:
你可以在里面找到完整的代码,解释和例子:动态添加样式和脚本到标记