如何从MVC部分控件中包含CSS文件？

Question

如何从MVC部分控件中包含CSS文件？

javascriptasp.net-mvccss

14

我正在使用ASP.NET MVC，我的部分控件需要特定的CSS和JS文件。有没有办法使父页面在页面的“head”部分呈现 script 和 link 标记，而不仅是在局部控件中内联呈现它们？

为了澄清，我想从一个使用Html.RenderPartial的视图中渲染的控件包含要使用的文件，因此不能在其上具有服务器端内容控件。我希望能够将文件包含在html head部分中，以避免验证问题。

- Glenn Slaven

并不是特定于MVC，而是大多数Web框架都适用的问题，不过是一个好问题 :) - leppie

请查看我的答案，了解如何使用bundles：https://dev59.com/bXzaa4cB1Zd3GeqPR5VY#21846653 - Andreas

9个回答

3

http://www.codeproject.com/Articles/38542/Include-Stylesheets-and-Scripts-From-A-WebControl-.aspx

本文介绍了如何覆盖HttpContext.Response.Filter的相关信息，对我非常有帮助。

- user254330

3

在渲染局部视图之前，按照以下方式调用@import：

<style type="text/css>
    @import url(cssPath.css);
</style>

希望这可以帮到您。

刚刚看到 Haacked 上的这个选项，想起了您的问题。在局部视图中使用标题的 Content 占位符，然后按照通常的方式添加 CSS。

- Pita.O

0

根据您的控件需要多少CSS / JS，最安全的方法可能是将额外的样式包含在主CSS文件中。这样可以避免额外的服务器请求，并且客户端应该会缓存所有内容。我知道这会破坏控件的自包含性（创造一个词），但这可能是您最好的选择。

- Darren Oster

0

如果你愿意打破规范，你可以仅使用部分内容发出样式定义。这在大多数最新的浏览器中都能正常工作。

- leppie

是的，它确实可以，但这正是我想避免的 :) - Glenn Slaven

0

我是MVC的新手... 最近我遇到了一个挑战。我使用了MVC视图页面而不是部分视图，添加了自己的主页面（因为我有一个CSS文件在多个视图之间共享），并将CSS添加到主页面中。希望这些信息能够帮助到您。

- John Smith

0

抱歉，您无法从部分控件引用“上级”页面中的内容（或添加任何内容）。唯一的通信方式是通过传递ViewData / Model从父级到部分控件进行“向下”通信。

您正在描述使用内容占位符的主页面和普通页面的功能，但是部分控件不像那样工作。

但是，如果我没有弄错的话，您可以将脚本或链接标记物理添加到实际呈现部分页面的父页面上- CSS 也应该被部分页面使用。

- Carlton Jenke

0

Todd的答案很好，前提是您只有一个控件实例，并且没有其他代码想要在主页面的“”标签中“注入”任何内容。不幸的是，您很少能依赖这一点。

我建议您在主页面中包含所有需要的CSS文件。第一次访问时会有一些性能损失，但之后浏览器缓存将会起作用。您可以（也应该）将样式拆分为多个.css文件，以从可以同时下载它们的HTTP代理中受益。至于.js文件，我建议您实现类似于google.load()机制的东西，这将允许您按需加载脚本。

- Franci Penov

我建议您在主页面中包含所有所需的CSS文件。那正是那个人（和我）试图避免的... - Aliostad

-2

在您的主模板中包含一个占位符：

<head runat="server>
    <asp:ContentPlaceHolder ID="head" runat="server" />
</head>

并在您的掌控之中

<asp:Content ID="head" runat="server">
    <script src="something.js"></script>
</asp:Content>

- Todd Smith

3

很遗憾，你不能在局部视图上放置内容控件，它们只能放在引用主页面的页面上。 - Glenn Slaven

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tvanfosson · Accepted Answer

如果我在局部视图中需要CSS/Javascript，我只需确保可能包含该局部视图的任何页面，无论是直接还是通过AJAX检索的内容，都已将CSS/Javascript包含在其标题中。如果页面有一个主页，则在主页标题中添加一个内容占位符，并在子页面中填充它。为了在局部视图中获得智能感，我在局部视图中添加CSS/Javascript包含，但用if (false)代码块包装它们，以便它们在运行时不会被包含。

<% if (false) { %>
   <link href=...
   <script type=...
<% } %>